Merge branch 'master' into add_sponsorblock

8 files changed, 372 insertions, 48 deletions

diff --git a/youtube/templates/base.html b/youtube/templates/base.html
index 4fc48cf..3d9f1e9 100644
--- a/youtube/templates/base.html
+++ b/youtube/templates/base.html
@@ -4,12 +4,9 @@
         <meta charset="utf-8">
         <title>{{ page_title }}</title>
         <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline'; media-src 'self' https://*.googlevideo.com;
-            {% if not settings.proxy_images %}
-                img-src https://*.googleusercontent.com https://*.ggpht.com https://*.ytimg.com;
-            {% endif %}">
-
+            {{ "img-src 'self' https://*.googleusercontent.com https://*.ggpht.com https://*.ytimg.com;" if not settings.proxy_images else "" }}">
         <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/shared.css" type="text/css" rel="stylesheet">
         <link href="/youtube.com/static/comments.css" type="text/css" rel="stylesheet">
         <link href="/youtube.com/static/favicon.ico" type="image/x-icon" rel="icon">
         <link title="Youtube local" href="/youtube.com/opensearch.xml" rel="search" type="application/opensearchdescription+xml">
diff --git a/youtube/templates/channel.html b/youtube/templates/channel.html
index a0cdff9..dddbff1 100644
--- a/youtube/templates/channel.html
+++ b/youtube/templates/channel.html
@@ -34,11 +34,11 @@
         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;
@@ -103,7 +103,7 @@
         }
 {% endblock style %}
 
-{% block main %}     
+{% block main %}
     <img class="avatar" src="{{ avatar }}">
     <div class="summary">
         <h2 class="title">{{ channel_name }}</h2>
diff --git a/youtube/templates/comments.html b/youtube/templates/comments.html
index 9d93b8c..32a67ad 100644
--- a/youtube/templates/comments.html
+++ b/youtube/templates/comments.html
@@ -25,6 +25,7 @@
                 {% if settings.use_comments_js and comment['reply_count'] %}
                     <details class="replies" src="{{ comment['replies_url'] }}">
                         <summary>{{ comment['view_replies_text'] }}</summary>
+                        <a href="{{ comment['replies_url'] }}" class="replies-open-new-tab" target="_blank">Open in new tab</a>
                         <div class="comment_page">loading..</div>
                     </details>
                 {% else %}
diff --git a/youtube/templates/error.html b/youtube/templates/error.html
index 2f94afa..c3f58b0 100644
--- a/youtube/templates/error.html
+++ b/youtube/templates/error.html
@@ -1,29 +1,8 @@
 {% set page_title = 'Error' %}
-{% extends "base.html" %}
 
-{% block style %}
-    h1{
-        font-size: 2rem;
-        font-weight: normal;
-    }
-    #error-box, #error-message{
-        background-color: var(--interface-color);
-        width: 80%;
-        margin: auto;
-        margin-top: 20px;
-        padding: 5px;
-    }
-    #error-box > div, #error-box > p, #error-box > h1{
-        white-space: pre-wrap;
-        margin-bottom: 10px;
-    }
-    .code-box{
-        padding: 5px;
-        border-style:solid;
-        border-width:1px;
-        border-radius:5px;
-    }
-{% endblock style %}
+{% if not slim %}
+    {% extends "base.html" %}
+{% endif %}
 
 {% block main %}
     {% if traceback %}
diff --git a/youtube/templates/local_playlist.html b/youtube/templates/local_playlist.html
index 7ba0642..803c4dc 100644
--- a/youtube/templates/local_playlist.html
+++ b/youtube/templates/local_playlist.html
@@ -25,7 +25,7 @@
         }
 {% endblock style %}
 
-{% block main %}   
+{% block main %}
     <div class="playlist-metadata">
         <h2 class="playlist-title">{{ playlist_name }}</h2>
         <input type="hidden" name="playlist_page" value="{{ playlist_name }}" form="playlist-edit">
diff --git a/youtube/templates/playlist.html b/youtube/templates/playlist.html
index f34f140..af86c82 100644
--- a/youtube/templates/playlist.html
+++ b/youtube/templates/playlist.html
@@ -6,7 +6,7 @@
         width: 800px;
         margin:auto;
     }
-        
+
     .playlist-metadata{
         display:grid;
         grid-template-columns: 0fr 1fr;
@@ -44,7 +44,7 @@
         display: grid;
         grid-auto-rows: 0fr;
         grid-row-gap: 10px;
-        
+
     }
 {% endblock style %}
 
@@ -61,7 +61,7 @@
         <div class="playlist-description">{{ common_elements.text_runs(description) }}</div>
     </div>
 
-    <div id="results">          
+    <div id="results">
         {% for info in video_list %}
             {{ common_elements.item(info) }}
         {% endfor %}
diff --git a/youtube/templates/shared.css b/youtube/templates/shared.css
new file mode 100644
index 0000000..2288a34
--- /dev/null
+++ b/youtube/templates/shared.css
@@ -0,0 +1,359 @@
+* {
+    box-sizing: border-box;
+}
+
+h1, h2, h3, h4, h5, h6, div, button{
+    margin:0;
+    padding:0;
+}
+
+address{
+    font-style:normal;
+}
+
+html{
+    font-family: {{ font_family }};
+}
+
+body{
+    margin:0;
+    padding: 0;
+    color:var(--text-color);
+
+
+    background-color:var(--background-color);
+
+    min-height:100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+    header{
+        background-color:#333333;
+        height: 50px;
+
+        display: flex;
+        justify-content: center;
+    }
+
+        #home-link{
+            align-self: center;
+            margin-left:10px;
+            color: #ffffff;
+        }
+
+
+        #site-search{
+            max-width: 600px;
+            margin-left:10px;
+            display: flex;
+            flex-grow: 1;
+        }
+
+            #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 .dropdown{
+                margin-left:5px;
+                align-self:center;
+                height:25px;
+            }
+                #site-search .dropdown button{
+                    align-self:center;
+                    height:25px;
+
+                    border-style:solid;
+                    border-width:1px;
+                }
+                #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{
+        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{
+    z-index:1;
+}
+    .dropdown-content{
+        display:none;
+        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 */
+        /* making it inline-grid happened to fix it */
+        display:inline-grid;
+    }
+
+.item-list{
+    display: grid;
+    grid-row-gap: 10px;
+
+}
+
+
+.item-grid{
+    display: flex;
+    flex-wrap: wrap;
+}
+    .item-grid > .playlist-item-box{
+        margin-right: 10px;
+    }
+    .item-grid > * {
+        margin-bottom: 10px;
+    }
+    .item-grid .horizontal-item-box .item{
+        width:370px;
+    }
+    .item-grid .vertical-item-box .item{
+    }
+
+.item-box{
+    display: inline-flex;
+    flex-direction: row;
+    /* prevent overflow due to long titles with no spaces:
+    https://stackoverflow.com/a/43312314 */
+    min-width: 0;
+}
+.vertical-item-box{
+}
+.horizontal-item-box{
+}
+    .item{
+        background-color:var(--interface-color);
+        text-decoration:none;
+        font-size: 0.8125rem;
+        color: #767676;
+    }
+
+    .horizontal-item-box .item {
+        flex-grow: 1;
+        display: grid;
+        align-content: start;
+        grid-template-columns: auto 1fr;
+        grid-template-rows: auto auto auto auto 1fr;
+        /* prevent overflow due to long titles with no spaces:
+        https://stackoverflow.com/a/43312314 */
+        min-width: 0;
+    }
+    .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;
+            margin-right: 4px;
+        }
+        .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: 0.8125rem;
+                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: 0.8125rem;
+                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%;
+                    max-width: 100%;
+                }
+                .horizontal-item-box .thumbnail-img{
+                    height: 100%;
+                }
+
+        .item .title{
+            min-width: 0;
+            line-height:1.25em;
+            max-height:3.75em;
+            overflow-y: hidden;
+            overflow-wrap: break-word;
+
+            color: var(--text-color);
+            font-size: 1rem;
+            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;
+            }
+            .vertical-stats li{
+                max-height: 1.3em;
+                overflow: hidden;
+            }
+
+    .item-checkbox{
+        justify-self:start;
+        align-self:center;
+        height:30px;
+        width:30px;
+        min-width:30px;
+        margin: 0px;
+    }
+
+
+.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;
+    height: 40px;
+}
+.next-previous-button-row{
+    margin: 10px 0px;
+    display: flex;
+    justify-self:center;
+    justify-content: center;
+    height: 40px;
+}
+    .page-button{
+        background-color: var(--interface-color);
+        border-style: outset;
+        border-width: 2px;
+        font-weight: bold;
+        text-align: center;
+        padding: 5px;
+    }
+    .next-page:nth-child(2){    /* only if there's also a previous page button */
+        margin-left: 10px;
+    }
+.sort-button{
+    background-color: var(--interface-color);
+    padding: 2px;
+    justify-self: start;
+}
+
+/* error page stuff */
+h1{
+    font-size: 2rem;
+    font-weight: normal;
+}
+#error-box, #error-message{
+    background-color: var(--interface-color);
+    width: 80%;
+    margin: auto;
+    margin-top: 20px;
+    padding: 5px;
+}
+#error-box > div, #error-box > p, #error-box > h1{
+    white-space: pre-wrap;
+    margin-bottom: 10px;
+}
+.code-box{
+    padding: 5px;
+    border-style:solid;
+    border-width:1px;
+    border-radius:5px;
+}
diff --git a/youtube/templates/watch.html b/youtube/templates/watch.html
index 319c314..b6faf21 100644
--- a/youtube/templates/watch.html
+++ b/youtube/templates/watch.html
@@ -14,18 +14,6 @@
         text-decoration: underline;
     }
 
-    details.replies > summary{
-        background-color: var(--interface-color);
-        border-style: outset;
-        border-width: 1px;
-        font-weight: bold;
-        padding-bottom: 0px;
-    }
-
-    details.replies .comment{
-        width: 600px;
-    }
-
     .playability-error{
         height: 360px;
         width: 640px;