From 7a765dc664d20f966e4e52abac1f5372045e166c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs?= Date: Mon, 14 Dec 2020 23:44:29 -0500 Subject: Change general design theme --- youtube/templates/base.html | 397 ++++++------ youtube/templates/channel.html | 143 +---- youtube/templates/comments.html | 21 +- youtube/templates/comments_page.html | 10 +- youtube/templates/common_elements.html | 67 +- youtube/templates/error.html | 7 +- youtube/templates/home.html | 11 +- youtube/templates/local_playlist.html | 36 +- youtube/templates/local_playlists_list.html | 21 +- youtube/templates/playlist.html | 76 +-- youtube/templates/search.html | 61 +- youtube/templates/settings.html | 79 +-- youtube/templates/subscription_manager.html | 78 +-- youtube/templates/subscriptions.html | 81 +-- youtube/templates/watch.html | 905 +++++++++------------------- 15 files changed, 668 insertions(+), 1325 deletions(-) (limited to 'youtube/templates') diff --git a/youtube/templates/base.html b/youtube/templates/base.html index 3d9f1e9..4d03c05 100644 --- a/youtube/templates/base.html +++ b/youtube/templates/base.html @@ -1,203 +1,238 @@ - + + + {{ page_title }} - - - - - - - + + + + + {% block style %} + {{ style }} + {% endblock %} - -
- Home -
-
-{% block main %} -{{ main }} -{% endblock %} +
+ + {% block main %} + {{ main }} + {% endblock %} +
+
+

This site is Free/Libre Software

+

Current version: 3304bab @ master

+
+ diff --git a/youtube/templates/channel.html b/youtube/templates/channel.html index dddbff1..25b0971 100644 --- a/youtube/templates/channel.html +++ b/youtube/templates/channel.html @@ -7,114 +7,30 @@ {% extends "base.html" %} {% import "common_elements.html" as common_elements %} {% block style %} - main{ - display:grid; -{% if current_tab == 'about' %} - grid-template-rows: 0fr 0fr 1fr; - grid-template-columns: 0fr 1fr; -{% else %} - grid-template-rows: repeat(5, 0fr); - grid-template-columns: auto 1fr; -{% endif %} - } - main .avatar{ - grid-row:1; - grid-column:1; - height:200px; - width:200px; - } - main .summary{ - grid-row:1; - grid-column:2; - margin-left: 5px; - } - .summary subscribe-unsubscribe, .summary short-description{ - margin-top: 10px; - } - main .channel-tabs{ - grid-row:2; - grid-column: 1 / span 2; - - display:grid; - grid-auto-flow: column; - justify-content:start; - - background-color: var(--interface-color); - padding: 3px; - padding-left: 6px; - } - #links-metadata{ - display: grid; - grid-auto-flow: column; - grid-column-gap: 10px; - grid-column: 1/span 2; - justify-content: start; - padding-top: 8px; - padding-bottom: 8px; - padding-left: 6px; - margin-bottom: 10px; - } - #number-of-results{ - font-weight:bold; - } - .content{ - grid-row: 4; - grid-column: 1 / span 2; - } - .search-content{ - width: 800px; - margin-left: 10px; - } - .item-grid{ - padding-left: 20px; - } - .item-list{ - width:800px; - margin: auto; - } - .page-button-row{ - margin-left: auto; - margin-right: auto; - } - .next-previous-button-row{ - margin-left: auto; - margin-right: auto; - } - .tab{ - padding: 5px 75px; - } - .channel-info{ - grid-row: 3; - grid-column: 1 / span 3; - } - .channel-info ul{ - padding-left: 40px; - } - .channel-info h3{ - margin-left: 40px; - } - .channel-info .description{ - white-space: pre-wrap; - min-width: 0; - margin-left: 40px; - } - .medium-item img{ - max-width: 168px; - } + {% endblock style %} {% block main %} - -
-

{{ channel_name }}

-

{{ short_description }}

- + +
+
+ {{ channel_name }} +

{{ channel_name }}

+
+
+

{{ short_description }}

+
+
+
+
{% else %} -
- - +
+
+
{% if current_tab == 'videos' %} - {% endif %} - +
+ {% endif %} + {% endblock main %} diff --git a/youtube/templates/comments.html b/youtube/templates/comments.html index ad5ab02..a128b44 100644 --- a/youtube/templates/comments.html +++ b/youtube/templates/comments.html @@ -5,23 +5,24 @@
{% if include_avatar %} - + {{ comment['author'] }} {% endif %} -
+
{{ comment['author'] }}
+ {% if timestamp_links %} - {{ common_elements.text_runs(comment['text'])|timestamps|safe }} + {{ common_elements.text_runs(comment['text'])|timestamps|safe }} {% else %} - {{ common_elements.text_runs(comment['text']) }} + {{ common_elements.text_runs(comment['text']) }} {% endif %} - -
+ {{ comment['likes_text'] if comment['like_count'] else ''}} +
{% if settings.use_comments_js and comment['reply_count'] %}
{{ comment['view_replies_text'] }} @@ -33,7 +34,6 @@ {% endif %}
-
{% endmacro %} @@ -57,8 +57,5 @@ More comments {% endif %} {% endif %} -{% endmacro %} - - - +{% endmacro %} diff --git a/youtube/templates/comments_page.html b/youtube/templates/comments_page.html index 2d914af..09230f5 100644 --- a/youtube/templates/comments_page.html +++ b/youtube/templates/comments_page.html @@ -3,16 +3,11 @@ {% if not slim %} {% extends "base.html" %} - {% block style %} - .comments-area{ - margin: auto; - width:640px; - } + {% endblock style %} {% endif %} - {% block main %}
{% if not comments_info['is_replies'] %} @@ -27,7 +22,6 @@
{% endif %} - {% if not comments_info['is_replies'] %}
{% for link_text, link_url in comments_info['comment_links'] %} @@ -51,5 +45,3 @@ {% endif %} {% endblock main %} - - diff --git a/youtube/templates/common_elements.html b/youtube/templates/common_elements.html index 0587ce3..fcd4125 100644 --- a/youtube/templates/common_elements.html +++ b/youtube/templates/common_elements.html @@ -15,60 +15,55 @@ {% endmacro %} {% macro item(info, description=false, horizontal=true, include_author=true, include_badges=true, lazy_load=false) %} -
+
{% if info['error'] %} {{ info['error'] }} {% else %} -
+
- {% if lazy_load %} - - {% else %} - - {% endif %} - {% if info['type'] != 'channel' %} -
- {{ (info['video_count']|commatize + ' videos') if info['type'] == 'playlist' else info['duration'] }} -
- {% endif %} - +
+ {% if lazy_load %} + thumbnail + {% elif info['type'] == 'channel' %} + thumbnail + {% else %} + thumbnail + {% endif %} -
{{ info['title'] }}
+ {% if info['type'] != 'channel' %} +

{{ (info['video_count']|commatize + ' videos') if info['type'] == 'playlist' else info['duration'] }}

+ {% endif %} +
+ +

{{ info['title'] }}

{% if include_author %} {% if info.get('author_url') %} -
By {{ info['author'] }}
+
{{ info['author'] }}
{% else %}
{{ info['author'] }}
{% endif %} {% endif %} -
    + +
    {% if info['type'] == 'channel' %} -
  • {{ info['approx_subscriber_count'] }} subscribers
    • -
  • {{ info['video_count']|commatize }} videos
    • +
    {{ info['approx_subscriber_count'] }} subscribers
    +
    {{ info['video_count']|commatize }} videos
    {% else %} - {% if info.get('approx_view_count') %} -
  • {{ info['approx_view_count'] }} views
    • - {% endif %} {% if info.get('time_published') %} -
    • + + {% endif %} + {% if info.get('approx_view_count') %} +
    {{ info['approx_view_count'] }} views
    {% endif %} {% endif %} -
- - {% if description %} - {{ text_runs(info.get('description', '')) }} - {% endif %} - {% if include_badges %} - {{ info['badges']|join(' | ') }} - {% endif %} +
{% if info['type'] == 'video' %} {% endif %} {% endif %} -
- + {% endmacro %} {% macro page_buttons(estimated_pages, url, parameters_dictionary) %} @@ -84,12 +79,12 @@ {% for page in range(page_start, page_end+1) %} {% if page == current_page %} -
{{ page }}
+
{{ page }}
{% else %} {# IMPORTANT: Jinja SUCKS #} {# https://stackoverflow.com/questions/36886650/how-to-add-a-new-entry-into-a-dictionary-object-while-using-jinja2 #} {% set _ = parameters_dictionary.__setitem__('page', page) %} - {{ page }} + {{ page }} {% endif %} {% endfor %} @@ -101,11 +96,11 @@ {% if current_page != 1 %} {% set _ = parameters_dictionary.__setitem__('page', current_page - 1) %} - Previous page + Previous page {% endif %} {% if not is_last_page %} {% set _ = parameters_dictionary.__setitem__('page', current_page + 1) %} - Next page + Next page {% endif %} {% endmacro %} diff --git a/youtube/templates/error.html b/youtube/templates/error.html index c3f58b0..e02ecd9 100644 --- a/youtube/templates/error.html +++ b/youtube/templates/error.html @@ -4,9 +4,13 @@ {% extends "base.html" %} {% endif %} +{% block style %} + +{% endblock style %} + {% block main %} {% if traceback %} -
+

500 Uncaught exception:

{{ traceback }}

Please report this issue at https://github.com/user234683/youtube-local/issues

@@ -16,4 +20,3 @@
{{ error_message }}
{% endif %} {% endblock %} - diff --git a/youtube/templates/home.html b/youtube/templates/home.html index 9890f5e..0adac56 100644 --- a/youtube/templates/home.html +++ b/youtube/templates/home.html @@ -1,16 +1,7 @@ {% set page_title = title %} {% extends "base.html" %} {% block style %} - ul { - background-color: var(--interface-color); - padding: 20px; - width: 400px; - margin: auto; - margin-top: 20px; - } - li { - margin-bottom: 10px; - } + {% endblock style %} {% block main %}
    diff --git a/youtube/templates/local_playlist.html b/youtube/templates/local_playlist.html index 803c4dc..bbe5edd 100644 --- a/youtube/templates/local_playlist.html +++ b/youtube/templates/local_playlist.html @@ -2,41 +2,23 @@ {% extends "base.html" %} {% import "common_elements.html" as common_elements %} {% block style %} - main > *{ - width: 800px; - margin: auto; - } - - .playlist-metadata{ - display: flex; - flex-direction: row; - justify-content: space-between; - } - .playlist-title{ - } - #playlist-remove-button{ - align-self: center; - white-space: nowrap; - } - #results{ - display: grid; - grid-auto-rows: 0fr; - grid-row-gap: 10px; - } + {% endblock style %} {% block main %}
    -

    {{ playlist_name }}

    +

    {{ playlist_name }}

    - +
    -
    +
    {% for video_info in videos %} {{ common_elements.item(video_info) }} {% endfor %}
    - +
    + +
    {% endblock main %} diff --git a/youtube/templates/local_playlists_list.html b/youtube/templates/local_playlists_list.html index a9fccff..f400808 100644 --- a/youtube/templates/local_playlists_list.html +++ b/youtube/templates/local_playlists_list.html @@ -2,20 +2,7 @@ {% 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 %} @@ -25,9 +12,3 @@ main{ {% endfor %}
{% endblock main %} - - - - - - diff --git a/youtube/templates/playlist.html b/youtube/templates/playlist.html index af86c82..8c88cc7 100644 --- a/youtube/templates/playlist.html +++ b/youtube/templates/playlist.html @@ -2,77 +2,39 @@ {% extends "base.html" %} {% import "common_elements.html" as common_elements %} {% block style %} - main > * { - width: 800px; - margin:auto; - } - - .playlist-metadata{ - display:grid; - grid-template-columns: 0fr 1fr; - } - .playlist-thumbnail{ - grid-row: 1 / span 5; - grid-column:1; - justify-self:start; - width:250px; - margin-right: 10px; - } - .playlist-title{ - grid-row: 1; - grid-column:2; - } - .playlist-author{ - grid-row:2; - grid-column:2; - } - .playlist-stats{ - grid-row:3; - grid-column:2; - } - - .playlist-description{ - grid-row:4; - grid-column:2; - min-width:0px; - white-space: pre-line; - } - - #results{ - margin-top:10px; - - display: grid; - grid-auto-rows: 0fr; - grid-row-gap: 10px; - - } + {% endblock style %} {% block main %} +
- -

{{ title }}

- {{ author }} +
+ {{ title }} +

{{ title }}

+
+
+ {{ author }} +
{{ video_count|commatize }} videos
{{ view_count|commatize }} views
Last updated {{ time_published }}
-
{{ common_elements.text_runs(description) }}
+
-
+ +
{% for info in video_list %} {{ common_elements.item(info) }} {% endfor %}
- -{% endblock main %} - - - - +
+
+ +
+{% endblock main %} diff --git a/youtube/templates/search.html b/youtube/templates/search.html index 8b803e7..e742099 100644 --- a/youtube/templates/search.html +++ b/youtube/templates/search.html @@ -3,44 +3,31 @@ {% extends "base.html" %} {% import "common_elements.html" as common_elements %} {% block style %} - main > * { - max-width: 800px; - margin: auto; - } - #result-info{ - margin-top: 10px; - margin-bottom: 10px; - padding-left: 10px; - padding-right: 10px; - } - #number-of-results{ - font-weight:bold; - } - .item-list{ - padding-left: 10px; - padding-right: 10px; - } - .badge{ - background-color:#cccccc; - } + {% endblock style %} {% block main %} -
-
Approximately {{ '{:,}'.format(estimated_results) }} results ({{ '{:,}'.format(estimated_pages) }} pages)
-{% if corrections['type'] == 'showing_results_for' %} - - -{% elif corrections['type'] == 'did_you_mean' %} - -{% endif %} -
-
- {% for info in results %} - {{ common_elements.item(info, description=true) }} - {% endfor %} -
- +
+
Approximately {{ '{:,}'.format(estimated_results) }} results ({{ '{:,}'.format(estimated_pages) }} pages)
+ {% if corrections['type'] == 'showing_results_for' %} + + + {% elif corrections['type'] == 'did_you_mean' %} + + {% endif %} +
+ + +
+ {% for info in results %} + {{ common_elements.item(info, description=true) }} + {% endfor %} +
+
+ +
+ +
{% endblock main %} diff --git a/youtube/templates/settings.html b/youtube/templates/settings.html index 19817dd..5385c68 100644 --- a/youtube/templates/settings.html +++ b/youtube/templates/settings.html @@ -1,28 +1,7 @@ {% set page_title = 'Settings' %} {% extends "base.html" %} -{% import "common_elements.html" as common_elements %} {% block style %} - .settings-form { - margin: auto; - width: 600px; - margin-top:10px; - padding: 10px; - display: block; - background-color: var(--interface-color); - } - .settings-list{ - list-style: none; - padding: 0px; - } - .setting-item{ - margin-bottom: 10px; - padding: 5px; - } - .setting-item label{ - display: inline-block; - width: 250px; - } - + {% endblock style %} {% block main %} @@ -30,37 +9,37 @@ {% for categ in categories %}

{{ categ|capitalize }}

    - {% for setting_name, setting_info, value in settings_by_category[categ] %} - {% if not setting_info.get('hidden', false) %} -
  • - {% if 'label' is in(setting_info) %} - - {% else %} - - {% endif %} - - {% if setting_info['type'].__name__ == 'bool' %} - - {% elif setting_info['type'].__name__ == 'int' %} - {% if 'options' is in(setting_info) %} - + {% for setting_name, setting_info, value in settings_by_category[categ] %} + {% if not setting_info.get('hidden', false) %} +
  • + {% if 'label' is in(setting_info) %} + {% else %} - + {% endif %} - {% elif setting_info['type'].__name__ == 'float' %} - {% elif setting_info['type'].__name__ == 'str' %} - - {% else %} - Error: Unknown setting type: setting_info['type'].__name__ - {% endif %} -
    • - {% endif %} - {% endfor %} + {% if setting_info['type'].__name__ == 'bool' %} + + {% elif setting_info['type'].__name__ == 'int' %} + {% if 'options' is in(setting_info) %} + + {% else %} + + {% endif %} + {% elif setting_info['type'].__name__ == 'float' %} + + {% elif setting_info['type'].__name__ == 'str' %} + + {% else %} + Error: Unknown setting type: setting_info['type'].__name__ + {% endif %} + + {% endif %} + {% endfor %}
{% endfor %} diff --git a/youtube/templates/subscription_manager.html b/youtube/templates/subscription_manager.html index 4d798e0..3b8a5c0 100644 --- a/youtube/templates/subscription_manager.html +++ b/youtube/templates/subscription_manager.html @@ -1,81 +1,7 @@ {% set page_title = 'Subscription Manager' %} {% extends "base.html" %} {% block style %} - .import-export{ - display: flex; - flex-direction: row; - padding-left: 10px; - padding-top: 10px; - } - .subscriptions-import-form{ - background-color: var(--interface-color); - display: flex; - flex-direction: column; - align-items: flex-start; - max-width: 300px; - padding:10px; - } - .subscriptions-import-form h2{ - font-size: 1.25rem; - margin-bottom: 10px; - } - - .import-submit-button{ - margin-top:15px; - align-self: flex-end; - } - - - .subscriptions-export-links{ - margin: 0px 0px 0px 20px; - background-color: var(--interface-color); - list-style: none; - max-width: 300px; - padding:10px; - } - - .sub-list-controls{ - background-color: var(--interface-color); - padding:10px; - } - - - .tag-group-list{ - list-style: none; - margin-left: 10px; - margin-right: 10px; - padding: 0px; - } - .tag-group{ - border-style: solid; - margin-bottom: 10px; - } - - .sub-list{ - list-style: none; - padding:10px; - column-width: 300px; - column-gap: 40px; - } - .sub-list-item{ - display:flex; - margin-bottom: 10px; - break-inside:avoid; - } - .sub-list-item:not(.muted){ - background-color: var(--interface-color); - } - .tag-list{ - margin-left:15px; - font-weight:bold; - } - .sub-list-item-name{ - margin-left:15px; - } - .sub-list-checkbox{ - height: 1.5em; - min-width: 1.5em; // need min-width otherwise browser doesn't respect the width and squishes the checkbox down when there's too many tags - } + {% endblock style %} @@ -89,8 +15,6 @@ {% endfor %} {% endmacro %} - - {% block main %}
diff --git a/youtube/templates/subscriptions.html b/youtube/templates/subscriptions.html index e2fb25c..9e48c6b 100644 --- a/youtube/templates/subscriptions.html +++ b/youtube/templates/subscriptions.html @@ -7,79 +7,21 @@ {% import "common_elements.html" as common_elements %} {% block style %} - main{ - display:flex; - flex-direction: row; - } - .video-section{ - flex-grow: 1; - padding-left: 10px; - padding-top: 10px; - } - .current-tag{ - margin-bottom:10px; - } - .video-section .page-button-row{ - justify-content: center; - } - .subscriptions-sidebar{ - flex-basis: 300px; - background-color: var(--interface-color); - border-left: 2px; - } - .sidebar-links{ - display:flex; - justify-content: space-between; - padding-left:10px; - padding-right: 10px; - } - - .sidebar-list{ - list-style: none; - padding-left:10px; - padding-right: 10px; - } - .sidebar-list-item{ - display:flex; - justify-content: space-between; - margin-bottom: 5px; - } - .sub-refresh-list .sidebar-item-name{ - text-overflow: clip; - white-space: nowrap; - overflow: hidden; - max-width: 200px; - } + {% endblock style %} {% block main %} -
- {% if current_tag %} -

{{ current_tag }}

- {% endif %} - - - -
- Subscription Manager - + Subscription Manager +
-
-
    {% if current_tag %}
  1. @@ -105,7 +47,6 @@
-
    {% for subscription in subscription_list %}
  1. @@ -119,7 +60,23 @@
    2. {% endfor %}
+
+ + {% if current_tag %} +

{{ current_tag }}

+ {% endif %} +
+ {% for video_info in videos %} + {{ common_elements.item(video_info) }} + {% endfor %}
+
+ +
+ +
{% endblock main %} diff --git a/youtube/templates/watch.html b/youtube/templates/watch.html index 36b2198..44fc5a7 100644 --- a/youtube/templates/watch.html +++ b/youtube/templates/watch.html @@ -3,378 +3,17 @@ {% import "common_elements.html" as common_elements %} {% import "comments.html" as comments with context %} {% block style %} - details > summary{ - background-color: var(--interface-color); - border-style: outset; - border-width: 2px; - font-weight: bold; - padding-bottom: 2px; - } - details > summary:hover{ - text-decoration: underline; - } - - .playability-error{ - height: 360px; - width: 640px; - grid-column: 2; - background-color: var(--video-background-color); - text-align:center; - } - .playability-error span{ - position: relative; - top: 50%; - transform: translate(-50%, -50%); - } - - .live-url-choices{ - height: 360px; - width: 640px; - grid-column: 2; - background-color: var(--video-background-color); - padding: 25px 0px 0px 25px; - } - .live-url-choices ol{ - list-style: none; - padding:0px; - margin:0px; - margin-top: 15px; - } - .live-url-choices input{ - width: 400px; - } - .url-choice-label{ - display: inline-block; - width: 150px; - } - - {% if settings.theater_mode %} - /* This is the constant aspect ratio trick - Percentages in padding-top declarations are based on the width of the - parent element. We can use this trick to achieve a constant aspect ratio - for video-container-inner by setting height to 0. - - So the video height will decrease if the browser window is narrow, - but it will keep same aspect ratio. Must use absolute positioning on - video to keep it inside its container since the container's height is 0. - - However, because we widen the video player longer than the video's - intrinsic width for long video to make scrubbing easier, we can't use - the aspect ratio to set the height. The height needs to be the - intrinsic height in these cases. So we use a media query so aspect - ratio trick is only used if page width is less than or equal to - intrinsic video width. - */ - #video-container{ - grid-column: 1 / span 5; - justify-self: center; - max-width: 100%; - width: {{ theater_video_target_width }}px; - margin-bottom: 10px; - } - #video-container-inner{ - height: {{ video_height}}px; - position: relative; - } - @media(max-width:{{ video_width }}px){ - #video-container-inner{ - padding-top: calc(100%*{{video_height}}/{{video_width}}); - height: 0px; - } - } - video{ - background-color: var(--video-background-color); - position: absolute; - top: 0px; - left: 0px; - width: 100%; - height: 100%; - } - .side-videos{ - grid-row: 2 /span 3; - width: 400px; - } - .video-info{ - width: 640px; - } - {% else %} - #video-container{ - grid-column: 2; - } - #video-container, #video-container-inner, video{ - height: 360px; - width: 640px; - } - .side-videos{ - grid-row: 1 /span 4; - } - {% endif %} - - main{ - display:grid; - grid-template-columns: 1fr 640px 40px 400px 1fr; - grid-template-rows: auto auto auto auto; - align-content: start; - } - - .video-info{ - grid-column: 2; - grid-row: 2; - display: grid; - grid-template-rows: 0fr 0fr 0fr 20px 0fr 0fr; - grid-template-columns: 1fr 1fr; - align-content: start; - } - .video-info > .title{ - grid-column: 1 / span 2; - min-width: 0; - } - .video-info > .labels{ - justify-self:start; - list-style: none; - padding: 0px; - margin: 5px 0px; - } - .video-info > .labels:empty{ - margin: 0px; - } - .labels > li{ - display: inline; - margin-right:5px; - background-color: var(--interface-color); - padding: 2px 5px; - border-style: solid; - border-width: 1px; - } - .video-info > address{ - grid-column: 1; - grid-row: 3; - justify-self: start; - } - .video-info > .views{ - grid-column: 2; - grid-row: 3; - justify-self:end; - } - .video-info > time{ - grid-column: 1; - grid-row: 4; - justify-self:start; - } - .video-info > .likes-dislikes{ - grid-column: 2; - grid-row: 4; - justify-self:end; - } - .video-info > .external-player-controls{ - justify-self: start; - grid-row: 5; - grid-column: 1; - margin-bottom: 8px; - } - #speed-control{ - width: 65px; - text-align: center; - background-color: var(--interface-color); - color: var(--text-color); - } - .video-info > .checkbox{ - justify-self:end; - align-self: start; - - grid-row: 5; - grid-column: 2; - } - .video-info > .download-dropdown{ - grid-column:1 / span 2; - grid-row: 6; - } - .video-info > .description{ - background-color:var(--interface-color); - margin-top:8px; - white-space: pre-wrap; - min-width: 0; - word-wrap: break-word; - grid-column: 1 / span 2; - grid-row: 7; - padding: 5px; - } - - .music-list{ - grid-row:8; - grid-column: 1 / span 2; - background-color: var(--interface-color); - padding-bottom: 7px; - } - .music-list table,th,td{ - border: 1px solid; - } - .music-list th,td{ - padding-left:4px; - padding-right:5px; - } - .music-list caption{ - text-align:left; - font-weight:bold; - margin-bottom:5px; - } - .more-info{ - grid-row: 9; - grid-column: 1 / span 2; - background-color: var(--interface-color); - } - .more-info > summary{ - font-weight: normal; - border-width: 1px 0px; - border-style: solid; - } - .more-info-content{ - padding: 5px; - } - .more-info-content p{ - margin: 8px 0px; - } - .comments-area-outer{ - grid-column: 2; - grid-row: 3; - margin-top:10px; - } - .comments-disabled{ - background-color: var(--interface-color); - padding: 5px; - font-weight: bold; - } - .comments-area-inner{ - padding-top: 10px; - } - .comment{ - width:640px; - } - - .side-videos{ - grid-column: 4; - max-width: 640px; - } - #transcript-details{ - margin-bottom: 10px; - } - table#transcript-table { - border-collapse: collapse; - width: 100%; - } - table#transcript-table td, th { - border: 1px solid #dddddd; - } - div#transcript-div { - background-color: var(--interface-color); - padding: 5px; - } - .playlist{ - border-style: solid; - border-width: 2px; - border-color: lightgray; - margin-bottom: 10px; - } - .playlist-header{ - background-color: var(--interface-color); - padding: 3px; - border-bottom-style: solid; - border-bottom-width: 2px; - border-bottom-color: lightgray; - } - .playlist-header h3{ - margin: 2px; - } - .playlist-metadata{ - list-style: none; - padding: 0px; - margin: 0px; - } - .playlist-metadata li{ - display: inline; - margin: 2px; - } - .playlist-videos{ - height: 300px; - overflow-y: scroll; - display: grid; - grid-auto-rows: 90px; - grid-row-gap: 10px; - padding-top: 10px; - } - .related-videos-inner{ - padding-top: 10px; - display: grid; - grid-auto-rows: 90px; - grid-row-gap: 10px; - } - .thumbnail-box{ /* overides rule in shared.css */ - height: 90px !important; - width: 120px !important; - } - - /* Put related vids below videos when window is too small */ - /* 1100px instead of 1080 because W3C is full of idiots who include scrollbar width */ - @media (max-width:1100px){ - main{ - grid-template-columns: 1fr 640px 40px 1fr; - } - .side-videos{ - margin-top: 10px; - grid-column: 2; - grid-row: 3; - width: initial; - } - .comments-area-outer{ - grid-row: 4; - } - } - - .download-dropdown-content{ - background-color: var(--interface-color); - padding: 10px; - list-style: none; - margin: 0px; - } - li.download-format{ - margin-bottom: 7px; - } - .format-attributes{ - list-style: none; - padding: 0px; - margin: 0px; - display: flex; - flex-direction: row; - } - .format-attributes li{ - white-space: nowrap; - max-height: 1.2em; - } - .format-ext{ - width: 60px; - } - .format-video-quality{ - width: 140px; - } - .format-audio-quality{ - width: 120px; - } - .format-file-size{ - width: 80px; - } - .format-codecs{ - width: 120px; - } + {% endblock style %} {% block main %} {% if playability_error %}
{{ 'Error: ' + playability_error }} - {% if invidious_reload_button %} -
-Reload without invidious (for usage of new identity button). - {% endif %} + {% if invidious_reload_button %} +
+ Reload without invidious (for usage of new identity button). + {% endif %}
{% elif (video_sources.__len__() == 0 or live) and hls_formats.__len__() != 0 %} @@ -387,143 +26,137 @@ Reload without invidious (for usage of new identity button).
{% else %} -
-
- -
-
{% if time_start != 0 %} {% endif %} {% endif %} -
-

{{ title }}

-
    - {%- if unlisted -%} -
  • Unlisted
    • - {%- endif -%} - {%- if age_restricted -%} -
  • Age-restricted
    • - {%- endif -%} - {%- if limited_state -%} -
  • Limited state
    • - {%- endif -%} - {%- if live -%} -
  • Live
    • - {%- endif -%} -
-
Uploaded by {{ uploader }}
- {{ view_count }} views - - - - - -
- - -
- - -
- Download -
+
Uploaded by {{ uploader }}
+ {{ view_count }} views + + {{ like_count }} likes {{ dislike_count }} dislikes + +
+ + +
- {{ common_elements.text_runs(description)|escape|urlize|timestamps|safe }} -
- {% if music_list.__len__() != 0 %} -
- - - - {% for attribute in music_attributes %} - - {% endfor %} - - {% for track in music_list %} + + +
+ Download + +
+ {{ common_elements.text_runs(description)|escape|urlize|timestamps|safe }} + +
+ {% if music_list.__len__() != 0 %} +
+
Music
{{ attribute }}
+ {% for attribute in music_attributes %} - + {% endfor %} - {% endfor %} -
Music
{{ track.get(attribute.lower(), '') }}{{ attribute }}
- {% endif %} -
-
- More info -
-

Tor exit node: {{ ip_address }}

- {% if invidious_used %} -

Used Invidious as fallback.

- {% endif %} -

Allowed countries: {{ allowed_countries|join(', ') }}

- - {% if settings.use_sponsorblock_js %} -
    -
  • -
+ {% for track in music_list %} + + {% for attribute in music_attributes %} + {{ track.get(attribute.lower(), '') }} + {% endfor %} + + {% endfor %} + {% endif %}
-
-
+
+ More info +
+

Tor exit node: {{ ip_address }}

+ {% if invidious_used %} +

Used Invidious as fallback.

+ {% endif %} +

Allowed countries: {{ allowed_countries|join(', ') }}

+ {% if settings.use_sponsorblock_js %} +
    +
  • +
+ {% endif %} +
+
+
+ +
-
- {% if playlist %} -
+ + {% if playlist %} +

{{ playlist['title'] }}
    @@ -550,167 +183,171 @@ Reload without invidious (for usage of new identity button). {% if playlist['current_index'] is not none %} {% endif %} {% if playlist['id'] is not none %} {% endif %}
- {% endif %} + {% endif %} + + + {% if subtitle_sources %} +
+ Transcript +
+ + + +
+
+
+ {% endif %} + - {% if subtitle_sources %} -
- Transcript -
- - - -
-
-
- {% endif %} + + + {% endif %} - {% if settings.related_videos_mode != 0 %} -
- Related Videos - -
- {% endif %} -
+
- {% if settings.comments_mode != 0 %} - {% if comments_disabled %} -
Comments disabled
- {% else %} -
- {{ comment_count|commatize }} comment{{'s' if comment_count != 1 else ''}} -
- {% if comments_info %} - {{ comments.video_comments(comments_info) }} - {% endif %} -
-
+ + {% if settings.comments_mode != 0 %} + {% if comments_disabled %} +
Comments disabled
+ {% else %} +
+ {{ comment_count|commatize }} comment{{'s' if comment_count != 1 else ''}} +
+ {% if comments_info %} + {{ comments.video_comments(comments_info) }} + {% endif %} +
+
+ {% endif %} {% endif %} - {% endif %} + +
-- cgit v1.2.3