Layout: refactor item system to be more maintainable, add vertical item type

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)

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;
+    display: flex;
-    grid-template-columns: repeat(auto-fill, 400px);
+    flex-wrap: wrap;
-    grid-auto-rows: 94px;
-    grid-row-gap: 10px;
 }
-    .item-grid .video-thumbnail-box{
+    .item-grid > .playlist-item-box{
-        width:168px;
+        margin-right: 10px;
     }
-    .item-grid .playlist-thumbnail-box{
+    .item-grid > * {
-        width:168px;
+        margin-bottom: 10px;
+    }
+    .item-grid .horizontal-item-box .item{
+        width:370px;
+    }
+    .item-grid .vertical-item-box .item{
     }
 
-
+.item-box{
-
+    display: inline-flex;
-.medium-item-box{
+    flex-direction: row;
-
-    display:grid;
-    grid-template-columns: 1fr 30px;
 }
-.medium-item{
+.vertical-item-box{
-    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;
 }
-    .medium-item .title{
+.horizontal-item-box{
-        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;
 }
-
+    .item{
-.small-item{
+        background-color:#bcbcbc;
-    background-color:#bcbcbc;
+        text-decoration:none;
-    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;
         font-size: 12px;
-        background-color: #000000;
+        color: #767676;
     }
 
-/* ---Thumbnails for playlists---- */
+    .horizontal-item-box .item {
-.playlist-thumbnail-box{
+        flex-grow: 1;
-    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;
-        
         display: grid;
-        align-items:center;
+        align-content: start;
-        
+        grid-template-columns: auto 1fr;
-        text-align:center;
+        grid-template-rows: auto auto auto auto 1fr;
-        white-space: pre-line;
-        opacity: .8;
-        color: #cfcfcf;
-        background-color: #000000;
     }
+    .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;

youtube/templates/common_elements.html

@@ -14,121 +14,53 @@
     {%- endif -%}
 {% endmacro %}
 
-{% macro small_item(info, include_author=true) %}
+{% macro item(info, description=false, horizontal=true, include_author=true) %}
-    <div class="small-item-box">
+    <div class="item-box {{ info['type'] + '-item-box' }} {{'horizontal-item-box' if horizontal else 'vertical-item-box'}} {{'has-description' if description else 'no-description'}}">
-        <div class="small-item">
+        <div class="item {{ info['type'] + '-item' }}">
-            {% if info['type'] == 'video' %}
+            <a class="thumbnail-box" href="{{ info['url'] }}" title="{{ info['title'] }}">
-                <a class="video-thumbnail-box" href="{{ info['url'] }}" title="{{ info['title'] }}">
+                <img class="thumbnail-img" src="{{ info['thumbnail'] }}">
-                    <img class="video-thumbnail-img" src="{{ info['thumbnail'] }}">
+                {% if info['type'] != 'channel' %}
-                    <span class="video-duration">{{ info['duration'] }}</span>
+                    <div class="thumbnail-info">
-                </a>
+                        <span>{{ info['size'] if info['type'] == 'playlist' else info['duration'] }}</span>
-                <a class="title" href="{{ info['url'] }}" title="{{ info['title'] }}">{{ info['title'] }}</a>
-                
-                <address>{{ info['author'] }}</address>
-                <span class="views">{{ info['views'] }}</span>
-
-            {% elif info['type'] == 'playlist' %}
-                <a class="playlist-thumbnail-box" href="{{ info['url'] }}" title="{{ info['title'] }}">
-                    <img class="playlist-thumbnail-img" src="{{ info['thumbnail'] }}">
-                    <div class="playlist-thumbnail-info">
-                        <span>{{ info['size'] }}</span>
                     </div>
-                </a>
+                {% endif %}
-                <a class="title" href="{{ info['url'] }}" title="{{ info['title'] }}">{{ info['title'] }}</a>
+            </a>
-                
+
-                <address>{{ info['author'] }}</address>
+            <a class="title" href="{{ info['url'] }}" title="{{ info['title'] }}">{{ info['title'] }}</a>
-            {% else %}
+
-                Error: unsupported item type
+            <ul class="stats {{'vertical-stats' if horizontal and not description and include_author else 'horizontal-stats'}}">
+                {% if info['type'] == 'channel' %}
+                    <li><span>{{ info['subscriber_count'] }} subscribers</span></li>
+                    <li><span>{{ info['size'] }} videos</span></li>
+                {% else %}
+                    {% if include_author %}
+                        {% if 'author_url' is in(info) %}
+                            <li><address>By <a href="{{ info['author_url'] }}">{{ info['author'] }}</a></address></li>
+                        {% else %}
+                            <li><address><b>{{ info['author'] }}</b></address></li>
+                        {% endif %}
+                    {% endif %}
+                    {% if 'views' is in(info) %}
+                        <li><span class="views">{{ info['views'] }}</span></li>
+                    {% endif %}
+                    {% if 'published' is in(info) %}
+                        <li><time>{{ info['published'] }}</time></li>
+                    {% endif %}
+                {% endif %}
+            </ul>
+
+            {% if description %}
+                <span class="description">{{ text_runs(info.get('description', '')) }}</span>
             {% endif %}
+            <span class="badges">{{ info['badges']|join(' | ') }}</span>
         </div>
         {% if info['type'] == 'video' %}
             <input class="item-checkbox" type="checkbox" name="video_info_list" value="{{ info['video_info'] }}" form="playlist-edit">
         {% endif %}
     </div>
+
 {% endmacro %}
 
-{% macro get_stats(info, include_author=true) %}
-    {% if include_author %}
-        {% if 'author_url' is in(info) %}
-            <address>By <a href="{{ info['author_url'] }}">{{ info['author'] }}</a></address>
-        {% else %}
-            <address><b>{{ info['author'] }}</b></address>
-        {% endif %}
-    {% endif %}
-    {% if 'views' is in(info) %}
-        <span class="views">{{ info['views'] }}</span>
-    {% endif %}
-    {% if 'published' is in(info) %}
-        <time>{{ info['published'] }}</time>
-    {% endif %}
-{% endmacro %}
-
-
-
-{% macro medium_item(info, include_author=true) %}
-    <div class="medium-item-box">
-        <div class="medium-item">
-            {% if info['type'] == 'video' %}
-                <a class="video-thumbnail-box" href="{{ info['url'] }}" title="{{ info['title'] }}">
-                    <img class="video-thumbnail-img" src="{{ info['thumbnail'] }}">
-                    <span class="video-duration">{{ info['duration'] }}</span>
-                </a>
-
-                <a class="title" href="{{ info['url'] }}" title="{{ info['title'] }}">{{ info['title'] }}</a>
-                
-                <div class="stats">
-                    {{ get_stats(info, include_author) }}
-                </div>
-
-                <span class="description">{{ text_runs(info.get('description', '')) }}</span>
-                <span class="badges">{{ info['badges']|join(' | ') }}</span>
-            {% elif info['type'] == 'playlist' %}
-                <a class="playlist-thumbnail-box" href="{{ info['url'] }}" title="{{ info['title'] }}">
-                    <img class="playlist-thumbnail-img" src="{{ info['thumbnail'] }}">
-                    <div class="playlist-thumbnail-info">
-                        <span>{{ info['size'] }}</span>
-                    </div>
-                </a>
-
-                <a class="title" href="{{ info['url'] }}" title="{{ info['title'] }}">{{ info['title'] }}</a>
-                
-                <div class="stats">
-                    {{ get_stats(info, include_author) }}
-                </div>
-            {% elif info['type'] == 'channel' %}
-                <a class="video-thumbnail-box" href="{{ info['url'] }}" title="{{ info['title'] }}">
-                    <img class="video-thumbnail-img" src="{{ info['thumbnail'] }}">
-                </a>
-
-                <a class="title" href="{{ info['url'] }}">{{ info['title'] }}</a>
-                
-                <span>{{ info['subscriber_count'] }} subscribers</span>
-                <span>{{ info['size'] }} videos</span>
-
-                <span class="description">{{ text_runs(info.get('description', '')) }}</span>
-            {% else %}
-                Error: unsupported item type
-            {% endif %}
-        </div>
-        {% if info['type'] == 'video' %}
-            <input class="item-checkbox" type="checkbox" name="video_info_list" value="{{ info['video_info'] }}" form="playlist-edit">
-        {% endif %}
-    </div>
-{% 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() %}

youtube/templates/search.html

@@ -45,7 +45,7 @@
             </div>
             <div class="item-list">
                 {% for info in results %}
-                    {{ common_elements.item(info) }}
+                    {{ common_elements.item(info, description=true) }}
                 {% endfor %}
             </div>
             <nav class="page-button-row">

youtube/templates/watch.html

@@ -109,12 +109,9 @@
                 #related{
                     grid-column: 4;
                     display: grid;
-                    grid-auto-rows: 90px;
+                    grid-auto-rows: 94px;
                     grid-row-gap: 10px;
                 }
-                    #related .medium-item{
-                        grid-template-columns: 160px 1fr 0fr;
-                    }
 
             .download-dropdown{
                 z-index:1;

youtube/watch.py

@@ -36,7 +36,6 @@ def watch_page_related_video_info(item):
     except KeyError:
         result['views'] = ''
     result['thumbnail'] = util.get_thumbnail_url(item['id'])
-    result['item_size'] = 'small'
     result['type'] = 'video'
     return result
     
@@ -47,7 +46,6 @@ def watch_page_related_playlist_info(item):
         'id': item['list'],
         'first_video_id': item['video_id'],
         'thumbnail': util.get_thumbnail_url(item['video_id']),
-        'item_size': 'small',
         'type': 'playlist',
     }
 

youtube/yt_data_extract.py

@@ -197,10 +197,6 @@ def renderer_info(renderer, additional_info={}):
 
     info.update(additional_info)
 
-    if type.startswith('compact') or (type.startswith('playlist') and type != 'playlistRenderer'):
-        info['item_size'] = 'small'
-    else:
-        info['item_size'] = 'medium'
 
     if type in ('compactVideoRenderer', 'videoRenderer', 'playlistVideoRenderer', 'gridVideoRenderer'):
         info['type'] = 'video'