From 7f3ca7ee498fe0da2975750fc4864f5f8885165b Mon Sep 17 00:00:00 2001 From: James Taylor Date: Sun, 18 Aug 2019 15:57:27 -0700 Subject: [PATCH 01/20] Layout: Replace local playlists link with home link in header and use flexbox to make it work on smaller window sizes --- youtube/static/shared.css | 163 +++++++++++++++--------------------- youtube/templates/base.html | 24 +++--- 2 files changed, 79 insertions(+), 108 deletions(-) diff --git a/youtube/static/shared.css b/youtube/static/shared.css index a360972..f3e30cb 100644 --- a/youtube/static/shared.css +++ b/youtube/static/shared.css @@ -4,6 +4,9 @@ h1, h2, h3, h4, h5, h6, div, button{ } +address{ + font-style:normal; +} body{ margin:0; @@ -14,76 +17,90 @@ body{ background-color:#cccccc; min-height:100vh; - - display:grid; - grid-template-rows: 50px 1fr; } header{ background-color:#333333; + height: 50px; - grid-row: 1; - - display:grid; - grid-template-columns: minmax(0px, 3fr) 640px 40px 500px minmax(0px,2fr); + display: flex; } - main{ - grid-row: 2; - } - -address{ - font-style:normal; -} - - - - #site-search{ - grid-column: 2; - display: grid; - grid-template-columns: 1fr auto auto; - - } - - #site-search .search-box{ - align-self:center; - height:25px; - border:0; - - grid-column: 1; + #home-link{ + align-self: center; + margin-left:10px; + color: #ffffff; } - #site-search .search-button{ - grid-column: 2; - align-self:center; - height:25px; - border-style:solid; - border-width:1px; + + #site-search{ + max-width: 600px; + margin-left:10px; + display: flex; + flex-grow: 1; } - #site-search .dropdown{ - margin-left:5px; - grid-column: 3; - align-self:center; - height:25px; - } - #site-search .dropdown button{ + + #site-search .search-box{ + align-self:center; + height:25px; + border:0; + + flex-grow: 1; + } + #site-search .search-button{ align-self:center; height:25px; border-style:solid; border-width:1px; } - #site-search .css-sucks{ - width:0px; - height:0px; + #site-search .dropdown{ + margin-left:5px; + align-self:center; + height:25px; } - #site-search .dropdown-content{ - grid-template-columns: auto auto; - white-space: nowrap; + #site-search .dropdown button{ + align-self:center; + height:25px; + + border-style:solid; + border-width:1px; } - #site-search .dropdown-content h3{ - grid-column:1 / span 2; + #site-search .css-sucks{ + width:0px; + height:0px; + } + #site-search .dropdown-content{ + grid-template-columns: auto auto; + white-space: nowrap; } + #site-search .dropdown-content h3{ + grid-column:1 / span 2; + } + + #playlist-edit{ + margin-left: 10px; + align-self: center; + } + #local-playlists{ + margin-right:5px; + color: #ffffff; + } + #playlist-name-selection{ + } + #playlist-add-button{ + padding-left: 10px; + padding-right: 10px; + } + #item-selection-reset{ + padding-left: 10px; + padding-right: 10px; + } + + main{ + grid-row: 2; + } + .dropdown{ z-index:1; @@ -98,50 +115,6 @@ address{ display:inline-grid; } - - -#header-right{ - grid-column:4; - - display:grid; - grid-template-columns:auto auto auto 1fr; - grid-template-rows: 1fr; - width: 540px; -} - #playlist-edit{ - display:contents; - } - #local-playlists{ - grid-column: 1; - grid-row:1; - align-self: center; - margin-right:5px; - color: #ffffff; - } - #playlist-name-selection{ - grid-column:2; - grid-row:1; - justify-self:start; - align-self: center; - } - #playlist-add-button{ - grid-column:3; - grid-row:1; - align-self: center; - padding-left: 10px; - padding-right: 10px; - } - #item-selection-reset{ - grid-column:4; - grid-row:1; - align-self: center; - justify-self:start; - padding-left: 10px; - padding-right: 10px; - } - - - .item-list{ display: grid; grid-auto-rows: 138px; diff --git a/youtube/templates/base.html b/youtube/templates/base.html index 72e3691..aaa0351 100644 --- a/youtube/templates/base.html +++ b/youtube/templates/base.html @@ -16,6 +16,7 @@
+ Home -
-
- - - {% for playlist_name in header_playlist_names %} - - {% endfor %} - - - -
- Local playlists -
+
+ + + {% for playlist_name in header_playlist_names %} + + {% endfor %} + + + +
{% block main %} From 70d2cff81760a5bfd2d8f54349cd96d50df5f320 Mon Sep 17 00:00:00 2001 From: James Taylor Date: Sun, 18 Aug 2019 18:26:13 -0700 Subject: [PATCH 02/20] Layout: Center header content --- youtube/static/shared.css | 1 + 1 file changed, 1 insertion(+) diff --git a/youtube/static/shared.css b/youtube/static/shared.css index f3e30cb..415296a 100644 --- a/youtube/static/shared.css +++ b/youtube/static/shared.css @@ -24,6 +24,7 @@ body{ height: 50px; display: flex; + justify-content: center; } #home-link{ From 85572c94de77f4a51d5b64e44c6b50cbe200c946 Mon Sep 17 00:00:00 2001 From: James Taylor Date: Fri, 23 Aug 2019 14:48:00 -0700 Subject: [PATCH 03/20] Layout: refactor item system to be more maintainable, add vertical item type --- youtube/local_playlist.py | 1 - youtube/static/shared.css | 321 ++++++++++--------------- youtube/templates/common_elements.html | 144 +++-------- youtube/templates/search.html | 2 +- youtube/templates/watch.html | 5 +- youtube/watch.py | 2 - youtube/yt_data_extract.py | 4 - 7 files changed, 167 insertions(+), 312 deletions(-) diff --git a/youtube/local_playlist.py b/youtube/local_playlist.py index bb05d1a..4b92315 100644 --- a/youtube/local_playlist.py +++ b/youtube/local_playlist.py @@ -82,7 +82,6 @@ def get_local_playlist_videos(name, offset=0, amount=50): else: info['thumbnail'] = util.get_thumbnail_url(info['id']) missing_thumbnails.append(info['id']) - info['item_size'] = 'small' info['type'] = 'video' yt_data_extract.add_extra_html_info(info) videos.append(info) diff --git a/youtube/static/shared.css b/youtube/static/shared.css index 415296a..3624272 100644 --- a/youtube/static/shared.css +++ b/youtube/static/shared.css @@ -118,218 +118,151 @@ body{ .item-list{ display: grid; - grid-auto-rows: 138px; grid-row-gap: 10px; } - .item-list .video-thumbnail-box{ - width:246px; - } - .item-list .playlist-thumbnail-box{ - width:246px; - } .item-grid{ - display:grid; - grid-template-columns: repeat(auto-fill, 400px); - grid-auto-rows: 94px; - grid-row-gap: 10px; + display: flex; + flex-wrap: wrap; } - .item-grid .video-thumbnail-box{ - width:168px; + .item-grid > .playlist-item-box{ + margin-right: 10px; } - .item-grid .playlist-thumbnail-box{ - width:168px; + .item-grid > * { + margin-bottom: 10px; + } + .item-grid .horizontal-item-box .item{ + width:370px; + } + .item-grid .vertical-item-box .item{ } - - -.medium-item-box{ - - display:grid; - grid-template-columns: 1fr 30px; +.item-box{ + display: inline-flex; + flex-direction: row; } -.medium-item{ - background-color:#bcbcbc; - text-decoration:none; - font-size: 12px; - color: #767676; - - display: grid; - align-content: start; - grid-template-columns: auto 1fr auto; - grid-template-rows: auto auto auto auto auto 1fr; +.vertical-item-box{ } - .medium-item .title{ - grid-column:2 / span 2; - grid-row:1; - justify-self:start; - min-width: 0; - max-height:3.6em; - overflow:hidden; - - color: #333; - font-size: 16px; - font-weight: 500; - text-decoration:initial; - } - .medium-item address{ - display:inline; - } - /*.medium-item .views{ - grid-column: 3; - grid-row: 2; - justify-self:end; - } - .medium-item time{ - grid-column: 2; - grid-row: 3; - justify-self:start; - }*/ - .medium-item .stats{ - grid-column: 2 / span 2; - grid-row: 2; - max-height:2.4em; - overflow:hidden; - } - .medium-item .stats > *::after{ - content: " | "; - } - .medium-item .stats > *:last-child::after{ - content: ""; - } - - .medium-item .description{ - grid-column: 2 / span 2; - grid-row: 4; - } - .medium-item .badges{ - grid-column: 2 / span 2; - grid-row: 5; - } - /* thumbnail size */ - .medium-item img{ - /*height:138px; - width:246px;*/ - height:100%; - justify-self:center; - } - -.small-item-box{ - color: #767676; - font-size: 12px; - - display:grid; - grid-template-columns: 1fr 30px; - grid-template-rows: 94px; +.horizontal-item-box{ } - -.small-item{ - background-color:#bcbcbc; - align-content: start; - text-decoration:none; - - display: grid; - grid-template-columns: 168px 1fr; - grid-column-gap: 5px; - grid-template-rows: auto auto auto 1fr; -} - .small-item .title{ - grid-column:2; - grid-row:1; - margin:0; - - color: #333; - font-size: 16px; - font-weight: 500; - text-decoration:initial; - min-width: 0; - justify-self:start; - - overflow:hidden; - max-height: 3.3em; - line-height: 1.1em; - } - .small-item address{ - grid-column: 2; - grid-row: 2; - justify-self: start; - } - - .small-item .views{ - grid-column: 2; - grid-row: 3; - justify-self:start; - } - /* thumbnail size */ - .small-item img{ - /*height:94px; - width:168px;*/ - height:100%; - justify-self:center; - } - -.item-checkbox{ - justify-self:start; - align-self:center; - height:30px; - width:30px; - - grid-column: 2; -} - -/* ---Thumbnails for videos---- */ -.video-thumbnail-box{ - max-height:100%; - - grid-column:1; - grid-row:1 / span 6; - - display:grid; - grid-template-columns: 1fr 0fr; -} - .video-thumbnail-img{ - grid-column:1 / span 2; - grid-row:1; - } - .video-duration{ - grid-column: 2; - grid-row: 1; - align-self: end; - opacity: .8; - color: #ffffff; + .item{ + background-color:#bcbcbc; + text-decoration:none; font-size: 12px; - background-color: #000000; + color: #767676; } -/* ---Thumbnails for playlists---- */ -.playlist-thumbnail-box{ - max-height:100%; - - grid-column:1; - grid-row:1 / span 6; - - display:grid; - grid-template-columns: 3fr 2fr; -} - .playlist-thumbnail-img{ - grid-column:1 / span 2; - grid-row:1; - } - .playlist-thumbnail-info{ - grid-column:2; - grid-row:1; - + .horizontal-item-box .item { + flex-grow: 1; display: grid; - align-items:center; - - text-align:center; - white-space: pre-line; - opacity: .8; - color: #cfcfcf; - background-color: #000000; + align-content: start; + grid-template-columns: auto 1fr; + grid-template-rows: auto auto auto auto 1fr; } + .vertical-item-box .item{ + width: 168px; + } + .thumbnail-box{ + font-size: 0px; /* prevent newlines and blank space from creating gaps */ + position: relative; + display: block; + } + .horizontal-item-box .thumbnail-box{ + grid-row: 1 / span 5; + } + .no-description .thumbnail-box{ + width: 168px; + height:94px; + } + .has-description .thumbnail-box{ + width: 246px; + height:138px; + } + .video-item .thumbnail-info{ + position: absolute; + bottom: 2px; + right: 2px; + opacity: .8; + color: #ffffff; + font-size: 12px; + background-color: #000000; + } + .playlist-item .thumbnail-info{ + position: absolute; + right: 0px; + bottom: 0px; + height: 100%; + width: 50%; + text-align:center; + white-space: pre-line; + opacity: .8; + color: #cfcfcf; + font-size: 12px; + background-color: #000000; + } + .playlist-item .thumbnail-info span{ /* trick to vertically center the text */ + position: absolute; + top: 50%; + transform: translate(-50%, -50%); + } + .thumbnail-img{ /* center it */ + margin: auto; + display: block; + max-height: 100%; + } + .horizontal-item-box .thumbnail-img{ + height: 100%; + } + + .item .title{ + min-width: 0; + max-height:3.6em; + overflow:hidden; + + color: #333; + font-size: 16px; + font-weight: 500; + text-decoration:initial; + } + + .stats{ + list-style: none; + padding: 0px; + margin: 0px; + } + .horizontal-stats{ + max-height:2.4em; + overflow:hidden; + } + .horizontal-stats > li{ + display: inline; + } + + .horizontal-stats > li::after{ + content: " | "; + } + .horizontal-stats > li:last-child::after{ + content: ""; + } + + .vertical-stats{ + display: flex; + flex-direction: column; + } + .stats address{ + display: inline; + } + + .item-checkbox{ + justify-self:start; + align-self:center; + height:30px; + width:30px; + margin: 0px; + } + .page-button-row{ justify-self:center; diff --git a/youtube/templates/common_elements.html b/youtube/templates/common_elements.html index 49e2fad..b9ceafa 100644 --- a/youtube/templates/common_elements.html +++ b/youtube/templates/common_elements.html @@ -14,121 +14,53 @@ {%- endif -%} {% endmacro %} -{% macro small_item(info, include_author=true) %} -
-
- {% if info['type'] == 'video' %} - - - {{ info['duration'] }} - - {{ info['title'] }} - -
{{ info['author'] }}
- {{ info['views'] }} - - {% elif info['type'] == 'playlist' %} - - -
- {{ info['size'] }} +{% macro item(info, description=false, horizontal=true, include_author=true) %} +
+
+ + + {% if info['type'] != 'channel' %} +
+ {{ info['size'] if info['type'] == 'playlist' else info['duration'] }}
- - {{ info['title'] }} - -
{{ info['author'] }}
- {% else %} - Error: unsupported item type + {% endif %} + + + {{ info['title'] }} + +
    + {% if info['type'] == 'channel' %} +
  • {{ info['subscriber_count'] }} subscribers
    • +
  • {{ info['size'] }} videos
    • + {% else %} + {% if include_author %} + {% if 'author_url' is in(info) %} +
  • By {{ info['author'] }}
    • + {% else %} +
  • {{ info['author'] }}
    • + {% endif %} + {% endif %} + {% if 'views' is in(info) %} +
  • {{ info['views'] }}
    • + {% endif %} + {% if 'published' is in(info) %} +
    • + {% endif %} + {% endif %} +
+ + {% if description %} + {{ text_runs(info.get('description', '')) }} {% endif %} + {{ info['badges']|join(' | ') }}
{% if info['type'] == 'video' %} {% endif %}
+ {% endmacro %} -{% macro get_stats(info, include_author=true) %} - {% if include_author %} - {% if 'author_url' is in(info) %} -
By {{ info['author'] }}
- {% else %} -
{{ info['author'] }}
- {% endif %} - {% endif %} - {% if 'views' is in(info) %} - {{ info['views'] }} - {% endif %} - {% if 'published' is in(info) %} - - {% endif %} -{% endmacro %} - - - -{% macro medium_item(info, include_author=true) %} -
-
- {% if info['type'] == 'video' %} - - - {{ info['duration'] }} - - - {{ info['title'] }} - -
- {{ get_stats(info, include_author) }} -
- - {{ text_runs(info.get('description', '')) }} - {{ info['badges']|join(' | ') }} - {% elif info['type'] == 'playlist' %} - - -
- {{ info['size'] }} -
- - - {{ info['title'] }} - -
- {{ get_stats(info, include_author) }} -
- {% elif info['type'] == 'channel' %} - - - - - {{ info['title'] }} - - {{ info['subscriber_count'] }} subscribers - {{ info['size'] }} videos - - {{ text_runs(info.get('description', '')) }} - {% else %} - Error: unsupported item type - {% endif %} -
- {% if info['type'] == 'video' %} - - {% endif %} -
-{% endmacro %} - - -{% macro item(info, include_author=true) %} - {% if info['item_size'] == 'small' %} - {{ small_item(info, include_author) }} - {% elif info['item_size'] == 'medium' %} - {{ medium_item(info, include_author) }} - {% else %} - Error: Unknown item size - {% endif %} -{% endmacro %} - - - {% macro page_buttons(estimated_pages, url, parameters_dictionary) %} {% set current_page = parameters_dictionary.get('page', 1)|int %} {% set parameters_dictionary = parameters_dictionary.to_dict() %} diff --git a/youtube/templates/search.html b/youtube/templates/search.html index 782a85e..f429da0 100644 --- a/youtube/templates/search.html +++ b/youtube/templates/search.html @@ -45,7 +45,7 @@
{% for info in results %} - {{ common_elements.item(info) }} + {{ common_elements.item(info, description=true) }} {% endfor %}
+ + +
+ {% if comments_info %} + {{ comments.video_comments(comments_info) }} + {% endif %} +
{% endblock main %} From 400d17e61314e09efc89fbfb770b045550cf6e09 Mon Sep 17 00:00:00 2001 From: James Taylor Date: Sat, 24 Aug 2019 11:35:58 -0700 Subject: [PATCH 07/20] Layout: simplify CSS layout on most pages --- youtube/static/shared.css | 3 + youtube/templates/comments_page.html | 77 +++++++--------- youtube/templates/delete_comment.html | 8 +- youtube/templates/local_playlist.html | 50 ++++------- youtube/templates/login.html | 13 +-- youtube/templates/playlist.html | 125 ++++++++++---------------- youtube/templates/post_comment.html | 23 ++--- youtube/templates/search.html | 32 +++---- 8 files changed, 120 insertions(+), 211 deletions(-) diff --git a/youtube/static/shared.css b/youtube/static/shared.css index 382f86c..611cdb7 100644 --- a/youtube/static/shared.css +++ b/youtube/static/shared.css @@ -267,7 +267,10 @@ body{ .page-button-row{ + margin-top: 10px; + margin-bottom: 10px; justify-self:center; + justify-content: center; display: grid; grid-auto-columns: 40px; grid-auto-flow: column; diff --git a/youtube/templates/comments_page.html b/youtube/templates/comments_page.html index 68c8537..047404a 100644 --- a/youtube/templates/comments_page.html +++ b/youtube/templates/comments_page.html @@ -3,63 +3,46 @@ {% import "comments.html" as comments %} {% block style %} - main{ - display:grid; - grid-template-columns: 3fr 2fr; + .comments-area{ + margin: auto; + width:640px; } - #left{ - background-color:#bcbcbc; - - display: grid; - grid-column: 1; - grid-row: 1; - grid-template-columns: 1fr 640px; - grid-template-rows: 0fr 0fr 0fr; - } - .comments-area{ - grid-column:2; - } - .comment{ - width:640px; - } {% endblock style %} {% block main %} -
-
- {% if not comments_info['is_replies'] %} -
- - - - {{ comments_info['video_title'] }} +
+ {% if not comments_info['is_replies'] %} +
+ + + + {{ comments_info['video_title'] }} -

Comments page {{ comments_info['page_number'] }}

- Sorted by {{ comments_info['sort_text'] }} -
- {% endif %} +

Comments page {{ comments_info['page_number'] }}

+ Sorted by {{ comments_info['sort_text'] }} +
+ {% endif %} - {{ comments.comment_posting_box(comment_posting_box_info) }} + {{ comments.comment_posting_box(comment_posting_box_info) }} - {% if not comments_info['is_replies'] %} -
- {% for link_text, link_url in comments_info['comment_links'] %} - {{ link_text }} - {% endfor %} -
- {% endif %} - -
- {% for comment in comments_info['comments'] %} - {{ comments.render_comment(comment, comments_info['include_avatars']) }} + {% if not comments_info['is_replies'] %} +
+ {% for link_text, link_url in comments_info['comment_links'] %} + {{ link_text }} {% endfor %}
- {% if 'more_comments_url' is in comments_info %} - More comments - {% endif %} -
-
+ {% endif %} + +
+ {% for comment in comments_info['comments'] %} + {{ comments.render_comment(comment, comments_info['include_avatars']) }} + {% endfor %} +
+ {% if 'more_comments_url' is in comments_info %} + More comments + {% endif %} + {% endblock main %} diff --git a/youtube/templates/delete_comment.html b/youtube/templates/delete_comment.html index 71555ee..28c8f2a 100644 --- a/youtube/templates/delete_comment.html +++ b/youtube/templates/delete_comment.html @@ -2,14 +2,10 @@ {% extends "base.html" %} {% block style %} - main{ - display: grid; - grid-template-columns: minmax(0px, 3fr) 640px 40px 500px minmax(0px,2fr); - align-content: start; - } main > div, main > form{ + margin: auto; margin-top:20px; - grid-column:2; + width: 640px; } {% endblock style %} diff --git a/youtube/templates/local_playlist.html b/youtube/templates/local_playlist.html index f8e6f01..7ba0642 100644 --- a/youtube/templates/local_playlist.html +++ b/youtube/templates/local_playlist.html @@ -2,59 +2,41 @@ {% extends "base.html" %} {% import "common_elements.html" as common_elements %} {% block style %} - main{ - display:grid; - grid-template-columns: 3fr 1fr; + main > *{ + width: 800px; + margin: auto; } - - - #left{ - grid-column: 1; - grid-row: 1; - - display: grid; - grid-template-columns: 1fr 800px auto; - grid-template-rows: 0fr 1fr 0fr; + .playlist-metadata{ + display: flex; + flex-direction: row; + justify-content: space-between; } .playlist-title{ - grid-column:2; } #playlist-remove-button{ - grid-column:3; align-self: center; white-space: nowrap; } #results{ - - grid-row: 2; - grid-column: 2 / span 2; - - display: grid; grid-auto-rows: 0fr; grid-row-gap: 10px; - - } - .page-button-row{ - grid-row: 3; - grid-column: 2; - justify-self: center; } {% endblock style %} {% block main %} -
+

{{ playlist_name }}

-
- {% for video_info in videos %} - {{ common_elements.item(video_info) }} - {% endfor %} -
-
+
+ {% for video_info in videos %} + {{ common_elements.item(video_info) }} + {% endfor %} +
+ {% endblock main %} diff --git a/youtube/templates/login.html b/youtube/templates/login.html index 0f09a62..156bc01 100644 --- a/youtube/templates/login.html +++ b/youtube/templates/login.html @@ -2,16 +2,12 @@ {% extends "base.html" %} {% block style %} - main{ - display: grid; - grid-template-columns: minmax(0px, 3fr) 640px 40px 500px minmax(0px,2fr); - align-content: start; - grid-row-gap: 40px; + main > * { + width: 640px; + margin: auto; } - main form{ margin-top:20px; - grid-column:2; display:grid; justify-items: start; align-content: start; @@ -26,10 +22,9 @@ margin-top:20px; } #tor-note{ - grid-row:2; - grid-column:2; background-color: #dddddd; padding: 10px; + margin-top: 40px; } {% endblock style %} diff --git a/youtube/templates/playlist.html b/youtube/templates/playlist.html index 371b51b..ab2640f 100644 --- a/youtube/templates/playlist.html +++ b/youtube/templates/playlist.html @@ -2,72 +2,45 @@ {% extends "base.html" %} {% import "common_elements.html" as common_elements %} {% block style %} - main{ + main > * { + width: 800px; + margin:auto; + } + + .playlist-metadata{ display:grid; - grid-template-columns: 3fr 1fr; + grid-template-columns: 0fr 1fr; } - - - - #left{ - grid-column: 1; - grid-row: 1; - - display: grid; - grid-template-columns: 1fr 800px; - grid-template-rows: 0fr 1fr 0fr; - } - .playlist-metadata{ + .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; - grid-row:1; - - 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; - } - .page-button-row{ - grid-row: 3; - grid-column: 2; - justify-self: center; + .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; } - - - #right{ - grid-column: 2; - grid-row: 1; - } #results{ - - grid-row: 2; - grid-column: 2; margin-top:10px; - + display: grid; grid-auto-rows: 0fr; grid-row-gap: 10px; @@ -76,27 +49,25 @@ {% endblock style %} {% block main %} -
-
- -

{{ title }}

- {{ author }} -
-
{{ views }}
-
{{ size }}
-
-
{{ common_elements.text_runs(description) }}
+
+ +

{{ title }}

+ {{ author }} +
+
{{ views }}
+
{{ size }}
- -
- {% for info in video_list %} - {{ common_elements.item(info) }} - {% endfor %} -
- +
{{ common_elements.text_runs(description) }}
+ +
+ {% for info in video_list %} + {{ common_elements.item(info) }} + {% endfor %} +
+ {% endblock main %} diff --git a/youtube/templates/post_comment.html b/youtube/templates/post_comment.html index 67c54f1..ba6a22c 100644 --- a/youtube/templates/post_comment.html +++ b/youtube/templates/post_comment.html @@ -3,27 +3,18 @@ {% import "comments.html" as comments %} {% block style %} - main{ - display: grid; - grid-template-columns: 3fr 2fr; - } - .left{ - display:grid; - grid-template-columns: 1fr 640px; - } - textarea{ - width: 460px; - height: 85px; - } .comment-form{ - grid-column:2; + width: 640px; + margin: auto; justify-content:start; } + textarea{ + width: 460px; + height: 85px; + } {% endblock style %} {% block main %} -
- {{ comments.comment_posting_box(comment_posting_box_info) }} -
+ {{ comments.comment_posting_box(comment_posting_box_info) }} {% endblock %} diff --git a/youtube/templates/search.html b/youtube/templates/search.html index f429da0..63f930e 100644 --- a/youtube/templates/search.html +++ b/youtube/templates/search.html @@ -3,31 +3,19 @@ {% extends "base.html" %} {% import "common_elements.html" as common_elements %} {% block style %} - main{ - display:grid; - grid-template-columns: minmax(0px, 1fr) 800px minmax(0px,2fr); - max-width:100vw; - } - - + main > * { + max-width: 800px; + margin: auto; + } + #result-info{ + } #number-of-results{ font-weight:bold; } - #result-info{ - grid-row: 1; - grid-column:2; - align-self:center; - } - .page-button-row{ - grid-column: 2; - justify-self: center; - } - - - .item-list{ - grid-row: 2; - grid-column: 2; - } + .item-list{ + padding-left: 10px; + padding-right: 10px; + } .badge{ background-color:#cccccc; } From f2eb35419769629bfc8c4d7a7f545b8cb5c37c3f Mon Sep 17 00:00:00 2001 From: James Taylor Date: Sat, 24 Aug 2019 11:51:41 -0700 Subject: [PATCH 08/20] Layout: Simplify color scheme --- youtube/static/shared.css | 6 +++--- youtube/templates/login.html | 4 +++- youtube/templates/watch.html | 19 ++++--------------- 3 files changed, 10 insertions(+), 19 deletions(-) diff --git a/youtube/static/shared.css b/youtube/static/shared.css index 611cdb7..de9e03b 100644 --- a/youtube/static/shared.css +++ b/youtube/static/shared.css @@ -14,7 +14,7 @@ body{ color:#222; - background-color:#cccccc; + background-color:#bcbcbc; min-height:100vh; display: flex; @@ -150,7 +150,7 @@ body{ .horizontal-item-box{ } .item{ - background-color:#bcbcbc; + background-color:#dadada; text-decoration:none; font-size: 12px; color: #767676; @@ -284,7 +284,7 @@ body{ text-align: center; } .sort-button{ - background-color: #d0d0d0; + background-color: #dadada; padding: 2px; justify-self: start; } diff --git a/youtube/templates/login.html b/youtube/templates/login.html index 156bc01..13d37ca 100644 --- a/youtube/templates/login.html +++ b/youtube/templates/login.html @@ -7,6 +7,8 @@ margin: auto; } main form{ + background-color: #dadada; + padding: 10px; margin-top:20px; display:grid; justify-items: start; @@ -22,7 +24,7 @@ margin-top:20px; } #tor-note{ - background-color: #dddddd; + background-color: #dadada; padding: 10px; margin-top: 40px; } diff --git a/youtube/templates/watch.html b/youtube/templates/watch.html index 4ddf115..ccb03e3 100644 --- a/youtube/templates/watch.html +++ b/youtube/templates/watch.html @@ -8,14 +8,7 @@ grid-template-columns: 1fr 640px 40px 400px 1fr; grid-template-rows: auto auto auto auto; align-content: start; - background-color:#cccccc; } - #left{ - background-color:#bcbcbc; - grid-column: 1; - grid-row: 1 / span 3; - - } video{ height: 360px; width: 640px; @@ -28,14 +21,13 @@ grid-template-rows: 0fr 0fr 0fr 20px 0fr 0fr; grid-template-columns: 1fr 1fr; align-content: start; - background-color:#bcbcbc; } .video-info > .title{ grid-column: 1 / span 2; min-width: 0; } .video-info > .is-unlisted{ - background-color: #d0d0d0; + background-color: #dadada; justify-self:start; padding-left:2px; padding-right:2px; @@ -71,7 +63,7 @@ grid-column: 2; } .video-info > .description{ - background-color:#d0d0d0; + background-color:#dadada; margin-top:8px; white-space: pre-wrap; min-width: 0; @@ -83,7 +75,7 @@ .music-list{ grid-row:7; grid-column: 1 / span 2; - background-color: #d0d0d0; + background-color: #dadada; } .music-list table,th,td{ border: 1px solid; @@ -101,7 +93,6 @@ grid-column: 2; grid-row: 3; padding-top:10px; - background-color:#bcbcbc; } .comment{ width:640px; @@ -122,6 +113,7 @@ grid-template-columns: 1fr 640px 40px 1fr; } #related{ + margin-top: 10px; grid-column: 2; grid-row: 3; } @@ -163,9 +155,6 @@ {% endblock style %} {% block main %} -
-
-
- + {% if related_videos_mode != 0 %} +
+ Related Videos + +
+ {% endif %} -
- {% if comments_info %} - {{ comments.video_comments(comments_info) }} - {% endif %} -
+ {% if comments_mode != 0 %} +
+ Comments +
+ {% if comments_info %} + {{ comments.video_comments(comments_info) }} + {% endif %} +
+
+ {% endif %} {% endblock main %} diff --git a/youtube/watch.py b/youtube/watch.py index ea33d0f..0515dea 100644 --- a/youtube/watch.py +++ b/youtube/watch.py @@ -217,6 +217,9 @@ def get_watch_page(): comments_info = comments_info, theater_mode = settings.theater_mode, + related_videos_mode = settings.related_videos_mode, + comments_mode = settings.comments_mode, + video_height = video_height, title = info['title'], From 3d911e4987ef9768702729e60d51cb872700a716 Mon Sep 17 00:00:00 2001 From: James Taylor Date: Sat, 24 Aug 2019 17:55:14 -0700 Subject: [PATCH 14/20] Layout: Theater layout: Expand video width across page only as necessary based on length of video --- youtube/templates/watch.html | 5 ++++- youtube/watch.py | 4 ++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/youtube/templates/watch.html b/youtube/templates/watch.html index 0b33dd7..745acdb 100644 --- a/youtube/templates/watch.html +++ b/youtube/templates/watch.html @@ -17,9 +17,12 @@ {% if theater_mode %} video{ grid-column: 1 / span 5; - width: 100%; + justify-self: center; + max-width: 100%; + width: {{ theater_video_target_width }}px; max-height: {{ video_height }}px; margin-bottom: 10px; + background-color: #bcbcbc; } .related-videos-outer{ grid-row: 2 /span 3; diff --git a/youtube/watch.py b/youtube/watch.py index 0515dea..8f83e48 100644 --- a/youtube/watch.py +++ b/youtube/watch.py @@ -57,6 +57,7 @@ def get_video_sources(info): 'src': format['url'], 'type': 'video/' + format['ext'], 'height': format['height'], + 'width': format['width'], }) #### order the videos sources so the preferred resolution is first ### @@ -199,6 +200,8 @@ def get_watch_page(): video_sources = get_video_sources(info) video_height = video_sources[0]['height'] + # 1 second per pixel, or the actual video width + theater_video_target_width = max(640, info['duration'], video_sources[0]['width']) return flask.render_template('watch.html', header_playlist_names = local_playlist.get_playlist_names(), @@ -221,6 +224,7 @@ def get_watch_page(): comments_mode = settings.comments_mode, video_height = video_height, + theater_video_target_width = theater_video_target_width, title = info['title'], uploader = info['uploader'], From 9f67a970c602f82a761b90587033d9beaf7c122b Mon Sep 17 00:00:00 2001 From: James Taylor Date: Sat, 24 Aug 2019 18:19:22 -0700 Subject: [PATCH 15/20] Layout: Make item titles non-clickable in empty space after wrapped text --- youtube/templates/common_elements.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/youtube/templates/common_elements.html b/youtube/templates/common_elements.html index b9ceafa..33d50b7 100644 --- a/youtube/templates/common_elements.html +++ b/youtube/templates/common_elements.html @@ -26,7 +26,7 @@ {% endif %} - {{ info['title'] }} +
{{ info['title'] }}
    {% if info['type'] == 'channel' %} From 69e64f726eef1c92b8b5d50c8822afdc1cde2134 Mon Sep 17 00:00:00 2001 From: James Taylor Date: Sat, 24 Aug 2019 18:25:37 -0700 Subject: [PATCH 16/20] Layout: Prevent long author name from overflowing in items with vertical stats --- youtube/static/shared.css | 4 ++++ youtube/templates/common_elements.html | 4 ++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/youtube/static/shared.css b/youtube/static/shared.css index db3efef..a4e1960 100644 --- a/youtube/static/shared.css +++ b/youtube/static/shared.css @@ -257,6 +257,10 @@ body{ .stats address{ display: inline; } + .vertical-stats li{ + max-height: 1.3em; + overflow: hidden; + } .item-checkbox{ justify-self:start; diff --git a/youtube/templates/common_elements.html b/youtube/templates/common_elements.html index 33d50b7..67655b3 100644 --- a/youtube/templates/common_elements.html +++ b/youtube/templates/common_elements.html @@ -35,9 +35,9 @@ {% else %} {% if include_author %} {% if 'author_url' is in(info) %} -
  • By {{ info['author'] }}
    • +
  • By {{ info['author'] }}
    • {% else %} -
  • {{ info['author'] }}
    • +
  • {{ info['author'] }}
    • {% endif %} {% endif %} {% if 'views' is in(info) %} From 2435bcaeb103f0f03b64edb7af4c3c64bdcd8877 Mon Sep 17 00:00:00 2001 From: James Taylor Date: Sat, 24 Aug 2019 18:50:09 -0700 Subject: [PATCH 17/20] Layout: Prevent item checkbox size from shrinking sometimes --- youtube/static/shared.css | 1 + 1 file changed, 1 insertion(+) diff --git a/youtube/static/shared.css b/youtube/static/shared.css index a4e1960..1ae1fe1 100644 --- a/youtube/static/shared.css +++ b/youtube/static/shared.css @@ -267,6 +267,7 @@ body{ align-self:center; height:30px; width:30px; + min-width:30px; margin: 0px; } From 00e4951fd089353d54ce193c80aa75d2e2bcc073 Mon Sep 17 00:00:00 2001 From: James Taylor Date: Sat, 24 Aug 2019 19:05:24 -0700 Subject: [PATCH 18/20] Layout: Add links to homepage --- youtube/__init__.py | 2 +- youtube/templates/home.html | 22 ++++++++++++++++++++++ 2 files changed, 23 insertions(+), 1 deletion(-) create mode 100644 youtube/templates/home.html diff --git a/youtube/__init__.py b/youtube/__init__.py index e620827..ded6382 100644 --- a/youtube/__init__.py +++ b/youtube/__init__.py @@ -4,4 +4,4 @@ yt_app.url_map.strict_slashes = False @yt_app.route('/') def homepage(): - return flask.render_template('base.html', title="Youtube local") + return flask.render_template('home.html', title="Youtube local") diff --git a/youtube/templates/home.html b/youtube/templates/home.html new file mode 100644 index 0000000..c7f7666 --- /dev/null +++ b/youtube/templates/home.html @@ -0,0 +1,22 @@ +{% set page_title = title %} +{% extends "base.html" %} +{% block style %} + ul { + background-color: #dadada; + padding: 20px; + width: 400px; + margin: auto; + margin-top: 20px; + } + li { + margin-bottom: 10px; + } +{% endblock style %} +{% block main %} + +{% endblock main %} From 609244e34fed8cd2b27bddada266a3044709acf4 Mon Sep 17 00:00:00 2001 From: James Taylor Date: Sun, 25 Aug 2019 13:09:08 -0700 Subject: [PATCH 19/20] Layout: Add some space after item thumbnail --- youtube/static/shared.css | 1 + 1 file changed, 1 insertion(+) diff --git a/youtube/static/shared.css b/youtube/static/shared.css index 1ae1fe1..d232129 100644 --- a/youtube/static/shared.css +++ b/youtube/static/shared.css @@ -174,6 +174,7 @@ body{ } .horizontal-item-box .thumbnail-box{ grid-row: 1 / span 5; + margin-right: 4px; } .no-description .thumbnail-box{ width: 168px; From e9b16ef71fc25f12e26da79392fa91ae30aabe5d Mon Sep 17 00:00:00 2001 From: James Taylor Date: Sun, 25 Aug 2019 15:25:24 -0700 Subject: [PATCH 20/20] Layout: Add themes --- settings.py | 6 ++++++ youtube/__init__.py | 15 +++++++++++++++ youtube/static/comments.css | 4 +--- youtube/static/dark_theme.css | 21 +++++++++++++++++++++ youtube/static/gray_theme.css | 9 +++++++++ youtube/static/light_theme.css | 9 +++++++++ youtube/static/shared.css | 14 +++++++------- youtube/templates/base.html | 1 + youtube/templates/channel.html | 3 +-- youtube/templates/home.html | 2 +- youtube/templates/login.html | 4 ++-- youtube/templates/watch.html | 12 ++++++------ 12 files changed, 79 insertions(+), 21 deletions(-) create mode 100644 youtube/static/dark_theme.css create mode 100644 youtube/static/gray_theme.css create mode 100644 youtube/static/light_theme.css diff --git a/settings.py b/settings.py index 944576d..d02a1fd 100644 --- a/settings.py +++ b/settings.py @@ -78,6 +78,12 @@ For security reasons, enabling this is not recommended.''', 'comment': '', }), + ('theme', { + 'type': int, + 'default': 0, + 'comment': '', + }), + ('gather_googlevideo_domains', { 'type': bool, 'default': False, diff --git a/youtube/__init__.py b/youtube/__init__.py index ded6382..38ff7d3 100644 --- a/youtube/__init__.py +++ b/youtube/__init__.py @@ -1,7 +1,22 @@ import flask +import settings yt_app = flask.Flask(__name__) yt_app.url_map.strict_slashes = False @yt_app.route('/') def homepage(): return flask.render_template('home.html', title="Youtube local") + + +theme_names = { + 0: 'light_theme', + 1: 'gray_theme', + 2: 'dark_theme', +} + +@yt_app.context_processor +def inject_theme_preference(): + return { + 'theme_path': '/youtube.com/static/' + theme_names[settings.theme] + '.css', + } + diff --git a/youtube/static/comments.css b/youtube/static/comments.css index 1a5bec9..85f0cc1 100644 --- a/youtube/static/comments.css +++ b/youtube/static/comments.css @@ -69,7 +69,7 @@ display:grid; grid-template-columns: auto auto 100px 1fr; grid-template-rows: 0fr 0fr 0fr 0fr; - background-color: #dadada; + background-color: var(--interface-color); justify-content: start; } @@ -102,8 +102,6 @@ grid-column: 3; grid-row: 1; white-space: nowrap; - color: black; - } diff --git a/youtube/static/dark_theme.css b/youtube/static/dark_theme.css new file mode 100644 index 0000000..4f302cb --- /dev/null +++ b/youtube/static/dark_theme.css @@ -0,0 +1,21 @@ +body{ + --interface-color: #333333; + --text-color: #cccccc; + --background-color: #000000; +} + +a:link { + color: #22aaff; +} + +a:visited { + color: ##7755ff; +} + +a:not([href]){ + color: var(--text-color); +} + +.comment .permalink{ + color: #ffffff; +} diff --git a/youtube/static/gray_theme.css b/youtube/static/gray_theme.css new file mode 100644 index 0000000..69cc849 --- /dev/null +++ b/youtube/static/gray_theme.css @@ -0,0 +1,9 @@ +body{ + --interface-color: #dadada; + --text-color: #222222; + --background-color: #bcbcbc; +} + +.comment .permalink{ + color: #000000; +} diff --git a/youtube/static/light_theme.css b/youtube/static/light_theme.css new file mode 100644 index 0000000..05697b9 --- /dev/null +++ b/youtube/static/light_theme.css @@ -0,0 +1,9 @@ +body{ + --interface-color: #ffffff; + --text-color: #222222; + --background-color: #f8f8f8; +} + +.comment .permalink{ + color: #000000; +} diff --git a/youtube/static/shared.css b/youtube/static/shared.css index d232129..a79e42b 100644 --- a/youtube/static/shared.css +++ b/youtube/static/shared.css @@ -11,10 +11,10 @@ address{ body{ margin:0; padding: 0; - color:#222; + color:var(--text-color); - background-color:#bcbcbc; + background-color:var(--background-color); min-height:100vh; display: flex; @@ -111,7 +111,7 @@ body{ } .dropdown-content{ display:none; - background-color: #e9e9e9; + background-color: var(--interface-color); } .dropdown:hover .dropdown-content{ /* For some reason, if this is just grid, it will insist on being 0px wide just like its 0px by 0px parent */ @@ -151,7 +151,7 @@ body{ .horizontal-item-box{ } .item{ - background-color:#dadada; + background-color:var(--interface-color); text-decoration:none; font-size: 12px; color: #767676; @@ -225,7 +225,7 @@ body{ max-height:3.6em; overflow:hidden; - color: #333; + color: var(--text-color); font-size: 16px; font-weight: 500; text-decoration:initial; @@ -284,14 +284,14 @@ body{ height: 40px; } .page-button{ - background-color: #e9e9e9; + background-color: var(--interface-color); border-style: outset; border-width: 2px; font-weight: bold; text-align: center; } .sort-button{ - background-color: #dadada; + background-color: var(--interface-color); padding: 2px; justify-self: start; } diff --git a/youtube/templates/base.html b/youtube/templates/base.html index aaa0351..9127efa 100644 --- a/youtube/templates/base.html +++ b/youtube/templates/base.html @@ -4,6 +4,7 @@ {{ page_title }} + diff --git a/youtube/templates/channel.html b/youtube/templates/channel.html index 069e33b..ed04988 100644 --- a/youtube/templates/channel.html +++ b/youtube/templates/channel.html @@ -31,7 +31,7 @@ grid-auto-flow: column; justify-content:start; - background-color: #aaaaaa; + background-color: var(--interface-color); padding: 3px; padding-left: 6px; } @@ -44,7 +44,6 @@ padding-top: 8px; padding-bottom: 8px; padding-left: 6px; - background-color: #bababa; margin-bottom: 10px; } #number-of-results{ diff --git a/youtube/templates/home.html b/youtube/templates/home.html index c7f7666..9890f5e 100644 --- a/youtube/templates/home.html +++ b/youtube/templates/home.html @@ -2,7 +2,7 @@ {% extends "base.html" %} {% block style %} ul { - background-color: #dadada; + background-color: var(--interface-color); padding: 20px; width: 400px; margin: auto; diff --git a/youtube/templates/login.html b/youtube/templates/login.html index 13d37ca..384f1ac 100644 --- a/youtube/templates/login.html +++ b/youtube/templates/login.html @@ -7,7 +7,7 @@ margin: auto; } main form{ - background-color: #dadada; + background-color: var(--interface-color); padding: 10px; margin-top:20px; display:grid; @@ -24,7 +24,7 @@ margin-top:20px; } #tor-note{ - background-color: #dadada; + background-color: var(--interface-color); padding: 10px; margin-top: 40px; } diff --git a/youtube/templates/watch.html b/youtube/templates/watch.html index 745acdb..14e953b 100644 --- a/youtube/templates/watch.html +++ b/youtube/templates/watch.html @@ -4,7 +4,7 @@ {% import "comments.html" as comments %} {% block style %} details > summary{ - background-color: #dadada; + background-color: var(--interface-color); border-style: outset; border-width: 2px; font-weight: bold; @@ -22,7 +22,7 @@ width: {{ theater_video_target_width }}px; max-height: {{ video_height }}px; margin-bottom: 10px; - background-color: #bcbcbc; + background-color: var(--background-color); } .related-videos-outer{ grid-row: 2 /span 3; @@ -62,7 +62,7 @@ min-width: 0; } .video-info > .is-unlisted{ - background-color: #dadada; + background-color: var(--interface-color); justify-self:start; padding-left:2px; padding-right:2px; @@ -99,7 +99,7 @@ grid-column: 2; } .video-info > .description{ - background-color:#dadada; + background-color:var(--interface-color); margin-top:8px; white-space: pre-wrap; min-width: 0; @@ -111,7 +111,7 @@ .music-list{ grid-row:8; grid-column: 1 / span 2; - background-color: #dadada; + background-color: var(--interface-color); } .music-list table,th,td{ border: 1px solid; @@ -165,7 +165,7 @@ } .download-dropdown-content{ - background-color: #dadada; + background-color: var(--interface-color); padding: 10px; list-style: none; margin: 0px;