xaymar/com.xaymar.www
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Significantly improve the media player UX

Browse Source
This commit is contained in:
Michael Fabian 'Xaymar' Dirks
2022-11-27 00:53:36 +01:00
parent 445d5f45f5
commit 60aaaf7132
4 changed files with 224 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/site.js
+41 -38
View File
@@ -23,7 +23,7 @@ async function xmr_initialize_player(el) {
el.querySelector("audio");
// Play/Pause
let play_pause = el.querySelector(".bottom > .play");
let play_pause = el.querySelector(".play");
play_pause.update = function() {
if (media.paused) {
play_pause.classList.remove("playing");
@@ -50,7 +50,7 @@ async function xmr_initialize_player(el) {
play_pause.update();
// Mute
let audio_mute = el.querySelector(".bottom > .audio > .mute");
let audio_mute = el.querySelector(".mute");
audio_mute.update = function() {
if (media.muted) {
audio_mute.classList.add("muted");
@@ -75,7 +75,7 @@ async function xmr_initialize_player(el) {
audio_mute.update();
// Volume
let audio_volume = el.querySelector(".bottom > .audio > .volume");
let audio_volume = el.querySelector(".volume");
audio_volume.min = 0;
audio_volume.max = 2147483647;
audio_volume.update = function() {
@@ -102,7 +102,7 @@ async function xmr_initialize_player(el) {
audio_volume.update();
// Time
let playback_time = el.querySelector(".bottom > .playback > .time");
let playback_time = el.querySelector(".time");
playback_time.update = function() {
let duration_text = "";
let need_hour = false;
@@ -153,7 +153,7 @@ async function xmr_initialize_player(el) {
playback_time.update();
// Progress
let playback_progress = el.querySelector(".bottom > .playback > .progress");
let playback_progress = el.querySelector(".progress");
playback_progress.update = function() {
playback_progress.disabled = !media.seekable;
playback_progress.min = 0;
@@ -188,39 +188,6 @@ async function xmr_initialize_player(el) {
});
fullscreen.update();
// Variants
let variants = el.querySelector(".variant");
variants.addEventListener("input", () => {
media.pause();
play_pause.update();
media.src = variants.value;
});
variants.addEventListener("value", () => {
media.pause();
play_pause.update();
media.src = variants.value;
});
function createVariants(el, key, value) {
if (typeof(value) === "object") {
for (let k in value) {
let v = value[k];
createVariants(el, `${key} / ${k}`, v);
}
} else if (typeof(value) === "string") {
let option = document.createElement("option");
option.value = value;
option.textContent = key;
el.appendChild(option);
} else {
el.appendChild(document.createElement(typeof(value)));
}
}
for (let k in el.variants) {
let v = el.variants[k];
createVariants(variants, k, v);
}
variants.value = media.src = variants.querySelectorAll("option")[0].value;
// Media Play/Pause by click
media.addEventListener("click", () => {
play_pause.click();
@@ -257,6 +224,42 @@ async function xmr_initialize_player(el) {
}
});
el.hideOverlay();
// Variants
let variant = el.querySelector(".variant");
variant.update = function() {
let paused = media.paused;
let muted = media.muted;
let volume = media.volume;
let time = media.currentTime;
media.pause();
media.currentSrc = variant.value;
media.play();
media.currentTime = time;
media.volume = volume;
media.muted = muted;
if (paused) {
media.pause();
} else {
media.play();
}
play_pause.update();
}
variant.addEventListener("input", () => { variant.update(); });
variant.addEventListener("value", () => { variant.update(); });
// Add options from available sources.
let sources = el.querySelectorAll("source");
for (let k of sources) {
let option = document.createElement("option");
option.value = k.src;
option.textContent = k.title;
variant.appendChild(option);
}
variant.value = media.currentSrc;
}
async function xmr_initialize_players() {