aboutsummaryrefslogtreecommitdiffstats
path: root/youtube/templates/channel.html
diff options
context:
space:
mode:
Diffstat (limited to 'youtube/templates/channel.html')
-rw-r--r--youtube/templates/channel.html207
1 files changed, 86 insertions, 121 deletions
diff --git a/youtube/templates/channel.html b/youtube/templates/channel.html
index 48041a0..c43f488 100644
--- a/youtube/templates/channel.html
+++ b/youtube/templates/channel.html
@@ -1,106 +1,39 @@
-{% set page_title = channel_name + ' - Channel' %}
+{% if current_tab == 'search' %}
+ {% set page_title = search_box_value + ' - Page ' + page_number|string %}
+{% else %}
+ {% set page_title = channel_name|string + ' - Channel' %}
+{% endif %}
+
{% 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;
- }
- .item-grid{
- padding-left: 20px;
- grid-row:4;
- grid-column: 1 / span 2;
- }
- .item-list{
- width:1000px;
- grid-column: 1 / span 2;
- }
- .page-button-row{
- grid-column: 1 / span 2;
- }
- .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;
- }
+ <link href="/youtube.com/static/message_box.css" rel="stylesheet">
+ <link href="/youtube.com/static/channel.css" rel="stylesheet">
{% endblock style %}
-{% block main %}
- <img class="avatar" src="{{ avatar }}">
- <div class="summary">
- <h2 class="title">{{ channel_name }}</h2>
- <p class="short-description">{{ short_description }}</p>
- <form method="POST" action="/youtube.com/subscriptions" class="subscribe-unsubscribe">
- <input type="submit" value="{{ 'Unsubscribe' if subscribed else 'Subscribe' }}">
- <input type="hidden" name="channel_id" value="{{ channel_id }}">
- <input type="hidden" name="channel_name" value="{{ channel_name }}">
- <input type="hidden" name="action" value="{{ 'unsubscribe' if subscribed else 'subscribe' }}">
- </form>
+{% block main %}
+
+ <div class="author-container">
+ <div class="author">
+ <img alt="{{ channel_name }}" src="{{ avatar }}">
+ <h2>{{ channel_name }}</h2>
+ </div>
+ <div class="summary">
+ <p>{{ short_description }}</p>
+ </div>
+ <div class="subscribe">
+ <form method="POST" action="/youtube.com/subscriptions" class="subscribe-unsubscribe">
+ <input class="btn-subscribe" type="submit" value="{{ 'Unsubscribe' if subscribed else 'Subscribe' }}">
+ <input type="hidden" name="channel_id" value="{{ channel_id }}">
+ <input type="hidden" name="channel_name" value="{{ channel_name }}">
+ <input type="hidden" name="action" value="{{ 'unsubscribe' if subscribed else 'subscribe' }}">
+ </form>
+ </div>
</div>
+ <hr/>
+
<nav class="channel-tabs">
- {% for tab_name in ('Videos', 'Playlists', 'About') %}
+ {% for tab_name in ('Videos', 'Shorts', 'Streams', 'Playlists', 'About') %}
{% if tab_name.lower() == current_tab %}
<a class="tab page-button">{{ tab_name }}</a>
{% else %}
@@ -116,8 +49,17 @@
{% if current_tab == 'about' %}
<div class="channel-info">
<ul>
- {% for stat in stats %}
- <li>{{ stat }}</li>
+ {% for (before_text, stat, after_text) in [
+ ('Joined ', date_joined, ''),
+ ('', approx_view_count, ' views'),
+ ('', approx_subscriber_count, ' subscribers'),
+ ('', approx_video_count, ' videos'),
+ ('Country: ', country, ''),
+ ('Canonical Url: ', canonical_url, ''),
+ ] %}
+ {% if stat %}
+ <li>{{ before_text + stat|string + after_text }}</li>
+ {% endif %}
{% endfor %}
</ul>
<hr>
@@ -126,43 +68,66 @@
<hr>
<ul>
{% for text, url in links %}
- <li><a href="{{ url }}">{{ text }}</a></li>
+ {% if url %}
+ <li><a href="{{ url }}">{{ text }}</a></li>
+ {% else %}
+ <li>{{ text }}</li>
+ {% endif %}
{% endfor %}
</ul>
</div>
{% else %}
- <div id="links-metadata">
- {% if current_tab == 'videos' %}
- {% set sorts = [('1', 'views'), ('2', 'oldest'), ('3', 'newest')] %}
- <div id="number-of-results">{{ number_of_videos }} videos</div>
- {% elif current_tab == 'playlists' %}
- {% set sorts = [('2', 'oldest'), ('3', 'newest'), ('4', 'last video added')] %}
- {% else %}
- {% set sorts = [] %}
- {% endif %}
- {% for sort_number, sort_name in sorts %}
- {% if sort_number == current_sort.__str__() %}
- <a class="sort-button">{{ 'Sorted by ' + sort_name }}</a>
+ <!-- new-->
+ <div id="links-metadata">
+ {% if current_tab in ('videos', 'shorts', 'streams') %}
+ {% set sorts = [('1', 'views'), ('2', 'oldest'), ('3', 'newest'), ('4', 'newest - no shorts'),] %}
+ <div id="number-of-results">{{ number_of_videos }} videos</div>
+ {% elif current_tab == 'playlists' %}
+ {% set sorts = [('2', 'oldest'), ('3', 'newest'), ('4', 'last video added')] %}
+ {% if items %}
+ <h2 class="page-number">Page {{ page_number }}</h2>
+ {% else %}
+ <h2 class="page-number">No items</h2>
+ {% endif %}
+ {% elif current_tab == 'search' %}
+ {% if items %}
+ <h2 class="page-number">Page {{ page_number }}</h2>
+ {% else %}
+ <h2 class="page-number">No results</h2>
+ {% endif %}
{% else %}
- <a class="sort-button" href="{{ channel_url + '/' + current_tab + '?sort=' + sort_number }}">{{ 'Sort by ' + sort_name }}</a>
+ {% set sorts = [] %}
{% endif %}
- {% endfor %}
+
+ {% for sort_number, sort_name in sorts %}
+ {% if sort_number == current_sort.__str__() %}
+ <a class="sort-button">{{ 'Sorted by ' + sort_name }}</a>
+ {% else %}
+ <a class="sort-button" href="{{ channel_url + '/' + current_tab + '?sort=' + sort_number }}">{{ 'Sort by ' + sort_name }}</a>
+ {% endif %}
+ {% endfor %}
</div>
- {% if current_tab != 'about' %}
- <nav class="{{ 'item-list' if current_tab == 'search' else 'item-grid' }}">
+ <div class="video-container {{ current_tab + '-content'}}">
{% for item_info in items %}
{{ common_elements.item(item_info, include_author=false) }}
{% endfor %}
- </nav>
+ </div>
+ <hr/>
- {% if current_tab != 'playlists' %}
- <nav class="page-button-row">
- {{ common_elements.page_buttons(number_of_pages, channel_url + '/' + current_tab, parameters_dictionary) }}
+ <footer class="pagination-container">
+ {% if current_tab in ('videos', 'shorts', 'streams') %}
+ <nav class="pagination-list">
+ {{ common_elements.page_buttons(number_of_pages, channel_url + '/' + current_tab, parameters_dictionary, include_ends=(current_sort.__str__() in '34')) }}
+ </nav>
+ {% elif current_tab == 'playlists' or current_tab == 'search' %}
+ <nav class="next-previous-button-row">
+ {{ common_elements.next_previous_buttons(is_last_page, channel_url + '/' + current_tab, parameters_dictionary) }}
</nav>
{% endif %}
- {% endif %}
-
+ </footer>
+ <!-- /new-->
{% endif %}
+
{% endblock main %}
generated by cgit v1.2.3 (git 2.25.1) at 2025-03-12 01:34:06 +0000