Add badge to UI to differentiate member videos

assets/css/default.css

@@ -550,6 +550,11 @@ span > select {
   color: #565d64;
 }
 
+.light-theme .video-badges > span {
+  background: rgb(235, 235, 235);
+  color: #828282;
+}
+
 @media (prefers-color-scheme: light) {
   .no-theme a:hover,
   .no-theme a:active,
@@ -596,6 +601,11 @@ span > select {
   .light-theme .pure-menu-heading {
     color: #565d64;
   }
+
+  .no-theme .video-badges > span {
+    background: rgb(235, 235, 235);
+    color: #828282;
+  }
 }
 
 
@@ -658,6 +668,12 @@ body.dark-theme {
   color: inherit;
 }
 
+.dark-theme .video-badges > span {
+  background: rgb(50, 50, 50);
+  color: #9e9e9e;
+}
+
+
 @media (prefers-color-scheme: dark) {
   .no-theme a:hover,
   .no-theme a:active,
@@ -719,6 +735,11 @@ body.dark-theme {
   .no-theme footer a {
     color: #adadad !important;
   }
+
+  .no-theme .video-badges > span {
+    background: rgb(50, 50, 50);
+    color: #9e9e9e;
+  }
 }
 
 
@@ -816,3 +837,19 @@ h1, h2, h3, h4, h5, p,
 #download_widget {
     width: 100%;
 }
+
+.video-badges > span {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+
+  padding: 2px 10px;
+  border-radius: 10px;
+
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.video-badges > i {
+  margin-right: 5px;
+}

locales/en-US.json

@@ -501,5 +501,6 @@
     "toggle_theme": "Toggle Theme",
     "carousel_slide": "Slide {{current}} of {{total}}",
     "carousel_skip": "Skip the Carousel",
-    "carousel_go_to": "Go to slide `x`"
+    "carousel_go_to": "Go to slide `x`",
+    "video_badges_members_only": "Members only"
 }

src/invidious/views/components/item.ecr

@@ -200,6 +200,16 @@
                 </div>
                 <% end %>
             </div>
+            <% if item.responds_to?(:badges) && !item.badges.none? %>
+                <div class="video-card-row flexible video-badges">
+                    <%
+                        # TODO Other types of badges
+                    %>
+                    <% if item.badges.members_only? %>
+                        <span><i class="icon ion ion-md-lock"></i><%=translate(locale, "video_badges_members_only")%></span>
+                    <% end %>
+                </div>
+            <%end%>
         <% end %>
     </div>
 </div>