heckyel/yt-local
0
0
Fork 0
Code Issues Pull Requests Releases Activity

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

Browse Source
This commit is contained in:
James Taylor
2019-08-23 14:48:00 -07:00
parent 70d2cff817
commit 85572c94de
7 changed files with 167 additions and 312 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
youtube/templates/common_elements.html
View File

@@ -14,121 +14,53 @@
{%- endif -%}
{% endmacro %}
{% macro small_item(info, include_author=true) %}
<div class="small-item-box">
<div class="small-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>
<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>
{% macro item(info, description=false, horizontal=true, include_author=true) %}
<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="item {{ info['type'] + '-item' }}">
<a class="thumbnail-box" href="{{ info['url'] }}" title="{{ info['title'] }}">
<img class="thumbnail-img" src="{{ info['thumbnail'] }}">
{% if info['type'] != 'channel' %}
<div class="thumbnail-info">
<span>{{ info['size'] if info['type'] == 'playlist' else info['duration'] }}</span>
</div>
</a>
<a class="title" href="{{ info['url'] }}" title="{{ info['title'] }}">{{ info['title'] }}</a>
<address>{{ info['author'] }}</address>
{% else %}
Error: unsupported item type
{% endif %}
</a>
<a class="title" href="{{ info['url'] }}" title="{{ info['title'] }}">{{ info['title'] }}</a>
<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() %}

2
youtube/templates/search.html
View File

@@ -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">

5
youtube/templates/watch.html
View File

@@ -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;