Merge 3cfd5798ba into 4782a67038

Closes issue 4880

.github/workflows/build-stable-container.yml

@@ -1,6 +1,7 @@
 name: Build and release container
 
 on:
+  workflow_dispatch:
   push:
     tags:
       - "v*"
@@ -46,9 +47,11 @@ jobs:
         uses: docker/metadata-action@v5
         with:
           images: quay.io/invidious/invidious
+          flavor: |
+            latest=false
           tags: |
             type=semver,pattern={{version}}
-            type=raw,value=latest,enable=${{ github.ref == format('refs/heads/{0}', 'master') }}
+            type=raw,value=latest
           labels: |
             quay.expires-after=12w
 
@@ -70,10 +73,11 @@ jobs:
         with:
           images: quay.io/invidious/invidious
           flavor: |
+            latest=false
             suffix=-arm64
           tags: |
             type=semver,pattern={{version}}
-            type=raw,value=latest,enable=${{ github.ref == format('refs/heads/{0}', 'master') }}
+            type=raw,value=latest
           labels: |
             quay.expires-after=12w
 

CHANGELOG.md

@@ -1,6 +1,189 @@
 # CHANGELOG
 
-## 2024-04-26
+
+## v2.20240825.2 (2024-08-26)
+
+This releases fixes the container tags pushed on quay.io.
+Previously, the ARM64 build was released under the `latest` tag, instead of `latest-arm64`.
+
+### Full list of pull requests merged since the last release (newest first)
+
+CI: Fix docker container tags ([#4883], by @SamantazFox)
+
+[#4877]: https://github.com/iv-org/invidious/pull/4877
+
+
+## v2.20240825.1 (2024-08-25)
+
+Add patch component to be [semver] compliant and make github actions happy.
+
+[semver]: https://semver.org/
+
+### Full list of pull requests merged since the last release (newest first)
+
+Allow manual trigger of release-container build ([#4877], thanks @syeopite)
+
+[#4877]: https://github.com/iv-org/invidious/pull/4877
+
+
+## v2.20240825.0 (2024-08-25)
+
+### New features & important changes
+
+#### For users
+
+* The search bar now has a button that you can click!
+* Youtube URLs can be pasted directly in the search bar. Prepend search query with a
+  backslash (`\`) to disable that feature (useful if you need to search for a video whose
+  title contains some youtube URL).
+* On the channel page the "streams" tab can be sorted by either: "newest", "oldest" or "popular"
+* Lots of translations have been updated (thanks to our contributors on Weblate!)
+* Videos embedded in local HTML files (e.g: a webpage saved from a blog) can now be played
+
+#### For instance owners
+
+* Invidious now has the ability to provide a `po_token` and `visitordata` to Youtube in order to
+  circumvent current Youtube restrictions.
+* Invidious can use an (optional) external signature server like [inv_sig_helper]. Please note that
+  some videos can't be played without that signature server.
+* The Helm charts were moved to a separate repo: https://github.com/iv-org/invidious-helm-chart
+* We have changed how containers are released: the `latest` tag now tracks tagged releases, whereas
+  the `master` tag tracks the most recent commits of the `master` branch ("nightly" builds).
+
+[inv_sig_helper]: https://github.com/iv-org/inv_sig_helper
+
+#### For developpers
+
+* The versions of Crystal that we test in CI/CD are now: `1.9.2`, `1.10.1`, `1.11.2`, `1.12.1`.
+  Please note that due to a bug in the `libxml` bindings (See [#4256]), versions prior to `1.10.0`
+  are not recommended to use.
+* Thanks to @syeopite, the code is now [ameba] compliant.
+* Ameba is part of our CI/CD pipeline, and its rules will be enforced in future PRs.
+* The transcript code has been rewritten to permit transcripts as a feature rather than being
+  only a workaround for captions. Trancripts feature is coming soon!
+* Various fixes regarding the logic interacting with Youtube
+* The `sort_by` parameter can be used on the `/api/v1/channels/{id}/streams` endpoint. Accepted
+  values are: "newest", "oldest" and "popular"
+
+[ameba]: https://github.com/crystal-ameba/ameba
+[#4256]: https://github.com/iv-org/invidious/issues/4256
+
+
+### Bugs fixed
+
+#### User-side
+
+* Channels: fixed broken "subscribers" and "views" counters
+* Watch page: playback position is reset at the end of a video, so that the next time this video
+  is watched, it will start from the beginning rather than 15 seconds before the end
+* Watch page: the items in the "add to playlist" drop down are now sorted alphabetically
+* Videos: the "genre" URL is now always pointing to a valid webpage
+* Playlists: Fixed `Could not parse N episodes` error on podcast playlists
+* All external links should now have the [`rel`] attibute set to `noreferrer noopener` for
+  increased privacy.
+* Preferences: Fixed the admin-only "modified source code" input being ignored
+* Watch/channel pages: use the full image URL in `og:image` and `twitter:image` meta tags
+
+[`rel`]: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel
+
+#### API
+
+* fixed the `local` parameter not applying to `formatStreams` on `/api/v1/videos/{id}`
+* fixed an `Index out of bounds` error hapenning when a playlist had no videos
+* fixed duplicated query parameters in proxied video URLs
+* Return actual video height/width/fps rather than hard coded values
+* Fixed the `/api/v1/popular` endpoint not returning a proper error code/message when the
+  popular page/endpoint are disabled.
+
+
+### Full list of pull requests merged since the last release (newest first)
+
+* HTML: Sort playlists alphabetically in watch page drop down ([#4853], by @SamantazFox)
+* Videos: Fix XSS vulnerability in description/comments ([#4852], thanks _anonymous_)
+* YtAPI: Bump client versions ([#4849], by @SamantazFox)
+* SigHelper: Fix inverted time comparison in 'check_update' ([#4845], by @SamantazFox)
+* Storyboards: Various fixes and code cleaning ([#4153], by SamantazFox)
+* Fix lint errors introduced in #4146 and #4295 ([#4876], thanks @syeopite)
+* Search: Add support for Youtube URLs ([#4146], by @SamantazFox)
+* Channel: Render age restricted channels ([#4295], thanks @ChunkyProgrammer)
+* Ameba: Miscellaneous fixes ([#4807], thanks @syeopite)
+* API: Proxy formatStreams URLs too ([#4859], thanks @colinleroy)
+* UI: Add search button to search bar ([#4706], thanks @thansk)
+* Add ability to set po_token and visitordata ID ([#4789], thanks @unixfox)
+* Add support for an external signature server ([#4772], by @SamantazFox)
+* Ameba: Fix Naming/VariableNames ([#4790], thanks @syeopite)
+* Translations update from Hosted Weblate ([#4659])
+* Ameba: Fix Lint/UselessAssign ([#4795], thanks @syeopite)
+* HTML: Add rel="noreferrer noopener" to external links ([#4667], thanks @ulmemxpoc)
+* Remove unused methods in Invidious::LogHandler ([#4812], thanks @syeopite)
+* Ameba: Fix Lint/NotNilAfterNoBang ([#4796], thanks @syeopite)
+* Ameba: Fix unused argument Lint warnings ([#4805], thanks @syeopite)
+* Ameba: i18next.cr fixes ([#4806], thanks @syeopite)
+* Ameba: Disable rules ([#4792], thanks @syeopite)
+* Channel: parse subscriber count and channel banner ([#4785], thanks @ChunkyProgrammer)
+* Player: Fix playback position of already watched videos ([#4731], thanks @Fijxu)
+* Videos: Fix genre url being unusable ([#4717], thanks @meatball133)
+* API: Fix out of bound error on empty playlists ([#4696], thanks @Fijxu)
+* Handle playlists cataloged as Podcast ([#4695], thanks @Fijxu)
+* API: Fix duplicated query parameters in proxied video URLs ([#4587], thanks @absidue)
+* API: Return actual stream height, width and fps ([#4586], thanks @absidue)
+* Preferences: Fix handling of modified source code URL ([#4437], thanks @nooptek)
+* API: Fix URL for vtt subtitles ([#4221], thanks @karelrooted)
+* Channels: Add sort options to streams ([#4224], thanks @src-tinkerer)
+* API: Fix error code for disabled popular endpoint ([#4296], thanks @iBicha)
+* Allow embedding videos in local HTML files ([#4450], thanks @tomasz1986)
+* CI: Bump Crystal version matrix ([#4654], by @SamantazFox)
+* YtAPI: Remove API keys like official clients ([#4655], by @SamantazFox)
+* HTML: Use full URL in the og:image property ([#4675], thanks @Fijxu)
+* Rewrite transcript logic to be more generic ([#4747], thanks @syeopite)
+* CI: Run Ameba ([#4753], thanks @syeopite)
+* CI: Add release based containers ([#4763], thanks @syeopite)
+* move helm chart to a dedicated github repository ([#4711], thanks @unixfox)
+
+[#4146]: https://github.com/iv-org/invidious/pull/4146
+[#4153]: https://github.com/iv-org/invidious/pull/4153
+[#4221]: https://github.com/iv-org/invidious/pull/4221
+[#4224]: https://github.com/iv-org/invidious/pull/4224
+[#4295]: https://github.com/iv-org/invidious/pull/4295
+[#4296]: https://github.com/iv-org/invidious/pull/4296
+[#4437]: https://github.com/iv-org/invidious/pull/4437
+[#4450]: https://github.com/iv-org/invidious/pull/4450
+[#4586]: https://github.com/iv-org/invidious/pull/4586
+[#4587]: https://github.com/iv-org/invidious/pull/4587
+[#4654]: https://github.com/iv-org/invidious/pull/4654
+[#4655]: https://github.com/iv-org/invidious/pull/4655
+[#4659]: https://github.com/iv-org/invidious/pull/4659
+[#4667]: https://github.com/iv-org/invidious/pull/4667
+[#4675]: https://github.com/iv-org/invidious/pull/4675
+[#4695]: https://github.com/iv-org/invidious/pull/4695
+[#4696]: https://github.com/iv-org/invidious/pull/4696
+[#4706]: https://github.com/iv-org/invidious/pull/4706
+[#4711]: https://github.com/iv-org/invidious/pull/4711
+[#4717]: https://github.com/iv-org/invidious/pull/4717
+[#4731]: https://github.com/iv-org/invidious/pull/4731
+[#4747]: https://github.com/iv-org/invidious/pull/4747
+[#4753]: https://github.com/iv-org/invidious/pull/4753
+[#4763]: https://github.com/iv-org/invidious/pull/4763
+[#4772]: https://github.com/iv-org/invidious/pull/4772
+[#4785]: https://github.com/iv-org/invidious/pull/4785
+[#4789]: https://github.com/iv-org/invidious/pull/4789
+[#4790]: https://github.com/iv-org/invidious/pull/4790
+[#4792]: https://github.com/iv-org/invidious/pull/4792
+[#4795]: https://github.com/iv-org/invidious/pull/4795
+[#4796]: https://github.com/iv-org/invidious/pull/4796
+[#4805]: https://github.com/iv-org/invidious/pull/4805
+[#4806]: https://github.com/iv-org/invidious/pull/4806
+[#4807]: https://github.com/iv-org/invidious/pull/4807
+[#4812]: https://github.com/iv-org/invidious/pull/4812
+[#4845]: https://github.com/iv-org/invidious/pull/4845
+[#4849]: https://github.com/iv-org/invidious/pull/4849
+[#4852]: https://github.com/iv-org/invidious/pull/4852
+[#4853]: https://github.com/iv-org/invidious/pull/4853
+[#4859]: https://github.com/iv-org/invidious/pull/4859
+[#4876]: https://github.com/iv-org/invidious/pull/4876
+
+
+## v2.20240427 (2024-04-27)
 
 Major bug fixes:
  * Videos: Use android test suite client (#4650, thanks @SamantazFox)

assets/css/default.css

@@ -460,31 +460,68 @@ p.video-data   { margin: 0; font-weight: bold; font-size: 80%; }
  */
 
 footer {
-  margin-top: auto;
+  color: #919191;
+  margin-top: 2.5em;
   padding: 1.5em 0;
-  text-align: center;
-  max-height: 30vh;
 }
 
-.light-theme footer {
+#footer-content-container {
-  color: #7c7c7c;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
 }
 
-.dark-theme footer {
+#footer-content-container > hr {
-  color: #adadad;
+  margin: 0;
+  color: rgb(241, 241, 241);
 }
 
-.light-theme footer a {
+.footer-content {
-  color: #7c7c7c !important;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin-top: -10px;
 }
 
-.dark-theme footer a {
+footer a {
-  color: #adadad !important;
+  color: #919191;
 }
 
-footer span {
+.footer-content #footer-custom-text > b {
-  margin: 4px 0;
+  font-size: 30px;
-  display: block;
+}
+
+.footer-section {
+  margin-right: 20px;
+  margin-top: 20px;
+}
+
+.footer-section-list {
+  margin-top: 8px;
+}
+
+.footer-section-item {
+  margin-bottom: 4px;
+}
+
+.footer-footer .left {
+  float: left
+}
+
+.footer-footer .right {
+  float: right;
+  display: flex;
+  gap: 5px;
+}
+
+.footer-right .right a {
+  color: #919191
+}
+
+@media screen and (max-width: 929px) {
+  #footer-custom-text {
+    display: none;
+  }
 }
 
 /* keyframes */
@@ -550,6 +587,23 @@ span > select {
   color: #565d64;
 }
 
+.light-theme footer {
+  color: #7a7a7a;
+  background: #f2f2f2;
+}
+
+.light-theme #footer-content-container > hr {
+  color: rgb(241, 241, 241);
+}
+
+.light-theme footer a {
+  color: #7c7c7c !important;
+}
+
+.light-theme footer #footer-custom-text > b {
+  color: #565D64;
+}
+
 @media (prefers-color-scheme: light) {
   .no-theme a:hover,
   .no-theme a:active,
@@ -585,17 +639,22 @@ span > select {
     color: #303030;
   }
 
+  .light-theme .pure-menu-heading {
+    color: #565d64;
+  }
+
   .no-theme footer {
+    background: #f2f2f2;
     color: #7c7c7c;
   }
   
+  .no-theme footer #footer-custom-text > b {
+    color: #565D64;
+  }
+
   .no-theme footer a {
     color: #7c7c7c !important;
   }
-
-  .light-theme .pure-menu-heading {
-    color: #565d64;
-  }
 }
 
 
@@ -658,6 +717,20 @@ body.dark-theme {
   color: inherit;
 }
 
+
+.dark-theme footer {
+  background: #16191a;
+}
+
+.dark-theme #footer-content-container > hr {
+  color: #313131;
+} 
+
+.dark-theme .footer-content #footer-custom-text > b {
+  color: #ccc;
+}
+
+
 @media (prefers-color-scheme: dark) {
   .no-theme a:hover,
   .no-theme a:active,
@@ -713,11 +786,12 @@ body.dark-theme {
   }
 
   .no-theme footer {
-    color: #adadad;
+    background: #16191a;
+    color: #313131;
   }
 
-  .no-theme footer a {
+  .no-theme footer #footer-custom-text > b {
-    color: #adadad !important;
+    color: #ccc;
   }
 }
 
@@ -803,6 +877,17 @@ h1, h2, h3, h4, h5, p,
 /* Center the "invidious" logo on the search page */
 #logo > h1 { text-align: center; }
 
+#footer_buffer {
+  margin-top: 50vh;
+}
+
+@media screen and (max-width: 450px) {
+  #footer_buffer {
+    display: none;
+  }
+}
+
+
 /* IE11 fixes */
 :-ms-input-placeholder { color: #888; }
 

config/config.example.yml

@@ -401,9 +401,8 @@ jobs:
     ##
     enable: true
 
-
 # -----------------------------
-#  Miscellaneous
+#  Instance customization
 # -----------------------------
 
 ##
@@ -415,6 +414,78 @@ jobs:
 ##
 #banner:
 
+##
+## custom text displayed at the bottom of every page within Invidious' footer. This can
+## used for instance announcements, e.g
+##
+## When unset Invidious defaults to some text that describes what Invidious is. See
+## localization key default_invidious_footer_text 
+##
+## Accepted values: any string. HTML is accepted.
+## Default: <none>
+##
+#footer:
+
+##
+## Source code URL. If your instance is running a modified source
+## code, you MUST publish it somewhere and set this option.
+##
+## Accepted values: a string
+## Default: <none>
+##
+#modified_source_code_url: ""
+
+##
+## Email to contact the instance maintainer; used in a mailto: link within the footer. 
+##
+## Accepted values: string
+## Default: <none>
+##
+# instance_maintainer_email:
+
+##
+## Link to the terms of service of the instance (if any)
+##
+## Displayed within the instance section of the footer
+##
+## Accepted values: String (link)
+## Default: <none>
+##
+# footer_instance_tos_link:
+
+##
+## Link to the privacy-policy of the instance (if any)
+##
+## Displayed within the instance section of the footer
+##
+## Accepted values: String (link)
+## Default: <none>
+##
+# footer_instance_privacy_policy_link:
+
+##
+## Instance donation URL. If your instance has a donation option.
+## you can add it here so it will be present in the footer along
+## with the donation link for the project itself.
+##
+## Accepted values: a string
+## Default: <none>
+##
+#footer_instance_donate_link: ""
+
+##
+## Custom fields to be displayed within the footer's instance section
+##
+## Accepted values: A nested array mapping field name and links together.
+## IE: [ ["field1", "https://example.com/1"], ["field2", "https://example.com/2"] ]
+## Default: <none>
+##
+# footer_instance_section_custom_fields: []
+
+# -----------------------------
+#  Miscellaneous
+# -----------------------------
+
 ##
 ## Subscribe to channels using PubSubHub (Google PubSubHubbub service).
 ## PubSubHub allows Invidious to be instantly notified when a new video
@@ -468,15 +539,6 @@ hmac_key: "CHANGE_ME!!"
 ##
 #cache_annotations: false
 
-##
-## Source code URL. If your instance is running a modified source
-## code, you MUST publish it somewhere and set this option.
-##
-## Accepted values: a string
-## Default: <none>
-##
-#modified_source_code_url: ""
-
 ##
 ## Maximum custom playlist length limit.
 ##
@@ -485,6 +547,7 @@ hmac_key: "CHANGE_ME!!"
 ##
 #playlist_length_limit: 500
 
+
 #########################################
 #
 #  Default user preferences

locales/en-US.json

@@ -458,14 +458,32 @@
     "search_filters_sort_option_views": "View count",
     "search_filters_apply_button": "Apply selected filters",
     "Current version: ": "Current version: ",
+    "footer_current_version_modified": "Current version (modified): ",
     "next_steps_error_message": "After which you should try to: ",
     "next_steps_error_message_refresh": "Refresh",
     "next_steps_error_message_go_to_youtube": "Go to YouTube",
-    "footer_donate_page": "Donate",
+    "default_invidious_footer_text": "A free and open source frontend for Youtube that that respects your privacy! Now you can watch videos (ad-free), subscribe to channels, create playlist and much more all without the prying eyes of Google!",
-    "footer_documentation": "Documentation",
+    "footer_navigation_section_header": "Navigation",
-    "footer_source_code": "Source code",
+    "footer_home_link": "Home",
-    "footer_original_source_code": "Original source code",
+    "footer_project_information_section_header": "Invidious",
-    "footer_modfied_source_code": "Modified source code",
+    "footer_project_homepage_link": "Project Homepage",
+    "footer_source_code_link": "Source Code",
+    "footer_issue_tracker_link": "Issue tracker",
+    "footer_public_instances_link": "Public instances",
+    "footer_donate_link": "Donate",
+    "footer_matrix_link": "Matrix",
+    "footer_support_section_header": "Support",
+    "footer_contact_link": "Contact Instance Maintainer",
+    "footer_report_bug_link": "Report a bug",
+    "footer_faq_link": "FAQ",
+    "footer_instance_section_header": "Instance",
+    "footer_instance_section_header_modified_source": "Instance (Modified)",
+    "footer_instance_section_modified_source_code": "Instance Source Code",
+    "footer_instance_section_tos": "Terms of Service",
+    "footer_instance_section_privacy_policy": "Privacy Policy",
+    "footer_instance_section_donate": "Donate (Instance)",
+    "footer_licences_link": "Licences",
+    "footer_privacy_policy_link": "Privacy",
     "adminprefs_modified_source_code_url_label": "URL to modified source code repository",
     "none": "none",
     "videoinfo_started_streaming_x_ago": "Started streaming `x` ago",

src/invidious/config.cr

@@ -102,8 +102,6 @@ class Config
   property check_tables : Bool = false
   # Cache annotations requested from IA, will not cache empty annotations or annotations that only contain cards
   property cache_annotations : Bool = false
-  # Optional banner to be displayed along top of page for announcements, etc.
-  property banner : String? = nil
   # Enables 'Strict-Transport-Security'. Ensure that `domain` and all subdomains are served securely
   property hsts : Bool? = true
   # Disable proxying server-wide: options: 'dash', 'livestreams', 'downloads', 'local'
@@ -111,9 +109,23 @@ class Config
   # Enable the user notifications for all users
   property enable_user_notifications : Bool = true
 
+  # Optional banner to be displayed along top of page for announcements, etc.
+  property banner : String? = nil
+  # Optional footer text to be displayed within Invidious' footer. Can be used for maintainer contact info, etc.
+  property footer : String? = nil
+  # Email to contact the instance maintainer. This is used within the footer as an mailto link.
+  property instance_maintainer_email : String? = nil
   # URL to the modified source code to be easily AGPL compliant
-  # Will display in the footer, next to the main source code link
+  # Will display in the footer
   property modified_source_code_url : String? = nil
+  # Link to the terms of service of the instance (if any). Will be displayed in the footer.
+  property footer_instance_tos_link : String? = nil
+  # Link to the privacy policy of the instance (if any). Will be displayed in the footer.
+  property footer_instance_privacy_policy_link : String? = nil
+  # Instance donation URL displayed in the "Instance" section of the footer
+  property footer_instance_donate_link : String? = nil
+  # Custom fields to be displayed within the footer's instance section
+  property footer_instance_section_custom_fields : Array(Array(String)) = [] of Array(String)
 
   # Connect to YouTube over 'ipv6', 'ipv4'. Will sometimes resolve fix issues with rate-limiting (see https://github.com/ytdl-org/youtube-dl/issues/21729)
   @[YAML::Field(converter: Preferences::FamilyConverter)]

src/invidious/helpers/macros.cr

@@ -48,8 +48,9 @@ module JSON::Serializable
   end
 end
 
-macro templated(_filename, template = "template", navbar_search = true)
+macro templated(_filename, template = "template", navbar_search = true, buffer_footer = false)
   navbar_search = {{navbar_search}}
+  buffer_footer = {{buffer_footer}}
 
   {{ filename = "src/invidious/views/" + _filename + ".ecr" }}
   {{ layout = "src/invidious/views/" + template + ".ecr" }}

src/invidious/routes/channels.cr

@@ -152,7 +152,7 @@ module Invidious::Routes::Channels
     items.each(&.author = "")
 
     selected_tab = Frontend::ChannelPage::TabsAvailable::Playlists
-    templated "channel"
+    templated "channel", buffer_footer: true
   end
 
   def self.podcasts(env)

src/invidious/routes/preferences.cr

@@ -8,7 +8,7 @@ module Invidious::Routes::PreferencesRoute
 
     preferences = env.get("preferences").as(Preferences)
 
-    templated "user/preferences"
+    templated "user/preferences", buffer_footer: true
   end
 
   def self.update(env)

src/invidious/views/template.ecr

@@ -112,47 +112,9 @@
 
             <%= content %>
 
-            <footer>
+            <% if buffer_footer %>
-                <div class="pure-g">
+                <div id="footer_buffer"></div>
-                    <div class="pure-u-1 pure-u-md-1-3">
+            <% end %>
-                        <span>
-                            <i class="icon ion-logo-github"></i>
-                        <% if CONFIG.modified_source_code_url %>
-                            <a href="https://github.com/iv-org/invidious"><%= translate(locale, "footer_original_source_code") %></a>&nbsp;/
-                            <a href="<%= CONFIG.modified_source_code_url %>"><%= translate(locale, "footer_modfied_source_code") %></a>
-                        <% else %>
-                            <a href="https://github.com/iv-org/invidious"><%= translate(locale, "footer_source_code") %></a>
-                        <% end %>
-                        </span>
-                        <span>
-                            <i class="icon ion-ios-paper"></i>
-                            <a href="https://github.com/iv-org/documentation"><%= translate(locale, "footer_documentation") %></a>
-                        </span>
-                    </div>
-
-                    <div class="pure-u-1 pure-u-md-1-3">
-                        <span>
-                            <a href="https://github.com/iv-org/invidious/blob/master/LICENSE"><%= translate(locale, "Released under the AGPLv3 on Github.") %></a>
-                        </span>
-                        <span>
-                            <i class="icon ion-logo-javascript"></i>
-                            <a rel="jslicense" href="/licenses"><%= translate(locale, "View JavaScript license information.") %></a>
-                        </span>
-                        <span>
-                            <i class="icon ion-ios-paper"></i>
-                            <a href="/privacy"><%= translate(locale, "View privacy policy.") %></a>
-                        </span>
-                    </div>
-
-                    <div class="pure-u-1 pure-u-md-1-3">
-                        <span>
-                            <i class="icon ion-ios-wallet"></i>
-                            <a href="https://invidious.io/donate/"><%= translate(locale, "footer_donate_page") %></a>
-                        </span>
-                        <span><%= translate(locale, "Current version: ") %> <%= CURRENT_VERSION %>-<%= CURRENT_COMMIT %> @ <%= CURRENT_BRANCH %></span>
-                    </div>
-                </div>
-            </footer>
 
         </div>
     </div>
@@ -172,6 +134,176 @@
         <script src="/js/notifications.js?v=<%= ASSET_COMMIT %>"></script>
         <% end %>
     <% end %>
+
+    <footer class="pure-g">
+        <div class="pure-u-1 pure-u-md-2-24"></div>
+        <div class="h-box pure-u-1 pure-u-md-20-24" id="footer-content-container">
+            <div class="pure-u-1 footer-content">
+                <div class="footer-section pure-u-1-4" id="footer-custom-text">
+                    <b>Invidious</b>
+                    <% if CONFIG.footer %>
+                        <p><%=CONFIG.footer%></p>
+                    <% else %>
+                        <p><%=translate(locale, "default_invidious_footer_text")%></p>
+                    <% end %>
+                    
+                </div>
+                <div class="footer-section">
+                    <b class="footer-section-header"><%= translate(locale, "footer_navigation_section_header")%></b>
+                    <ul class="pure-menu-list footer-section-list">
+                        <li class="pure-menu-item footer-section-item">
+                            <a href="/" title="<%= translate(locale, "footer_home_link")%>">
+                                <%= translate(locale, "footer_home_link") %>
+                            </a>
+                        </li>
+                        <li class="pure-menu-item footer-section-item">
+                            <a href="/feed/popular" title="<%= translate(locale, "Popular")%>">
+                                <%= translate(locale, "Popular") %>
+                            </a>
+                        </li>
+                        <li class="pure-menu-item footer-section-item">
+                            <a href="/feed/trending" title="<%= translate(locale, "Trending")%>" style="">
+                                <%= translate(locale, "Trending") %>
+                            </a>
+                        </li>
+                        <li class="pure-menu-item footer-section-item">
+                            <a href="/search" title="<%= translate(locale, "Search")%>">
+                                <%= translate(locale, "Search") %>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+                <div class="footer-section">
+                    <b class="footer-section-header">Invidious</b>
+                    <ul class="pure-menu-list footer-section-list">
+                        <li class="pure-menu-item footer-section-item">
+                            <a href="https://invidious.io" title="<%= translate(locale, "footer_project_homepage_link")%>">
+                                <%= translate(locale, "footer_project_homepage_link") %>
+                            </a>
+                        </li>
+                        <li class="pure-menu-item footer-section-item">
+                            <a href="https://github.com/iv-org/invidious" title="<%= translate(locale, "footer_source_code_link")%>">
+                                <%= translate(locale, "footer_source_code_link") %>
+                            </a>
+                        </li>
+                        <li class="pure-menu-item footer-section-item">
+                            <a href="https://github.com/iv-org/invidious/issues" title="<%= translate(locale, "footer_issue_tracker_link")%>" style="">
+                                <%= translate(locale, "footer_issue_tracker_link") %>
+                            </a>
+                        </li>
+                        <li class="pure-menu-item footer-section-item">
+                            <a href="https://instances.invidious.io" title="<%= translate(locale, "footer_public_instances_link")%>">
+                                <%= translate(locale, "footer_public_instances_link") %>
+                            </a>
+                        </li>
+                        <li class="pure-menu-item footer-section-item">
+                            <a href="https://invidious.io/donate" title="<%= translate(locale, "footer_donate_link")%>">
+                                <%= translate(locale, "footer_donate_link") %>
+                            </a>
+                        </li>
+                        <li class="pure-menu-item footer-section-item">
+                            <a href="https://matrix.to/#/#invidious:matrix.org" title="<%= translate(locale, "footer_matrix_link")%>">
+                                <%= translate(locale, "footer_matrix_link") %>
+                            </a>
+                        </li>
+
+                    </ul>                
+                </div>
+                <% if CONFIG.instance_maintainer_email || CONFIG.modified_source_code_url || CONFIG.footer_instance_tos_link || CONFIG.footer_instance_privacy_policy_link %>
+                    <div class="footer-section">
+                        <b class="footer-section-header">
+                            <% if CONFIG.modified_source_code_url %>
+                                <%= translate(locale, "footer_instance_section_header_modified_source")%>
+                            <% else %>
+                                <%= translate(locale, "footer_instance_section_header")%>
+                            <% end %>
+                        </b>
+                        <ul class="pure-menu-list footer-section-list">
+                            <% if CONFIG.instance_maintainer_email %>
+                                <li class="pure-menu-item footer-section-item">
+                                    <a href="<%=HTML.escape("mailto:#{CONFIG.instance_maintainer_email.not_nil!}")%>" title="<%= translate(locale, "footer_contact_link")%>">
+                                        <%= translate(locale, "footer_contact_link") %>
+                                    </a>
+                                </li>
+                            <% end %>
+                            <% if CONFIG.modified_source_code_url %>
+                                <li class="pure-menu-item footer-section-item">
+                                    <a href="<%=HTML.escape(CONFIG.modified_source_code_url.not_nil!)%>" title="<%= translate(locale, "footer_instance_section_modified_source_code")%>">
+                                        <%= translate(locale, "footer_instance_section_modified_source_code") %>
+                                    </a>
+                                </li>
+                            <% end %>
+                            <% if CONFIG.footer_instance_tos_link %>
+                                <li class="pure-menu-item footer-section-item">
+                                    <a href="<%=HTML.escape(CONFIG.footer_instance_tos_link.not_nil!)%>" title="<%= translate(locale, "footer_instance_section_tos")%>">
+                                        <%= translate(locale, "footer_instance_section_tos") %>
+                                    </a>
+                                </li>
+                            <% end %>
+                            <% if CONFIG.footer_instance_privacy_policy_link %>
+                                <li class="pure-menu-item footer-section-item">
+                                    <a href="<%=HTML.escape(CONFIG.footer_instance_privacy_policy_link.not_nil!)%>" title="<%= translate(locale, "footer_instance_section_privacy_policy")%>">
+                                        <%= translate(locale, "footer_instance_section_privacy_policy") %>
+                                    </a>
+                                </li>
+                            <% end %>
+
+                            <% if CONFIG.footer_instance_donate_link %>
+                                <li class="pure-menu-item footer-section-item">
+                                    <a href="<%=HTML.escape(CONFIG.footer_instance_donate_link.not_nil!)%>" title="<%= translate(locale, "footer_instance_section_donate")%>">
+                                        <%= translate(locale, "footer_instance_section_donate") %>
+                                    </a>
+                                </li>
+                            <% end %>
+
+                            <% CONFIG.footer_instance_section_custom_fields.each do | field | %>
+                                <li class="pure-menu-item footer-section-item">
+                                    <a href="<%=HTML.escape(field[1])%>" title="<%= HTML.escape(field[0]) %>">
+                                        <%= HTML.escape(field[0]) %>
+                                    </a>
+                                </li>
+                            <% end %>
+                        </ul>
+                    </div>
+                <% end %>
+
+                <div class="footer-section">
+                    <b class="footer-section-header"><%= translate(locale, "footer_support_section_header")%></b>
+                    <ul class="pure-menu-list footer-section-list">
+                        <li class="pure-menu-item footer-section-item">
+                            <a href="https://github.com/iv-org/invidious/issues/new" title="<%= translate(locale, "footer_report_bug_link")%>">
+                                <%= translate(locale, "footer_report_bug_link") %>
+                            </a>
+                        </li>
+                        <li class="pure-menu-item footer-section-item">
+                            <a href="#" title="<%= translate(locale, "footer_faq_link")%>" style="">
+                                <%= translate(locale, "footer_faq_link") %>
+                            </a>
+                        </li>
+                    </ul>                
+                </div>
+            </div>
+            <hr/>
+            <div class="footer-footer">
+                <span class="left">
+                    <% if CONFIG.modified_source_code_url %>
+                        <%= translate(locale, "footer_current_version_modified") %>
+                    <% else %>
+                        <%= translate(locale, "Current version: ") %>
+                    <% end %>
+                    
+                    <%= CURRENT_VERSION %>-<%= CURRENT_COMMIT %> @ <%= CURRENT_BRANCH %>
+                </span>
+                <div class="right">
+                    <a href="/privacy" title="<%= translate(locale, "footer_privacy_policy_link")%>"><%= translate(locale, "footer_privacy_policy_link") %></a>
+                    <span> | </span>
+                    <a href="/licenses" title="<%= translate(locale, "footer_licences_link")%>"><%= translate(locale, "footer_licences_link") %></a>
+                </div>
+            </div>
+        </div>
+        </div>
+        <div class="pure-u-1 pure-u-md-2-24"></div>
+    </footer>
 </body>
 
 </html>