HTML: Use new buttons for playlists (save/delete/add videos/etc...)

assets/css/default.css

@@ -219,7 +219,7 @@ div.thumbnail > .bottom-right-overlay {
 }
 
 .length, .top-left-overlay button {
-  background-color: rgba(35, 35, 35, 0.85);
+  background-color: rgba(35, 35, 35, 0.85) !important;
 }
 
 

locales/en-US.json

@@ -9,6 +9,11 @@
     "generic_subscribers_count_plural": "{{count}} subscribers",
     "generic_subscriptions_count": "{{count}} subscription",
     "generic_subscriptions_count_plural": "{{count}} subscriptions",
+    "generic_button_delete": "Delete",
+    "generic_button_edit": "Edit",
+    "generic_button_save": "Save",
+    "generic_button_cancel": "Cancel",
+    "generic_button_rss": "RSS",
     "LIVE": "LIVE",
     "Shared `x` ago": "Shared `x` ago",
     "Unsubscribe": "Unsubscribe",
@@ -170,6 +175,7 @@
     "Title": "Title",
     "Playlist privacy": "Playlist privacy",
     "Editing playlist `x`": "Editing playlist `x`",
+    "playlist_button_add_items": "Add videos",
     "Show more": "Show more",
     "Show less": "Show less",
     "Watch on YouTube": "Watch on YouTube",

locales/fr.json

@@ -9,6 +9,11 @@
     "generic_subscribers_count_plural": "{{count}} abonnés",
     "generic_subscriptions_count": "{{count}} abonnement",
     "generic_subscriptions_count_plural": "{{count}} abonnements",
+    "generic_button_delete": "Supprimer",
+    "generic_button_edit": "Editer",
+    "generic_button_save": "Enregistrer",
+    "generic_button_cancel": "Annuler",
+    "generic_button_rss": "RSS",
     "LIVE": "EN DIRECT",
     "Shared `x` ago": "Ajoutée il y a `x`",
     "Unsubscribe": "Se désabonner",
@@ -149,6 +154,7 @@
     "Title": "Titre",
     "Playlist privacy": "Paramètres de confidentialité de la liste de lecture",
     "Editing playlist `x`": "Modifier la liste de lecture `x`",
+    "playlist_button_add_items": "Ajouter des vidéos",
     "Show more": "Afficher plus",
     "Show less": "Afficher moins",
     "Watch on YouTube": "Voir la vidéo sur Youtube",

src/invidious/views/components/item.ecr

@@ -71,6 +71,11 @@
                 <%- if !env.get("preferences").as(Preferences).thin_mode -%>
                     <a tabindex="-1" href="<%= link_url %>">
                         <img loading="lazy" class="thumbnail" src="/vi/<%= item.id %>/mqdefault.jpg" alt="" />
+
+                        <% if item_watched %>
+                            <div class="watched-overlay"></div>
+                            <div class="watched-indicator" data-length="<%= item.length_seconds %>" data-id="<%= item.id %>"></div>
+                        <% end %>
                     </a>
                 <%- end -%>
 
@@ -109,11 +114,6 @@
                         <p class="length"><%= recode_length_seconds(item.length_seconds) %></p>
                     <%- end -%>
                 </div>
-
-                <% if item_watched %>
-                    <div class="watched-overlay"></div>
-                    <div class="watched-indicator" data-length="<%= item.length_seconds %>" data-id="<%= item.id %>"></div>
-                <% end %>
             </div>
 
             <div class="video-card-row">

src/invidious/views/edit_playlist.ecr

@@ -6,35 +6,43 @@
 <% end %>
 
 <form class="pure-form" action="/edit_playlist?list=<%= plid %>" method="post">
-    <div class="pure-g h-box">
+    <div class="h-box flexible">
-        <div class="pure-u-2-3">
+        <div class="flex-right button-container">
+            <div class="pure-u">
+                <a class="pure-button pure-button-secondary low-profile" dir="auto" href="/playlist?list=<%= plid %>">
+                    <i class="icon ion-md-close"></i>&nbsp;<%= translate(locale, "generic_button_cancel") %>
+                </a>
+            </div>
+            <div class="pure-u">
+                <button class="pure-button pure-button-secondary low-profile" dir="auto" type="submit">
+                    <i class="icon ion-md-save"></i>&nbsp;<%= translate(locale, "generic_button_save") %>
+                </button>
+            </div>
+            <div class="pure-u">
+                <a class="pure-button pure-button-secondary low-profile" dir="auto" href="/delete_playlist?list=<%= plid %>">
+                    <i class="icon ion-md-trash"></i>&nbsp;<%= translate(locale, "generic_button_delete") %>
+                </a>
+            </div>
+        </div>
+    </div>
+
+    <div class="h-box flexible title">
+        <div>
             <h3><input class="pure-input-1" maxlength="150" name="title" type="text" value="<%= title %>"></h3>
+        </div>
+    </div>
+
+    <div class="h-box">
+        <div class="pure-u-1-1">
             <b>
                 <%= HTML.escape(playlist.author) %> |
                 <%= translate_count(locale, "generic_videos_count", playlist.video_count) %> |
-                <%= translate(locale, "Updated `x` ago", recode_date(playlist.updated, locale)) %> |
-                <i class="icon <%= {"ion-md-globe", "ion-ios-unlock", "ion-ios-lock"}[playlist.privacy.value] %>"></i>
-                <select name="privacy">
-                <% {"Public", "Unlisted", "Private"}.each do |option| %>
-                    <option value="<%= option %>" <% if option == playlist.privacy.to_s %>selected<% end %>><%= translate(locale, option) %></option>
-                <% end %>
-                </select>
             </b>
-        </div>
+            <select name="privacy">
-        <div class="pure-u-1-3" style="text-align:right">
+            <%- {"Public", "Unlisted", "Private"}.each do |option| -%>
-            <h3>
+                <option value="<%= option %>" <% if option == playlist.privacy.to_s %>selected<% end %>><%= translate(locale, option) %></option>
-                <div class="pure-g user-field">
+            <%- end -%>
-                    <div class="pure-u-1-3">
+            </select>
-                        <a href="javascript:void(0)">
-                            <button type="submit" style="all:unset">
-                                <i class="icon ion-md-save"></i>
-                            </button>
-                        </a>
-                    </div>
-                    <div class="pure-u-1-3"><a href="/delete_playlist?list=<%= plid %>"><i class="icon ion-md-trash"></i></a></div>
-                    <div class="pure-u-1-3"><a href="/feed/playlist/<%= plid %>"><i class="icon ion-logo-rss"></i></a></div>
-                </div>
-            </h3>
         </div>
     </div>
 
@@ -44,14 +52,6 @@
     <input type="hidden" name="csrf_token" value="<%= HTML.escape(csrf_token) %>">
 </form>
 
-<% if playlist.is_a?(InvidiousPlaylist) && playlist.author == user.try &.email %>
-<div class="h-box" style="text-align:right">
-    <h3>
-        <a href="/add_playlist_items?list=<%= plid %>"><i class="icon ion-md-add"></i></a>
-    </h3>
-</div>
-<% end %>
-
 <div class="h-box">
     <hr>
 </div>

src/invidious/views/playlist.ecr

@@ -7,8 +7,51 @@
 <% end %>
 
 <div class="pure-g h-box">
-    <div class="pure-u-2-3">
+    <div class="pure-u-1-2">
         <h3><%= title %></h3>
+    </div>
+
+    <div class="pure-u-1-2 user-field">
+        <%- if playlist.is_a?(InvidiousPlaylist) && playlist.author == user.try &.email -%>
+            <div class="pure-u-1-3">
+                <a class="pure-button pure-button-secondary low-profile" dir="auto" href="/add_playlist_items?list=<%= plid %>">
+                    <i class="icon ion-md-add"></i>&nbsp;<%= translate(locale, "playlist_button_add_items") %>
+                </a>
+            </div>
+            <div class="pure-u-1-3">
+                <a class="pure-button pure-button-secondary low-profile" dir="auto" href="/edit_playlist?list=<%= plid %>">
+                    <i class="icon ion-md-create"></i>&nbsp;<%= translate(locale, "generic_button_edit") %>
+                </a>
+            </div>
+            <div class="pure-u-1-3">
+                <a class="pure-button pure-button-secondary low-profile" dir="auto" href="/delete_playlist?list=<%= plid %>">
+                    <i class="icon ion-md-trash"></i>&nbsp;<%= translate(locale, "generic_button_delete") %>
+                </a>
+            </div>
+        <%- else -%>
+            <div class="pure-u-1-3">
+                <%- if IV::Database::Playlists.exists?(playlist.id) -%>
+                    <a class="pure-button pure-button-secondary low-profile" dir="auto" href="/subscribe_playlist?list=<%= plid %>">
+                        <i class="icon ion-md-add"></i>&nbsp;<%= translate(locale, "Subscribe") %>
+                    </a>
+                <%- else -%>
+                    <a class="pure-button pure-button-secondary low-profile" dir="auto" href="/delete_playlist?list=<%= plid %>">
+                        <i class="icon ion-md-trash"></i>&nbsp;<%= translate(locale, "Unsubscribe") %>
+                    </a>
+                <%- end -%>
+            </div>
+        <%- end -%>
+
+        <div class="pure-u-1-3">
+            <a class="pure-button pure-button-secondary low-profile" dir="auto" href="/feed/playlist/<%= plid %>">
+                <i class="icon ion-logo-rss"></i>&nbsp;<%= translate(locale, "generic_button_rss") %>
+            </a>
+        </div>
+    </div>
+</div>
+
+<div class="h-box">
+    <div class="pure-u-1-1">
         <% if playlist.is_a? InvidiousPlaylist %>
             <b>
                 <% if playlist.author == user.try &.email %>
@@ -54,37 +97,12 @@
             </div>
         <% end %>
     </div>
-    <div class="pure-u-1-3" style="text-align:right">
-        <h3>
-            <div class="pure-g user-field">
-                <% if playlist.is_a?(InvidiousPlaylist) && playlist.author == user.try &.email %>
-                    <div class="pure-u-1-3"><a href="/edit_playlist?list=<%= plid %>"><i class="icon ion-md-create"></i></a></div>
-                    <div class="pure-u-1-3"><a href="/delete_playlist?list=<%= plid %>"><i class="icon ion-md-trash"></i></a></div>
-                <% else %>
-                    <% if Invidious::Database::Playlists.exists?(playlist.id) %>
-                        <div class="pure-u-1-3"><a href="/subscribe_playlist?list=<%= plid %>"><i class="icon ion-md-add"></i></a></div>
-                    <% else %>
-                        <div class="pure-u-1-3"><a href="/delete_playlist?list=<%= plid %>"><i class="icon ion-md-trash"></i></a></div>
-                    <% end %>
-                <% end %>
-                <div class="pure-u-1-3"><a href="/feed/playlist/<%= plid %>"><i class="icon ion-logo-rss"></i></a></div>
-            </div>
-        </h3>
-    </div>
 </div>
 
 <div class="h-box">
     <div id="descriptionWrapper"><%= playlist.description_html %></div>
 </div>
 
-<% if playlist.is_a?(InvidiousPlaylist) && playlist.author == user.try &.email %>
-<div class="h-box" style="text-align:right">
-    <h3>
-        <a href="/add_playlist_items?list=<%= plid %>"><i class="icon ion-md-add"></i></a>
-    </h3>
-</div>
-<% end %>
-
 <div class="h-box">
     <hr>
 </div>