refine comments and improve clarity in copy and modification rules

config-Jellyfin-example.yaml

@@ -4,9 +4,9 @@ destination_directory: './web'
 # copy rules
 copy_rules:
   - sources:
-      # add/replace new logos and icons 
-      - source: './img/icon-transparent.png'
-        target: './icon-transparent*.png'
+      # add/replace new logos, icons and favicons
+      - source: './img/icon-transparent.png'  # replace existing logo with icon-transparent.png and rename to match existing hashed filename
+        target: './icon-transparent*.png' # the * is a wildcard to match any hash in the filename
       - source: './img/banner-light.png'
         target: './banner-light*.png'
       - source: './img/banner-dark.png'
@@ -21,15 +21,15 @@ copy_rules:
       - source: './img/notificationicon.png'
         target: './notificationicon*.png'
         
-      - source: './img/favicons_dir'
+      - source: './img/favicons_dir'  # copy whole favicons directory, replace existing files
         target: './favicons'
-    mode: 'replace'
+    mode: 'replace' # replace existing files (and files in directories)
 
 
   - sources:
-      - './seasonals' # add seasonals files from https://github.com/CodeDevMLH/Jellyfin-Seasonals
-      - './featured'  # add featured iframe files from https://github.com/CodeDevMLH/Jellyfin-Featured-Content-Bar
-      - './pictures'  # add pictures for eg. background on login page
+      - './seasonals' # add seasonals files from https://github.com/CodeDevMLH/Jellyfin-Seasonals/tree/main/seasonals
+      - './featured'  # add featured iframe files (only spotlight.html, script.js and styles.css are needed) from https://github.com/CodeDevMLH/Jellyfin-Featured-Content-Bar
+      - './pictures'  # add pictures for eg. background on login page for futher use with 'custom css' function in jellyfin 
 
       - source: './img/background.png'
         target: './assets/img/background.png'
@@ -39,13 +39,13 @@ copy_rules:
 
 # modification rules
 modification_rules:
-  # modify login page, insert own logo
+  # modify login page --> insert own logo (you may need to adjust width in px in line 46...)
   - file_pattern: 'session-login-index-html\.[0-9a-z]+\.chunk\.js$'
     insert_rules:
       - after_text: '<div class="padded-left padded-right padded-bottom-page margin-auto-y">'
         insert_text: '<img id="login-logo" src="/web/assets/img/banner-dark.png" width=350px style="padding: 0px;display:block; margin-left: auto; margin-right: auto;">'
 
-  # Instancename, Jellyseer I-Frame
+  # Instancename, Seasonals, Jellyseer I-Frame
   - file_pattern: 'index.html'
     insert_rules:
       # add needed seasonals modifications from https://github.com/CodeDevMLH/Jellyfin-Seasonals
@@ -54,7 +54,9 @@ modification_rules:
 
       # Page title and requests tab
       - before_text: 're:<link href="main\.jellyfin\.[0-9a-z]+\.css[^.]+" rel="stylesheet">' # using regex to match the hash
-        # replace 'Your Title' with your own title (first row) and 'Request' with your own request tab name (second row)
+        # IMPORTANT: replace 'Your Title' with your own title (first row of insert text, line 60)
+        # IMPORTANT: replace 'Request' with your own request tab name (the name how the Jellyseer tab shuold be named, second row, line 61)
+        # Hint: If you don't want to add the requests tab, just remove the second row of insert_text (line 61) and the corresponding replace_rule (lines 88 and 90-93)
         insert_text: >
           <script>document.addEventListener("DOMContentLoaded", function () { if (document.title === "Jellyfin") { document.title = "Your Title"; } const observer = new MutationObserver(function (mutations) { mutations.forEach(function (mutation) { if (mutation.type === 'childList') { if (document.title === "Jellyfin") { document.title = "Your Title"; } } }); }); observer.observe(document.querySelector('title'), { childList: true }); Object.defineProperty(document, 'title', { set: function (value) { if (value === "Jellyfin") { document.querySelector('title').textContent = "Your Title"; } else { document.querySelector('title').textContent = value; } }, get: function () { return document.querySelector('title').textContent; } }); });</script>
           <script>const createRequestTab = () => {const title = document.createElement("div");title.classList.add("emby-button-foreground");title.innerText = "Requests";const button = document.createElement("button");button.type = "button";button.is = "empty-button";button.classList.add("emby-tab-button", "emby-button", "lastFocused");button.setAttribute("data-index", "2");button.setAttribute("id", "requestTab");button.appendChild(title);(function e() {const tabb = document.querySelector(".emby-tabs-slider");tabb ? !document.querySelector("#requestTab") && tabb.appendChild(button) : setTimeout(e, 500)})();}</script>
@@ -64,7 +66,7 @@ modification_rules:
       - old_text: '<title>Jellyfin</title>'
         new_text: '<title>Your Title</title>'
 
-  # Instancename, Jellyseer I-Frame
+  # Set default values for 'Next Up' days and user page size
   - file_pattern: '^main.jellyfin.bundle.js$' #file_pattern: '^main\.jellyfin\.bundle\.js$'
     replace_rules:
       # Set limit on how many days items should be in the next up section (last number)
@@ -75,16 +77,17 @@ modification_rules:
         new_text: 'this.get("libraryPageSize",!1),10);return 0===t?0:t||99}'
 
 
-
-
+  # Featured Content Bar and Requests Tab with embedded Jellyseer instance
   - file_pattern: 'home-html\.[0-9a-z]+\.chunk\.js$'
     insert_rules:
       # featured iframe and requests iframe style from https://github.com/CodeDevMLH/Jellyfin-Featured-Content-Bar
+      # IMPORTANT: remove line 88 if you don't want to add the requests tab
       - after_text: 'data-backdroptype="movie,series,book">'
         insert_text: >
           <style> .featurediframe {width: 95vw; height: 24em; display: block; border: 0; margin: -1em auto 0;} @media (min-width: 2100px) {.featurediframe {height: 33em;}} @media (max-width: 1599px) {.featurediframe {margin-top: 1.2em;}} @media (max-width: 800px) {.featurediframe {margin-top: 0.8em; height: 25em;}} </style> <iframe class="featurediframe" src="/web/featured/spotlight.html"></iframe>
           <style>:root { --save-gut: max(env(safe-area-inset-left), .3%) } .requestIframe { margin: 0 .4em; padding: 0 var(--save-gut); width: calc(100% - (.4em * 2) - (var(--save-gut) * 2)); height: 90vh; border: none; position: absolute; top: 5.3em } @media (max-width: 1599px) { .requestIframe { height: 83vh; top: 8.2em; } }</style><script>setTimeout(() => { createRequestTab() }, 500)</script>
 
       # request tab on main page (embedded iframe of your Jellyseer (Overseerr) instance)
+      # change 'jellyseerr.yourDomainHere.com' to the URL of your Jellyseer (Overseerr) instance in line 93
       - after_text: 'id="favoritesTab" data-index="1"> <div class="sections"></div> </div>'
         insert_text: '<div class="tabContent pageTabContent" id="requestsTab" data-index="2"> <div class="sections"><iframe class="requestIframe" src="https://jellyseerr.yourDomainHere.com"></iframe></div> </div>'