Merge pull request #183 from mattwright324/develop

Develop
mattwright324 · Oct 9, 2024 · fe3fb9a · fe3fb9a
2 parents c2ba684 + 2d0d8fe
commit fe3fb9a
Show file tree

Hide file tree

Showing 12 changed files with 1,718 additions and 1,721 deletions.
diff --git a/PRIVACY.md b/PRIVACY.md
@@ -1,20 +1,22 @@
 # Privacy
 
 This application uses YouTube API Services and Google Maps Services.
+The application does not access any API data relating to users and does not store API data.
 
 - http://www.google.com/policies/privacy
 
-Basic user data is stored/collected by Google Analytics and Plausible and is being used for monitoring traffic and referrals.
-Data collected by these services is not being shared with any other parties. 
+Basic user data is stored/collected by Plausible and is being used for monitoring traffic and referrals.
+Data collected by these services is not being shared with any other parties.
 This application does not allow third parties to serve advertisements.
+Plausible does not use cookies and complies with GDPR, CCPA, and PECR, more information can be found in their data policy page.
 
-- http://www.google.com/policies/privacy
-- https://plausible.io/privacy
+- https://plausible.io/data-policy
 
-Additional external calls are made to Filmot for archived video metadata. 
+Additional external calls may be made to Filmot for videos that no longer exist to check for archived data.
 
 - https://filmot.com/privacy
 
 Additional external calls are made to my Heroku [cors-anywhere](https://github.com/Rob--W/cors-anywhere) proxy to resolve custom channel URLs to channel ids.
+Calls to these services do not store any data.
 
 - https://www.heroku.com/policy/security
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="dark">
+<html lang="en" data-bs-theme="dark">
 <head>
     <meta charset="utf-8">
     <meta name="description"
@@ -11,36 +11,34 @@
     <link rel="preconnect" href="//cdn.jsdelivr.net" crossorigin>
 
     <!-- Dependencies -->
-    <link href="//cdn.datatables.net/1.11.3/css/dataTables.bootstrap5.min.css" rel="stylesheet">
-    <link href="//cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/stackoverflow-dark.min.css" rel="stylesheet"
-          id="highlightjs-theme">
-    <link href="//cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-nightshade.min.css" rel="stylesheet">
-    <link href="//cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet">
-    <link href="./css/youtube-metadata.css?v={{ site.time | date_to_xmlschema }}" rel="stylesheet"/>
-    <script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
-    <script src="//cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
-    <script src="//cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.js"></script>
-    <script src="//cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js"></script>
-    <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/apexcharts.min.js"></script>
-    <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/js/darkmode.min.js"></script>
-    <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
+
+    <link href="//cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+    <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
     <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-multiselect.min.js"></script>
-    <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/clipboard.min.js"></script>
+
+    <link href="//cdn.datatables.net/2.1.5/css/dataTables.bootstrap5.css" rel="stylesheet" />
+    <script src="//cdn.datatables.net/2.1.5/js/dataTables.js"></script>
+    <script src="//cdn.datatables.net/2.1.5/js/dataTables.bootstrap5.js"></script>
+
+    <link href="//cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/stackoverflow-dark.min.css" rel="stylesheet" id="highlightjs-theme">
+    <script src="//cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js"></script>
+
+    <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/apexcharts.min.js"></script>
+    <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/clipboard.min.js"></script>
     <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/FileSaver.min.js"></script>
     <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/jszip-utils.min.js"></script>
-    <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/jszip.min.js"></script>
-    <script src="//cdn.jsdelivr.net/npm/[email protected]/moment.min.js" type="text/javascript"></script>
-    <script src="//cdn.jsdelivr.net/npm/[email protected]/xregexp-all.js"></script>
-    <script src="./js/randojs-2.0.0.js"></script>
+    <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/jszip.min.js"></script>
+    <script src="//cdn.jsdelivr.net/npm/[email protected]/moment.min.js" type="text/javascript"></script>
+    <script src="//cdn.jsdelivr.net/npm/[email protected]/xregexp-all.js"></script>
 
     <!-- App -->
-    <script src="./js/iso-639-translator.js?v={{ site.time | date_to_xmlschema }}" type="text/javascript"></script>
-    <script src="./js/iso-3166-translator.js?v={{ site.time | date_to_xmlschema }}" type="text/javascript"></script>
-    <script src="./js/bcp-47-translator.js?v={{ site.time | date_to_xmlschema }}" type="text/javascript"></script>
-    <script src="./js/yt-category-translator.js?v={{ site.time | date_to_xmlschema }}" type="text/javascript"></script>
+    <script src="./js/translators.js?v={{ site.time | date_to_xmlschema }}" type="text/javascript"></script>
     <script src="./js/youtube-api-v3.js?v={{ site.time | date_to_xmlschema }}" type="text/javascript"></script>
     <script src="./js/youtube-metadata-examples.js?v={{ site.time | date_to_xmlschema }}" type="text/javascript"></script>
     <script src="./js/shared.js?v={{ site.time | date_to_xmlschema }}" type="text/javascript"></script>
+    <link href="./css/youtube-metadata.css?v={{ site.time | date_to_xmlschema }}" rel="stylesheet"/>
     <script src="./js/{{ page.script }}.js?v={{ site.time | date_to_xmlschema }}" type="text/javascript"></script>
 
     <!-- Analytics -->
@@ -73,26 +71,25 @@
                 </div>
                 <script>
                     const switchDarkMode = document.querySelector("#darkMode");
+                    const key = "bs.prefers-color-scheme"
+                    const theme = localStorage.getItem(key) || "dark"
+                    function setTheme(theme) {
+                        document.getElementsByTagName("html")[0].setAttribute("data-bs-theme", theme)
+                        switchDarkMode.checked = theme === "dark";
+                        localStorage.setItem(key, theme)
+                    }
+                    setTheme(theme)
                     switchDarkMode.onclick = function (e) {
-                        darkmode.toggleDarkMode();
+                        setTheme(switchDarkMode.checked ? "dark" : "light")
                     }
-                    window.addEventListener('DOMContentLoaded', () => {
-                        if (DarkMode.getColorScheme() === "dark") {
-                            console.log(1)
-                            switchDarkMode.setAttribute("checked", "checked");
-                        } else {
-                            console.log(2)
-                            switchDarkMode.removeAttribute("checked");
-                        }
-                    });
                 </script>
             </form>
         </div>
     </div>
 </nav>
 {{ content }}
 <div class="ui container" style="padding-top:3%;padding-bottom:3%;color:darkgray;text-align:center">
-    <img src="https://developers.google.com/static/youtube/images/developed-with-youtube-sentence-case-light.png" style="width:200px!important"/>
+    <img src="./img/developed-with-youtube-sentence-case-light.png" style="width:200px !important; mix-blend-mode: difference;"/>
     <br>
     mattwright324 | 2025 | <a href="/">home</a> | <a href="https://github.com/mattwright324">github</a> |
     <a href="https://github.com/mattwright324/youtube-metadata">youtube-metadata</a>

diff --git a/css/youtube-metadata.css b/css/youtube-metadata.css
@@ -135,25 +135,27 @@ button.loading .countdown, button.loading .spinner {
     background-color:  #e67e22;
 }
 
-html.dark .progress-bar.error {
+html[data-bs-theme='dark'] .progress-bar.error {
     background-color:  #ca6f1e;
 }
 
 /* Dark mode tweaks */
-html.dark .tag {
+html[data-bs-theme='dark'] .tag {
     background-color: royalblue;
 }
 
-html.dark .btn-primary {
-    background-color: #0d6efd;
-    border-color: #0d6efd;
+html[data-bs-theme='dark'] a {
+    color: lightskyblue;
 }
 
-html.dark a {
-    color: lightskyblue;
+html[data-bs-theme='dark'] .nav-link {
+    color: rgba(250,250,250,.55);
+}
+html[data-bs-theme='dark'] .nav-link:hover {
+    color: rgba(250,250,250,.7);
 }
 
-html.dark .progress-bar {
+html[data-bs-theme='dark'] .progress-bar {
     color: #fff;
 }
 
@@ -175,3 +177,7 @@ https://addons.mozilla.org/en-US/firefox/addon/styl-us/
     display: revert!important;
 }
 */
+
+.apexcharts-heatmap-rect[val="0"], .apexcharts-heatmap-rect:not([val]) {
+    display: none;
+}
diff --git a/img/developed-with-youtube-sentence-case-light.png b/img/developed-with-youtube-sentence-case-light.png
diff --git a/js/bcp-47-translator.js b/js/bcp-47-translator.js