From 0e42c1ed4a9b33a96d2f019f951ad7bcad06b5cc Mon Sep 17 00:00:00 2001
From: Sam Douglas <sam@shift72.com>
Date: Tue, 2 Dec 2025 15:07:55 +1300
Subject: [PATCH 1/2] Add config to enable playback progress on media items

---
 site/styles/_availability-tags.scss |  2 +-
 site/styles/_meta-sub-item.scss     | 12 ------------
 site/styles/_playback-progress.scss | 18 ++++++++++++++++++
 site/styles/_variables.scss         |  6 ++++++
 site/styles/main.scss               |  1 +
 site/templates/items/meta_item.jet  |  8 ++++++--
 6 files changed, 32 insertions(+), 15 deletions(-)
 create mode 100644 site/styles/_playback-progress.scss

diff --git a/site/styles/_availability-tags.scss b/site/styles/_availability-tags.scss
index 04eb48d63..1449dff1f 100644
--- a/site/styles/_availability-tags.scss
+++ b/site/styles/_availability-tags.scss
@@ -36,7 +36,7 @@ s72-availability-label {
 
     .availability-state {
       @extend .mb-0;
-      line-height: 18px;
+      line-height: 22px;
       &::before {
         content: none;
       }
diff --git a/site/styles/_meta-sub-item.scss b/site/styles/_meta-sub-item.scss
index a3424911d..fab076f72 100644
--- a/site/styles/_meta-sub-item.scss
+++ b/site/styles/_meta-sub-item.scss
@@ -110,18 +110,6 @@
   }
 }
 
-.s72-playback-progress,
-.s72-playback-progress-bar {
-  height: 6px;
-}
-
-.s72-playback-progress {
-  background-color: rgba(var(--body-bg-rgb), 0.5);
-}
-
-.s72-playback-progress-bar {
-  background-color: var(--secondary);
-}
 
 s72-show-hide-switcher {
   display: block;
diff --git a/site/styles/_playback-progress.scss b/site/styles/_playback-progress.scss
new file mode 100644
index 000000000..24270b5cd
--- /dev/null
+++ b/site/styles/_playback-progress.scss
@@ -0,0 +1,18 @@
+s72-playback-progress {
+  // on top of the availability label, below the hover
+  z-index: 99;
+}
+
+.s72-playback-progress,
+.s72-playback-progress-bar {
+  height: var(--playback-progress-bar-height);
+}
+
+.s72-playback-progress {
+  background-color: rgba(var(--body-bg-rgb), 0.5);
+}
+
+.s72-playback-progress-bar {
+  background-color: var(--playback-progress-bar-color);
+  border-radius: 2px;
+}
diff --git a/site/styles/_variables.scss b/site/styles/_variables.scss
index 2a7e402cc..cb4b40aa8 100644
--- a/site/styles/_variables.scss
+++ b/site/styles/_variables.scss
@@ -182,6 +182,12 @@
 
   --poster-skeleton-background-color: #3335;
 
+  // Playback progress bar shown on meta item and sub-items
+  --playback-progress-bar-height: 3px;
+  --playback-progress-bar-color: var(--secondary);
+  --playback-progress-bar-bg-color: rgba(var(--body-bg-rgb), 0.5);
+
+
   // Detail player
   --page-detail-player-padding-top: 140px;
   --page-detail-player-padding-top-lg: 200px;
diff --git a/site/styles/main.scss b/site/styles/main.scss
index 1f50cde7f..1ecf3ae5d 100644
--- a/site/styles/main.scss
+++ b/site/styles/main.scss
@@ -23,6 +23,7 @@
 @import '_meta-item-tagline';
 @import '_meta-item-title';
 @import '_availability-tags';
+@import '_playback-progress';
 
 @import '_collections';
 @import '_slider';
diff --git a/site/templates/items/meta_item.jet b/site/templates/items/meta_item.jet
index 9bdc191e9..26c5bc9b8 100644
--- a/site/templates/items/meta_item.jet
+++ b/site/templates/items/meta_item.jet
@@ -85,7 +85,7 @@
                     <can-be-watched-button data-slug="{{item.InnerItem.Slug}}" data-url="{{canBeWatchedLink}}" data-label="{{canBeWatchedText | i18n}}"></can-be-watched-button>
                   </s72-user-known>
                 {{end}}
-              
+
               {{if len(externalPurchaseButtonLink) > 0}}
                 <external-purchase-button data-slug="{{item.InnerItem.Slug}}" data-url="{{externalPurchaseButtonLink}}" data-label="{{externalPurchaseButtonText | i18n}}"></external-purchase-button>
               {{end}}
@@ -93,6 +93,10 @@
           </div>
           <s72-userwishlist-button data-slug="{{item.Slug}}" class="btn-wishlist"></s72-userwishlist-button>
         </div>
+
+        {{if config("media_item_show_playback_progress") == "true"}}
+          <s72-playback-progress data-slug={{item.Slug}}></s72-playback-progress>
+        {{end}}
       {{end}}
     </div>
   </a>
@@ -107,4 +111,4 @@
   {{if wrapper_class != ""}}
   </div>
   {{end}}
-{{end}}
\ No newline at end of file
+{{end}}

From 122b9d82013a878c07e2cb8f946fd0f18c522dd9 Mon Sep 17 00:00:00 2001
From: Sam Douglas <sam@shift72.com>
Date: Tue, 2 Dec 2025 15:11:17 +1300
Subject: [PATCH 2/2] changelog

---
 CHANGELOG.md | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 62d408076..2ce957df8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,13 @@
 
 ## [Unreleased](https://github.com/shift72/core-template/compare/1.9.29...HEAD)
 
+### Added
+ - Playback progress bars on media items (config: "media_item_show_playback_progress")
+
+### Changed
+ - Added CSS vars for playback progress. Reduce default size from 6px to 3px (affects TV episode sub-items)
+
+
 ## [1.9.29](https://github.com/shift72/core-template/compare/1.9.28...1.9.29)
 
 ### Added