diff --git a/internal/ui/static/css/common.css b/internal/ui/static/css/common.css
index 1a3c3ee8..a27aadae 100644
--- a/internal/ui/static/css/common.css
+++ b/internal/ui/static/css/common.css
@@ -1215,6 +1215,39 @@ audio, video {
width: 100%;
}
+.media-controls{
+ font-size: .9em;
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.media-controls .media-control-label{
+ line-height: 1em;
+}
+
+.media-controls>div{
+ display: flex;
+ flex-wrap: nowrap;
+ justify-content:center;
+ min-width: 50%;
+ align-items: center;
+}
+
+.media-controls>div>*{
+ padding-left:12px;
+}
+
+.media-controls>div>*:first-child{
+ padding-left:0;
+}
+
+.media-controls span.speed-indicator{
+ /*monospace to ensure constant width even when value change. JS ensure the value is always on 4 characters (in most cases)
+ This reduce ui flickering due to element moving around a bit
+ */
+ font-family: monospace;
+}
+
.integration-form summary {
font-weight: 700;
}
diff --git a/internal/ui/static/js/app.js b/internal/ui/static/js/app.js
index 02911194..218c2a53 100644
--- a/internal/ui/static/js/app.js
+++ b/internal/ui/static/js/app.js
@@ -446,8 +446,8 @@ function goToPage(page, fallbackSelf) {
}
/**
- *
- * @param {(number|event)} offset - many items to jump for focus.
+ *
+ * @param {(number|event)} offset - many items to jump for focus.
*/
function goToPrevious(offset) {
if (offset instanceof KeyboardEvent) {
@@ -461,8 +461,8 @@ function goToPrevious(offset) {
}
/**
- *
- * @param {(number|event)} offset - How many items to jump for focus.
+ *
+ * @param {(number|event)} offset - How many items to jump for focus.
*/
function goToNext(offset) {
if (offset instanceof KeyboardEvent) {
@@ -521,7 +521,7 @@ function goToListItem(offset) {
items[i].classList.remove("current-item");
// By default adjust selection by offset
- let itemOffset = (i + offset + items.length) % items.length;
+ let itemOffset = (i + offset + items.length) % items.length;
// Allow jumping to top or bottom
if (offset == TOP) {
itemOffset = 0;
@@ -742,3 +742,43 @@ function getCsrfToken() {
return "";
}
+
+/**
+ * Handle all clicks on media player controls button on enclosures.
+ * Will change the current speed and position of the player accordingly.
+ * Will not save anything, all is done client-side, however, changing the position
+ * will trigger the handlePlayerProgressionSave and save the new position backends side.
+ * @param {Element} button
+ */
+function handleMediaControl(button) {
+ const action = button.dataset.enclosureAction;
+ const value = parseFloat(button.dataset.actionValue);
+ const targetEnclosureId = button.dataset.enclosureId;
+ const enclosures = document.querySelectorAll(`audio[data-enclosure-id="${targetEnclosureId}"],video[data-enclosure-id="${targetEnclosureId}"]`);
+ const speedIndicator = document.querySelectorAll(`span.speed-indicator[data-enclosure-id="${targetEnclosureId}"]`);
+ enclosures.forEach((enclosure) => {
+ switch (action) {
+ case "seek":
+ enclosure.currentTime = enclosure.currentTime + value > 0 ? enclosure.currentTime + value : 0;
+ break;
+ case "speed":
+ // I set a floor speed of 0.25 to avoid too slow speed where it gives the impression it stopped.
+ // 0.25 was chosen because it will allow to get back to 1x in two "faster" click, and lower value with same property would be 0.
+ enclosure.playbackRate = Math.max(0.25, enclosure.playbackRate);
+ speedIndicator.forEach((speedI) => {
+ // Two digit precision to ensure we always have the same number of characters (4) to avoid controls moving when clicking buttons because of more or less characters.
+ // The trick only work on rate less than 10, but it feels an acceptable tread of considering the feature
+ speedI.innerText = `${enclosure.playbackRate.toFixed(2)}x`;
+ });
+ break;
+ case "speed-reset":
+ enclosure.playbackRate = value ;
+ speedIndicator.forEach((speedI) => {
+ // Two digit precision to ensure we always have the same number of characters (4) to avoid controls moving when clicking buttons because of more or less characters.
+ // The trick only work on rate less than 10, but it feels an acceptable tread of considering the feature
+ speedI.innerText = `${enclosure.playbackRate.toFixed(2)}x`;
+ });
+ break;
+ }
+ });
+}
diff --git a/internal/ui/static/js/bootstrap.js b/internal/ui/static/js/bootstrap.js
index 44d6e716..d78a9d41 100644
--- a/internal/ui/static/js/bootstrap.js
+++ b/internal/ui/static/js/bootstrap.js
@@ -167,6 +167,20 @@ document.addEventListener("DOMContentLoaded", () => {
playbackRateElements.forEach((element) => {
if (element.dataset.playbackRate) {
element.playbackRate = element.dataset.playbackRate;
+ if (element.dataset.enclosureId){
+ // In order to display properly the speed we need to do it on bootstrap.
+ // Could not do it backend side because I didn't know how to do it because of the template inclusion and
+ // the way the initial playback speed is handled. See enclosure_media_controls.html if you want to try to fix this
+ document.querySelectorAll(`span.speed-indicator[data-enclosure-id="${element.dataset.enclosureId}"]`).forEach((speedI)=>{
+ speedI.innerText = `${element.dataset.playbackRate}x`;
+ });
+ }
}
});
+
+ // Set enclosure media controls handlers
+ const mediaControlsElements = document.querySelectorAll("button[data-enclosure-action]");
+ mediaControlsElements.forEach((element) => {
+ element.addEventListener("click", () => handleMediaControl(element));
+ });
});