version 0.2.3

README.md: update
Remove M4A downloads feature of Planned features due RIAA issue
2022-10-06 04:21:47 +08:00 · 2022-10-06 03:59:24 +08:00 · 2022-10-06 03:52:34 +08:00 · 2022-10-05 21:56:55 +08:00 · 2022-10-05 21:54:56 +08:00 · 2022-10-05 10:30:17 +08:00
55 changed files with 4921 additions and 3759 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -4,7 +4,7 @@ debug/
 data/
 python/
 release/
-youtube-local/
+yt-local/
 banned_addresses.txt
 settings.txt
 get-pip.py
@@ -12,3 +12,4 @@ latest-dist.zip
 *.7z
 *.zip
 *venv*
+flycheck_*
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-[![builds.sr.ht status](https://builds.sr.ht/~heckyel/yt-local/commits/.build.yml.svg)](https://builds.sr.ht/~heckyel/yt-local/commits/.build.yml?)
+[![Build Status](https://drone.hgit.ga/api/badges/heckyel/yt-local/status.svg)](https://drone.hgit.ga/heckyel/yt-local)

 # yt-local

@@ -24,10 +24,10 @@ The YouTube API is not used, so no keys or anything are needed. It uses the same
 * Local playlists: These solve the two problems with creating playlists on YouTube: (1) they're datamined and (2) videos frequently get deleted by YouTube and lost from the playlist, making it very difficult to find a reupload as the title of the deleted video is not displayed.
 * Themes: Light, Gray, and Dark
 * Subtitles
-* Easily download videos or their audio
+* Easily download videos or their audio. (Disabled by default)
 * No ads
 * View comments
-* Javascript not required
+* JavaScript not required
 * Theater and non-theater mode
 * Subscriptions that are independent from YouTube
  * Can import subscriptions from YouTube
@@ -56,7 +56,6 @@ The YouTube API is not used, so no keys or anything are needed. It uses the same
 - [ ] Import youtube playlist into a local playlist
 - [ ] Rearrange items of local playlist
 - [x] Video qualities other than 360p and 720p by muxing video and audio
- [ ] Corrected .m4a downloads
 - [x] Indicate if comments are disabled
 - [x] Indicate how many comments a video has
 - [ ] Featured channels page
@@ -90,15 +89,15 @@ Download the tarball under the Releases page and extract it. `cd` into the direc

 ## Usage

-Firstly, if you wish to run this in portable mode, create the empty file "settings.txt" in the program's main directory. If the file is there, settings and data will be stored in the same directory as the program. Otherwise, settings and data will be stored in `C:\Users\[your username]\.youtube-local` on Windows and `~/.youtube-local` on GNU+Linux/MacOS.
+Firstly, if you wish to run this in portable mode, create the empty file "settings.txt" in the program's main directory. If the file is there, settings and data will be stored in the same directory as the program. Otherwise, settings and data will be stored in `C:\Users\[your username]\.yt-local` on Windows and `~/.yt-local` on GNU+Linux/MacOS.

 To run the program on windows, open `run.bat`. On GNU+Linux/MacOS, run `python3 server.py`.

+Access youtube URLs by prefixing them with `http://localhost:9010/`.
+For instance, `http://localhost:9010/https://www.youtube.com/watch?v=vBgulDeV2RU`
+You can use an addon such as Redirector ([Firefox](https://addons.mozilla.org/en-US/firefox/addon/redirector/)|[Chrome](https://chrome.google.com/webstore/detail/redirector/ocgpenflpmgnfapjedencafcfakcekcd)) to automatically redirect YouTube URLs to yt-local. I use the include pattern `^(https?://(?:[a-zA-Z0-9_-]*\.)?(?:youtube\.com|youtu\.be|youtube-nocookie\.com)/.*)` and redirect pattern `http://localhost:9010/$1` (Make sure you're using regular expression mode).

-Access youtube URLs by prefixing them with `http://localhost:8080/`, For instance, `http://localhost:8080/https://www.youtube.com/watch?v=vBgulDeV2RU`
-You can use an addon such as Redirector ([Firefox](https://addons.mozilla.org/en-US/firefox/addon/redirector/)|[Chrome](https://chrome.google.com/webstore/detail/redirector/ocgpenflpmgnfapjedencafcfakcekcd)) to automatically redirect YouTube URLs to yt-local. I use the include pattern `^(https?://(?:[a-zA-Z0-9_-]*\.)?(?:youtube\.com|youtu\.be|youtube-nocookie\.com)/.*)` and the redirect pattern `http://localhost:8080/$1` (Make sure you're using regular expression mode).
-
-If you want embeds on the web to also redirect to yt-local, make sure "Iframes" is checked under advanced options in your redirector rule. Check test `http://localhost:8080/youtube.com/embed/vBgulDeV2RU`
+If you want embeds on web to also redirect to yt-local, make sure "Iframes" is checked under advanced options in your redirector rule. Check test `http://localhost:9010/youtube.com/embed/vBgulDeV2RU`

 yt-local can be added as a search engine in firefox to make searching more convenient. See [here](https://support.mozilla.org/en-US/kb/add-or-remove-search-engine-firefox) for information on firefox search plugins.

@@ -114,7 +113,7 @@ If you don't want to waste system resources leaving the Tor Browser open in addi

 For Windows, to make standalone Tor run at startup, press Windows Key + R and type `shell:startup` to open the Startup folder. Create a new shortcut there. For the command of the shortcut, enter `"C:\[path-to-Tor-Browser-directory]\Tor\tor.exe" SOCKSPort 9150 ControlPort 9151`. You can then launch this shortcut to start it. Alternatively, if something isn't working, to see what's wrong, open `cmd.exe` and go to the directory `C:\[path-to-Tor-Browser-directory]\Tor`. Then run `tor SOCKSPort 9150 ControlPort 9151 | more`. The `more` part at the end is just to make sure any errors are displayed, to fix a bug in Windows cmd where tor doesn't display any output. You can stop tor in the task manager.

-For Debian/Ubuntu, you can `sudo apt install tor` to install the command line version of Tor, and then run `sudo systemctl start tor` to run it as a background service that will get started during boot as well. However, Tor on the command line uses the port 9050 by default (rather than the 9150 used by the Tor Browser). So you will need to change `Tor port` to 9050 and `Tor control port` to 9051 in the yt-local settings page. Additionally, you will need to enable the Tor control port by uncommenting the line `ControlPort 9051`, and setting `CookieAuthentication` to 0 in `/etc/tor/torrc`. If no Tor package is available for your distro, you can configure the `tor` binary located at `./Browser/TorBrowser/Tor/tor` inside the Tor Browser installation location to run at start time, or create a service to do it.
+For Debian/Ubuntu, you can `sudo apt install tor` to install the command line version of Tor, and then run `sudo systemctl start tor` to run it as a background service that will get started during boot as well. However, Tor on the command line uses the port `9050` by default (rather than the 9150 used by the Tor Browser). So you will need to change `Tor port` to 9050 and `Tor control port` to `9051` in yt-local settings page. Additionally, you will need to enable the Tor control port by uncommenting the line `ControlPort 9051`, and setting `CookieAuthentication` to 0 in `/etc/tor/torrc`. If no Tor package is available for your distro, you can configure the `tor` binary located at `./Browser/TorBrowser/Tor/tor` inside the Tor Browser installation location to run at start time, or create a service to do it.

 ### Tor video routing

@@ -144,6 +143,12 @@ Pull requests and issues are welcome

 For coding guidelines and an overview of the software architecture, see the [HACKING.md](docs/HACKING.md) file.

+## Public instances
+
+yt-local is not made to work in public mode, however there is an instance of yt-local in public mode but with less features
+
+- <https://fast-gorge-89206.herokuapp.com>
+
 ## License

 This project is licensed under the GNU Affero General Public License v3 (GNU AGPLv3) or any later version.
--- a/docs/basic-script-openrc/README.md
+++ b/docs/basic-script-openrc/README.md
@@ -73,4 +73,4 @@ after, modified execute permissions:
 - disable: `doas rc-update del ytlocal`

 When yt-local is run with administrator privileges,
-the configuration file is stored in /root/.youtube-local
+the configuration file is stored in /root/.yt-local
--- a/generate_release.py
+++ b/generate_release.py
@@ -77,22 +77,22 @@ if describe_result.returncode != 0:
 release_tag = describe_result.stdout.strip().decode('ascii')


-# ----------- Make copy of youtube-local files using git -----------
+# ----------- Make copy of yt-local files using git -----------

-if os.path.exists('./youtube-local'):
+if os.path.exists('./yt-local'):
    log('Removing old release')
-    shutil.rmtree('./youtube-local')
+    shutil.rmtree('./yt-local')

 # Export git repository - this will ensure .git and things in gitignore won't
 # be included. Git only supports exporting archive formats, not into
-# directories, so pipe into 7z to put it into .\youtube-local (not to be
+# directories, so pipe into 7z to put it into .\yt-local (not to be
 # confused with working directory. I'm calling it the same thing so it will
 # have that name when extracted from the final release zip archive)
-log('Making copy of youtube-local files')
-check(os.system('git archive --format tar master | 7z x -si -ttar -oyoutube-local'))
+log('Making copy of yt-local files')
+check(os.system('git archive --format tar master | 7z x -si -ttar -oyt-local'))

-if len(os.listdir('./youtube-local')) == 0:
-    raise Exception('Failed to copy youtube-local files')
+if len(os.listdir('./yt-local')) == 0:
+    raise Exception('Failed to copy yt-local files')


 # ----------- Generate embedded python distribution -----------
@@ -176,7 +176,7 @@ with open(r'./python/path_fixes.pth', 'w', encoding='utf-8') as f:

 '''# python3x._pth file tells the python executable where to look for files
 #  Need to add the directory where packages are installed,
-# and the parent directory (which is where the youtube-local files are)
+# and the parent directory (which is where the yt-local files are)
 major_release = latest_version.split('.')[1]
 with open('./python/python3' + major_release + '._pth', 'a', encoding='utf-8') as f:
    f.write('.\\Lib\\site-packages\n')
@@ -216,15 +216,15 @@ log('Finished generating python distribution')

 # ----------- Copy generated distribution into release folder -----------
 log('Copying python distribution into release folder')
-shutil.copytree(r'./python', r'./youtube-local/python')
+shutil.copytree(r'./python', r'./yt-local/python')

 # ----------- Create release zip -----------
-output_filename = 'youtube-local-' + release_tag + '-windows.zip'
+output_filename = 'yt-local-' + release_tag + '-windows.zip'
 if os.path.exists('./' + output_filename):
    log('Removing previous zipped release')
    os.remove('./' + output_filename)
 log('Zipping release')
-check(os.system(r'7z -mx=9 a ' + output_filename + ' ./youtube-local'))
+check(os.system(r'7z -mx=9 a ' + output_filename + ' ./yt-local'))

 print('\n')
 log('Finished')
--- a/requirements-dev.txt
+++ b/requirements-dev.txt
@@ -1,28 +1,28 @@
-attrs>=20.3.0
-Brotli>=1.0.9
-cachetools>=4.2.2
-click>=8.0.1
-dataclasses>=0.6
-defusedxml>=0.7.1
-Flask>=2.0.1
-gevent>=21.8.0
-greenlet>=1.1.1
-importlib-metadata>=4.6.4
-iniconfig>=1.1.1
-itsdangerous>=2.0.1
-Jinja2>=3.0.1
-MarkupSafe>=2.0.1
-packaging>=20.9
+attrs==22.1.0
+Brotli==1.0.9
+cachetools==4.2.4
+click==8.0.4
+dataclasses==0.6
+defusedxml==0.7.1
+Flask==2.0.1
+gevent==21.12.0
+greenlet==1.1.2
+importlib-metadata==4.6.4
+iniconfig==1.1.1
+itsdangerous==2.0.1
+Jinja2==3.0.3
+MarkupSafe==2.0.1
+packaging==20.9
 pluggy>=0.13.1
-py>=1.10.0
-pyparsing>=2.4.7
-PySocks>=1.7.1
-pytest>=6.2.2
-stem>=1.8.0
-toml>=0.10.2
-typing-extensions>=3.10.0.0
-urllib3>=1.26.6
-Werkzeug>=2.0.1
-zipp>=3.5.0
-zope.event>=4.5.0
-zope.interface>=5.4.0
+py==1.10.0
+pyparsing==2.4.7
+PySocks==1.7.1
+pytest==6.2.5
+stem==1.8.0
+toml==0.10.2
+typing-extensions==3.10.0.2
+urllib3==1.26.11
+Werkzeug==2.0.3
+zipp==3.5.1
+zope.event==4.5.0
+zope.interface==5.4.0
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,20 +1,20 @@
-Brotli>=1.0.9
-cachetools>=4.2.2
-click>=8.0.1
-dataclasses>=0.6
-defusedxml>=0.7.1
-Flask>=2.0.1
-gevent>=21.8.0
-greenlet>=1.1.1
-importlib-metadata>=4.6.4
-itsdangerous>=2.0.1
-Jinja2>=3.0.1
-MarkupSafe>=2.0.1
-PySocks>=1.7.1
-stem>=1.8.0
-typing-extensions>=3.10.0.0
-urllib3>=1.26.6
-Werkzeug>=2.0.1
-zipp>=3.5.0
-zope.event>=4.5.0
-zope.interface>=5.4.0
+Brotli==1.0.9
+cachetools==4.2.4
+click==8.0.4
+dataclasses==0.6
+defusedxml==0.7.1
+Flask==2.0.1
+gevent==21.12.0
+greenlet==1.1.2
+importlib-metadata==4.6.4
+itsdangerous==2.0.1
+Jinja2==3.0.3
+MarkupSafe==2.0.1
+PySocks==1.7.1
+stem==1.8.0
+typing-extensions==3.10.0.2
+urllib3==1.26.11
+Werkzeug==2.0.3
+zipp==3.5.1
+zope.event==4.5.0
+zope.interface==5.4.0
--- a/server.py
+++ b/server.py
@@ -250,12 +250,14 @@ def site_dispatch(env, start_response):

 class FilteredRequestLog:
    '''Don't log noisy thumbnail and avatar requests'''
-    filter_re = re.compile(r"""(?x)^
-                            "GET /https://(i[.]ytimg[.]com/|
+    filter_re = re.compile(r'''(?x)
+                            "GET\ /https://(
+                            i[.]ytimg[.]com/|
                            www[.]youtube[.]com/data/subscription_thumbnails/|
                            yt3[.]ggpht[.]com/|
-                            www[.]youtube[.]com/api/timedtext).*" 200
-                            """)
+                            www[.]youtube[.]com/api/timedtext|
+                            [-\w]+[.]googlevideo[.]com/).*"\ (200|206)
+                            ''')

    def __init__(self):
        pass
--- a/settings.py
+++ b/settings.py
@@ -39,7 +39,7 @@ SETTINGS_INFO = collections.OrderedDict([

    ('tor_port', {
        'type': int,
-        'default': 9150,
+        'default': 9050,
        'comment': '',
        'category': 'network',
    }),
@@ -53,7 +53,7 @@ SETTINGS_INFO = collections.OrderedDict([

    ('port_number', {
        'type': int,
-        'default': 8080,
+        'default': 9010,
        'comment': '',
        'category': 'network',
    }),
@@ -168,17 +168,13 @@ For security reasons, enabling this is not recommended.''',
        'category': 'playback',
    }),

-    ('codec_rank_h264', {
+    ('codec_rank_av1', {
        'type': int,
        'default': 1,
-        'label': 'H.264 Codec Ranking',
+        'label': 'AV1 Codec Ranking',
        'comment': '',
        'options': [(1, '#1'), (2, '#2'), (3, '#3')],
        'category': 'playback',
-        'description': (
-            'Which video codecs to prefer. Codecs given the same '
-            'ranking will use smaller file size as a tiebreaker.'
-        )
    }),

    ('codec_rank_vp', {
@@ -190,19 +186,23 @@ For security reasons, enabling this is not recommended.''',
        'category': 'playback',
    }),

-    ('codec_rank_av1', {
+    ('codec_rank_h264', {
        'type': int,
        'default': 3,
-        'label': 'AV1 Codec Ranking',
+        'label': 'H.264 Codec Ranking',
        'comment': '',
        'options': [(1, '#1'), (2, '#2'), (3, '#3')],
        'category': 'playback',
+        'description': (
+            'Which video codecs to prefer. Codecs given the same '
+            'ranking will use smaller file size as a tiebreaker.'
+        )
    }),

    ('prefer_uni_sources', {
        'label': 'Prefer integrated sources',
        'type': bool,
-        'default': True,
+        'default': False,
        'comment': '',
        'category': 'playback',
        'description': 'If enabled and the default resolution is set to 360p or 720p, uses the unified (integrated) video files which contain audio and video, with buffering managed by the browser. If disabled, always uses the separate audio and video files through custom buffer management in av-merge via MediaSource.',
@@ -220,6 +220,20 @@ For security reasons, enabling this is not recommended.''',
        'category': 'interface',
    }),

+    ('use_video_download', {
+        'type': int,
+        'default': 0,
+        'comment': '',
+        'options': [
+            (0, 'Disabled'),
+            (1, 'Enabled'),
+        ],
+        'category': 'interface',
+        'comment': '''If enabled, you may incur legal issues with RIAA. Disabled by default.
+More info: https://torrentfreak.com/riaa-thwarts-youts-attempt-to-declare-youtube-ripping-legal-221002/
+Archive: https://archive.ph/OZQbN''',
+    }),
+
    ('proxy_images', {
        'label': 'Route images',
        'type': bool,
@@ -390,8 +404,8 @@ if os.path.isfile("settings.txt"):
    data_dir = os.path.normpath('./data')
 else:
    print("Running in non-portable mode")
-    settings_dir = os.path.expanduser(os.path.normpath("~/.youtube-local"))
-    data_dir = os.path.expanduser(os.path.normpath("~/.youtube-local/data"))
+    settings_dir = os.path.expanduser(os.path.normpath("~/.yt-local"))
+    data_dir = os.path.expanduser(os.path.normpath("~/.yt-local/data"))
    if not os.path.exists(settings_dir):
        os.makedirs(settings_dir)

--- a/youtube/local_playlist.py
+++ b/youtube/local_playlist.py
@@ -153,6 +153,12 @@ def path_edit_playlist(playlist_name):
        number_of_videos_remaining = remove_from_playlist(playlist_name, videos_to_remove)
        redirect_page_number = min(int(request.values.get('page', 1)), math.ceil(number_of_videos_remaining/50))
        return flask.redirect(util.URL_ORIGIN + request.path + '?page=' + str(redirect_page_number))
+    elif request.values['action'] == 'remove_playlist':
+        try:
+            os.remove(os.path.join(playlists_directory, playlist_name + ".txt"))
+        except OSError:
+            pass
+        return flask.redirect(util.URL_ORIGIN + '/playlists')
    elif request.values['action'] == 'export':
        videos = read_playlist(playlist_name)
        fmt = request.values['export_format']
--- a/youtube/static/channel.css
+++ b/youtube/static/channel.css
@@ -33,6 +33,8 @@ input[type="search"] {
    padding: 0.4rem 0.4rem;
    font-size: 15px;
    color: var(--search-text);
+    outline: none;
+    box-shadow: none;
 }

 input[type='search'] {
@@ -200,8 +202,10 @@ label[for=options-toggle-cbox] {
 }

 #options-toggle-cbox:checked ~ .dropdown-content {
-    display: inline-grid;
+    display: block;
    white-space: nowrap;
+    background: var(--secondary-background);
+    padding: 0.5rem 1rem;
 }
 /*- ----------- End Menu Mobile sin JS ------------- */

@@ -504,15 +508,19 @@ hr {
    .dropdown {
        display: grid;
        grid-gap: 1px;
-        grid-template-columns: minmax(50px, 100px);
+        grid-template-columns: 100px auto;
        grid-template-areas:
            "dropdown-label"
            "dropdown-content";
        grid-area: dropdown;
-        background: var(--background);
-        padding-right: 4rem;
-        z-index: 1;
        position: absolute;
+        z-index: 1;
+    }
+
+    #options-toggle-cbox:checked ~ .dropdown-content {
+        width: calc(100% + 100px);
+        max-height: 80vh;
+        overflow-y: scroll;
    }

    .author-container {
@@ -528,7 +536,7 @@ hr {
        grid-area: playlist;
    }
    .play-clean {
-        grid-template-columns: minmax(50px, 100px);
+        grid-template-columns: 100px auto;
    }
    .play-clean > button {
        padding-left: 0px;
--- a/youtube/static/comments.css
+++ b/youtube/static/comments.css
@@ -39,6 +39,8 @@ input[type="search"] {
    padding: 0.4rem 0.4rem;
    font-size: 15px;
    color: var(--search-text);
+    outline: none;
+    box-shadow: none;
 }

 input[type='search'] {
@@ -105,9 +107,7 @@ header {
        "dropdown-label"
        "dropdown-content";
    grid-area: dropdown;
-    background: var(--background);
    padding-right: 4rem;
-    z-index: 1;
 }
 .dropdown-label {
    grid-area: dropdown-label;
@@ -272,7 +272,7 @@ label[for=options-toggle-cbox] {
    .dropdown {
        display: grid;
        grid-gap: 1px;
-        grid-template-columns: minmax(50px, 100px);
+        grid-template-columns: minmax(50px, 120px);
        grid-template-areas:
            "dropdown-label"
            "dropdown-content";
@@ -280,6 +280,12 @@ label[for=options-toggle-cbox] {
        z-index: 1;
        position: absolute;
    }
+    #options-toggle-cbox:checked ~ .dropdown-content {
+        padding: 0rem 3rem 1rem 1rem;
+        width: 100%;
+        max-height: 45vh;
+        overflow-y: scroll;
+    }

    .footer {
        display: grid;
--- a/youtube/static/dark_theme.css
+++ b/youtube/static/dark_theme.css
@@ -2,13 +2,14 @@
    --background:           #212121;
    --text:                 #FFFFFF;
    --secondary-hover:      #73828c;
-    --secondary-focus:      #606060;
+    --secondary-focus:      #303030;
    --secondary-inverse:    #FFF;
-    --primary-background:   #757575;
+    --primary-background:   #242424;
    --secondary-background: #424242;
    --thumb-background:     #757575;
    --link:                 #00B0FF;
    --link-visited:         #40C4FF;
+    --border-bg:            #FFFFFF;
    --buttom:               #dcdcdb;
    --buttom-text:          #415462;
    --button-border:        #91918c;
--- a/youtube/static/gray_theme.css
+++ b/youtube/static/gray_theme.css
@@ -9,6 +9,7 @@
    --thumb-background:      #35404D;
    --link:                  #22aaff;
    --link-visited:          #7755ff;
+    --border-bg:             #FFFFFF;
    --buttom:                #DCDCDC;
    --buttom-text:           #415462;
    --button-border:         #91918c;
--- a/youtube/static/home.css
+++ b/youtube/static/home.css
@@ -29,6 +29,8 @@ input[type="search"] {
    padding: 0.4rem 0.4rem;
    font-size: 15px;
    color: var(--search-text);
+    outline: none;
+    box-shadow: none;
 }

 input[type='search'] {
@@ -95,7 +97,6 @@ header {
        "dropdown-label"
        "dropdown-content";
    grid-area: dropdown;
-    z-index: 1;
 }
 .dropdown-label {
    grid-area: dropdown-label;
@@ -135,8 +136,10 @@ label[for=options-toggle-cbox] {
 }

 #options-toggle-cbox:checked ~ .dropdown-content {
-    display: inline-grid;
+    display: block;
    white-space: nowrap;
+    background: var(--secondary-background);
+    padding: 0.5rem 1rem;
 }
 /*- ----------- End Menu Mobile sin JS ------------- */

@@ -186,15 +189,20 @@ label[for=options-toggle-cbox] {
    .dropdown {
        display: grid;
        grid-gap: 1px;
-        grid-template-columns: minmax(50px, 100px);
+        grid-template-columns: 100px auto;
        grid-template-areas:
            "dropdown-label"
            "dropdown-content";
        grid-area: dropdown;
-        z-index: 1;
        position: absolute;
        background: var(--background);
        padding-right: 4rem;
+        z-index: 1;
+    }
+    #options-toggle-cbox:checked ~ .dropdown-content {
+        width: calc(100% + 100px);
+        max-height: 80vh;
+        overflow-y: scroll;
    }

    .footer {
--- a/youtube/static/js/av-merge.js
+++ b/youtube/static/js/av-merge.js
@@ -41,7 +41,7 @@ function AVMerge(video, srcInfo, startTime){
    }

    // Find supported video and audio sources
-    for (var src of srcInfo['videos']) {
+    for (let src of srcInfo['videos']) {
        if (MediaSource.isTypeSupported(src['mime_codec'])) {
            reportDebug('Using video source', src['mime_codec'],
                        src['quality_string'], 'itag', src['itag']);
@@ -49,7 +49,7 @@ function AVMerge(video, srcInfo, startTime){
            break;
        }
    }
-    for (var src of srcInfo['audios']) {
+    for (let src of srcInfo['audios']) {
        if (MediaSource.isTypeSupported(src['mime_codec'])) {
            reportDebug('Using audio source', src['mime_codec'],
                        src['quality_string'], 'itag', src['itag']);
@@ -205,9 +205,9 @@ Stream.prototype.setup = async function(){
            this.initRange.start,
            this.indexRange.end,
            (buffer) => {
-                var init_end = this.initRange.end - this.initRange.start + 1;
-                var index_start = this.indexRange.start - this.initRange.start;
-                var index_end = this.indexRange.end - this.initRange.start + 1;
+                let init_end = this.initRange.end - this.initRange.start + 1;
+                let index_start = this.indexRange.start - this.initRange.start;
+                let index_end = this.indexRange.end - this.initRange.start + 1;
                this.setupInitSegment(buffer.slice(0, init_end));
                this.setupSegmentIndex(buffer.slice(index_start, index_end));
            }
@@ -247,7 +247,7 @@ Stream.prototype.setupSegmentIndex = async function(indexSegment){
                entry.referencedSize = entry.end - entry.start + 1;
        }
    } else {
-        var box = unbox(indexSegment);
+        let box = unbox(indexSegment);
        this.sidx = sidx_parse(box.data, this.indexRange.end+1);
    }
    this.fetchSegmentIfNeeded(this.getSegmentIdx(this.startTime));
@@ -289,8 +289,8 @@ Stream.prototype.appendSegment = function(segmentIdx, chunk) {

        // Count how many bytes are in buffer to update buffering target,
        // updating .have as well for when we need to delete segments
-        var bytesInBuffer = 0;
-        for (var i = 0; i < this.sidx.entries.length; i++) {
+        let bytesInBuffer = 0;
+        for (let i = 0; i < this.sidx.entries.length; i++) {
            if (this.segmentInBuffer(i))
                bytesInBuffer += this.sidx.entries[i].referencedSize;
            else if (this.sidx.entries[i].have) {
@@ -306,11 +306,11 @@ Stream.prototype.appendSegment = function(segmentIdx, chunk) {

        // Delete 10 segments (arbitrary) from buffer, making sure
        // not to delete current one
-        var currentSegment = this.getSegmentIdx(this.video.currentTime);
-        var numDeleted = 0;
-        var i = 0;
+        let currentSegment = this.getSegmentIdx(this.video.currentTime);
+        let numDeleted = 0;
+        let i = 0;
        const DELETION_TARGET = 10;
-        var toDelete = []; // See below for why we have to schedule it
+        let toDelete = []; // See below for why we have to schedule it
        this.reportDebug('Deleting segments from beginning of buffer.');
        while (numDeleted < DELETION_TARGET && i < currentSegment) {
            if (this.sidx.entries[i].have) {
@@ -334,9 +334,9 @@ Stream.prototype.appendSegment = function(segmentIdx, chunk) {
        // When calling .remove, the sourceBuffer will go into updating=true
        // state, and remove cannot be called until it is done. So we have
        // to delete on the updateend event for subsequent ones.
-        var removeFinishedEvent;
-        var deletedStuff = (toDelete.length !== 0)
-        var deleteSegment = () => {
+        let removeFinishedEvent;
+        let deletedStuff = (toDelete.length !== 0)
+        let deleteSegment = () => {
            if (toDelete.length === 0) {
                removeFinishedEvent.remove();
                // If QuotaExceeded happened for current segment, retry the
@@ -370,25 +370,25 @@ Stream.prototype.appendSegment = function(segmentIdx, chunk) {
 }
 Stream.prototype.getSegmentIdx = function(videoTime) {
    // get an estimate
-    var currentTick = videoTime * this.sidx.timeScale;
-    var firstSegmentDuration = this.sidx.entries[0].subSegmentDuration;
-    var index = 1 + Math.floor(currentTick / firstSegmentDuration);
-    var index = clamp(index, 0, this.sidx.entries.length - 1);
+    let currentTick = videoTime * this.sidx.timeScale;
+    let firstSegmentDuration = this.sidx.entries[0].subSegmentDuration;
+    let index = 1 + Math.floor(currentTick / firstSegmentDuration);
+    index = clamp(index, 0, this.sidx.entries.length - 1);

-    var increment = 1;
+    let increment = 1;
    if (currentTick < this.sidx.entries[index].tickStart){
        increment = -1;
    }

    // go up or down to find correct index
    while (index >= 0 && index < this.sidx.entries.length) {
-        var entry = this.sidx.entries[index];
+        let entry = this.sidx.entries[index];
        if (entry.tickStart <= currentTick && (entry.tickEnd+1) > currentTick){
            return index;
        }
        index = index + increment;
    }
-    this.reportError('Could not find segment index for time', videoTime);
+    this.reportInfo('Could not find segment index for time', videoTime);
    return 0;
 }
 Stream.prototype.checkBuffer = async function() {
@@ -396,11 +396,11 @@ Stream.prototype.checkBuffer = async function() {
        return;
    }
    // Find the first unbuffered segment, i
-    var currentSegmentIdx = this.getSegmentIdx(this.video.currentTime);
-    var bufferedBytesAhead = 0;
-    var i;
+    let currentSegmentIdx = this.getSegmentIdx(this.video.currentTime);
+    let bufferedBytesAhead = 0;
+    let i;
    for (i = currentSegmentIdx; i < this.sidx.entries.length; i++) {
-        var entry = this.sidx.entries[i];
+        let entry = this.sidx.entries[i];
        // check if we had it before, but it was deleted by the browser
        if (entry.have && !this.segmentInBuffer(i)) {
            this.reportDebug('segment', i, 'deleted by browser');
@@ -428,9 +428,9 @@ Stream.prototype.checkBuffer = async function() {
    }
 }
 Stream.prototype.segmentInBuffer = function(segmentIdx) {
-    var entry = this.sidx.entries[segmentIdx];
+    let entry = this.sidx.entries[segmentIdx];
    // allow for 0.01 second error
-    var timeStart = entry.tickStart/this.sidx.timeScale + 0.01;
+    let timeStart = entry.tickStart/this.sidx.timeScale + 0.01;

    /* Some of YouTube's mp4 fragments are malformed, with half-frame
    playback gaps. In this video at 240p (timeScale = 90000 ticks/second)
@@ -457,14 +457,15 @@ Stream.prototype.segmentInBuffer = function(segmentIdx) {
    quality switching, YouTube likely encodes their formats to line up nicely.
    Either there is a bug in their encoder, or this is intentional. Allow for
    up to 1 frame-time of error to work around this issue. */
+    let endError;
    if (this.streamType == 'video')
-        var endError = 1/(this.avMerge.videoSource.fps || 30);
+        endError = 1/(this.avMerge.videoSource.fps || 30);
    else
-        var endError = 0.01
-    var timeEnd = (entry.tickEnd+1)/this.sidx.timeScale - endError;
+        endError = 0.01
+    let timeEnd = (entry.tickEnd+1)/this.sidx.timeScale - endError;

-    var timeRanges = this.sourceBuffer.buffered;
-    for (var i=0; i < timeRanges.length; i++) {
+    let timeRanges = this.sourceBuffer.buffered;
+    for (let i=0; i < timeRanges.length; i++) {
        if (timeRanges.start(i) <= timeStart && timeEnd <= timeRanges.end(i)) {
            return true;
        }
@@ -505,7 +506,7 @@ Stream.prototype.fetchSegmentIfNeeded = function(segmentIdx) {
    this.fetchSegment(segmentIdx);
 }
 Stream.prototype.handleSeek = function() {
-    var segmentIdx = this.getSegmentIdx(this.video.currentTime);
+    let segmentIdx = this.getSegmentIdx(this.video.currentTime);
    this.fetchSegmentIfNeeded(segmentIdx);
 }
 Stream.prototype.reportDebug = function(...args) {
@@ -517,13 +518,16 @@ Stream.prototype.reportWarning = function(...args) {
 Stream.prototype.reportError = function(...args) {
    reportError(String(this.streamType) + ':', ...args);
 }
+Stream.prototype.reportInfo = function(...args) {
+    reportInfo(String(this.streamType) + ':', ...args);
+}


 // Utility functions

 function fetchRange(url, start, end, cb) {
    return new Promise((resolve, reject) => {
-        var xhr = new XMLHttpRequest();
+        let xhr = new XMLHttpRequest();
        xhr.open('get', url);
        xhr.responseType = 'arraybuffer';
        xhr.setRequestHeader('Range', 'bytes=' + start + '-' + end);
@@ -536,15 +540,15 @@ function fetchRange(url, start, end, cb) {
 }

 function debounce(func, wait, immediate) {
-    var timeout;
+    let timeout;
    return function() {
-        var context = this;
-        var args = arguments;
-        var later = function() {
+        let context = this;
+        let args = arguments;
+        let later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
-        var callNow = immediate && !timeout;
+        let callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
@@ -569,6 +573,9 @@ function addEvent(obj, eventName, func) {
    return new RegisteredEvent(obj, eventName, func);
 }

+function reportInfo(...args){
+    console.info(...args);
+}
 function reportWarning(...args){
    console.warn(...args);
 }
@@ -580,7 +587,7 @@ function reportDebug(...args){
 }

 function byteArrayToIntegerLittleEndian(unsignedByteArray){
-    var result = 0;
+    let result = 0;
    for (byte of unsignedByteArray){
        result = result*256;
        result += byte
@@ -588,7 +595,7 @@ function byteArrayToIntegerLittleEndian(unsignedByteArray){
    return result;
 }
 function byteArrayToFloat(byteArray) {
-    var view = new DataView(byteArray.buffer);
+    let view = new DataView(byteArray.buffer);
    if (byteArray.length == 4)
        return view.getFloat32(byteArray.byteOffset);
    else
@@ -599,14 +606,14 @@ function ByteParser(data){
    this.data = new Uint8Array(data);
 }
 ByteParser.prototype.readInteger = function(nBytes){
-    var result = byteArrayToIntegerLittleEndian(
+    let result = byteArrayToIntegerLittleEndian(
        this.data.slice(this.curIndex, this.curIndex + nBytes)
    );
    this.curIndex += nBytes;
    return result;
 }
 ByteParser.prototype.readBufferBytes = function(nBytes){
-    var result = this.data.slice(this.curIndex, this.curIndex + nBytes);
+    let result = this.data.slice(this.curIndex, this.curIndex + nBytes);
    this.curIndex += nBytes;
    return result;
 }
@@ -635,7 +642,7 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.*/
 function sidx_parse (data, offset) {
-	var bp = new ByteParser(data),
+	let bp = new ByteParser(data),
 		version = bp.readInteger(1),
 		flags = bp.readInteger(3),
 		referenceId = bp.readInteger(4),
@@ -646,9 +653,9 @@ function sidx_parse (data, offset) {
 		entryCount = bp.readInteger(2),
 		entries = [];

-    var totalBytesOffset = firstOffset + offset;
-    var totalTicks = 0;
-	for (var i = entryCount; i > 0; i=i-1 ) {
+    let totalBytesOffset = firstOffset + offset;
+    let totalTicks = 0;
+	for (let i = entryCount; i > 0; i=i-1 ) {
        let referencedSize = bp.readInteger(4),
 			subSegmentDuration = bp.readInteger(4),
 			unused = bp.readBufferBytes(4)
@@ -681,7 +688,7 @@ function sidx_parse (data, offset) {

 // BEGIN iso-bmff-parser-stream/lib/unbox.js (same license), modified
 function unbox(buf) {
-	var bp = new ByteParser(buf),
+	let bp = new ByteParser(buf),
 		bufferLength = buf.length,
 		length,
 		typeData,
@@ -712,7 +719,7 @@ function unbox(buf) {


 function extractWebmInitializationInfo(initializationSegment) {
-    var result = {
+    let result = {
        timeScale: null,
        cuesOffset: null,
        duration: null,
@@ -740,9 +747,9 @@ function extractWebmInitializationInfo(initializationSegment) {
    return result;
 }
 function parseWebmCues(indexSegment, initInfo) {
-    var entries = [];
-    var currentEntry = {};
-    var cuesOffset = initInfo.cuesOffset;
+    let entries = [];
+    let currentEntry = {};
+    let cuesOffset = initInfo.cuesOffset;
    (new EbmlDecoder()).readTags(indexSegment, (tagType, tag) => {
        if (tag.name == 'CueTime') {
            const tickStart = byteArrayToIntegerLittleEndian(tag.data);
@@ -818,7 +825,7 @@ EbmlDecoder.prototype.readTags = function(chunk, onParsedTag) {
 }
 EbmlDecoder.prototype.getSchemaInfo = function(tag) {
    if (Number.isInteger(tag) && schema.has(tag)) {
-        var name, type;
+        let name, type;
        [name, type] = schema.get(tag);
        return {name, type};
    }
--- a/youtube/static/js/comments.js
+++ b/youtube/static/js/comments.js
@@ -1,9 +1,9 @@
 function onClickReplies(e) {
-  var details = e.target.parentElement;
+  let details = e.target.parentElement;
  // e.preventDefault();
  console.log("loading replies ..");
  doXhr(details.getAttribute("data-src") + "&slim=1", (html) => {
-    var div = details.querySelector(".comment_page");
+    let div = details.querySelector(".comment_page");
    div.innerHTML = html;
  });
  details.removeEventListener('click', onClickReplies);
--- a/youtube/static/js/common.js
+++ b/youtube/static/js/common.js
@@ -1,16 +1,19 @@
 const Q = document.querySelector.bind(document);
 const QA = document.querySelectorAll.bind(document);
 const QId = document.getElementById.bind(document);
+let seconds,
+    minutes,
+    hours;
 function text(msg) { return document.createTextNode(msg); }
 function clearNode(node) { while (node.firstChild) node.removeChild(node.firstChild); }
 function toTimestamp(seconds) {
-  var seconds = Math.floor(seconds);
+  seconds = Math.floor(seconds);

-  var minutes = Math.floor(seconds/60);
-  var seconds = seconds % 60;
+  minutes = Math.floor(seconds/60);
+  seconds = seconds % 60;

-  var hours = Math.floor(minutes/60);
-  var minutes = minutes % 60;
+  hours = Math.floor(minutes/60);
+  minutes = minutes % 60;

  if (hours) {
    return `0${hours}:`.slice(-3) + `0${minutes}:`.slice(-3) + `0${seconds}`.slice(-2);
@@ -18,8 +21,7 @@ function toTimestamp(seconds) {
  return `0${minutes}:`.slice(-3) + `0${seconds}`.slice(-2);
 }

-
-var cur_track_idx = 0;
+let cur_track_idx = 0;
 function getActiveTranscriptTrackIdx() {
    let textTracks = QId("js-video-player").textTracks;
    if (!textTracks.length) return;
@@ -39,7 +41,7 @@ function getDefaultTranscriptTrackIdx() {
 }

 function doXhr(url, callback=null) {
-    var xhr = new XMLHttpRequest();
+    let xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.onload = (e) => {
      callback(e.currentTarget.response);
@@ -50,7 +52,7 @@ function doXhr(url, callback=null) {

 // https://stackoverflow.com/a/30810322
 function copyTextToClipboard(text) {
-  var textArea = document.createElement("textarea");
+  let textArea = document.createElement("textarea");

  //
  // *** This styling is an extra step which is likely not required. ***
@@ -92,19 +94,20 @@ function copyTextToClipboard(text) {

  textArea.value = text;

-  document.body.appendChild(textArea);
+  let parent_el = video.parentElement;
+  parent_el.appendChild(textArea);
  textArea.focus();
  textArea.select();

  try {
-    var successful = document.execCommand('copy');
-    var msg = successful ? 'successful' : 'unsuccessful';
+    let successful = document.execCommand('copy');
+    let msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }

-  document.body.removeChild(textArea);
+  parent_el.removeChild(textArea);
 }


--- a/youtube/static/js/hotkeys.js
+++ b/youtube/static/js/hotkeys.js
@@ -3,6 +3,7 @@ function onKeyDown(e) {

    // console.log(e);
    let v = QId("js-video-player");
+    if (!e.isTrusted) return;  // plyr CustomEvent
    let c = e.key.toLowerCase();
    if (e.ctrlKey) return;
    else if (c == "k") {
@@ -26,8 +27,17 @@ function onKeyDown(e) {
    }
    else if (c == "f") {
        e.preventDefault();
-        if (document.fullscreenElement && document.fullscreenElement.nodeName == 'VIDEO') {document.exitFullscreen();}
-        else {v.requestFullscreen()};
+        if (data.settings.use_video_player == 2) {
+            player.fullscreen.toggle()
+        }
+        else {
+            if (document.fullscreen) {
+                document.exitFullscreen()
+            }
+            else {
+                v.requestFullscreen()
+            }
+        }
    }
    else if (c == "m") {
        if (v.muted == false) {v.muted = true;}
--- a/youtube/static/js/playlistadd.js
+++ b/youtube/static/js/playlistadd.js
@@ -37,7 +37,7 @@
    }
    // https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript
    function sendData(event){
-        var clicked_button = document.activeElement;
+        let clicked_button = document.activeElement;
        if(clicked_button === null || clicked_button.getAttribute('type') !== 'submit' || clicked_button.parentElement != event.target){
            console.log('ERROR: clicked_button not valid');
            return;
@@ -46,8 +46,8 @@
            return;     // video(s) are being removed from playlist, just let it refresh the page
        }
        event.preventDefault();
-        var XHR = new XMLHttpRequest();
-        var FD = new FormData(playlistAddForm);
+        let XHR = new XMLHttpRequest();
+        let FD = new FormData(playlistAddForm);

        if(FD.getAll('video_info_list').length === 0){
            displayMessage('Error: No videos selected', true);
--- a/youtube/static/js/plyr-start.js
+++ b/youtube/static/js/plyr-start.js
@@ -16,10 +16,10 @@

  let qualityOptions = [];
  let qualityDefault;
-  for (var src of data['uni_sources']) {
+  for (let src of data['uni_sources']) {
    qualityOptions.push(src.quality_string)
  }
-  for (var src of data['pair_sources']) {
+  for (let src of data['pair_sources']) {
    qualityOptions.push(src.quality_string)
  }
  if (data['using_pair_sources'])
@@ -87,6 +87,8 @@
      'volume',
      'captions',
      'settings',
+      'pip',
+      'airplay',
      'fullscreen'
    ],
    iconUrl: "/youtube.com/static/modules/plyr/plyr.svg",
@@ -100,14 +102,14 @@
      onChange: function(quality) {
        if (quality == 'None') {return;}
        if (quality.includes('(integrated)')) {
-          for (var i=0; i < data['uni_sources'].length; i++) {
+          for (let i=0; i < data['uni_sources'].length; i++) {
            if (data['uni_sources'][i].quality_string == quality) {
              changeQuality({'type': 'uni', 'index': i});
              return;
            }
          }
        } else {
-          for (var i=0; i < data['pair_sources'].length; i++) {
+          for (let i=0; i < data['pair_sources'].length; i++) {
            if (data['pair_sources'][i].quality_string == quality) {
              changeQuality({'type': 'pair', 'index': i});
              return;
@@ -116,13 +118,13 @@
        }
      },
    },
+    previewThumbnails: {
+      enabled: storyboard_url != null,
+      src: [storyboard_url],
+    },
    settings: ['captions', 'quality', 'speed', 'loop'],
-  });
-
-  // Hide the external quality selector
-  window.addEventListener('DOMContentLoaded', function(){
-    const qs = document.getElementById('quality-select');
-    if (qs)
-      qs.hidden = true;
+    tooltips: {
+      controls: true,
+    },
  });
 }());
--- a/youtube/static/js/sponsorblock.js
+++ b/youtube/static/js/sponsorblock.js
@@ -2,7 +2,7 @@

 // from: https://git.gir.st/subscriptionfeed.git/blob/59a590d:/app/youtube/templates/watch.html.j2#l28

-var sha256=function a(b){function c(a,b){return a>>>b|a<<32-b}for(var d,e,f=Math.pow,g=f(2,32),h="length",i="",j=[],k=8*b[h],l=a.h=a.h||[],m=a.k=a.k||[],n=m[h],o={},p=2;64>n;p++)if(!o[p]){for(d=0;313>d;d+=p)o[d]=p;l[n]=f(p,.5)*g|0,m[n++]=f(p,1/3)*g|0}for(b+="\x80";b[h]%64-56;)b+="\x00";for(d=0;d<b[h];d++){if(e=b.charCodeAt(d),e>>8)return;j[d>>2]|=e<<(3-d)%4*8}for(j[j[h]]=k/g|0,j[j[h]]=k,e=0;e<j[h];){var q=j.slice(e,e+=16),r=l;for(l=l.slice(0,8),d=0;64>d;d++){var s=q[d-15],t=q[d-2],u=l[0],v=l[4],w=l[7]+(c(v,6)^c(v,11)^c(v,25))+(v&l[5]^~v&l[6])+m[d]+(q[d]=16>d?q[d]:q[d-16]+(c(s,7)^c(s,18)^s>>>3)+q[d-7]+(c(t,17)^c(t,19)^t>>>10)|0),x=(c(u,2)^c(u,13)^c(u,22))+(u&l[1]^u&l[2]^l[1]&l[2]);l=[w+x|0].concat(l),l[4]=l[4]+w|0}for(d=0;8>d;d++)l[d]=l[d]+r[d]|0}for(d=0;8>d;d++)for(e=3;e+1;e--){var y=l[d]>>8*e&255;i+=(16>y?0:"")+y.toString(16)}return i}; /*https://geraintluff.github.io/sha256/sha256.min.js (public domain)*/
+let sha256=function a(b){function c(a,b){return a>>>b|a<<32-b}for(var d,e,f=Math.pow,g=f(2,32),h="length",i="",j=[],k=8*b[h],l=a.h=a.h||[],m=a.k=a.k||[],n=m[h],o={},p=2;64>n;p++)if(!o[p]){for(d=0;313>d;d+=p)o[d]=p;l[n]=f(p,.5)*g|0,m[n++]=f(p,1/3)*g|0}for(b+="\x80";b[h]%64-56;)b+="\x00";for(d=0;d<b[h];d++){if(e=b.charCodeAt(d),e>>8)return;j[d>>2]|=e<<(3-d)%4*8}for(j[j[h]]=k/g|0,j[j[h]]=k,e=0;e<j[h];){var q=j.slice(e,e+=16),r=l;for(l=l.slice(0,8),d=0;64>d;d++){var s=q[d-15],t=q[d-2],u=l[0],v=l[4],w=l[7]+(c(v,6)^c(v,11)^c(v,25))+(v&l[5]^~v&l[6])+m[d]+(q[d]=16>d?q[d]:q[d-16]+(c(s,7)^c(s,18)^s>>>3)+q[d-7]+(c(t,17)^c(t,19)^t>>>10)|0),x=(c(u,2)^c(u,13)^c(u,22))+(u&l[1]^u&l[2]^l[1]&l[2]);l=[w+x|0].concat(l),l[4]=l[4]+w|0}for(d=0;8>d;d++)l[d]=l[d]+r[d]|0}for(d=0;8>d;d++)for(e=3;e+1;e--){var y=l[d]>>8*e&255;i+=(16>y?0:"")+y.toString(16)}return i}; /*https://geraintluff.github.io/sha256/sha256.min.js (public domain)*/

 window.addEventListener("load", load_sponsorblock);
 document.addEventListener('DOMContentLoaded', ()=>{
--- a/youtube/static/js/watch.js
+++ b/youtube/static/js/watch.js
@@ -1,10 +1,10 @@
 const video = document.getElementById('js-video-player');

 function changeQuality(selection) {
-    var currentVideoTime = video.currentTime;
-    var videoPaused = video.paused;
-    var videoSpeed = video.playbackRate;
-    var srcInfo;
+    let currentVideoTime = video.currentTime;
+    let videoPaused = video.paused;
+    let videoSpeed = video.playbackRate;
+    let srcInfo;
    if (avMerge)
        avMerge.close();
    if (selection.type == 'uni'){
@@ -22,29 +22,30 @@ function changeQuality(selection) {
 }

 // Initialize av-merge
-var avMerge;
+let avMerge;
 if (data.using_pair_sources) {
-    var srcPair = data['pair_sources'][data['pair_idx']];
+    let srcPair = data['pair_sources'][data['pair_idx']];
    // Do it dynamically rather than as the default in jinja
    // in case javascript is disabled
    avMerge = new AVMerge(video, srcPair, 0);
 }

 // Quality selector
-document.getElementById('quality-select').addEventListener(
-    'change', function(e) {
-        changeQuality(JSON.parse(this.value))
-    }
-);
+const qs = document.getElementById('quality-select');
+if (qs) {
+  qs.addEventListener('change', function(e) {
+    changeQuality(JSON.parse(this.value))
+  });
+}

 // Set up video start time from &t parameter
 if (data.time_start != 0 && video) {video.currentTime = data.time_start};

 // External video speed control
-var speedInput = document.getElementById('speed-control');
+let speedInput = document.getElementById('speed-control');
 speedInput.addEventListener('keyup', (event) => {
    if (event.key === 'Enter') {
-        var speed = parseFloat(speedInput.value);
+        let speed = parseFloat(speedInput.value);
        if(!isNaN(speed)){
            video.playbackRate = speed;
        }
@@ -60,7 +61,7 @@ if (data.playlist && data.playlist['id'] !== null) {
    // IntersectionObserver isn't supported in pre-quantum
    // firefox versions, but the alternative of making it
    // manually is a performance drain, so oh well
-    var observer = new IntersectionObserver(lazyLoad, {
+    let observer = new IntersectionObserver(lazyLoad, {

      // where in relation to the edge of the viewport, we are observing
      rootMargin: "100px",
@@ -85,7 +86,7 @@ if (data.playlist && data.playlist['id'] !== null) {
    };

    // Tell our observer to observe all img elements with a "lazy" class
-    var lazyImages = document.querySelectorAll('img.lazy');
+    let lazyImages = document.querySelectorAll('img.lazy');
    lazyImages.forEach(img => {
      observer.observe(img);
    });
--- a/youtube/static/license.css
+++ b/youtube/static/license.css
@@ -29,6 +29,8 @@ input[type="search"] {
    padding: 0.4rem 0.4rem;
    font-size: 15px;
    color: var(--search-text);
+    outline: none;
+    box-shadow: none;
 }

 input[type='search'] {
@@ -95,7 +97,6 @@ header {
        "dropdown-label"
        "dropdown-content";
    grid-area: dropdown;
-    z-index: 1;
 }
 .dropdown-label {
    grid-area: dropdown-label;
@@ -135,8 +136,10 @@ label[for=options-toggle-cbox] {
 }

 #options-toggle-cbox:checked ~ .dropdown-content {
-    display: inline-grid;
+    display: block;
    white-space: nowrap;
+    background: var(--secondary-background);
+    padding: 0.5rem 1rem;
 }
 /*- ----------- End Menu Mobile sin JS ------------- */

@@ -263,7 +266,7 @@ label[for=options-toggle-cbox] {
    .dropdown {
        display: grid;
        grid-gap: 1px;
-        grid-template-columns: minmax(50px, 100px);
+        grid-template-columns: minmax(50px, 120px);
        grid-template-areas:
            "dropdown-label"
            "dropdown-content";
@@ -271,7 +274,12 @@ label[for=options-toggle-cbox] {
        z-index: 1;
        position: absolute;
    }
-
+    #options-toggle-cbox:checked ~ .dropdown-content {
+        padding: 0rem 3rem 1rem 1rem;
+        width: 100%;
+        max-height: 45vh;
+        overflow-y: scroll;
+    }
    .footer {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
--- a/youtube/static/light_theme.css
+++ b/youtube/static/light_theme.css
@@ -8,7 +8,8 @@
    --secondary-background: #EEEEEE;
    --thumb-background:     #F5F5F5;
    --link:                 #212121;
-    --link-visited:         #606060;
+    --link-visited:         #808080;
+    --border-bg:            #212121;
    --buttom:               #DCDCDC;
    --buttom-text:          #212121;
    --button-border:        #91918c;
--- a/youtube/static/local_playlist.css
+++ b/youtube/static/local_playlist.css
@@ -33,6 +33,8 @@ input[type="search"] {
    padding: 0.4rem 0.4rem;
    font-size: 15px;
    color: var(--search-text);
+    outline: none;
+    box-shadow: none;
 }

 input[type='search'] {
@@ -100,7 +102,6 @@ header {
        "dropdown-label"
        "dropdown-content";
    grid-area: dropdown;
-    z-index: 1;
 }
 .dropdown-label {
    grid-area: dropdown-label;
@@ -200,8 +201,10 @@ label[for=options-toggle-cbox] {
 }

 #options-toggle-cbox:checked ~ .dropdown-content {
-    display: inline-grid;
+    display: block;
    white-space: nowrap;
+    background: var(--secondary-background);
+    padding: 0.5rem 1rem;
 }
 /*- ----------- End Menu Mobile sin JS ------------- */

@@ -474,17 +477,19 @@ hr {
    .dropdown {
        display: grid;
        grid-gap: 1px;
-        grid-template-columns: minmax(50px, 100px);
+        grid-template-columns: 100px auto;
        grid-template-areas:
            "dropdown-label"
            "dropdown-content";
        grid-area: dropdown;
-        background: var(--background);
-        padding-right: 4rem;
-        z-index: 1;
        position: absolute;
+        z-index: 1;
+    }
+    #options-toggle-cbox:checked ~ .dropdown-content {
+        width: calc(100% + 100px);
+        max-height: 80vh;
+        overflow-y: scroll;
    }
-
    .playlist-metadata {
        max-width: 50vw;
    }
@@ -498,7 +503,7 @@ hr {
        grid-area: playlist;
    }
    .play-clean {
-        grid-template-columns: minmax(50px, 100px);
+        grid-template-columns: 100px auto;
    }
    .play-clean > button {
        padding-left: 0px;
--- a/youtube/static/modules/plyr/plyr.css
+++ b/youtube/static/modules/plyr/plyr.css
--- a/youtube/static/modules/plyr/plyr.js
+++ b/youtube/static/modules/plyr/plyr.js
--- a/youtube/static/modules/plyr/plyr.min.js
+++ b/youtube/static/modules/plyr/plyr.min.js
--- a/youtube/static/playlist.css
+++ b/youtube/static/playlist.css
@@ -33,6 +33,8 @@ input[type="search"] {
    padding: 0.4rem 0.4rem;
    font-size: 15px;
    color: var(--search-text);
+    outline: none;
+    box-shadow: none;
 }

 input[type='search'] {
@@ -100,7 +102,6 @@ header {
        "dropdown-label"
        "dropdown-content";
    grid-area: dropdown;
-    z-index: 1;
 }
 .dropdown-label {
    grid-area: dropdown-label;
@@ -200,8 +201,10 @@ label[for=options-toggle-cbox] {
 }

 #options-toggle-cbox:checked ~ .dropdown-content {
-    display: inline-grid;
+    display: block;
    white-space: nowrap;
+    background: var(--secondary-background);
+    padding: 0.5rem 1rem;
 }
 /*- ----------- End Menu Mobile sin JS ------------- */

@@ -484,17 +487,19 @@ hr {
    .dropdown {
        display: grid;
        grid-gap: 1px;
-        grid-template-columns: minmax(50px, 100px);
+        grid-template-columns: 100px auto;
        grid-template-areas:
            "dropdown-label"
            "dropdown-content";
        grid-area: dropdown;
-        background: var(--background);
-        padding-right: 4rem;
-        z-index: 1;
        position: absolute;
+        z-index: 1;
+    }
+    #options-toggle-cbox:checked ~ .dropdown-content {
+        width: calc(100% + 100px);
+        max-height: 80vh;
+        overflow-y: scroll;
    }
-
    .playlist-metadata {
        max-width: 50vw;
    }
@@ -508,7 +513,7 @@ hr {
        grid-area: playlist;
    }
    .play-clean {
-        grid-template-columns: minmax(50px, 100px);
+        grid-template-columns: 100px auto;
    }
    .play-clean > button {
        padding-left: 0px;
--- a/youtube/static/search.css
+++ b/youtube/static/search.css
@@ -33,6 +33,8 @@ input[type="search"] {
    padding: 0.4rem 0.4rem;
    font-size: 15px;
    color: var(--search-text);
+    outline: none;
+    box-shadow: none;
 }

 input[type='search'] {
@@ -100,7 +102,6 @@ header {
        "dropdown-label"
        "dropdown-content";
    grid-area: dropdown;
-    z-index: 1;
 }
 .dropdown-label {
    grid-area: dropdown-label;
@@ -200,8 +201,10 @@ label[for=options-toggle-cbox] {
 }

 #options-toggle-cbox:checked ~ .dropdown-content {
-    display: inline-grid;
+    display: block;
    white-space: nowrap;
+    background: var(--secondary-background);
+    padding: 0.5rem 1rem;
 }
 /*- ----------- End Menu Mobile sin JS ------------- */

@@ -252,7 +255,7 @@ hr {
 /* Video list item */
 .video-container {
    display: grid;
-    grid-row-gap: 0.5rem;
+    grid-gap: 0.5rem;
 }

 .length {
@@ -295,6 +298,12 @@ hr {
    cursor: pointer;
 }

+.item-video address {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 .item-video.channel-item .thumbnail.channel {
    display: flex;
    justify-content: center;
@@ -430,7 +439,7 @@ hr {
@media (min-width: 600px) {
    .video-container {
        display: grid;
-        grid-row-gap: 0.5rem;
+        grid-gap: 0.5rem;
        grid-template-columns: 1fr 1fr;
    }
 }
@@ -456,17 +465,19 @@ hr {
    .dropdown {
        display: grid;
        grid-gap: 1px;
-        grid-template-columns: minmax(50px, 100px);
+        grid-template-columns: 100px auto;
        grid-template-areas:
            "dropdown-label"
            "dropdown-content";
        grid-area: dropdown;
-        background: var(--background);
-        padding-right: 4rem;
-        z-index: 1;
        position: absolute;
+        z-index: 1;
+    }
+    #options-toggle-cbox:checked ~ .dropdown-content {
+        width: calc(100% + 100px);
+        max-height: 80vh;
+        overflow-y: scroll;
    }
-
    /* playlist */
    .playlist {
        display: grid;
@@ -476,7 +487,7 @@ hr {
        grid-area: playlist;
    }
    .play-clean {
-        grid-template-columns: minmax(50px, 100px);
+        grid-template-columns: 100px auto;
    }
    .play-clean > button {
        padding-left: 0px;
@@ -494,7 +505,7 @@ hr {
    .video-container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
-        grid-row-gap: 1rem;
+        grid-gap: 1rem;
        grid-column-gap: 1rem;
    }

--- a/youtube/static/settings.css
+++ b/youtube/static/settings.css
@@ -29,6 +29,8 @@ input[type="search"] {
    padding: 0.4rem 0.4rem;
    font-size: 15px;
    color: var(--search-text);
+    outline: none;
+    box-shadow: none;
 }

 input[type='search'] {
@@ -95,7 +97,6 @@ header {
        "dropdown-label"
        "dropdown-content";
    grid-area: dropdown;
-    z-index: 1;
 }
 .dropdown-label {
    grid-area: dropdown-label;
@@ -135,8 +136,10 @@ label[for=options-toggle-cbox] {
 }

 #options-toggle-cbox:checked ~ .dropdown-content {
-    display: inline-grid;
+    display: block;
    white-space: nowrap;
+    background: var(--secondary-background);
+    padding: 0.5rem 1rem;
 }
 /*- ----------- End Menu Mobile sin JS ------------- */

@@ -151,6 +154,11 @@ label[for=options-toggle-cbox] {
    padding: 1rem;
 }

+.settings-form > h2 {
+    border-bottom: 2px solid var(--border-bg);
+    padding-bottom: 0.5rem;
+}
+
 .settings-list {
    display: grid;
    grid-row-gap: 1rem;
@@ -161,7 +169,6 @@ label[for=options-toggle-cbox] {
 .setting-item {
    display: grid;
    grid-template-columns: auto auto;
-    background-color: var(--secondary-focus);
    align-items: center;
    padding: 5px;
 }
@@ -215,15 +222,18 @@ label[for=options-toggle-cbox] {
    .dropdown {
        display: grid;
        grid-gap: 1px;
-        grid-template-columns: minmax(50px, 100px);
+        grid-template-columns: 100px auto;
        grid-template-areas:
            "dropdown-label"
            "dropdown-content";
        grid-area: dropdown;
-        z-index: 1;
        position: absolute;
-        background: var(--background);
-        padding-right: 4rem;
+        z-index: 1;
+    }
+    #options-toggle-cbox:checked ~ .dropdown-content {
+        width: calc(100% + 100px);
+        max-height: 80vh;
+        overflow-y: scroll;
    }
    .main {
        display: grid;
--- a/youtube/static/subscription.css
+++ b/youtube/static/subscription.css
@@ -33,6 +33,8 @@ input[type="search"] {
    padding: 0.4rem 0.4rem;
    font-size: 15px;
    color: var(--search-text);
+    outline: none;
+    box-shadow: none;
 }

 input[type='search'] {
@@ -100,7 +102,6 @@ header {
        "dropdown-label"
        "dropdown-content";
    grid-area: dropdown;
-    z-index: 1;
 }
 .dropdown-label {
    grid-area: dropdown-label;
@@ -200,8 +201,10 @@ label[for=options-toggle-cbox] {
 }

 #options-toggle-cbox:checked ~ .dropdown-content {
-    display: inline-grid;
+    display: block;
    white-space: nowrap;
+    background: var(--secondary-background);
+    padding: 0.5rem 1rem;
 }
 /*- ----------- End Menu Mobile sin JS ------------- */

@@ -477,17 +480,20 @@ hr {
    .dropdown {
        display: grid;
        grid-gap: 1px;
-        grid-template-columns: minmax(50px, 100px);
+        grid-template-columns: 100px auto;
        grid-template-areas:
            "dropdown-label"
            "dropdown-content";
        grid-area: dropdown;
-        background: var(--background);
        padding-right: 4rem;
        z-index: 1;
        position: absolute;
    }
-
+    #options-toggle-cbox:checked ~ .dropdown-content {
+        width: calc(100% + 100px);
+        max-height: 80vh;
+        overflow-y: scroll;
+    }
    .sidebar-links {
        max-width: 50vw;
    }
@@ -501,7 +507,7 @@ hr {
        grid-area: playlist;
    }
    .play-clean {
-        grid-template-columns: minmax(50px, 100px);
+        grid-template-columns: 100px auto;
    }
    .play-clean > button {
        padding-left: 0px;
--- a/youtube/static/subscription_manager.css
+++ b/youtube/static/subscription_manager.css
@@ -33,6 +33,8 @@ input[type="search"] {
    padding: 0.4rem 0.4rem;
    font-size: 15px;
    color: var(--search-text);
+    outline: none;
+    box-shadow: none;
 }

 input[type='search'] {
@@ -100,7 +102,6 @@ header {
        "dropdown-label"
        "dropdown-content";
    grid-area: dropdown;
-    z-index: 1;
 }
 .dropdown-label {
    grid-area: dropdown-label;
@@ -120,66 +121,6 @@ header {
    background-color: var(--buttom-hover);
 }

-/* playlist */
-.playlist {
-    display: grid;
-    grid-gap: 4px;
-    grid-template-areas:
-        "play-box"
-        "play-hidden"
-        "play-add"
-        "play-clean";
-    grid-area: playlist;
-}
-.play-box {
-    grid-area: play-box;
-}
-
-.play-hidden {
-    grid-area: play-hidden;
-}
-
-.play-add {
-    grid-area: play-add;
-    cursor: pointer;
-
-    padding-bottom: 6px;
-    padding-left: .75em;
-    padding-right: .75em;
-    padding-top: 6px;
-    text-align: center;
-    white-space: nowrap;
-    background-color: var(--buttom);
-    border: 1px solid var(--button-border);
-    color: var(--buttom-text);
-    border-radius: 5px;
-}
-.play-add:hover {
-    background-color: var(--buttom-hover);
-}
-
-.play-clean {
-    display: grid;
-    grid-area: play-clean;
-}
-
-.play-clean > button {
-    padding-bottom: 6px;
-    padding-left: .75em;
-    padding-right: .75em;
-    padding-top: 6px;
-    text-align: center;
-    white-space: nowrap;
-    background-color: var(--buttom);
-    border: 1px solid var(--button-border);
-    color: var(--buttom-text);
-    border-radius: 5px;
-}
-.play-clean > button:hover {
-    background-color: var(--buttom-hover);
-}
-/* /playlist */
-
 /* ------------- Menu Mobile sin JS ---------------- */
 /* input hidden */
 .opt-box {
@@ -200,8 +141,10 @@ label[for=options-toggle-cbox] {
 }

 #options-toggle-cbox:checked ~ .dropdown-content {
-    display: inline-grid;
+    display: block;
    white-space: nowrap;
+    background: var(--secondary-background);
+    padding: 0.5rem 1rem;
 }
 /*- ----------- End Menu Mobile sin JS ------------- */

@@ -385,17 +328,19 @@ hr {
    .dropdown {
        display: grid;
        grid-gap: 1px;
-        grid-template-columns: minmax(50px, 100px);
+        grid-template-columns: 100px auto;
        grid-template-areas:
            "dropdown-label"
            "dropdown-content";
        grid-area: dropdown;
-        background: var(--background);
-        padding-right: 4rem;
-        z-index: 1;
        position: absolute;
+        z-index: 1;
+    }
+    #options-toggle-cbox:checked ~ .dropdown-content {
+        width: calc(100% + 100px);
+        max-height: 80vh;
+        overflow-y: scroll;
    }
-
    .import-export {
        max-width: 50vw;
    }
@@ -408,37 +353,6 @@ hr {
        align-items: center;
    }

-    /* playlist */
-    .playlist {
-        display: grid;
-        grid-gap: 1px;
-        grid-template-columns: 1fr 1.4fr 0.3fr 1.3fr;
-        grid-template-areas: ". play-box play-add play-clean";
-        grid-area: playlist;
-    }
-    .play-clean {
-        grid-template-columns: minmax(50px, 100px);
-    }
-    .play-clean > button {
-        padding-left: 0px;
-        padding-right: 0px;
-        padding-bottom: 6px;
-        padding-top: 6px;
-        text-align: center;
-        white-space: nowrap;
-        background-color: var(--buttom);
-        color: var(--buttom-text);
-        border-radius: 5px;
-        cursor: pointer;
-    }
-
-    .video-container {
-        display: grid;
-        grid-template-columns: repeat(4, 1fr);
-        grid-row-gap: 1rem;
-        grid-column-gap: 1rem;
-    }
-
    .footer {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
--- a/youtube/static/unsubscribe.css
+++ b/youtube/static/unsubscribe.css
@@ -0,0 +1,269 @@
+body {
+    display: grid;
+    grid-gap: 20px;
+    grid-template-areas:
+        "header"
+        "main"
+        "footer";
+    /* Fix height */
+    height: 100vh;
+    grid-template-rows: auto 1fr auto;
+    /* fix top and bottom */
+    margin-left: 1rem;
+    margin-right: 1rem;
+}
+
+img {
+    width: 100%;
+    height: auto;
+}
+
+a:link {
+    color: var(--link);
+}
+
+a:visited {
+    color: var(--link-visited);
+}
+
+input[type="text"],
+input[type="search"] {
+    background: var(--background);
+    border: 1px solid var(--button-border);
+    padding: 0.4rem 0.4rem;
+    font-size: 15px;
+    color: var(--search-text);
+    outline: none;
+    box-shadow: none;
+}
+
+input[type='search'] {
+    border-bottom: 1px solid var(--button-border);
+    border-top: 0px;
+    border-left: 0px;
+    border-right: 0px;
+    border-radius: 0px;
+}
+
+header {
+    display: grid;
+    grid-gap: 1px;
+    grid-template-areas:
+        "home"
+        "form"
+        "playlist";
+    grid-area: header;
+}
+
+.home {
+    grid-area: home;
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 1rem;
+    margin-top: 1rem;
+}
+
+.form {
+    display: grid;
+    grid-gap: 4px;
+    grid-template-areas:
+        "search-box"
+        "search-button"
+        "dropdown";
+    grid-area: form;
+}
+
+.search-box {
+    grid-area: search-box;
+}
+.search-button {
+    grid-area: search-button;
+
+    cursor: pointer;
+    padding-bottom: 6px;
+    padding-left: .75em;
+    padding-right: .75em;
+    padding-top: 6px;
+    text-align: center;
+    white-space: nowrap;
+    background-color: var(--buttom);
+    border: 1px solid var(--button-border);
+    color: var(--buttom-text);
+    border-radius: 5px;
+}
+.search-button:hover {
+    background-color: var(--buttom-hover);
+}
+
+.dropdown {
+    display: grid;
+    grid-gap: 1px;
+    grid-template-areas:
+        "dropdown-label"
+        "dropdown-content";
+    grid-area: dropdown;
+}
+.dropdown-label {
+    grid-area: dropdown-label;
+
+    padding-bottom: 6px;
+    padding-left: .75em;
+    padding-right: .75em;
+    padding-top: 6px;
+    text-align: center;
+    white-space: nowrap;
+    background-color: var(--buttom);
+    border: 1px solid var(--button-border);
+    color: var(--buttom-text);
+    border-radius: 5px;
+}
+.dropdown-label:hover {
+    background-color: var(--buttom-hover);
+}
+
+/* ------------- Menu Mobile sin JS ---------------- */
+/* input hidden */
+.opt-box {
+    display: none;
+}
+.dropdown-content {
+    display: none;
+    grid-area: dropdown-content;
+}
+label[for=options-toggle-cbox] {
+    cursor: pointer;
+    -webkit-touch-callout: none;
+      -webkit-user-select: none;
+       -khtml-user-select: none;
+         -moz-user-select: none;
+          -ms-user-select: none;
+              user-select: none;
+}
+
+#options-toggle-cbox:checked ~ .dropdown-content {
+    display: block;
+    white-space: nowrap;
+    background: var(--secondary-background);
+    padding: 0.5rem 1rem;
+}
+/*- ----------- End Menu Mobile sin JS ------------- */
+
+.main {
+    grid-area: main;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+/* fix hr when is children of grid */
+hr {
+    width: 100%;
+}
+
+.list-channel {
+    padding: 0;
+}
+
+.list-channel > li {
+    list-style: none;
+}
+/* pagination */
+.main .pagination-container {
+    display: grid;
+    justify-content: center;
+}
+
+.main .pagination-container .pagination-list {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.main .pagination-container .pagination-list .page-link {
+    border-style: none;
+    font-weight: bold;
+    text-align: center;
+    background: var(--secondary-focus);
+    text-decoration: none;
+    align-self: center;
+    padding: .5rem;
+    width: 1rem;
+}
+
+.main .pagination-container .pagination-list .page-link.is-current {
+    background: var(--secondary-background);
+}
+
+.footer {
+    grid-area: footer;
+    display: grid;
+    grid-template-columns: auto;
+    align-items: center;
+    justify-content: center;
+    margin: auto;
+    text-align: center;
+}
+
+.footer > p {
+    text-align: center;
+}
+
+@media (min-width: 480px) {
+    .item-video {
+        font-size: 0.85rem;
+    }
+    .info-box {
+        grid-gap: 2px;
+    }
+    .title {
+        font-size: 1rem;
+    }
+}
+
+@media (min-width: 992px) {
+    body {
+        display: grid;
+        grid-template-columns: 0.3fr 2fr 1fr 0.3fr;
+        grid-template-rows: auto 1fr auto;
+        grid-template-areas:
+            "header header header header"
+            "main   main   main   main"
+            "footer footer footer footer";
+    }
+    .form {
+        display: grid;
+        grid-gap: 1px;
+        grid-template-columns: 1fr 1.4fr 0.3fr 1.3fr;
+        grid-template-areas: ". search-box search-button dropdown";
+        grid-area: form;
+        position: relative;
+    }
+    .dropdown {
+        display: grid;
+        grid-gap: 1px;
+        grid-template-columns: 100px auto;
+        grid-template-areas:
+            "dropdown-label"
+            "dropdown-content";
+        grid-area: dropdown;
+        z-index: 1;
+        position: absolute;
+    }
+    #options-toggle-cbox:checked ~ .dropdown-content {
+        width: calc(100% + 100px);
+        max-height: 80vh;
+        overflow-y: scroll;
+    }
+
+    .footer {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        grid-column-gap: 2rem;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        margin-top: 1rem;
+        margin-bottom: 1rem;
+    }
+}
--- a/youtube/static/watch.css
+++ b/youtube/static/watch.css
@@ -54,6 +54,8 @@ input[type="search"] {
    padding: 0.4rem 0.4rem;
    font-size: 15px;
    color: var(--search-text);
+    outline: none;
+    box-shadow: none;
 }

 input[type='search'] {
@@ -121,7 +123,6 @@ header {
        "dropdown-label"
        "dropdown-content";
    grid-area: dropdown;
-    z-index: 1;
 }
 .dropdown-label {
    grid-area: dropdown-label;
@@ -219,9 +220,10 @@ label[for=options-toggle-cbox] {
 }

 #options-toggle-cbox:checked ~ .dropdown-content {
-    display: inline-grid;
+    display: block;
    white-space: nowrap;
-    padding-left: 1rem;
+    background: var(--secondary-background);
+    padding: 0.5rem 1rem;
 }
 /*- ----------- End Menu Mobile sin JS ------------- */

@@ -236,6 +238,9 @@ label[for=options-toggle-cbox] {
        "sc-video"
        "sc-info";
 }
+figure.sc-video {
+    margin: 1rem 0px;
+}
 .sc-video { grid-area: sc-video; }
 .sc-info {
    display: grid;
@@ -618,17 +623,18 @@ label[for=options-toggle-cbox] {
    .dropdown {
        display: grid;
        grid-gap: 1px;
-        grid-template-columns: minmax(50px, 120px);
+        grid-template-columns: 100px auto;
        grid-template-areas:
            "dropdown-label"
            "dropdown-content";
        grid-area: dropdown;
-
-        background: var(--background);
-        padding-right: 4rem;
-
-        z-index: 1;
        position: absolute;
+        z-index: 1;
+    }
+    #options-toggle-cbox:checked ~ .dropdown-content {
+        width: calc(100% + 100px);
+        max-height: 80vh;
+        overflow-y: scroll;
    }
    .playlist {
        display: grid;
@@ -638,7 +644,7 @@ label[for=options-toggle-cbox] {
        grid-area: playlist;
    }
    .play-clean {
-        grid-template-columns: minmax(50px, 120px);
+        grid-template-columns: 100px auto;
    }
    .play-clean > button {
        padding-bottom: 6px;
--- a/youtube/subscriptions.py
+++ b/youtube/subscriptions.py
@@ -752,7 +752,7 @@ def import_subscriptions():

        except (AssertionError, IndexError, defusedxml.ElementTree.ParseError) as e:
            return '400 Bad Request: Unable to read opml xml file, or the file is not the expected format', 400
-    elif mime_type == 'text/csv':
+    elif mime_type in ('text/csv', 'application/vnd.ms-excel'):
        content = file.read().decode('utf-8')
        reader = csv.reader(content.splitlines())
        channels = []
--- a/youtube/templates/base.html
+++ b/youtube/templates/base.html
@@ -1,14 +1,19 @@
+{% if settings.app_public %}
+    {% set app_url = settings.app_url|string %}
+{% else %}
+    {% set app_url = settings.app_url|string + ':' + settings.port_number|string %}
+{% endif %}
 <!DOCTYPE html>
 <html lang="en">
    <head>
-        <meta charset="UTF-8"/>
-        <meta name="viewport" content="width=device-width, initial-scale=1"/>
-        <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' 'unsafe-eval'; media-src 'self' blob: data: https://*.googlevideo.com;  {{ "img-src 'self' https://*.googleusercontent.com https://*.ggpht.com https://*.ytimg.com;" if not settings.proxy_images else "" }}">
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' 'unsafe-eval'; media-src 'self' blob: {{ app_url }}/* data: https://*.googlevideo.com;  {{ "img-src 'self' https://*.googleusercontent.com https://*.ggpht.com https://*.ytimg.com;" if not settings.proxy_images else "" }}">
        <title>{{ page_title }}</title>
-        <link title="YT Local" href="/youtube.com/opensearch.xml" rel="search" type="application/opensearchdescription+xml"/>
-        <link href="/youtube.com/static/favicon.ico" type="image/x-icon" rel="icon"/>
-        <link href="/youtube.com/static/normalize.css" rel="stylesheet"/>
-        <link href="{{ theme_path }}" rel="stylesheet"/>
+        <link title="YT Local" href="/youtube.com/opensearch.xml" rel="search" type="application/opensearchdescription+xml">
+        <link href="/youtube.com/static/favicon.ico" type="image/x-icon" rel="icon">
+        <link href="/youtube.com/static/normalize.css" rel="stylesheet">
+        <link href="{{ theme_path }}" rel="stylesheet">
        <link href="/youtube.com/shared.css" rel="stylesheet">
        {% block style %}
            {{ style }}
@@ -30,7 +35,7 @@
            </nav>
            <form class="form" id="site-search" action="/youtube.com/results">
                <input type="search" name="search_query" class="search-box" value="{{ search_box_value }}"
-                       {{ "autofocus" if request.path == "/" else "" }} required placeholder="Type to search...">
+                       {{ "autofocus" if (request.path in ("/", "/results") or error_message) else "" }} required placeholder="Type to search...">
                <button type="submit" value="Search" class="search-button">Search</button>
                <!-- options -->
                <div class="dropdown">
@@ -128,7 +133,7 @@

            {% if header_playlist_names is defined %}
                <form class="playlist" id="playlist-edit" action="/youtube.com/edit_playlist" method="post" target="_self">
-                    <input class="play-box" name="playlist_name" id="playlist-name-selection" list="playlist-options" type="search" placeholder="I added your playlist...">
+                    <input class="play-box" name="playlist_name" id="playlist-name-selection" list="playlist-options" type="search" placeholder="Add name of your playlist...">
                    <datalist class="play-hidden" id="playlist-options">
                        {% for playlist_name in header_playlist_names %}
                            <option value="{{ playlist_name }}">{{ playlist_name }}</option>
@@ -136,7 +141,7 @@
                    </datalist>
                    <button class="play-add" type="submit" id="playlist-add-button" name="action" value="add">+List</button>
                    <div class="play-clean">
-                        <button type="reset" id="item-selection-reset">Clear selection</button>
+                        <button type="reset" id="item-selection-reset">Clear</button>
                    </div>
                </form>
                <script src="/youtube.com/static/js/playlistadd.js"></script>
--- a/youtube/templates/channel.html
+++ b/youtube/templates/channel.html
@@ -7,15 +7,15 @@
 {% extends "base.html" %}
 {% import "common_elements.html" as common_elements %}
 {% block style %}
-    <link href="/youtube.com/static/message_box.css" rel="stylesheet"/>
-    <link href="/youtube.com/static/channel.css" rel="stylesheet"/>
+    <link href="/youtube.com/static/message_box.css" rel="stylesheet">
+    <link href="/youtube.com/static/channel.css" rel="stylesheet">
 {% endblock style %}

 {% block main %}

    <div class="author-container">
        <div class="author">
-            <img alt="{{ channel_name }}" src="{{ avatar }}"/>
+            <img alt="{{ channel_name }}" src="{{ avatar }}">
            <h2>{{ channel_name }}</h2>
        </div>
        <div class="summary">
--- a/youtube/templates/common_elements.html
+++ b/youtube/templates/common_elements.html
@@ -38,10 +38,21 @@
                <h4 class="title"><a href="{{ info['url'] }}" title="{{ info['title'] }}">{{ info['title'] }}</a></h4>

                {% if include_author %}
+                    {% set author_description = info['author'] %}
+                    {% set AUTHOR_DESC_LENGTH = 35 %}
+                    {% if author_description != None %}
+                        {% if author_description|length >= AUTHOR_DESC_LENGTH %}
+                            {% set author_description = author_description[:AUTHOR_DESC_LENGTH].split(' ')[:-1]|join(' ') %}
+                            {% if not author_description[-1] in ['.', '?', ':', '!'] %}
+                                {% set author_more = author_description + '…' %}
+                                {% set author_description = author_more|replace('"','') %}
+                            {% endif %}
+                        {% endif %}
+                    {% endif %}
                    {% if info.get('author_url') %}
-                        <address title="{{ info['author'] }}"><b><a href="{{ info['author_url'] }}">{{ info['author'] }}</a></b></address>
+                        <address title="{{ info['author'] }}"><b><a href="{{ info['author_url'] }}">{{ author_description }}</a></b></address>
                    {% else %}
-                        <address title="{{ info['author'] }}"><b>{{ info['author'] }}</b></address>
+                        <address title="{{ info['author'] }}"><b>{{ author_description }}</b></address>
                    {% endif %}
                {% endif %}

--- a/youtube/templates/embed.html
+++ b/youtube/templates/embed.html
@@ -1,14 +1,14 @@
 <!DOCTYPE html>
-<html lang="es">
+<html lang="en">
    <head>
-        <meta charset="UTF-8"/>
-        <meta name="viewport" content="width=device-width, initial-scale=1"/>
-        <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline'; media-src 'self' https://*.googlevideo.com; {{ "img-src 'self' https://*.googleusercontent.com https://*.ggpht.com https://*.ytimg.com;" if not settings.proxy_images else "" }}"/>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline'; media-src 'self' https://*.googlevideo.com; {{ "img-src 'self' https://*.googleusercontent.com https://*.ggpht.com https://*.ytimg.com;" if not settings.proxy_images else "" }}">
        <title>{{ title }}</title>
-        <link href="/youtube.com/static/favicon.ico" type="image/x-icon" rel="icon"/>
+        <link href="/youtube.com/static/favicon.ico" type="image/x-icon" rel="icon">
        {% if settings.use_video_player == 2 %}
            <!-- plyr -->
-            <link href="/youtube.com/static/modules/plyr/plyr.css" rel="stylesheet"/>
+            <link href="/youtube.com/static/modules/plyr/plyr.css" rel="stylesheet">
            <!--/ plyr -->
        {% endif %}
        <style>
@@ -55,10 +55,15 @@
             // @license-end
            </script>
        {% endif %}
+        <script>
+         // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
+         let storyboard_url = {{ storyboard_url | tojson }};
+         // @license-end
+        </script>
        {% if settings.use_video_player == 2 %}
            <!-- plyr -->
            <script src="/youtube.com/static/modules/plyr/plyr.min.js"
-                    integrity="sha512-0JWbXvmMLCb9fsWBlcStfEdREgVEpfT0lSgJ5JemQXZJUE5W33gnLmUqxyww7xT8ESgA+YtAtBbn8O3tgYnSQg=="
+                    integrity="sha512-l6ZzdXpfMHRfifqaR79wbYCEWjLDMI9DnROvb+oLkKq6d7MGroGpMbI7HFpicvmAH/2aQO+vJhewq8rhysrImw=="
                    crossorigin="anonymous"></script>
            <script src="/youtube.com/static/js/plyr-start.js"></script>
            <!-- /plyr -->
--- a/youtube/templates/home.html
+++ b/youtube/templates/home.html
@@ -1,7 +1,7 @@
 {% set page_title = title %}
 {% extends "base.html" %}
 {% block style %}
-    <link href="/youtube.com/static/home.css" rel="stylesheet"/>
+    <link href="/youtube.com/static/home.css" rel="stylesheet">
 {% endblock style %}
 {% block main %}
    <ul>
--- a/youtube/templates/licenses.html
+++ b/youtube/templates/licenses.html
@@ -1,7 +1,7 @@
 {% set page_title = title %}
 {% extends "base.html" %}
 {% block style %}
-    <link href="/youtube.com/static/license.css" rel="stylesheet"/>
+    <link href="/youtube.com/static/license.css" rel="stylesheet">
 {% endblock style %}
 {% block main %}
    <table id="jslicense-labels1" class="table">
--- a/youtube/templates/local_playlist.html
+++ b/youtube/templates/local_playlist.html
@@ -2,8 +2,8 @@
 {% extends "base.html" %}
 {% import "common_elements.html" as common_elements %}
 {% block style %}
-    <link href="/youtube.com/static/message_box.css" rel="stylesheet"/>
-    <link href="/youtube.com/static/local_playlist.css" rel="stylesheet"/>
+    <link href="/youtube.com/static/message_box.css" rel="stylesheet">
+    <link href="/youtube.com/static/local_playlist.css" rel="stylesheet">
 {% endblock style %}

 {% block main %}
@@ -22,7 +22,9 @@
        </div>
    </div>

+    <form id="playlist-remove" action="/youtube.com/edit_playlist" method="post" target="_self"></form>
    <div class="playlist-metadata" id="video-remove-container">
+        <button id="removePlayList" type="submit" name="action" value="remove_playlist" form="playlist-remove" formaction="">Remove playlist</button>
        <input type="hidden" name="playlist_page" value="{{ playlist_name }}" form="playlist-edit">
        <button class="play-action" type="submit" id="playlist-remove-button" name="action" value="remove" form="playlist-edit" formaction="">Remove from playlist</button>
    </div>
@@ -31,6 +33,14 @@
            {{ common_elements.item(video_info) }}
        {% endfor %}
    </div>
+    <script>
+     // @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3-or-Later
+     const deletePlayList = document.getElementById('removePlayList');
+     deletePlayList.addEventListener('click', (event) => {
+         return confirm('You are about to permanently delete {{ playlist_name }}\n\nOnce a playlist is permanently deleted, it cannot be recovered.')
+     });
+     // @license-end
+    </script>
    <footer class="pagination-container">
        <nav class="pagination-list">
            {{ common_elements.page_buttons(num_pages, '/https://www.youtube.com/playlists/' + playlist_name, parameters_dictionary) }}
--- a/youtube/templates/playlist.html
+++ b/youtube/templates/playlist.html
@@ -2,15 +2,15 @@
 {% extends "base.html" %}
 {% import "common_elements.html" as common_elements %}
 {% block style %}
-    <link href="/youtube.com/static/message_box.css" rel="stylesheet"/>
-    <link href="/youtube.com/static/playlist.css" rel="stylesheet"/>
+    <link href="/youtube.com/static/message_box.css" rel="stylesheet">
+    <link href="/youtube.com/static/playlist.css" rel="stylesheet">
 {% endblock style %}

 {% block main %}

    <div class="playlist-metadata">
        <div class="author">
-            <img alt="{{ title }}" src="{{ thumbnail }}"/>
+            <img alt="{{ title }}" src="{{ thumbnail }}">
            <h2>{{ title }}</h2>
        </div>
        <div class="summary">
--- a/youtube/templates/search.html
+++ b/youtube/templates/search.html
@@ -3,8 +3,8 @@
 {% extends "base.html" %}
 {% import "common_elements.html" as common_elements %}
 {% block style %}
-    <link href="/youtube.com/static/message_box.css" rel="stylesheet"/>
-    <link href="/youtube.com/static/search.css" rel="stylesheet"/>
+    <link href="/youtube.com/static/message_box.css" rel="stylesheet">
+    <link href="/youtube.com/static/search.css" rel="stylesheet">
 {% endblock style %}

 {% block main %}
--- a/youtube/templates/settings.html
+++ b/youtube/templates/settings.html
@@ -1,7 +1,7 @@
 {% set page_title = 'Settings' %}
 {% extends "base.html" %}
 {% block style %}
-    <link href="/youtube.com/static/settings.css" rel="stylesheet"/>
+    <link href="/youtube.com/static/settings.css" rel="stylesheet">
 {% endblock style %}

 {% block main %}
@@ -13,9 +13,9 @@
                    {% if not setting_info.get('hidden', false) %}
                        <li class="setting-item">
                            {% if 'label' is in(setting_info) %}
-                                <label for="{{ 'setting_' + setting_name }}">{{ setting_info['label'] }}</label>
+                                <label for="{{ 'setting_' + setting_name }}" {% if 'comment' is in(setting_info) %}title="{{ setting_info['comment'] }}" {% endif %}>{{ setting_info['label'] }}</label>
                            {% else %}
-                                <label for="{{ 'setting_' + setting_name }}">{{ setting_name.replace('_', ' ')|capitalize }}</label>
+                                <label for="{{ 'setting_' + setting_name }}" {% if 'comment' is in(setting_info) %}title="{{ setting_info['comment'] }}" {% endif %}>{{ setting_name.replace('_', ' ')|capitalize }}</label>
                            {% endif %}

                            {% if setting_info['type'].__name__ == 'bool' %}
--- a/youtube/templates/subscription_manager.html
+++ b/youtube/templates/subscription_manager.html
@@ -1,7 +1,7 @@
 {% set page_title = 'Subscription Manager' %}
 {% extends "base.html" %}
 {% block style %}
-    <link href="/youtube.com/static/subscription_manager.css" rel="stylesheet"/>
+    <link href="/youtube.com/static/subscription_manager.css" rel="stylesheet">
 {% endblock style %}


--- a/youtube/templates/subscriptions.html
+++ b/youtube/templates/subscriptions.html
@@ -7,8 +7,8 @@
 {% import "common_elements.html" as common_elements %}

 {% block style %}
-    <link href="/youtube.com/static/message_box.css" rel="stylesheet"/>
-    <link href="/youtube.com/static/subscription.css" rel="stylesheet"/>
+    <link href="/youtube.com/static/message_box.css" rel="stylesheet">
+    <link href="/youtube.com/static/subscription.css" rel="stylesheet">
 {% endblock style %}

 {% block main %}
--- a/youtube/templates/unsubscribe_verify.html
+++ b/youtube/templates/unsubscribe_verify.html
@@ -1,17 +1,19 @@
 {% set page_title = 'Unsubscribe?' %}
 {% extends "base.html" %}
+{% block style %}
+    <link href="/youtube.com/static/unsubscribe.css" rel="stylesheet"/>
+{% endblock style %}

 {% block main %}
-    <span>Are you sure you want to unsubscribe from these channels?</span>
+    <p>Are you sure you want to unsubscribe from these channels?</p>
    <form class="subscriptions-import-form" action="/youtube.com/subscription_manager" method="POST">
        {% for channel_id, channel_name in unsubscribe_list %}
            <input type="hidden" name="channel_ids" value="{{ channel_id }}">
        {% endfor %}
-
        <input type="hidden" name="action" value="unsubscribe">
        <input type="submit" value="Yes, unsubscribe">
    </form>
-    <ul>
+    <ul class="list-channel">
        {% for channel_id, channel_name in unsubscribe_list %}
            <li><a href="{{ '/https://www.youtube.com/channel/' + channel_id }}" title="{{ channel_name }}">{{ channel_name }}</a></li>
        {% endfor %}
--- a/youtube/templates/watch.html
+++ b/youtube/templates/watch.html
@@ -3,11 +3,11 @@
 {% import "common_elements.html" as common_elements %}
 {% import "comments.html" as comments with context %}
 {% block style %}
-    <link href="/youtube.com/static/message_box.css" rel="stylesheet"/>
-    <link href="/youtube.com/static/watch.css" rel="stylesheet"/>
+    <link href="/youtube.com/static/message_box.css" rel="stylesheet">
+    <link href="/youtube.com/static/watch.css" rel="stylesheet">
    {% if settings.use_video_player == 2 %}
        <!-- plyr -->
-        <link href="/youtube.com/static/modules/plyr/plyr.css" rel="stylesheet"/>
+        <link href="/youtube.com/static/modules/plyr/plyr.css" rel="stylesheet">
        <!--/ plyr -->
        <style>
         /* Prevent this div from blocking right-click menu for video
@@ -78,23 +78,26 @@
            <address class="v-uploaded">Uploaded by <a href="{{ uploader_channel_url }}">{{ uploader }}</a></address>
            <span class="v-views">{{ view_count }} views</span>
            <time class="v-published" datetime="{{ time_published_utc }}">Published on {{ time_published }}</time>
-            <span class="v-likes-dislikes">{{ like_count }} likes {{ dislike_count }} dislikes</span>
+            <span class="v-likes-dislikes">{{ like_count }} likes</span>

            <div class="external-player-controls">
                <input class="speed" id="speed-control" type="text" title="Video speed">
-                <select id="quality-select" autocomplete="off">
-                    {% for src in uni_sources %}
-                        <option value='{"type": "uni", "index": {{ loop.index0 }}}' {{ 'selected' if loop.index0 == uni_idx and not using_pair_sources else '' }} >{{ src['quality_string'] }}</option>
-                    {% endfor %}
-                    {% for src_pair in pair_sources %}
-                        <option value='{"type": "pair", "index": {{ loop.index0}}}' {{ 'selected' if loop.index0 == pair_idx and using_pair_sources else '' }} >{{ src_pair['quality_string'] }}</option>
-                    {% endfor %}
-                </select>
+                {% if settings.use_video_player != 2 %}
+                    <select id="quality-select" autocomplete="off">
+                        {% for src in uni_sources %}
+                            <option value='{"type": "uni", "index": {{ loop.index0 }}}' {{ 'selected' if loop.index0 == uni_idx and not using_pair_sources else '' }} >{{ src['quality_string'] }}</option>
+                        {% endfor %}
+                        {% for src_pair in pair_sources %}
+                            <option value='{"type": "pair", "index": {{ loop.index0}}}' {{ 'selected' if loop.index0 == pair_idx and using_pair_sources else '' }} >{{ src_pair['quality_string'] }}</option>
+                        {% endfor %}
+                    </select>
+                {% endif %}
            </div>
            <input class="v-checkbox" name="video_info_list" value="{{ video_info }}" form="playlist-edit" type="checkbox">

            <span class="v-direct-link"><a href="https://youtu.be/{{ video_id }}" rel="noopener noreferrer" target="_blank">Direct Link</a></span>

+            {% if settings.use_video_download != 0 %}
            <details class="v-download">
                <summary class="download-dropdown-label">Download</summary>
                <ul class="download-dropdown-content">
@@ -114,6 +117,9 @@
                    {% endfor %}
                </ul>
            </details>
+            {% else %}
+            <span class="v-download"></span>
+            {% endif %}
            <span class="v-description">{{ common_elements.text_runs(description)|escape|urlize|timestamps|safe }}</span>

            <div class="v-music-list">
@@ -161,7 +167,7 @@
                    <div class="playlist-header">
                        <a href="{{ playlist['url'] }}" title="{{ playlist['title'] }}"><h3>{{ playlist['title'] }}</h3></a>
                        <ul class="playlist-metadata">
-                            <li><label for="playlist-autoplay-toggle">Autoplay: </label><input type="checkbox" class="autoplay-toggle"></li>
+                            <li><label for="playlist-autoplay-toggle">Autoplay: </label><input id="playlist-autoplay-toggle" type="checkbox" class="autoplay-toggle"></li>
                            {% if playlist['current_index'] is none %}
                                <li>[Error!]/{{ playlist['video_count'] }}</li>
                            {% else %}
@@ -184,7 +190,7 @@
                    </nav>
                </div>
            {% elif settings.related_videos_mode != 0 %}
-                <div class="related-autoplay"><label for="related-autoplay-toggle">Autoplay: </label><input type="checkbox" class="autoplay-toggle"></div>
+                <div class="related-autoplay"><label for="related-autoplay-toggle">Autoplay: </label><input id="related-autoplay-toggle" type="checkbox" class="autoplay-toggle"></div>
            {% endif %}

            {% if subtitle_sources %}
@@ -237,12 +243,17 @@

    <script src="/youtube.com/static/js/av-merge.js"></script>
    <script src="/youtube.com/static/js/watch.js"></script>
+    <script>
+     // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
+     let storyboard_url = {{ storyboard_url | tojson }};
+     // @license-end
+    </script>
    <script src="/youtube.com/static/js/common.js"></script>
    <script src="/youtube.com/static/js/transcript-table.js"></script>
    {% if settings.use_video_player == 2 %}
        <!-- plyr -->
        <script src="/youtube.com/static/modules/plyr/plyr.min.js"
-                integrity="sha512-0JWbXvmMLCb9fsWBlcStfEdREgVEpfT0lSgJ5JemQXZJUE5W33gnLmUqxyww7xT8ESgA+YtAtBbn8O3tgYnSQg=="
+                integrity="sha512-l6ZzdXpfMHRfifqaR79wbYCEWjLDMI9DnROvb+oLkKq6d7MGroGpMbI7HFpicvmAH/2aQO+vJhewq8rhysrImw=="
                crossorigin="anonymous"></script>
        <script src="/youtube.com/static/js/plyr-start.js"></script>
        <!-- /plyr -->
--- a/youtube/util.py
+++ b/youtube/util.py
@@ -268,14 +268,15 @@ def fetch_url_response(url, headers=(), timeout=15, data=None,
        # According to the documentation for urlopen, a redirect counts as a
        # retry. So there are 3 redirects max by default.
        if max_redirects:
-            retries = urllib3.Retry(3+max_redirects, redirect=max_redirects)
+            retries = urllib3.Retry(3+max_redirects, redirect=max_redirects, raise_on_redirect=False)
        else:
-            retries = urllib3.Retry(3)
+            retries = urllib3.Retry(3, raise_on_redirect=False)
        pool = get_pool(use_tor and settings.route_tor)
        try:
            response = pool.request(method, url, headers=headers, body=data,
                                    timeout=timeout, preload_content=False,
                                    decode_content=False, retries=retries)
+            response.retries = retries
        except urllib3.exceptions.MaxRetryError as e:
            exception_cause = e.__context__.__context__
            if (isinstance(exception_cause, socks.ProxyConnectionError)
@@ -328,11 +329,22 @@ def fetch_url(url, headers=(), timeout=15, report_text=None, data=None,
            with open(os.path.join(save_dir, debug_name), 'wb') as f:
                f.write(content)

-        if response.status == 429:
+        if response.status == 429 or (
+            response.status == 302 and (response.getheader('Location') == url
+                or response.getheader('Location').startswith(
+                       'https://www.google.com/sorry/index'
+                   )
+            )
+        ):
+            print(response.status, response.reason, response.getheaders())
            ip = re.search(
                br'IP address: ((?:[\da-f]*:)+[\da-f]+|(?:\d+\.)+\d+)',
                content)
            ip = ip.group(1).decode('ascii') if ip else None
+            if not ip:
+                ip = re.search(r'IP=((?:\d+\.)+\d+)',
+                               response.getheader('Set-Cookie') or '')
+                ip = ip.group(1) if ip else None

            # don't get new identity if we're not using Tor
            if not use_tor:
--- a/youtube/version.py
+++ b/youtube/version.py
@@ -1,3 +1,3 @@
 from __future__ import unicode_literals

-__version__ = '0.1.1'
+__version__ = '0.2.3'
--- a/youtube/watch.py
+++ b/youtube/watch.py
@@ -15,6 +15,9 @@ import traceback
 import urllib
 import re
 import urllib3.exceptions
+from urllib.parse import parse_qs, urlencode
+from types import SimpleNamespace
+from math import ceil

 try:
    with open(os.path.join(settings.data_dir, 'decrypt_function_cache.json'), 'r') as f:
@@ -173,7 +176,7 @@ def make_caption_src(info, lang, auto=False, trans_lang=None):
    if trans_lang:
        label += ' -> ' + trans_lang
    return {
-        'url': '/' + yt_data_extract.get_caption_url(info, lang, 'vtt', auto, trans_lang),
+        'url': util.prefix_url(yt_data_extract.get_caption_url(info, lang, 'vtt', auto, trans_lang)),
        'label': label,
        'srclang': trans_lang[0:2] if trans_lang else lang[0:2],
        'on': False,
@@ -217,6 +220,8 @@ def get_subtitle_sources(info):
    pref_lang (Automatic)
    pref_lang (Manual)'''
    sources = []
+    if not yt_data_extract.captions_available(info):
+        return []
    pref_lang = settings.subtitles_language
    native_video_lang = None
    if info['automatic_caption_languages']:
@@ -354,45 +359,46 @@ def extract_info(video_id, use_invidious, playlist_id=None, index=None):
    watch_page = watch_page.decode('utf-8')
    info = yt_data_extract.extract_watch_info_from_html(watch_page)

-    # request player urls if it's missing
-    # see https://github.com/user234683/youtube-local/issues/22#issuecomment-706395160
+    context = {
+        'client': {
+            'clientName': 'ANDROID',
+            'clientVersion': '16.20',
+            'gl': 'US',
+            'hl': 'en',
+        },
+        # https://github.com/yt-dlp/yt-dlp/pull/575#issuecomment-887739287
+        'thirdParty': {
+            'embedUrl': 'https://google.com',  # Can be any valid URL
+        }
+    }
    if info['age_restricted'] or info['player_urls_missing']:
        if info['age_restricted']:
            print('Age restricted video. Fetching /youtubei/v1/player page')
        else:
            print('Missing player. Fetching /youtubei/v1/player page')
+        context['client']['clientScreen'] = 'EMBED'
+    else:
+        print('Fetching /youtubei/v1/player page')

-        # https://github.com/yt-dlp/yt-dlp/issues/574#issuecomment-887171136
-        # ANDROID is used instead because its urls don't require decryption
-        # The URLs returned with WEB for videos requiring decryption
-        # couldn't be decrypted with the base.js from the web page for some
-        # reason
-        url ='https://youtubei.googleapis.com/youtubei/v1/player'
-        url += '?key=AIzaSyAO_FJ2SlqU8Q4STEHLGCilw_Y9_11qcW8'
-        data = {
-            'videoId': video_id,
-            'context': {
-                'client': {
-                    'clientName': 'ANDROID',
-                    'clientVersion': '16.20',
-                    'clientScreen': 'EMBED',
-                    'gl': 'US',
-                    'hl': 'en',
-                },
-                # https://github.com/yt-dlp/yt-dlp/pull/575#issuecomment-887739287
-                'thirdParty': {
-                    'embedUrl': 'https://google.com',  # Can be any valid URL
-                }
-            }
-        }
-        data = json.dumps(data)
-        content_header = (('Content-Type', 'application/json'),)
-        player_response = util.fetch_url(
-            url, data=data, headers=util.mobile_ua + content_header,
-            debug_name='youtubei_player',
-            report_text='Fetched youtubei player page').decode('utf-8')
-        yt_data_extract.update_with_age_restricted_info(info,
-                                                            player_response)
+    # https://github.com/yt-dlp/yt-dlp/issues/574#issuecomment-887171136
+    # ANDROID is used instead because its urls don't require decryption
+    # The URLs returned with WEB for videos requiring decryption
+    # couldn't be decrypted with the base.js from the web page for some
+    # reason
+    url ='https://youtubei.googleapis.com/youtubei/v1/player'
+    url += '?key=AIzaSyAO_FJ2SlqU8Q4STEHLGCilw_Y9_11qcW8'
+    data = {
+        'videoId': video_id,
+        'context': context,
+    }
+    data = json.dumps(data)
+    content_header = (('Content-Type', 'application/json'),)
+    player_response = util.fetch_url(
+        url, data=data, headers=util.mobile_ua + content_header,
+        debug_name='youtubei_player',
+        report_text='Fetched youtubei player page').decode('utf-8')
+
+    yt_data_extract.update_with_age_restricted_info(info, player_response)

    # signature decryption
    decryption_error = decrypt_signatures(info, video_id)
@@ -506,6 +512,65 @@ def format_bytes(bytes):
    return '%.2f%s' % (converted, suffix)


+@yt_app.route('/ytl-api/storyboard.vtt')
+def get_storyboard_vtt():
+    """
+    See:
+        https://github.com/iv-org/invidious/blob/9a8b81fcbe49ff8d88f197b7f731d6bf79fc8087/src/invidious.cr#L3603
+        https://github.com/iv-org/invidious/blob/3bb7fbb2f119790ee6675076b31cd990f75f64bb/src/invidious/videos.cr#L623
+    """
+
+    spec_url = request.args.get('spec_url')
+    url, *boards = spec_url.split('|')
+    base_url, q = url.split('?')
+    q = parse_qs(q)  # for url query
+
+    storyboard = None
+    wanted_height = 90
+
+    for i, board in enumerate(boards):
+        *t, _, sigh = board.split("#")
+        width, height, count, width_cnt, height_cnt, interval = map(int, t)
+        if height != wanted_height: continue
+        q['sigh'] = [sigh]
+        url = f"{base_url}?{urlencode(q, doseq=True)}"
+        storyboard = SimpleNamespace(
+            url               = url.replace("$L", str(i)).replace("$N", "M$M"),
+            width             = width,
+            height            = height,
+            interval          = interval,
+            width_cnt         = width_cnt,
+            height_cnt        = height_cnt,
+            storyboard_count  = ceil(count / (width_cnt * height_cnt))
+        )
+
+    if not storyboard:
+        flask.abort(404)
+
+    def to_ts(ms):
+        s, ms = divmod(ms, 1000)
+        h, s = divmod(s, 3600)
+        m, s = divmod(s, 60)
+        return f"{h:02}:{m:02}:{s:02}.{ms:03}"
+
+    r = "WEBVTT"  # result
+    ts = 0  # current timestamp
+
+    for i in range(storyboard.storyboard_count):
+        url = '/' + storyboard.url.replace("$M", str(i))
+        interval = storyboard.interval
+        w, h = storyboard.width, storyboard.height
+        w_cnt, h_cnt = storyboard.width_cnt, storyboard.height_cnt
+
+        for j in range(h_cnt):
+            for k in range(w_cnt):
+                r += f"{to_ts(ts)} --> {to_ts(ts+interval)}\n"
+                r += f"{url}#xywh={w * k},{h * j},{w},{h}\n\n"
+                ts += interval
+
+    return flask.Response(r, mimetype='text/vtt')
+
+
 time_table = {'h': 3600, 'm': 60, 's': 1}


@@ -693,7 +758,6 @@ def get_watch_page(video_id=None):
        time_published_utc=time_utc_isoformat(info['time_published']),
        view_count    = (lambda x: '{:,}'.format(x) if x is not None else "")(info.get("view_count", None)),
        like_count    = (lambda x: '{:,}'.format(x) if x is not None else "")(info.get("like_count", None)),
-        dislike_count = (lambda x: '{:,}'.format(x) if x is not None else "")(info.get("dislike_count", None)),
        download_formats        = download_formats,
        other_downloads         = other_downloads,
        video_info              = json.dumps(video_info),
@@ -726,6 +790,9 @@ def get_watch_page(video_id=None):
        invidious_reload_button = info['invidious_reload_button'],
        video_url = util.URL_ORIGIN + '/watch?v=' + video_id,
        video_id = video_id,
+        storyboard_url = (util.URL_ORIGIN + '/ytl-api/storyboard.vtt?' +
+            urlencode([('spec_url', info['storyboard_spec_url'])])
+            if info['storyboard_spec_url'] else None),

        js_data = {
            'video_id': info['id'],
--- a/youtube/yt_data_extract/init.py
+++ b/youtube/yt_data_extract/init.py
@@ -10,4 +10,4 @@ from .watch_extraction import (extract_watch_info, get_caption_url,
    update_with_age_restricted_info, requires_decryption,
    extract_decryption_function, decrypt_signatures, _formats,
    update_format_with_type_info, extract_hls_formats,
-    extract_watch_info_from_html)
+    extract_watch_info_from_html, captions_available)
--- a/youtube/yt_data_extract/watch_extraction.py
+++ b/youtube/yt_data_extract/watch_extraction.py
@@ -111,10 +111,14 @@ _formats = {
    '_rtmp': {'protocol': 'rtmp'},

    # av01 video only formats sometimes served with "unknown" codecs
-    '394': {'vcodec': 'av01.0.05M.08'},
-    '395': {'vcodec': 'av01.0.05M.08'},
-    '396': {'vcodec': 'av01.0.05M.08'},
-    '397': {'vcodec': 'av01.0.05M.08'},
+    '394': {'ext': 'mp4', 'height': 144, 'format_note': 'DASH video', 'vcodec': 'av01.0.00M.08'},
+    '395': {'ext': 'mp4', 'height': 240, 'format_note': 'DASH video', 'vcodec': 'av01.0.00M.08'},
+    '396': {'ext': 'mp4', 'height': 360, 'format_note': 'DASH video', 'vcodec': 'av01.0.01M.08'},
+    '397': {'ext': 'mp4', 'height': 480, 'format_note': 'DASH video', 'vcodec': 'av01.0.04M.08'},
+    '398': {'ext': 'mp4', 'height': 720, 'format_note': 'DASH video', 'vcodec': 'av01.0.05M.08'},
+    '399': {'ext': 'mp4', 'height': 1080, 'format_note': 'DASH video', 'vcodec': 'av01.0.08M.08'},
+    '400': {'ext': 'mp4', 'height': 1440, 'format_note': 'DASH video', 'vcodec': 'av01.0.12M.08'},
+    '401': {'ext': 'mp4', 'height': 2160, 'format_note': 'DASH video', 'vcodec': 'av01.0.12M.08'},
 }


@@ -135,7 +139,6 @@ def _extract_from_video_information_renderer(renderer_content):
 def _extract_likes_dislikes(renderer_content):
    info = {
        'like_count': None,
-        'dislike_count': None,
    }
    for button in renderer_content.get('buttons', ()):
        button_renderer = button.get('slimMetadataToggleButtonRenderer', {})
@@ -157,8 +160,6 @@ def _extract_likes_dislikes(renderer_content):

        if 'isLike' in button_renderer:
            info['like_count'] = count
-        elif 'isDislike' in button_renderer:
-            info['dislike_count'] = count
    return info

 def _extract_from_owner_renderer(renderer_content):
@@ -353,10 +354,8 @@ def _extract_watch_info_desktop(top_level):
    likes_dislikes = deep_get(video_info, 'sentimentBar', 'sentimentBarRenderer', 'tooltip', default='').split('/')
    if len(likes_dislikes) == 2:
        info['like_count'] = extract_int(likes_dislikes[0])
-        info['dislike_count'] = extract_int(likes_dislikes[1])
    else:
        info['like_count'] = None
-        info['dislike_count'] = None

    info['title'] = extract_str(video_info.get('title', None))
    info['author'] = extract_str(deep_get(video_info, 'owner', 'videoOwnerRenderer', 'title'))
@@ -562,6 +561,25 @@ def extract_watch_info(polymer_json):
    info['translation_languages'] = []
    captions_info = player_response.get('captions', {})
    info['_captions_base_url'] = normalize_url(deep_get(captions_info, 'playerCaptionsRenderer', 'baseUrl'))
+    # Sometimes the above playerCaptionsRender is randomly missing
+    # Extract base_url from one of the captions by removing lang specifiers
+    if not info['_captions_base_url']:
+        base_url = normalize_url(deep_get(
+            captions_info,
+            'playerCaptionsTracklistRenderer',
+            'captionTracks',
+            0,
+            'baseUrl'
+        ))
+        if base_url:
+            url_parts = urllib.parse.urlparse(base_url)
+            qs = urllib.parse.parse_qs(url_parts.query)
+            for key in ('tlang', 'lang', 'name', 'kind', 'fmt'):
+                if key in qs:
+                    del qs[key]
+            base_url = urllib.parse.urlunparse(url_parts._replace(
+                query=urllib.parse.urlencode(qs, doseq=True)))
+            info['_captions_base_url'] = base_url
    for caption_track in deep_get(captions_info, 'playerCaptionsTracklistRenderer', 'captionTracks', default=()):
        lang_code = caption_track.get('languageCode')
        if not lang_code:
@@ -651,6 +669,8 @@ def extract_watch_info(polymer_json):

    # other stuff
    info['author_url'] = 'https://www.youtube.com/channel/' + info['author_id'] if info['author_id'] else None
+    info['storyboard_spec_url'] = deep_get(player_response, 'storyboards', 'playerStoryboardSpecRenderer', 'spec')
+
    return info

 single_char_codes = {
@@ -730,10 +750,15 @@ def extract_watch_info_from_html(watch_html):
    return extract_watch_info(fake_polymer_json)


+def captions_available(info):
+    return bool(info['_captions_base_url'])
+

 def get_caption_url(info, language, format, automatic=False, translation_language=None):
    '''Gets the url for captions with the given language and format. If automatic is True, get the automatic captions for that language. If translation_language is given, translate the captions from `language` to `translation_language`. If automatic is true and translation_language is given, the automatic captions will be translated.'''
    url = info['_captions_base_url']
+    if not url:
+        return None
    url += '&lang=' + language
    url += '&fmt=' + format
    if automatic:
Author	SHA1	Message	Date
Jesús	5764586646	version 0.2.3	2022-10-06 04:21:47 +08:00
Jesús	aae1aec6ad	README.md: update	2022-10-06 03:59:24 +08:00
Jesús	91bdaa716c	Remove M4A downloads feature of Planned features due RIAA issue	2022-10-06 03:52:34 +08:00
Jesús	9a3a3c9c59	README.md: fix typo	2022-10-05 21:56:55 +08:00
Jesús	a736412fbd	README.md: update	2022-10-05 21:54:56 +08:00
Jesús	85860087b6	Fix missing id into input tag	2022-10-05 10:30:17 +08:00
Jesús	a19da4050c	Fix self closing tag w3c issues	2022-10-05 10:29:23 +08:00
Jesús	c524eb16e5	Disable download by RIAA issues Ref: https://torrentfreak.com/riaa-thwarts-youts-attempt-to-declare-youtube-ripping-legal-221002/ Archive: https://archive.ph/OZQbN	2022-10-05 10:14:06 +08:00
Jesus	6ba3959e40	version 0.2.2	2022-08-07 05:57:41 +08:00
zrose584	7d767ff9ce	copyTextToClipboard: support fullscreen	2022-08-07 02:52:39 +08:00
zrose584	65e7d85549	onKeyDown: ignore plyr CustomEvents	2022-08-07 02:50:05 +08:00
Jesus	599a09d7fc	Set exact versions of packages from pip	2022-08-07 01:44:35 +08:00
Jesús	6c29802eb7	fix figure tag of sc-video	2022-05-31 04:12:16 +08:00
Jesús	6225dd085e	set badge	2022-05-31 02:07:37 +08:00
Jesús	0cbdc78c3c	Merge branch 'master' of ssh://c.hgit.ga/software/yt-local into master	2022-05-30 23:44:16 +08:00
Jesús	a1dd283832	Revert update plyr because iceweasel not support engine v8+ More info: https://repo.palemoon.org/MoonchildProductions/UXP/issues/1675	2022-05-30 23:43:32 +08:00
Jesús	ed6c3ae036	Fevert update plyr because iceweasel not support engine v8+ More info: https://repo.palemoon.org/MoonchildProductions/UXP/issues/1675	2022-05-30 23:38:11 +08:00
Jesús	1fbc0cdd46	Fix preview_thumbnails use 'deep_get' for storyboard	2022-05-30 22:45:08 +08:00
James Taylor	263469cd30	Filter out noisy video routing requests in console Signed-off-by: Jesús <heckyel@hyperbola.info>	2022-03-30 00:45:45 +08:00
James Taylor	79fd2966cd	Extract captions base_url using different method when missing The base url will be randomly missing. Take one of the listed captions urls which already has the &lang and automatic specifiers. Then remove these specifiers. Signed-off-by: Jesús <heckyel@hyperbola.info>	2022-03-30 00:41:30 +08:00
James Taylor	dcd4b0f0ae	Fix exception when _captions_base_url is not present Signed-off-by: Jesús <heckyel@hyperbola.info>	2022-03-30 00:37:43 +08:00
Jesús	e8cbc5074a	[embed]: Fix undefined storyboard_url and add license	2022-02-21 15:52:27 -05:00
James Taylor	4768835766	Fix failing exit node retry test The urllib3 retries.history wasn't working anyways Signed-off-by: Jesús <heckyel@hyperbola.info>	2022-02-16 11:46:15 -05:00
James Taylor	3f4db4199c	Fix error during exit blockage detection when Set-Cookie missing Signed-off-by: Jesús <heckyel@hyperbola.info>	2022-02-15 21:32:00 -05:00
James Taylor	5260716d14	Fix MaxRetryErrors due to Tor exit node blockage Sometimes YouTube redirects to a google.com/sorry page, seemingly setting up redirect loops. Other times the url redirects to itself. Signed-off-by: Jesús <heckyel@hyperbola.info>	2022-02-15 21:30:47 -05:00
Jesús	32d30bde9c	update plyr config	2022-02-11 12:03:01 -05:00
Jesús	cd876f65e3	Update plyr module	2022-02-11 12:01:22 -05:00
Jesús	a2723d76cd	README.md: update public instance	2022-02-06 15:44:17 -05:00
Jesús	fef9c778ed	check variable author_description	2022-01-31 22:36:54 -05:00
Jesús	6188ba81a0	Fix author in playlist	2022-01-31 22:12:55 -05:00
Jesús	a465805cb9	Fix name settings in hotkeys	2022-01-29 16:52:18 -05:00
Jesús	12c0daa58a	hotkeys.js: fix 'f'	2022-01-29 11:06:47 -05:00
zrose584	0f58f1d114	also autofocus search for /results or on error Signed-off-by: Jesús <heckyel@hyperbola.info>	2022-01-29 10:57:31 -05:00
Jesús	f46035c6b6	README.md: minor fix	2022-01-20 12:29:56 -05:00
Jesús	3b57335e4c	[Design]: fix author_description	2022-01-17 23:37:45 -05:00
zrose584	a5ef801c07	handle missing storyboard Signed-off-by: Jesús <heckyel@hyperbola.info>	2022-01-17 09:01:09 -05:00
zrose584	63c92e0c4e	add preview thumbnails Signed-off-by: Jesús <heckyel@hyperbola.info>	2022-01-09 16:39:50 -05:00
Andreas	693b4ac98b	Add application/vnd.ms-excel as CSV mime type Windows sends application/vnd.ms-excel as MIME Type instead of text/csv Signed-off-by: Jesús <heckyel@hyperbola.info>	2021-12-31 18:21:37 -05:00
Jesús	90b080b7bb	[FrontEnd]: fix placeholder in play-box	2021-12-31 18:19:07 -05:00
Jesús	90338c25c6	[FrontEnd]: fix dropdown design	2021-12-31 18:15:59 -05:00
Jesús	f572bb62aa	[FrontEnd]: remove unused styles	2021-12-31 17:39:59 -05:00
Jesús	f2fc1cf564	[FrontEnd]: fix missing unsubscribe style	2021-12-31 17:35:48 -05:00
Jesús	7b7e69a8b1	[FrontEnd]: light_theme, change link-visited color	2021-12-27 16:20:58 -05:00
Jesús	217541bd9c	[FrontEnd]: fix dropdown design	2021-12-27 16:13:35 -05:00
Jesús	b21b2a6009	fix: falied load resource: net:: ERR_FILE_NOT_FOUND	2021-12-27 13:23:18 -05:00
Jesús	a1d3cc5045	update formats	2021-12-27 13:05:54 -05:00
Jesús	92067638b1	Disable dislikes Ref: https://blog.youtube/news-and-events/update-to-youtube/	2021-12-26 13:29:55 -05:00
Jesús	99b70497f2	[.gitignore]: update	2021-12-26 13:14:01 -05:00
Jesús	4405742b72	Delete unused file	2021-12-26 12:47:36 -05:00
Jesús	f3d3c4c0a4	Disable 'Prefer integrated sources' for default	2021-12-26 12:44:46 -05:00
Jesús	5006149b59	change by default format, priority FLOSS formats	2021-12-26 12:42:43 -05:00
Jesús	bcbd83fa30	[FrontEnd]: improved settings design	2021-12-26 12:27:24 -05:00
Jesús	0820909b7e	[frontend]: fix design in playlist	2021-12-18 23:12:08 -05:00
Jesús	519b7e64e7	[frontend]: fix reporInfo in prototype	2021-12-16 18:19:15 -05:00
Jesús	5d753351c5	[frontend]: relax find segment	2021-12-16 18:10:00 -05:00
Jesús	df7e41b61a	[frontend]: fix global scope, change var to let	2021-12-16 17:46:16 -05:00
Jesús	dd498e63d9	[Design]: short Clear text	2021-12-03 19:36:08 -05:00
Jesús	8e5b6dc831	[Design]: add 0.5rem for grid-gap (col and row)	2021-12-03 19:35:03 -05:00
Jesús	66b2b20007	update public instance	2021-11-29 14:52:50 -05:00
James Taylor	2e5a1133e3	Work around video throttling using android user-agent Temporary fix for #95 Signed-off-by: Jesús <heckyel@hyperbola.info>	2021-10-18 18:56:53 -05:00
Jesús	ec5e995262	README.md: about public instances	2021-09-28 23:34:45 -05:00
Jesús	2fe0b5e539	Improve input styles	2021-09-22 12:56:59 -05:00
Jesús	896655ddbd	version 0.2.1	2021-09-14 16:36:00 -05:00
Jesús	f3469b1ff4	Revert "Usage hqdefault thumbnail in related videos" This reverts commit `a0c3ca0159`.	2021-09-14 16:35:04 -05:00
Jesús	c5dce849f1	version 0.2.0	2021-09-14 16:02:40 -05:00
Jesús	a0c3ca0159	Usage hqdefault thumbnail in related videos	2021-09-14 15:58:13 -05:00
Jesús	d116351aed	README.md: update	2021-09-14 15:54:16 -05:00
Jesús	8b745907cc	improve quality-select	2021-09-14 14:49:14 -05:00
Jesús	ecb8d406f8	change tor port and app port	2021-09-14 13:07:04 -05:00
Jesús	d2d6e4e56d	fix name app	2021-09-14 12:57:31 -05:00
Jesús	82e82b1cb7	change path config	2021-09-14 12:51:05 -05:00
Jesús	f129cfcc9a	playlist: add license to javascript code	2021-09-10 21:12:12 -05:00
Mageas	66f396ce32	Add a button to remove playlist Signed-off-by: Jesús <heckyel@hyperbola.info>	2021-09-10 17:58:21 -05:00