aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--youtube/local_playlist.py1
-rw-r--r--youtube/static/comments.css3
-rw-r--r--youtube/static/dark_theme.css1
-rw-r--r--youtube/static/gray_theme.css1
-rw-r--r--youtube/static/light_theme.css1
-rw-r--r--youtube/static/shared.css15
-rw-r--r--youtube/subscriptions.py3
-rw-r--r--youtube/templates/base.html100
-rw-r--r--youtube/templates/local_playlists_list.html17
-rw-r--r--youtube/templates/subscription_manager.html2
-rw-r--r--youtube/templates/watch.html2
11 files changed, 132 insertions, 14 deletions
diff --git a/youtube/local_playlist.py b/youtube/local_playlist.py
index 0b47c72..3a058b3 100644
--- a/youtube/local_playlist.py
+++ b/youtube/local_playlist.py
@@ -110,6 +110,7 @@ def get_local_playlist_page(playlist_name=None):
offset = 50*(page - 1)
videos, num_videos = get_local_playlist_videos(playlist_name, offset=offset, amount=50)
return flask.render_template('local_playlist.html',
+ header_playlist_names = get_playlist_names(),
playlist_name = playlist_name,
videos = videos,
num_pages = math.ceil(num_videos/50),
diff --git a/youtube/static/comments.css b/youtube/static/comments.css
index 85f0cc1..c5f03c3 100644
--- a/youtube/static/comments.css
+++ b/youtube/static/comments.css
@@ -81,6 +81,9 @@
height:32px;
width:32px;
}
+ .comment .author-avatar-img{
+ max-height: 100%;
+ }
.comment address{
grid-column: 2;
diff --git a/youtube/static/dark_theme.css b/youtube/static/dark_theme.css
index 7389aa5..221dc95 100644
--- a/youtube/static/dark_theme.css
+++ b/youtube/static/dark_theme.css
@@ -2,6 +2,7 @@ body{
--interface-color: #333333;
--text-color: #cccccc;
--background-color: #000000;
+ --video-background-color: #080808;
}
a:link {
diff --git a/youtube/static/gray_theme.css b/youtube/static/gray_theme.css
index a5f3b23..ca699c7 100644
--- a/youtube/static/gray_theme.css
+++ b/youtube/static/gray_theme.css
@@ -2,6 +2,7 @@ body{
--interface-color: #dadada;
--text-color: #222222;
--background-color: #bcbcbc;
+ --video-background-color: #dadada;
}
.comment .permalink{
diff --git a/youtube/static/light_theme.css b/youtube/static/light_theme.css
index 9e37449..e4d7eb3 100644
--- a/youtube/static/light_theme.css
+++ b/youtube/static/light_theme.css
@@ -2,6 +2,7 @@ body{
--interface-color: #ffffff;
--text-color: #222222;
--background-color: #f8f8f8;
+ --video-background-color: #ffffff;
}
.comment .permalink{
diff --git a/youtube/static/shared.css b/youtube/static/shared.css
index 72d290a..2393bef 100644
--- a/youtube/static/shared.css
+++ b/youtube/static/shared.css
@@ -107,6 +107,18 @@ body{
flex-grow: 1;
padding-bottom: 20px;
}
+ #message-box{
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ border-style: outset;
+ padding: 20px;
+ background-color: var(--interface-color);
+ opacity: 0;
+ transition-property: opacity;
+ transition-duration: 0.3s;
+ }
.dropdown{
@@ -225,7 +237,8 @@ body{
.item .title{
min-width: 0;
- max-height:3.6em;
+ line-height:1.25em;
+ max-height:3.75em;
overflow:hidden;
color: var(--text-color);
diff --git a/youtube/subscriptions.py b/youtube/subscriptions.py
index dd058b3..18436e2 100644
--- a/youtube/subscriptions.py
+++ b/youtube/subscriptions.py
@@ -1,4 +1,4 @@
-from youtube import util, yt_data_extract, channel
+from youtube import util, yt_data_extract, channel, local_playlist
from youtube import yt_app
import settings
@@ -781,6 +781,7 @@ def get_subscriptions_page():
})
return flask.render_template('subscriptions.html',
+ header_playlist_names = local_playlist.get_playlist_names(),
videos = videos,
num_pages = math.ceil(number_of_videos_in_db/60),
parameters_dictionary = request.args,
diff --git a/youtube/templates/base.html b/youtube/templates/base.html
index 9127efa..554e116 100644
--- a/youtube/templates/base.html
+++ b/youtube/templates/base.html
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<title>{{ page_title }}</title>
- <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline'; script-src 'none'; media-src 'self' https://*.googlevideo.com">
+ <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline'; media-src 'self' https://*.googlevideo.com">
<link href="{{ theme_path }}" type="text/css" rel="stylesheet">
<link href="/youtube.com/static/shared.css" type="text/css" rel="stylesheet">
<link href="/youtube.com/static/comments.css" type="text/css" rel="stylesheet">
@@ -93,16 +93,94 @@
</div>
</form>
- <form id="playlist-edit" action="/youtube.com/edit_playlist" method="post" target="_self">
- <input name="playlist_name" id="playlist-name-selection" list="playlist-options" type="text">
- <datalist id="playlist-options">
- {% for playlist_name in header_playlist_names %}
- <option value="{{ playlist_name }}">{{ playlist_name }}</option>
- {% endfor %}
- </datalist>
- <button type="submit" id="playlist-add-button" name="action" value="add">Add to playlist</button>
- <button type="reset" id="item-selection-reset">Clear selection</button>
- </form>
+ {% if header_playlist_names is defined %}
+ <form id="playlist-edit" action="/youtube.com/edit_playlist" method="post" target="_self">
+ <input name="playlist_name" id="playlist-name-selection" list="playlist-options" type="text">
+ <datalist id="playlist-options">
+ {% for playlist_name in header_playlist_names %}
+ <option value="{{ playlist_name }}">{{ playlist_name }}</option>
+ {% endfor %}
+ </datalist>
+ <button type="submit" id="playlist-add-button" name="action" value="add">Add to playlist</button>
+ <button type="reset" id="item-selection-reset">Clear selection</button>
+ </form>
+ <script>
+ /* Takes control of the form if javascript is enabled, so that adding stuff to a playlist will not cause things to stop loading, and will display a status message. If javascript is disabled, the form will still work using regular HTML methods, but causes things on the page (such as the video) to stop loading. */
+ var playlistAddForm = document.getElementById('playlist-edit');
+
+ function setStyle(element, property, value){
+ element.style[property] = value;
+ }
+ function removeMessage(messageBox){
+ messageBox.parentNode.removeChild(messageBox);
+ }
+
+ function displayMessage(text, error=false){
+ let currentMessageBox = document.getElementById('message-box');
+ if(currentMessageBox !== null){
+ currentMessageBox.parentNode.removeChild(currentMessageBox);
+ }
+ let messageBox = document.createElement('div');
+ if(error){
+ messageBox.setAttribute('role', 'alert');
+ } else {
+ messageBox.setAttribute('role', 'status');
+ }
+ messageBox.setAttribute('id', 'message-box');
+ let textNode = document.createTextNode(text);
+ messageBox.appendChild(textNode);
+ document.querySelector('main').appendChild(messageBox);
+ let currentstyle = window.getComputedStyle(messageBox);
+ let removalDelay;
+ if(error){
+ removalDelay = 5000;
+ } else {
+ removalDelay = 1500;
+ }
+ window.setTimeout(setStyle, 20, messageBox, 'opacity', 1);
+ window.setTimeout(setStyle, removalDelay, messageBox, 'opacity', 0);
+ window.setTimeout(removeMessage, removalDelay+300, messageBox);
+ }
+ // https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript
+ function sendData(event){
+ var 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;
+ }
+ if(clicked_button.getAttribute('value') !== 'add'){
+ 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);
+
+ // https://stackoverflow.com/questions/48322876/formdata-doesnt-include-value-of-buttons
+ FD.append('action', 'add');
+
+ XHR.addEventListener('load', function(event){
+ if(event.target.status == 204){
+ displayMessage('Added videos to playlist "' + FD.get('playlist_name') + '"');
+ } else {
+ displayMessage('Error adding videos to playlist: ' + event.target.status.toString(), true);
+ }
+ });
+
+ XHR.addEventListener('error', function(event){
+ if(event.target.status == 0){
+ displayMessage('XHR failed: Check that XHR requests are allowed', true);
+ } else {
+ displayMessage('XHR failed: Unknown error', true);
+ }
+ });
+
+ XHR.open('POST', playlistAddForm.getAttribute('action'));
+ XHR.send(FD);
+ }
+
+ playlistAddForm.addEventListener('submit', sendData);
+ </script>
+ {% endif %}
</header>
<main>
{% block main %}
diff --git a/youtube/templates/local_playlists_list.html b/youtube/templates/local_playlists_list.html
index 9b5f510..a9fccff 100644
--- a/youtube/templates/local_playlists_list.html
+++ b/youtube/templates/local_playlists_list.html
@@ -1,6 +1,23 @@
{% set page_title = 'Local playlists' %}
{% extends "base.html" %}
+{% block style %}
+main{
+ display: flex;
+ justify-content: center;
+}
+ ul{
+ background-color: var(--interface-color);
+ margin-top: 20px;
+ padding: 20px;
+ min-width: 400px;
+ align-self: start;
+ }
+ li{
+ margin-bottom: 10px;
+ }
+{% endblock style %}
+
{% block main %}
<ul>
{% for playlist_name, playlist_url in playlists %}
diff --git a/youtube/templates/subscription_manager.html b/youtube/templates/subscription_manager.html
index c9683ce..34d38d0 100644
--- a/youtube/templates/subscription_manager.html
+++ b/youtube/templates/subscription_manager.html
@@ -61,6 +61,8 @@
display:flex;
margin-bottom: 10px;
break-inside:avoid;
+ }
+ .sub-list-item:not(.muted){
background-color: var(--interface-color);
}
.tag-list{
diff --git a/youtube/templates/watch.html b/youtube/templates/watch.html
index 5bd2a25..a06e895 100644
--- a/youtube/templates/watch.html
+++ b/youtube/templates/watch.html
@@ -35,7 +35,7 @@
width: {{ theater_video_target_width }}px;
max-height: {{ video_height }}px;
margin-bottom: 10px;
- background-color: var(--background-color);
+ background-color: var(--video-background-color);
}
.related-videos-outer{
grid-row: 2 /span 3;
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-15 19:51:30 +0000