Verified Commit 224e3f5f authored by Stephan Fischer's avatar Stephan Fischer
Browse files

Santa brought some code, happy hacking.

parent 60d23e2a
# EditorConfig (http://editorconfig.org)
# top-most EditorConfig file
root = true
# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
# Matches multiple files with brace expansion notation
# Set default charset
[*.{js,py}]
charset = utf-8
# 4 space indentation for Python
[*.py]
indent_style = space
indent_size = 4
insert_final_newline = true
# 2 space indentation for HTML
[*.html]
indent_style = space
indent_size = 2
\ No newline at end of file
......@@ -4,3 +4,4 @@ __pycache__/
*.py[cod]
*$py.class
config.py
.env
\ No newline at end of file
# 0.3: OML
## Release: 2018
(TODO: restructuring)
### Features
### Frontend
#### Design
#### UI
#### UX
### Backend
### Etc
### Features:
* Added support for caching, compressing and minification (installable via requirements-performance.txt)
* Mix function: finds new playlist based on current video or video url input
* Autocomplete for input form (beta, YouTube only)
* Improved Vimeo support (now in beta status)
* Custom URL feature (working title) makes it possible to use cross-provider playlists (in combination with in-dev playlist creator for project page)
### Layout/Design:
* Added countdown bar to current selected snippet
* Simplified logo and favicon (ditched the shadow)
* Bye, "float": More and more Flexbox used
* So sassy: CSS code generated via SCSS files
* Using box-shadow instead of self-invented concept
* Using same opacity changes on hovering for all elements (buttons, thumbs etc.)
* Less cluttered snippet info
* Increased width for start page (for bigger screens)
* Improved structure of header
* Increased font weight and font sizes (especially for smaller device widths) with consequent usage of "vw"
### Et cetera:
* Plyr 2.0.17 (while preparing support for upcoming Plyr 3)
* Improved subfolder deployment
* Added playlist title to page title
* New calculation of snippet start time (currently testing, not in use yet)
* From now on all CSS and JavaScript files are minified (human readable versions still available)
* Introducing more keyboard shortcuts: "s" for play/pause, "x" for mix, "m" for mute, "l" for lyric search
* Switching to official Vimeo library ("PyVimeo" instead of "Vimeo")
* Better YouTube regex
* Improved code design: PEP-8 in every Python file (spaces instead of tabs, trimming lines, more and better function docs)
* Config file: Example local and server config now extend general config
* Updated README and introduced CHANGES.md file
* Bundled FontAwesome and Plyr files into repository
* Shorter route URLs
* Eastereggs (part I)
* Link to lyrics search (very basic; powered by Genius)
* Completely removed GeoIP check and instead improved error handling
* tests needed, country check might come back eventually
* JavaScript: put console.log messages in toggable debug function
* Renamed and reorganized files
* Source code of HTML templates shows elapsed time for non-cached page requests
* Put control buttons into snippet info
* Began to implement CLI functions (flask flushcache)
* Linux: Input fields keep background color on dark GTK themes
* Browser: moved to KeyboardEvent.key
* .editorconfig file
* seperate SCSS files (home page, responsive layout)
# 0.2: Fire
## Release: 2017-03-06
* Ciao VideoJS, welcome to the party Plyr (offers built-in support for YouTube and Vimeo, plugins are now a thing of the past)!
* First time with Vimeo support (alpha status, not really useable yet) for both albums and channels
* Improved start page, thumbnail presentation (now made with Flexbox) and more design tweaks
* Youtube playlists with day-long videos don't break newsic any longer :)
* Better analysis of playlist status (private/embeddable etc.)
* Updated readme file
# 0.1: T=0
## Release: 2017-02-15
First pre-release.
\ No newline at end of file
The MIT License (MIT)
Copyright (c) 2015-2017 Stephan Fischer (tocsin.de, stephan-fischer.de)
Copyright (c) 2015-2017 Stephan Fischer (https://stephan-fischer.de, https://tocsin.de)
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
......
# newsic
*Hey there, this is an early version of newsic, which might catch fire quite often. You're very welcome to open an [issue](https://github.com/newsic/newsic/issues) for bugs you found, improvements or new ideas :)*
*You're very welcome to open an [issue](https://github.com/newsic/newsic/issues) for bugs you found, improvements or new ideas :)*
Got YouTube or Vimeo playlists with 100+ songs and a thirst for exploring something new? With newsic you can automatically listen to small 30-second-snippets and hear full songs if you'd like to jump into the tune.
Got YouTube or Vimeo playlists with way too many songs and a thirst for exploring something new? With newsic you can listen to small 30-second song snippets (or the whole song) and discover other playlists easily.
## Project page & demo
......@@ -20,43 +20,58 @@ newsic's backend is based on Python 3 and the [Flask](https://github.com/pallets
## Usage
1. Clone this repository and navigate to the folder where you cloned it to
1. Clone this repository: `git clone https://github.com/newsic/newsic.git`
2. Create a config.py from config.py.example
3. Add your API keys (request one for YouTube
[here](https://developers.google.com/youtube/v3/getting-started), and for Vimeo right [there](https://developer.vimeo.com/api)) to config.py
4. Install the requirements with either `pip install -r requirements.txt` or your favorite package manager
5. Start newsic with `python3 newsic.py` (or only `python newsic.py` when you use Arch Linux), which is now available at 127.0.0.1:5000
3. Add your API keys ([YouTube](https://developers.google.com/youtube/v3/getting-started), [Vimeo](https://developer.vimeo.com/api)) to config.py
4. Install the minimal requirements with `pip install -r requirements.txt`; you might wanna use a virtual environment for that
5. Start newsic with `python3 newsic.py`, which is now available at [127.0.0.1:5000](http://127.0.0.1:5000)
### Performance and caching
Starting with version 0.3 newsic offers optional support for caching, compressing and minifying - based on [Flask Caching](https://github.com/sh4nks/flask-caching), [Flask-Compress](https://github.com/libwilliam/flask-compress) and [Flask-HTMLmin](https://github.com/hamidfzm/Flask-HTMLmin). The packages are installable with `pip install -r requirements-performance.txt`. See [config.py.example](/config.py.example) for all available options and module documentation.
### Deployment
For running newsic on your server (or a shared hosting provider) you would like to use a deployment script.
There are many [different options for running Flask on a server](http://flask.pocoo.org/docs/dev/deploying/).
The code running at [trynewsic.tocsin.de](https://trynewsic.tocsin.de) (hosted proudly on Uberspace.de) is released at [newsic/deployment](https://github.com/newsic/deployment).
As an example have a look at the FCGI script powering [the newsic demo](https://trynewsic.tocsin.de) (hosted proudly on [Uberspace](https://uberspace.de)) in the [deployment](https://github.com/newsic/deployment) repository.
### Shortcuts
Shortcut | What will happen (hopefully)
------------ | -------------
`k` or `Space bar` | Play/Pause
`a` or `鈫恅 | Previous song
`d` or `鈫抈 | Next song
`c` | Play complete song
`f` | Toggle fullscreen
Shortcut | What it does
-|-
`A` or `鈫恅 | Previous song
`D` or `鈫抈 | Next song
`S`, `K` or `Space bar` | Toggle play/pause
`C` | Play complete song
`F` | Toggle fullscreen
`M` | Toggle mute
`X` | Start mix based on current song
`L` | Search for lyrics on [Genius](https://genius.com)
`E` | Focus search field
## License
MIT License, Copyright (c) 2015-2017 Stephan Fischer ([stephan-fischer.de](https://stephan-fischer.de), [tocsin.de](https://tocsin.de))
MIT License, Copyright (c) 2015-2017 Stephan Fischer (@tocsinDE, [stephan-fischer.de](https://stephan-fischer.de), [tocsin.de](https://tocsin.de))
For more details see [LICENSE](/LICENSE).
## Used scripts
## Dependencies
### Core
* [Flask](https://github.com/pallets/flask): Armin Ronacher (@mitsuhiko) and contributors, BSD License (3-clause)
* [Plyr](https://github.com/sampotts/plyr): Sam Potts (@sampotts), MIT License
* [PyVimeo](https://github.com/vimeo/vimeo.py): Vimeo (@vimeo), Apache License 2.0
* [Flask](https://github.com/pallets/flask) (Armin Ronacher and contributors, BSD License)
* [Plyr](https://github.com/sampotts/plyr) (Sam Potts, MIT License)
### Optional
* [Flask Caching](https://github.com/sh4nks/flask-caching): Peter Justin (@sh4nks), BSD License (3-clause)
* [Flask-Compress](https://github.com/libwilliam/flask-compress): William Fagan (@libwilliam), MIT License
* [Flask-HTMLmin](https://github.com/hamidfzm/Flask-HTMLmin): Hamid FzM (@hamidfzm), BSD License (3-clause)
* [python-dotenv](https://github.com/theskumar/python-dotenv): Saurabh Kumar (@theskumar), BSD License (3-clause)
## Donate
If you think newsic might be worth a small donation: [Sure, go ahead :)](https://www.paypal.me/tocsin/5eur)
Let me be clear that earning money wasn't the motivation behind all this. I appreciate your code contributions, pull requests or bug reports just equally :)
If you think newsic is worth a small donation: [Thank you very much :)](https://www.paypal.me/tocsin/5eur)
Let me be clear that earning money wasn't the motivation behind all this. I'll appreciate your code contributions, pull requests or bug reports just equally :)
\ No newline at end of file
class general():
"""
General config
Both "Local" and "Server" classes are based upon this
# YouTube API configuration (you can request a token at https://console.developers.google.com/apis/api/youtube/)
YOUTUBE_API_KEY = ""
TODO: add link to deployment repo and a short explanation on how to use env variables instead of this file
"""
# Vimeo API configuration (get your tokens at https://developer.vimeo.com/apps)
VIMEO_TOKEN = ""
VIMEO_KEY = ""
VIMEO_SECRET = ""
class General(object):
# snippet length in seconds (default: 30)
SNIPPETLENGTH = 30
'''
YouTube API configuration
Request a token at https://console.developers.google.com/apis/api/youtube/
(newsic is using the YouTube Data API v3)
'''
class local():
YOUTUBE_API_KEY = ""
# Flask debug
DEBUG = True
'''
Vimeo API configuration
Get your tokens at https://developer.vimeo.com/apps
'''
# for more detailed, pure newsic-related, debug messages
NEWSICDEBUG = True
VIMEO_TOKEN = ""
VIMEO_KEY = ""
VIMEO_SECRET = ""
class server():
# snippet length (default: 30)
SNIPPETLENGTH = 30 #seconds
DEBUG = False
NEWSICDEBUG = False
'''
Performance/caching (with Flask Caching, Flask Compress and Flask-HTMLmin)
Installable with pip install -r requirements-performance.txt
'''
'''
Cache max age in seconds
Documentation:
http://werkzeug.pocoo.org/docs/datastructures/#werkzeug.datastructures.ResponseCacheControl
Default: 43200
'''
CACHE_MAX_AGE = ""
'''
Flask Caching
Documentation:
https://flask-caching.readthedocs.io/en/latest/
'''
CACHE = False
CACHE_TIMEOUT = 600 #seconds
CACHE_TYPE = "filesystem"
CACHE_DIR = ""
'''
Flask Compress
Documentation:
https://github.com/libwilliam/flask-compress
'''
COMPRESS = False
COMPRESS_LEVEL = 6
COMPRESS_MIMETYPES = [
'text/html',
'text/css',
'text/javascript',
'image/svg+xml'
]
'''
Flask-HTMLmin
Documentation:
https://github.com/hamidfzm/Flask-HTMLmin
'''
MINIFY_PAGE = False
REMOVE_COMMENTS = True
REDUCE_EMPTY_ATTRIBUTES = True
REMOVE_OPTIONAL_ATTRIBUTE_QUOTES = False
class Local(General):
"""
Local config
"""
# standard Flask debug
DEBUG = True
# for more detailed, pure newsic-related debug messages
NEWSICDEBUG = True
CACHE = False
class Server(General):
"""
Server config
"""
DEBUG = False
NEWSICDEBUG = False
CACHE = False
This diff is collapsed.
python-dotenv
\ No newline at end of file
Flask-Caching
Flask-Compress
Flask-HTMLmin >= 1.3.1
\ No newline at end of file
/* index.html */
.home {
margin: 10% auto 0 auto;
width: 60%;
.message {
margin-bottom: 2%;
}
.box {
background: #3d3d3d;
// TODO: replacing px possible?
padding: 8px;
form {
padding: 3% 14% 3% 14%;
overflow: auto;
border: 1px solid #616161;
display: flex;
justify-content: space-between;
align-items: center;
input {
flex-grow: 0.85;
// TODO: replacing px possible?
padding: 5px 0 5px 0;
text-indent: 1vw;
}
button {
box-shadow: $shadow_input;
flex-grow: 0.1;
// TODO: replacing px possible?
padding: 5px 10px 5px 10px;
}
}
}
.featured {
margin: 5% auto 5% auto;
padding: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
align-content: stretch;
a {
border: 0;
transition: all 0.5s ease;
padding: 0;
margin: 0;
text-decoration: none;
flex-basis: 24%;
margin-bottom: 3vw;
opacity: 0.7;
&:hover {
opacity: 1;
}
img {
width: 100%;
}
p {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0;
}
}
.main {
margin-bottom: 3vw;
background: #3d3d3d;
flex-basis: 24%;
padding: 1vw;
text-align: justify;
}
}
footer {
width: 100%;
}
}
\ No newline at end of file
/* responsive */
@media screen and (max-width: 1500px) {
.home {
.featured a, .featured .main {
flex-basis: 30%;
}
}
}
@media screen and (max-width: 1400px) {
$font-size: $font-size*1.3;
body, input, button {
font-size: $font-size;
}
}
@media screen and (max-width: 1200px) {
$font-size: $font-size*1.5;
body, input, button {
font-size: $font-size;
}
}
@media screen and (max-width: 1000px) {
$font-size: $font-size*1.7;
body, input, button {
font-size: $font-size;
}
.snippetinfo {
padding: 0;
.border {
border: 0;
padding: 3% 5% 3% 5%;
}
}
.plyr, .snippetinfo {
width: 100%;
}
#snippets {
width: 90%;
}
header {
padding: 4vw 5% 2vw 5%;
}
footer {
width: 90%;
}
.home {
width: 80%;
.featured a, .featured .main {
flex-basis: 45%;
}
.featured .main {
padding: 1.5vw;
}
}
}
@media screen and (max-width: 800px) {
$font-size: $font-size*2.1;
body, input, button {
font-size: $font-size;
}
#snippets a {
flex-basis: 30%;
}
.home {
.featured .main {
padding: 2vw;
}
}
}
@media screen and (max-width: 600px) {
$font-size: $font-size*2.5;
body, input, button {
font-size: $font-size;
}
.home {
position: relative;
width: 90%;
margin-top: 10%;
#autocomplete-result {
margin-top:0 !important;
}
.box {
form {
padding: 7% 14% 7% 14%;
display: block;
button {
width: 100%;
margin-left: 0;
margin-top: 5%;
}
}
}
.featured a, .featured .main {
flex-basis: 100%;
margin-bottom: 5vw;
}
.featured .main {
padding: 3vw;
}
}
.logo_big {
width: 60%;
margin-bottom: 10%;
}
.countdown-shadow {
margin-bottom: 4vw;
}
#snippets a {
flex-basis: 45%;
}
header {
align-items: flex-start;
.logo_short {
margin-bottom: 1vw;
}
#autocomplete {
flex-grow:1;
}
form {
flex-basis: 85%;
button {
display: none;
}
}
}
.controlbar {
button {
margin-left: 0;
margin-right: 0;
}
.right {
width: 100%;
button {
margin: 3vw 0 0 0;
}
}
}
}
@media screen and (max-width: 500px) {
$font-size: $font-size*3;
body, input, button {