Implement video filters

pug/filters.pug

@@ -0,0 +1,77 @@
+extends includes/layout
+
+mixin filter_type_option(label, value)
+  option(value=value selected=(value === type))= label
+
+block head
+  title Filters - CloudTube
+  script(type="module" src=getStaticURL("html", "static/js/filters.js"))
+
+block content
+  main.filters-page
+    h1 Filters
+    details(open=!!type)
+      summary New filter
+      form(method="post")
+        if label
+          input(type="hidden" name="label" value=label)
+        if referrer
+          input(type="hidden" name="referrer" value=referrer)
+        .field-row
+          label.field-row__label(for="filter-type") Type
+          select(id="filter-type" name="filter-type").border-look.field-row__input
+            +filter_type_option("Title", "title")
+            +filter_type_option("Channel name", "channel-name")
+            +filter_type_option("Channel ID", "channel-id")
+        .field-row.max-width-input
+          label.field-row__label(for="new-filter") Contents
+          input(type="text" id="new-filter" name="new-filter" value=contents required maxlength=filterMaxLength).border-look.field-row__input
+          .field-row__description(style=(type !== "title" ? "display: none" : ""))#title-pattern-matching
+            | For titles, pattern matching is supported. Regular expressions are #{regexpEnabledText} enabled.
+            |
+            a(href="https://git.sr.ht/~cadence/tube-docs/tree/main/item/docs/cloudtube/Filters.md") For help, see the documentation.
+        if compileError
+          section.filter-compile-error
+            header.filter-compile-error__header Your pattern failed to compile.
+            pre.filter-compile-error__trace
+              = contents + "\n"
+              = " ".repeat(compileError.position) + "^ " + compileError.message
+            div: a(href="https://git.sr.ht/~cadence/tube-docs/tree/main/item/docs/cloudtube/Filters.md") For help, see the documentation.
+        else
+          if type
+            .filter-confirmation-notice.
+              You can refine the filter further if you need to.
+              When you're happy, click Save.
+        .save-filter
+          button.border-look
+            if referrer
+              | Save & return
+            else
+              | Save
+
+
+    .filter-list
+      - let someFiltersDisplayed = false
+      each category in categories
+        if category.filters.length
+          - someFiltersDisplayed = true
+          h2.filter-category-header= category.name
+        div
+          each filter in category.filters
+            .filter
+              .filter__details
+                - let type = `type: ${filter.type}`
+                - let content = filter.data
+                if filter.type === "channel-id" && filter.label
+                  - type += `, id: ${filter.data}`
+                  - content = filter.label
+                .filter__type= type
+                .filter__content= content
+              form.filter__remove(method="post" action="/filters/delete")
+                input(type="hidden" name="delete-id" value=filter.id)
+                button.border-look Remove
+      if !someFiltersDisplayed
+        .no-filters
+          h2 You haven't created any filters.
+          p Create one now and cleanse your mind.
+          p You can add filters using the button on video thumbnails.

pug/includes/video-list-item.pug

@@ -8,6 +8,15 @@ mixin video_list_item(className, video, instanceOrigin, options = {})
         img(src=`/vi/${video.videoId}/mqdefault.jpg` width=320 height=180 alt="").image
       if video.second__lengthText != undefined
         span.duration= video.second__lengthText
+      details.thumbnail__more
+        summary.thumbnail__show-more ×
+        .thumbnail__options-container
+          .thumbnail__options-list
+            - const paramsBase = {}
+            - if (url) paramsBase.referrer = url.pathname + (url.search && "?" + url.search)
+            a(href=`/filters?${new URLSearchParams({"channel-id": video.authorId, label: video.author, ...paramsBase})}`).menu-look Hide this channel
+            a(href=`/filters?${new URLSearchParams({title: video.title, ...paramsBase})}`).menu-look Hide by title
+            a(href="/filters").menu-look Edit all filters
     .info
       div.title: a(href=link).title-link= video.title
       div.author-line

pug/settings.pug

@@ -81,6 +81,12 @@ block content
       .save-settings
         button.border-look Save
 
+    h2.more-settings-header More settings
+
+    section.more-settings
+      ul.more-settings__list
+        li.more-settings__list-item: a(href="/filters") Edit filters
+
     if user.token
       details.data-management
         summary Sync data