origam 2.3.0 → 2.5.0

package/dist/src/components/Media/OrigamMediaController.vue

@@ -0,0 +1,529 @@
+<template>
+	<div
+			class="origam-media-controller"
+			:class="rootClasses"
+			:style="style"
+			data-cy="origam-media-controller"
+	>
+		<slot name="header"/>
+
+		<div class="origam-media-controller__progress-row">
+			<slot
+					name="waveform"
+					:state="state"
+					:methods="methods"
+			>
+				<origam-media-scrubber
+						:model-value="state.currentTime.value"
+						:max="scrubberMax"
+						:step="0.1"
+						:buffered="state.buffered.value"
+						orientation="horizontal"
+						show-thumb-on-hover-only
+						show-hover-tooltip
+						:format-hover-tooltip="formatScrubberTime"
+						:aria-label="seekLabel"
+						:aria-value-text="formattedCurrentTime"
+						class="origam-media-controller__scrubber"
+						data-cy="origam-media-controller-scrubber"
+						@update:model-value="onScrubberSeek"
+						@change="onScrubberCommit"
+				/>
+			</slot>
+		</div>
+
+		<nav
+				class="origam-media-controller__buttons-row"
+				:aria-label="transportLabel"
+		>
+			<div class="origam-media-controller__buttons-left">
+				<slot name="prepend-transport"/>
+
+				<origam-btn
+						v-if="showPrevious"
+						variant="text"
+						density="compact"
+						:icon="ICONS.PREVIOUS"
+						:aria-label="previousLabel"
+						data-cy="origam-media-controller-previous"
+						@click="emitPrevious"
+				/>
+
+				<origam-btn
+						variant="text"
+						density="compact"
+						:icon="state.playing.value ? ICONS.PAUSE : ICONS.PLAY"
+						:aria-label="state.playing.value ? pauseLabel : playLabel"
+						class="origam-media-controller__play-btn"
+						data-cy="origam-media-controller-play"
+						@click="onTogglePlay"
+				/>
+
+				<origam-btn
+						v-if="showNext"
+						variant="text"
+						density="compact"
+						:icon="ICONS.NEXT"
+						:aria-label="nextLabel"
+						data-cy="origam-media-controller-next"
+						@click="emitNext"
+				/>
+
+				<origam-media-volume-control
+						:volume="state.volume.value"
+						:muted="state.muted.value"
+						:mute-label="muteLabel"
+						:unmute-label="unmuteLabel"
+						:volume-label="volumeLabel"
+						data-cy="origam-media-controller-volume"
+						@update:muted="onToggleMute"
+						@update:volume="onVolumeChangeFromScrubber"
+				/>
+
+				<span
+						class="origam-media-controller__time"
+						data-cy="origam-media-controller-time"
+				>
+					<span class="origam-media-controller__time-current">{{ formattedCurrentTime }}</span>
+					<span class="origam-media-controller__time-sep">/</span>
+					<span class="origam-media-controller__time-total">{{ formattedDuration }}</span>
+				</span>
+
+				<slot name="extraControlsLeft"/>
+			</div>
+
+			<div class="origam-media-controller__buttons-right">
+				<slot name="extraControlsRight"/>
+
+				<origam-btn
+						v-if="showShuffle"
+						variant="text"
+						density="compact"
+						:icon="ICONS.SHUFFLE"
+						:active="internalShuffle"
+						:aria-label="shuffleLabel"
+						:aria-pressed="internalShuffle"
+						data-cy="origam-media-controller-shuffle"
+						@click="toggleShuffle"
+				/>
+
+				<origam-btn
+						v-if="showLoop"
+						variant="text"
+						density="compact"
+						:icon="loopIcon"
+						:active="isLoopActive"
+						:aria-label="loopAriaLabel"
+						:aria-pressed="isLoopActive"
+						data-cy="origam-media-controller-loop"
+						@click="cycleLoopMode"
+				/>
+
+				<origam-btn
+						v-if="showCastButton"
+						variant="text"
+						density="compact"
+						:icon="ICONS.CAST"
+						:active="isCasting"
+						:aria-label="isCasting ? stopCastLabel : castLabel"
+						:aria-pressed="isCasting"
+						data-cy="origam-media-controller-cast"
+						@click="onCastClick"
+				/>
+
+				<origam-menu
+						v-if="hasConfigContent"
+						v-model="configMenuOpen"
+						:items="configMenuItems"
+						:item-children="'children'"
+						data-cy="origam-media-controller-config"
+						@select="onConfigSelect"
+				>
+					<template #activator="{ props: activatorProps }">
+						<origam-btn
+								v-bind="activatorProps"
+								variant="text"
+						density="compact"
+								:icon="ICONS.COG"
+								:active="configMenuOpen"
+								:aria-label="settingsLabel"
+								data-cy="origam-media-controller-config-btn"
+						/>
+					</template>
+				</origam-menu>
+
+				<slot name="append-transport"/>
+			</div>
+		</nav>
+
+		<slot name="footer"/>
+	</div>
+</template>
+
+<script setup>
+import { computed, ref, useSlots, watch } from "vue";
+import { OrigamBtn } from "../Btn";
+import { OrigamMenu } from "../Menu";
+import { useLocale } from "../../composables";
+import { MDI_ICONS } from "../../enums";
+import { formatMediaTime } from "../../utils";
+import OrigamMediaScrubber from "./OrigamMediaScrubber.vue";
+import OrigamMediaVolumeControl from "./OrigamMediaVolumeControl.vue";
+const { t } = useLocale();
+const props = defineProps({
+  state: { type: Object, required: true },
+  methods: { type: Object, required: true },
+  inset: { type: Boolean, required: false, default: false },
+  visible: { type: Boolean, required: false, default: true },
+  playbackRates: { type: Array, required: false, default: () => [0.5, 0.75, 1, 1.25, 1.5, 2] },
+  allowRemotePlayback: { type: Boolean, required: false, default: false },
+  downloadable: { type: Boolean, required: false, default: false },
+  downloadUrl: { type: [String, null], required: false, default: null },
+  downloadFilename: { type: String, required: false, default: void 0 },
+  qualityOptions: { type: Array, required: false, default: () => [] },
+  currentQuality: { type: [String, null], required: false, default: null },
+  showPrevious: { type: Boolean, required: false, default: false },
+  showNext: { type: Boolean, required: false, default: false },
+  showLoop: { type: Boolean, required: false, default: false },
+  showShuffle: { type: Boolean, required: false, default: false },
+  loopMode: { type: null, required: false, default: "none" },
+  shuffle: { type: Boolean, required: false, default: false },
+  id: { type: String, required: false },
+  class: { type: [String, Array, Object], required: false },
+  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true }
+});
+const emit = defineEmits(["quality-change", "download", "previous", "next", "update:loopMode", "update:shuffle"]);
+defineSlots();
+const slots = useSlots();
+const ICONS = {
+  PLAY: MDI_ICONS.PLAY,
+  PAUSE: MDI_ICONS.PAUSE,
+  PREVIOUS: MDI_ICONS.SKIP_PREVIOUS,
+  NEXT: MDI_ICONS.SKIP_NEXT,
+  LOOP: MDI_ICONS.REPEAT,
+  LOOP_ONE: MDI_ICONS.REPEAT_ONCE,
+  SHUFFLE: MDI_ICONS.SHUFFLE,
+  COG: MDI_ICONS.COG,
+  CAST: MDI_ICONS.CAST,
+  DOWNLOAD: MDI_ICONS.DOWNLOAD
+};
+const playLabel = computed(() => t("origam.media.play", "Play"));
+const pauseLabel = computed(() => t("origam.media.pause", "Pause"));
+const muteLabel = computed(() => t("origam.media.mute", "Mute"));
+const unmuteLabel = computed(() => t("origam.media.unmute", "Unmute"));
+const volumeLabel = computed(() => t("origam.media.volume", "Volume"));
+const seekLabel = computed(() => t("origam.media.seek", "Seek"));
+const previousLabel = computed(() => t("origam.media.previousTrack", "Previous track"));
+const nextLabel = computed(() => t("origam.media.nextTrack", "Next track"));
+const loopAllLabel = computed(() => t("origam.media.loopAll", "Loop playlist"));
+const loopOneLabel = computed(() => t("origam.media.loopOne", "Loop track"));
+const loopOffLabel = computed(() => t("origam.media.loopOff", "Loop off"));
+const shuffleLabel = computed(() => t("origam.media.shuffle", "Shuffle"));
+const castLabel = computed(() => t("origam.media.castToDevice", "Cast to device"));
+const stopCastLabel = computed(() => t("origam.media.stopCasting", "Stop casting"));
+const settingsLabel = computed(() => t("origam.media.settings", "Settings"));
+const downloadLabel = computed(() => t("origam.media.download", "Download"));
+const speedLabel = computed(() => t("origam.media.playbackSpeed", "Playback speed"));
+const normalSpeedLabel = computed(() => t("origam.media.normalSpeed", "Normal"));
+const qualityLabel = computed(() => t("origam.media.quality", "Quality"));
+const transportLabel = computed(() => t("origam.media.transport", "Transport controls"));
+const state = computed(() => props.state);
+const methods = computed(() => props.methods);
+function onTogglePlay() {
+  if (state.value.playing.value) methods.value.pause();
+  else methods.value.play();
+}
+function onToggleMute() {
+  methods.value.toggleMute();
+}
+function onVolumeChangeFromScrubber(value) {
+  if (value > 0 && state.value.muted.value) methods.value.toggleMute();
+  else if (value === 0 && !state.value.muted.value) methods.value.toggleMute();
+  methods.value.setVolume(value);
+}
+const scrubberMax = computed(() => {
+  return Number.isFinite(state.value.duration.value) ? state.value.duration.value : 0;
+});
+function onScrubberSeek(value) {
+  methods.value.seek(value);
+}
+function onScrubberCommit(value) {
+  methods.value.seek(value);
+}
+function formatScrubberTime(seconds) {
+  return formatMediaTime(seconds);
+}
+const formattedCurrentTime = computed(() => formatMediaTime(state.value.currentTime.value));
+const formattedDuration = computed(() => formatMediaTime(state.value.duration.value));
+const showCastButton = computed(() => {
+  return Boolean(props.allowRemotePlayback) && state.value.remoteAvailable.value;
+});
+const isCasting = computed(() => state.value.remoteState.value === "connected");
+async function onCastClick() {
+  await methods.value.requestRemotePlayback();
+}
+function emitPrevious() {
+  emit("previous");
+}
+function emitNext() {
+  emit("next");
+}
+const internalLoopMode = ref(props.loopMode ?? "none");
+watch(() => props.loopMode, (next) => {
+  if (next && next !== internalLoopMode.value) internalLoopMode.value = next;
+});
+const resolvedLoopMode = computed(() => internalLoopMode.value);
+function cycleLoopMode() {
+  const next = internalLoopMode.value === "none" ? "all" : internalLoopMode.value === "all" ? "one" : "none";
+  internalLoopMode.value = next;
+  emit("update:loopMode", next);
+}
+const loopIcon = computed(() => {
+  return resolvedLoopMode.value === "one" ? ICONS.LOOP_ONE : ICONS.LOOP;
+});
+const isLoopActive = computed(() => resolvedLoopMode.value !== "none");
+const loopAriaLabel = computed(() => {
+  if (resolvedLoopMode.value === "one") return loopOneLabel.value;
+  if (resolvedLoopMode.value === "all") return loopAllLabel.value;
+  return loopOffLabel.value;
+});
+const internalShuffle = ref(props.shuffle ?? false);
+watch(() => props.shuffle, (next) => {
+  if (typeof next === "boolean" && next !== internalShuffle.value) {
+    internalShuffle.value = next;
+  }
+});
+function toggleShuffle() {
+  internalShuffle.value = !internalShuffle.value;
+  emit("update:shuffle", internalShuffle.value);
+}
+const configMenuOpen = ref(false);
+const hasQualityOptions = computed(() => props.qualityOptions.length >= 2);
+const hasPlaybackRates = computed(() => (props.playbackRates?.length ?? 0) > 1);
+const canDownload = computed(() => Boolean(props.downloadable) && Boolean(props.downloadUrl));
+const hasConfigContent = computed(() => {
+  return Boolean(slots.configExtra) || hasPlaybackRates.value || hasQualityOptions.value || canDownload.value;
+});
+const formattedPlaybackRate = computed(() => {
+  const r = state.value.playbackRate.value;
+  if (Math.abs(r - 1) < 0.01) return normalSpeedLabel.value;
+  return `${r}\xD7`;
+});
+const formattedQuality = computed(() => {
+  if (!props.currentQuality) return "";
+  const match = props.qualityOptions.find((q) => q.quality === props.currentQuality);
+  return match?.label ?? props.currentQuality;
+});
+const configMenuItems = computed(() => {
+  const items = [];
+  if (hasPlaybackRates.value) {
+    items.push({
+      title: speedLabel.value,
+      appendText: formattedPlaybackRate.value,
+      key: "speed-root",
+      children: props.playbackRates.map((rate) => ({
+        title: rate === 1 ? normalSpeedLabel.value : `${rate}\xD7`,
+        key: `speed-${rate}`,
+        value: rate,
+        link: true,
+        onClick: () => onConfigSelect({
+          title: rate === 1 ? normalSpeedLabel.value : `${rate}\xD7`,
+          key: `speed-${rate}`,
+          value: rate
+        })
+      }))
+    });
+  }
+  if (hasQualityOptions.value) {
+    items.push({
+      title: qualityLabel.value,
+      appendText: formattedQuality.value,
+      key: "quality-root",
+      children: props.qualityOptions.map((q) => ({
+        title: q.label,
+        key: `quality-${q.quality}`,
+        value: q.quality,
+        link: true,
+        onClick: () => onConfigSelect({
+          title: q.label,
+          key: `quality-${q.quality}`,
+          value: q.quality
+        })
+      }))
+    });
+  }
+  if (canDownload.value) {
+    items.push({
+      title: downloadLabel.value,
+      prependIcon: ICONS.DOWNLOAD,
+      key: "download",
+      href: props.downloadUrl ?? void 0,
+      download: props.downloadFilename || "",
+      rel: "noopener",
+      onClick: handleDownloadClick
+    });
+  }
+  return items;
+});
+function onConfigSelect(item) {
+  if (!item) return;
+  if (item.key.startsWith("speed-") && typeof item.value === "number") {
+    methods.value.setPlaybackRate(item.value);
+    configMenuOpen.value = false;
+    return;
+  }
+  if (item.key.startsWith("quality-") && typeof item.value === "string") {
+    emit("quality-change", item.value);
+    configMenuOpen.value = false;
+    return;
+  }
+  if (item.key === "download") {
+    emit("download");
+    configMenuOpen.value = false;
+  }
+}
+function handleDownloadClick(event) {
+  emit("download");
+  configMenuOpen.value = false;
+  const url = props.downloadUrl;
+  if (!url) {
+    event.preventDefault();
+    return;
+  }
+  if (typeof window === "undefined" || typeof document === "undefined") return;
+  const isSameOriginOrLocal = (raw) => {
+    if (raw.startsWith("data:") || raw.startsWith("blob:")) return true;
+    try {
+      const u = new URL(raw, window.location.href);
+      return u.origin === window.location.origin;
+    } catch {
+      return true;
+    }
+  };
+  if (isSameOriginOrLocal(url)) return;
+  event.preventDefault();
+  const filename = props.downloadFilename || url.split("?")[0].split("/").pop() || "download";
+  const triggerAnchor = (href) => {
+    const a = document.createElement("a");
+    a.href = href;
+    a.download = filename;
+    a.rel = "noopener";
+    a.style.display = "none";
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  };
+  fetch(url, { mode: "cors", credentials: "omit" }).then((response) => {
+    if (!response.ok) throw new Error(`HTTP ${response.status}`);
+    return response.blob();
+  }).then((blob) => {
+    const blobUrl = URL.createObjectURL(blob);
+    triggerAnchor(blobUrl);
+    setTimeout(() => URL.revokeObjectURL(blobUrl), 3e4);
+  }).catch(() => {
+    window.open(url, "_blank", "noopener,noreferrer");
+  });
+}
+const rootClasses = computed(() => [
+  {
+    "origam-media-controller--inset": props.inset,
+    "origam-media-controller--visible": props.visible
+  },
+  props.class
+]);
+const style = computed(() => props.style);
+defineExpose({
+  configMenuOpen,
+  resolvedLoopMode,
+  internalShuffle
+});
+</script>
+
+<style lang="scss" scoped>
+	.origam-media-controller {
+		display: flex;
+		flex-direction: column;
+		gap: 0;
+		padding: 0 0 6px;
+		color: var(--origam-media-controller---color, inherit);
+		transition: opacity 180ms ease, transform 220ms ease;
+	}
+
+	.origam-media-controller__progress-row {
+		padding: 0 12px;
+	}
+
+	.origam-media-controller__buttons-row {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0 8px;
+		min-height: 36px;
+	}
+
+	.origam-media-controller__buttons-left,
+	.origam-media-controller__buttons-right {
+		display: flex;
+		align-items: center;
+		gap: 2px;
+	}
+
+	.origam-media-controller__buttons-row :deep(.origam-btn) {
+		--origam-btn---color: currentColor;
+		--origam-btn---background-color: transparent;
+		--origam-btn---min-width: 32px;
+		--origam-btn---width: 32px;
+		--origam-btn---height: 32px;
+	}
+
+	.origam-media-controller__buttons-row :deep(.origam-btn--active) {
+		color: var(--origam-media-controller---accent-color, var(--origam-color__action--primary---bg));
+		background-color: color-mix(in srgb, var(--origam-media-controller---accent-color, var(--origam-color__action--primary---bg)) 14%, transparent);
+	}
+
+	.origam-media-controller--inset {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.35) 60%, transparent 100%);
+		opacity: 0;
+		pointer-events: none;
+	}
+
+	.origam-media-controller--inset.origam-media-controller--visible {
+		opacity: 1;
+		pointer-events: auto;
+	}
+
+	.origam-media-controller__scrubber {
+		--origam-media-scrubber---color: var(
+			--origam-media-controller__scrubber---color,
+			currentColor
+		);
+		--origam-media-scrubber---track-background-color: color-mix(in srgb, currentColor 18%, transparent);
+		--origam-media-scrubber---buffer-background-color: color-mix(in srgb, currentColor 32%, transparent);
+		width: 100%;
+	}
+
+	.origam-media-controller__time {
+		display: inline-flex;
+		align-items: center;
+		gap: 4px;
+		padding: 0 6px;
+		font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
+		font-size: 12px;
+		font-variant-numeric: tabular-nums;
+		color: var(--origam-media-controller__time---color, inherit);
+		white-space: nowrap;
+		user-select: none;
+	}
+
+	.origam-media-controller__time-sep {
+		opacity: 0.6;
+	}
+
+	.origam-media-controller__time-total {
+		opacity: 0.7;
+	}
+</style>