base.html 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
  1. {% if settings.app_public %}
  2. {% set app_url = settings.app_url|string %}
  3. {% else %}
  4. {% set app_url = settings.app_url|string + ':' + settings.port_number|string %}
  5. {% endif %}
  6. <!DOCTYPE html>
  7. <html lang="en">
  8. <head>
  9. <meta charset="UTF-8">
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' 'unsafe-eval'; media-src 'self' blob: {{ app_url }}/* data: https://*.googlevideo.com; {{ "img-src 'self' https://*.googleusercontent.com https://*.ggpht.com https://*.ytimg.com;" if not settings.proxy_images else "" }}">
  12. <title>{{ page_title }}</title>
  13. <link title="YT Local" href="/youtube.com/opensearch.xml" rel="search" type="application/opensearchdescription+xml">
  14. <link href="/youtube.com/static/favicon.ico" type="image/x-icon" rel="icon">
  15. <link href="/youtube.com/static/normalize.css" rel="stylesheet">
  16. <link href="{{ theme_path }}" rel="stylesheet">
  17. <link href="/youtube.com/shared.css" rel="stylesheet">
  18. {% block style %}
  19. {{ style }}
  20. {% endblock %}
  21. {% if js_data %}
  22. <script>
  23. // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
  24. data = {{ js_data|tojson }};
  25. // @license-end
  26. </script>
  27. {% endif %}
  28. </head>
  29. <body>
  30. <header class="header">
  31. <nav class="home">
  32. <a href="/youtube.com" id="home-link">YT Local</a>
  33. </nav>
  34. <form class="form" id="site-search" action="/youtube.com/results">
  35. <input type="search" name="search_query" class="search-box" value="{{ search_box_value }}"
  36. {{ "autofocus" if (request.path in ("/", "/results") or error_message) else "" }} required placeholder="Type to search...">
  37. <button type="submit" value="Search" class="search-button">Search</button>
  38. <!-- options -->
  39. <div class="dropdown">
  40. <!-- hidden box -->
  41. <input id="options-toggle-cbox" class="opt-box" type="checkbox">
  42. <!-- end hidden box -->
  43. <label class="dropdown-label" for="options-toggle-cbox">Options</label>
  44. <div class="dropdown-content">
  45. <h3>Sort by</h3>
  46. <div class="option">
  47. <input type="radio" id="sort_relevance" name="sort" value="0">
  48. <label for="sort_relevance">Relevance</label>
  49. </div>
  50. <div class="option">
  51. <input type="radio" id="sort_upload_date" name="sort" value="2">
  52. <label for="sort_upload_date">Upload date</label>
  53. </div>
  54. <div class="option">
  55. <input type="radio" id="sort_view_count" name="sort" value="3">
  56. <label for="sort_view_count">View count</label>
  57. </div>
  58. <div class="option">
  59. <input type="radio" id="sort_rating" name="sort" value="1">
  60. <label for="sort_rating">Rating</label>
  61. </div>
  62. <h3>Upload date</h3>
  63. <div class="option">
  64. <input type="radio" id="time_any" name="time" value="0">
  65. <label for="time_any">Any</label>
  66. </div>
  67. <div class="option">
  68. <input type="radio" id="time_last_hour" name="time" value="1">
  69. <label for="time_last_hour">Last hour</label>
  70. </div>
  71. <div class="option">
  72. <input type="radio" id="time_today" name="time" value="2">
  73. <label for="time_today">Today</label>
  74. </div>
  75. <div class="option">
  76. <input type="radio" id="time_this_week" name="time" value="3">
  77. <label for="time_this_week">This week</label>
  78. </div>
  79. <div class="option">
  80. <input type="radio" id="time_this_month" name="time" value="4">
  81. <label for="time_this_month">This month</label>
  82. </div>
  83. <div class="option">
  84. <input type="radio" id="time_this_year" name="time" value="5">
  85. <label for="time_this_year">This year</label>
  86. </div>
  87. <h3>Type</h3>
  88. <div class="option">
  89. <input type="radio" id="type_any" name="type" value="0">
  90. <label for="type_any">Any</label>
  91. </div>
  92. <div class="option">
  93. <input type="radio" id="type_video" name="type" value="1">
  94. <label for="type_video">Video</label>
  95. </div>
  96. <div class="option">
  97. <input type="radio" id="type_channel" name="type" value="2">
  98. <label for="type_channel">Channel</label>
  99. </div>
  100. <div class="option">
  101. <input type="radio" id="type_playlist" name="type" value="3">
  102. <label for="type_playlist">Playlist</label>
  103. </div>
  104. <div class="option">
  105. <input type="radio" id="type_movie" name="type" value="4">
  106. <label for="type_movie">Movie</label>
  107. </div>
  108. <div class="option">
  109. <input type="radio" id="type_show" name="type" value="5">
  110. <label for="type_show">Show</label>
  111. </div>
  112. <h3>Duration</h3>
  113. <div class="option">
  114. <input type="radio" id="duration_any" name="duration" value="0">
  115. <label for="duration_any">Any</label>
  116. </div>
  117. <div class="option">
  118. <input type="radio" id="duration_short" name="duration" value="1">
  119. <label for="duration_short">Short (&lt; 4 minutes)</label>
  120. </div>
  121. <div class="option">
  122. <input type="radio" id="duration_long" name="duration" value="2">
  123. <label for="duration_long">Long (&gt; 20 minutes)</label>
  124. </div>
  125. </div>
  126. </div>
  127. </form>
  128. {% if header_playlist_names is defined %}
  129. <form class="playlist" id="playlist-edit" action="/youtube.com/edit_playlist" method="post" target="_self">
  130. <input class="play-box" name="playlist_name" id="playlist-name-selection" list="playlist-options" type="search" placeholder="Add name of your playlist...">
  131. <datalist class="play-hidden" id="playlist-options">
  132. {% for playlist_name in header_playlist_names %}
  133. <option value="{{ playlist_name }}">{{ playlist_name }}</option>
  134. {% endfor %}
  135. </datalist>
  136. <button class="play-add" type="submit" id="playlist-add-button" name="action" value="add">+List</button>
  137. <div class="play-clean">
  138. <button type="reset" id="item-selection-reset">Clear</button>
  139. </div>
  140. </form>
  141. <script src="/youtube.com/static/js/playlistadd.js"></script>
  142. {% endif %}
  143. </header>
  144. <main class="main">
  145. {% block main %}
  146. {{ main }}
  147. {% endblock %}
  148. </main>
  149. <footer class="footer">
  150. <div>
  151. <a href="https://git.sr.ht/~heckyel/yt-local"
  152. rel="noopener noreferrer" target="_blank">
  153. Released under the AGPLv3 or later
  154. </a>
  155. </div>
  156. <div>
  157. <p>This site is Free/Libre Software</p>
  158. {% if current_commit != None %}
  159. <p>Current version: {{ current_commit }} @ {{ current_branch }}</p>
  160. {% else %}
  161. <p>Current version: {{ current_version }}</p>
  162. {% endif %}
  163. </div>
  164. <div>
  165. <a href="/youtube.com/licenses" data-jslicense="1" rel="noopener noreferrer" target="_blank">JavaScript licenses</a>
  166. </div>
  167. </footer>
  168. </body>
  169. </html>