origam 2.3.0 → 2.6.1

package/dist/src/components/Video/OrigamVideo.vue

@@ -0,0 +1,1080 @@
+<template>
+	<origam-responsive
+			class="origam-video"
+			:class="rootClasses"
+			:style="rootStyles"
+			:aspect-ratio="effectiveAspectRatio"
+			content-class="origam-video__inner"
+			data-cy="origam-video"
+			@mouseenter="onPlayerMouseEnter"
+			@mouseleave="onPlayerMouseLeave"
+	>
+		<template #additional>
+		<video
+				ref="videoRef"
+				class="origam-video__el"
+				:src="singleSrc"
+				:poster="poster"
+				:autoplay="resolvedAutoplay"
+				:muted="resolvedMuted"
+				:loop="loop"
+				:controls="controls === 'native'"
+				:playsinline="playsInline"
+				:preload="preload"
+				:crossorigin="crossorigin"
+				:disablepictureinpicture="disablePictureInPicture || undefined"
+				data-cy="origam-video-el"
+				@play="emit('play')"
+				@pause="emit('pause')"
+				@ended="emit('ended')"
+				@timeupdate="onTimeUpdate"
+				@volumechange="onVolumeChange"
+				@loadedmetadata="onLoadedMetadata"
+				@error="onErrorEvent"
+				@enterpictureinpicture="emit('enterpip')"
+				@leavepictureinpicture="emit('exitpip')"
+				@pointerup="onVideoTap"
+		>
+			<source
+					v-for="source in resolvedSources"
+					:key="source.src"
+					:src="source.src"
+					:type="source.type"
+			/>
+			<track
+					v-for="track in tracks"
+					:key="`${track.kind}-${track.srclang}`"
+					:kind="track.kind"
+					:src="track.src"
+					:srclang="track.srclang"
+					:label="track.label || track.srclang.toUpperCase()"
+					:default="track.default || undefined"
+			/>
+		</video>
+
+		<transition name="origam-video-state-pulse">
+			<div
+					v-if="statePulse"
+					:key="statePulse.id"
+					class="origam-video__state-pulse"
+					aria-hidden="true"
+					data-cy="origam-video-state-pulse"
+			>
+				<origam-icon
+						:icon="statePulse.kind === 'play' ? ICONS.PLAY : ICONS.PAUSE"
+						class="origam-video__state-pulse-icon"
+						aria-hidden="true"
+				/>
+			</div>
+		</transition>
+
+		<transition name="origam-video-skip-ripple">
+			<div
+					v-if="skipFeedback"
+					:key="skipFeedback.id"
+					class="origam-video__skip-ripple"
+					:class="`origam-video__skip-ripple--${skipFeedback.side}`"
+					aria-hidden="true"
+					data-cy="origam-video-skip-ripple"
+			>
+				<div class="origam-video__skip-ripple-content">
+					<div class="origam-video__skip-chevrons">
+						<origam-icon
+								:icon="skipFeedback.side === 'left' ? ICONS.CHEVRON_LEFT : ICONS.CHEVRON_RIGHT"
+								class="origam-video__skip-chevron origam-video__skip-chevron--1"
+								aria-hidden="true"
+						/>
+						<origam-icon
+								:icon="skipFeedback.side === 'left' ? ICONS.CHEVRON_LEFT : ICONS.CHEVRON_RIGHT"
+								class="origam-video__skip-chevron origam-video__skip-chevron--2"
+								aria-hidden="true"
+						/>
+						<origam-icon
+								:icon="skipFeedback.side === 'left' ? ICONS.CHEVRON_LEFT : ICONS.CHEVRON_RIGHT"
+								class="origam-video__skip-chevron origam-video__skip-chevron--3"
+								aria-hidden="true"
+						/>
+					</div>
+					<span class="origam-video__skip-ripple-label">{{ t('origam.media.seconds', skipFeedback.seconds) }}</span>
+				</div>
+			</div>
+		</transition>
+
+		<div
+				v-if="showPosterOverlay"
+				class="origam-video__poster"
+				data-cy="origam-video-poster"
+				@click="methods.play()"
+		>
+			<slot name="poster">
+				<img
+						v-if="poster"
+						class="origam-video__poster-img"
+						:src="poster"
+						alt=""
+				/>
+				<origam-btn
+						:icon="ICONS.PLAY"
+						class="origam-video__poster-btn"
+						:aria-label="t('origam.media.play')"
+						data-cy="origam-video-poster-btn"
+						size="large"
+						variant="elevated"
+						@click.stop="methods.play()"
+				/>
+			</slot>
+		</div>
+
+		<div
+				v-if="state.loading.value && !state.error.value"
+				class="origam-video__loading"
+				role="status"
+				:aria-label="t('origam.loading')"
+				data-cy="origam-video-loading"
+				:style="typographyLoadingStyles"
+		>
+			<slot name="loading">
+				<origam-icon
+						:icon="ICONS.LOADING"
+						class="origam-video__loading-icon"
+						aria-hidden="true"
+				/>
+			</slot>
+		</div>
+
+		<div
+				v-if="state.error.value"
+				class="origam-video__error"
+				role="alert"
+				data-cy="origam-video-error"
+				:style="typographyErrorStyles"
+		>
+			<slot
+					name="error"
+					:error="state.error.value"
+			>
+				<origam-icon
+						:icon="ICONS.ALERT"
+						class="origam-video__error-icon"
+						aria-hidden="true"
+				/>
+				<span class="origam-video__error-msg">{{ errorMessage }}</span>
+			</slot>
+		</div>
+
+		<slot
+				v-if="controls === 'custom'"
+				name="controls"
+				v-bind="slotBindings"
+		>
+			<origam-media-controller
+					:state="state"
+					:methods="methods"
+					:inset="inset"
+					:visible="controlsVisible"
+					:playback-rates="playbackRates"
+					:allow-remote-playback="allowRemotePlayback"
+					:downloadable="downloadable"
+					:download-url="downloadUrl"
+					:download-filename="downloadFilename"
+					:quality-options="qualityOptions"
+					:current-quality="currentQuality"
+					data-cy="origam-video-controls"
+					@quality-change="onQualityClick"
+					@download="onDownloadClick"
+			>
+				<template #extraControlsRight>
+					<origam-btn
+							v-if="hasCaptions"
+							:icon="ICONS.CAPTIONS"
+							variant="text"
+							:active="captionsEnabled"
+							class="origam-video__btn"
+							:aria-label="t(captionsLabelKey)"
+							data-cy="origam-video-captions"
+							@click="toggleCaptions"
+					/>
+					<origam-btn
+							v-if="pipSupported"
+							:icon="ICONS.PIP"
+							variant="text"
+							class="origam-video__btn"
+							:aria-label="t(pipLabelKey)"
+							data-cy="origam-video-pip"
+							@click="togglePipBtn"
+					/>
+					<origam-btn
+							:icon="fullscreenIcon"
+							variant="text"
+							class="origam-video__btn"
+							:aria-label="t(fullscreenLabelKey)"
+							data-cy="origam-video-fullscreen"
+							@click="toggleFullscreenBtn"
+					/>
+				</template>
+			</origam-media-controller>
+		</slot>
+		</template>
+	</origam-responsive>
+</template>
+
+<script lang="ts" setup>
+import {
+  computed,
+  onBeforeUnmount,
+  ref,
+  watch
+} from "vue";
+import { OrigamBtn } from "../Btn";
+import { OrigamIcon } from "../Icon";
+import { OrigamMediaController } from "../Media";
+import { OrigamResponsive } from "../Responsive";
+import { shouldSuppressAutoplay, useBorder, useColorEffect, useDimension, useElevation, useLocale, useMargin, usePadding, useRounded, useTypography, useVideoPlayer } from "../../composables";
+import { MDI_ICONS } from "../../enums";
+const { t } = useLocale();
+const props = defineProps({
+  src: { type: [String, Array], required: true },
+  poster: { type: String, required: false, default: void 0 },
+  tracks: { type: Array, required: false, default: () => [] },
+  autoplay: { type: Boolean, required: false, default: false },
+  muted: { type: Boolean, required: false, default: false },
+  loop: { type: Boolean, required: false, default: false },
+  controls: { type: String, required: false, default: "custom" },
+  playsInline: { type: Boolean, required: false, default: true },
+  preload: { type: String, required: false, default: "metadata" },
+  aspectRatio: { type: String, required: false, default: "16/9" },
+  crossorigin: { type: String, required: false, default: void 0 },
+  disablePictureInPicture: { type: Boolean, required: false, default: false },
+  skipSeconds: { type: Number, required: false, default: 30 },
+  showCenterControls: { type: Boolean, required: false, default: true },
+  playbackRates: { type: Array, required: false, default: () => [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2] },
+  playbackRate: { type: Number, required: false, default: 1 },
+  inset: { type: Boolean, required: false, default: true },
+  allowRemotePlayback: { type: Boolean, required: false, default: true },
+  doubleTapToSkip: { type: Boolean, required: false, default: true },
+  downloadable: { type: Boolean, required: false, default: false },
+  downloadFilename: { type: String, required: false, default: void 0 },
+  id: { type: String, required: false },
+  class: { type: [String, Array, Object], required: false },
+  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true, default: void 0 },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true, default: void 0 },
+  height: { type: [Number, String], required: false },
+  maxHeight: { type: [Number, String], required: false },
+  maxWidth: { type: [Number, String], required: false },
+  minHeight: { type: [Number, String], required: false },
+  minWidth: { type: [Number, String], required: false },
+  width: { type: [Number, String], required: false },
+  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
+  roundedTopRight: { type: [Boolean, Number, String], required: false },
+  roundedTopLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomRight: { type: [Boolean, Number, String], required: false },
+  border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
+  borderTop: { type: [Boolean, Number, String], required: false },
+  borderLeft: { type: [Boolean, Number, String], required: false },
+  borderBottom: { type: [Boolean, Number, String], required: false },
+  borderRight: { type: [Boolean, Number, String], required: false },
+  borderBlock: { type: [Boolean, Number, String], required: false },
+  borderInline: { type: [Boolean, Number, String], required: false },
+  borderColor: { type: String, required: false },
+  borderStyle: { type: String, required: false },
+  margin: { type: [Boolean, Number, String], required: false },
+  marginTop: { type: [Boolean, Number, String], required: false },
+  marginLeft: { type: [Boolean, Number, String], required: false },
+  marginBottom: { type: [Boolean, Number, String], required: false },
+  marginRight: { type: [Boolean, Number, String], required: false },
+  marginBlock: { type: [Boolean, Number, String], required: false },
+  marginInline: { type: [Boolean, Number, String], required: false },
+  padding: { type: [Boolean, Number, String], required: false },
+  paddingTop: { type: [Boolean, Number, String], required: false },
+  paddingLeft: { type: [Boolean, Number, String], required: false },
+  paddingBottom: { type: [Boolean, Number, String], required: false },
+  paddingRight: { type: [Boolean, Number, String], required: false },
+  paddingBlock: { type: [Boolean, Number, String], required: false },
+  paddingInline: { type: [Boolean, Number, String], required: false },
+  elevation: { type: [Number, String], required: false },
+  fontFamily: { type: String, required: false },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false },
+  lineHeight: { type: String, required: false },
+  letterSpacing: { type: String, required: false }
+});
+const emit = defineEmits(["enterfullscreen", "exitfullscreen", "enterpip", "exitpip", "skip", "quality-change", "download", "play", "pause", "ended", "timeupdate", "volumechange", "loadedmetadata", "error", "update:playbackRate"]);
+const ICONS = {
+  PLAY: MDI_ICONS.PLAY,
+  PAUSE: MDI_ICONS.PAUSE,
+  LOADING: MDI_ICONS.LOADING,
+  ALERT: MDI_ICONS.ALERT_CIRCLE,
+  CAPTIONS: MDI_ICONS.CLOSED_CAPTION,
+  PIP: MDI_ICONS.PICTURE_IN_PICTURE_BOTTOM_RIGHT,
+  FULLSCREEN: MDI_ICONS.FULLSCREEN,
+  FULLSCREEN_EXIT: MDI_ICONS.FULLSCREEN_EXIT,
+  CHEVRON_LEFT: MDI_ICONS.CHEVRON_LEFT,
+  CHEVRON_RIGHT: MDI_ICONS.CHEVRON_RIGHT
+};
+const resolvedAutoplay = computed(() => {
+  if (!props.autoplay) return false;
+  if (shouldSuppressAutoplay()) return false;
+  return true;
+});
+const resolvedMuted = computed(() => {
+  if (props.muted) return true;
+  if (resolvedAutoplay.value) return true;
+  return false;
+});
+const singleSrc = computed(() => {
+  return typeof props.src === "string" ? props.src : void 0;
+});
+const resolvedSources = computed(() => {
+  const sources = Array.isArray(props.src) ? props.src : [];
+  if (currentQuality.value && hasQualityOptions.value) {
+    return sources.filter((s) => !s.quality || s.quality === currentQuality.value);
+  }
+  return sources;
+});
+const { videoRef, state, methods } = useVideoPlayer({
+  autoplay: props.autoplay,
+  muted: resolvedMuted.value,
+  loop: props.loop,
+  preload: props.preload
+});
+function onTimeUpdate() {
+  emit("timeupdate", state.currentTime.value);
+}
+function onVolumeChange() {
+  emit("volumechange", state.volume.value);
+}
+const naturalWidth = ref(null);
+const naturalHeight = ref(null);
+function onLoadedMetadata(event) {
+  const v = event.target;
+  if (v.videoWidth && v.videoHeight) {
+    naturalWidth.value = v.videoWidth;
+    naturalHeight.value = v.videoHeight;
+  }
+  emit("loadedmetadata", { duration: state.duration.value });
+}
+const effectiveAspectRatio = computed(() => {
+  if (props.aspectRatio) return props.aspectRatio;
+  if (naturalWidth.value && naturalHeight.value) {
+    return naturalWidth.value / naturalHeight.value;
+  }
+  return "16/9";
+});
+function onErrorEvent() {
+  if (state.error.value) emit("error", state.error.value);
+}
+const hovered = ref(false);
+const onPlayerMouseEnter = () => {
+  hovered.value = true;
+};
+const onPlayerMouseLeave = () => {
+  hovered.value = false;
+};
+const controlsVisible = computed(() => {
+  if (!props.inset) return true;
+  if (state.paused.value) return true;
+  return hovered.value;
+});
+const skipBy = (seconds) => {
+  if (seconds > 0) methods.skipForward(seconds);
+  else if (seconds < 0) methods.skipBackward(Math.abs(seconds));
+  emit("skip", seconds);
+};
+const onSkipBack = () => skipBy(-Math.abs(props.skipSeconds || 0));
+const onSkipForward = () => skipBy(Math.abs(props.skipSeconds || 0));
+const _lastTap = ref(null);
+const skipFeedback = ref(null);
+let _skipFeedbackTimeout = -1;
+const statePulse = ref(null);
+let _statePulseTimeout = -1;
+function triggerStatePulse(kind) {
+  statePulse.value = { kind, id: Date.now() };
+  if (_statePulseTimeout !== -1) window.clearTimeout(_statePulseTimeout);
+  _statePulseTimeout = window.setTimeout(() => {
+    statePulse.value = null;
+    _statePulseTimeout = -1;
+  }, 600);
+}
+const triggerSkipFeedback = (side) => {
+  skipFeedback.value = { side, seconds: props.skipSeconds, id: Date.now() };
+  if (_skipFeedbackTimeout !== -1) window.clearTimeout(_skipFeedbackTimeout);
+  _skipFeedbackTimeout = window.setTimeout(() => {
+    skipFeedback.value = null;
+    _skipFeedbackTimeout = -1;
+  }, 700);
+};
+let _pendingTogglePlayTimeout = -1;
+function schedulePendingTogglePlay() {
+  clearPendingTogglePlay();
+  _pendingTogglePlayTimeout = window.setTimeout(() => {
+    togglePlay();
+    _pendingTogglePlayTimeout = -1;
+  }, 280);
+}
+function clearPendingTogglePlay() {
+  if (_pendingTogglePlayTimeout !== -1) {
+    window.clearTimeout(_pendingTogglePlayTimeout);
+    _pendingTogglePlayTimeout = -1;
+  }
+}
+onBeforeUnmount(() => {
+  if (_skipFeedbackTimeout !== -1) window.clearTimeout(_skipFeedbackTimeout);
+  if (_statePulseTimeout !== -1) window.clearTimeout(_statePulseTimeout);
+  clearPendingTogglePlay();
+});
+const onVideoTap = (event) => {
+  if (event.clientX == null) return;
+  const eventTarget = event.target;
+  if (eventTarget?.closest(".origam-video__center-btn")) return;
+  const videoEl = videoRef.value;
+  if (!videoEl) return;
+  const rect = videoEl.getBoundingClientRect();
+  const side = event.clientX - rect.left < rect.width / 2 ? "left" : "right";
+  const now = Date.now();
+  const last = _lastTap.value;
+  if (props.doubleTapToSkip && last && now - last.time < 300 && last.side === side) {
+    clearPendingTogglePlay();
+    if (side === "left") onSkipBack();
+    else onSkipForward();
+    triggerSkipFeedback(side);
+    _lastTap.value = null;
+    event.preventDefault();
+  } else {
+    _lastTap.value = { time: now, side };
+    schedulePendingTogglePlay();
+  }
+};
+const qualityOptions = computed(() => {
+  const sources = Array.isArray(props.src) ? props.src : [];
+  const seen = /* @__PURE__ */ new Set();
+  const out = [];
+  for (const s of sources) {
+    if (!s?.quality || seen.has(s.quality)) continue;
+    seen.add(s.quality);
+    out.push({ quality: s.quality, label: s.label ?? s.quality, src: s.src, type: s.type });
+  }
+  return out;
+});
+const hasQualityOptions = computed(() => qualityOptions.value.length >= 2);
+const currentQuality = ref(null);
+const initQuality = () => {
+  if (currentQuality.value !== null) return;
+  if (!hasQualityOptions.value) return;
+  currentQuality.value = qualityOptions.value[0].quality;
+};
+initQuality();
+function onQualityClick(quality) {
+  const target = qualityOptions.value.find((q) => q.quality === quality);
+  if (!target || !videoRef.value) return;
+  const video = videoRef.value;
+  const wasPaused = video.paused;
+  const at = video.currentTime;
+  currentQuality.value = quality;
+  emit("quality-change", quality);
+  const onReady = () => {
+    try {
+      video.currentTime = at;
+    } catch {
+    }
+    if (!wasPaused) video.play().catch(() => {
+    });
+    video.removeEventListener("loadedmetadata", onReady);
+  };
+  video.addEventListener("loadedmetadata", onReady);
+  video.src = target.src;
+  video.load();
+}
+function onDownloadClick() {
+  const url = downloadUrl.value;
+  if (!url) return;
+  emit("download", url);
+}
+const downloadUrl = computed(() => {
+  if (typeof props.src === "string") return props.src || null;
+  const sources = props.src;
+  if (!sources.length) return null;
+  if (currentQuality.value) {
+    const match = sources.find((s) => s.quality === currentQuality.value);
+    if (match) return match.src;
+  }
+  return sources[0]?.src ?? null;
+});
+watch(() => props.playbackRate, (rate) => {
+  if (typeof rate === "number" && Number.isFinite(rate) && rate > 0) {
+    methods.setPlaybackRate(rate);
+  }
+}, { immediate: true });
+watch(() => state.playbackRate.value, (rate) => {
+  emit("update:playbackRate", rate);
+});
+function togglePlay() {
+  if (state.playing.value) {
+    methods.pause();
+    triggerStatePulse("pause");
+  } else {
+    methods.play();
+    triggerStatePulse("play");
+  }
+}
+async function toggleFullscreenBtn() {
+  const wasFs = state.fullscreen.value;
+  await methods.toggleFullscreen();
+  if (state.fullscreen.value && !wasFs) emit("enterfullscreen");
+  else if (!state.fullscreen.value && wasFs) emit("exitfullscreen");
+}
+async function togglePipBtn() {
+  await methods.togglePip();
+}
+const captionsEnabled = ref(false);
+const hasCaptions = computed(() => props.tracks.some((track) => {
+  return track.kind === "captions" || track.kind === "subtitles";
+}));
+function toggleCaptions() {
+  const el = videoRef.value;
+  if (!el) return;
+  const trackList = el.textTracks;
+  captionsEnabled.value = !captionsEnabled.value;
+  for (let i = 0; i < trackList.length; i++) {
+    const track = trackList[i];
+    if (!captionsEnabled.value) {
+      track.mode = "disabled";
+    } else {
+      const declared = props.tracks[i];
+      if (declared?.default) track.mode = "showing";
+      else if (i === 0) track.mode = "showing";
+      else track.mode = "disabled";
+    }
+  }
+}
+watch(() => state.ready.value, (ready) => {
+  if (!ready) return;
+  const el = videoRef.value;
+  if (!el) return;
+  const someShowing = Array.from(el.textTracks).some((track) => track.mode === "showing");
+  captionsEnabled.value = someShowing;
+});
+const pipSupported = computed(() => {
+  if (props.disablePictureInPicture) return false;
+  if (typeof document === "undefined") return false;
+  const doc = document;
+  return Boolean(doc.pictureInPictureEnabled);
+});
+const showPosterOverlay = computed(() => {
+  return Boolean(props.poster) && state.paused.value && state.currentTime.value === 0 && !state.error.value;
+});
+const errorMessage = computed(() => {
+  const err = state.error.value;
+  if (!err) return "Playback error";
+  if ("message" in err && err.message) return err.message;
+  return "Playback error";
+});
+const captionsLabelKey = computed(() => {
+  return captionsEnabled.value ? "origam.video.disableCaptions" : "origam.video.enableCaptions";
+});
+const pipLabelKey = computed(() => {
+  return state.pip.value ? "origam.video.exitPip" : "origam.video.enterPip";
+});
+const fullscreenLabelKey = computed(() => {
+  return state.fullscreen.value ? "origam.video.exitFullscreen" : "origam.video.enterFullscreen";
+});
+const fullscreenIcon = computed(() => {
+  return state.fullscreen.value ? ICONS.FULLSCREEN_EXIT : ICONS.FULLSCREEN;
+});
+const slotBindings = computed(() => ({
+  playing: state.playing.value,
+  paused: state.paused.value,
+  currentTime: state.currentTime.value,
+  duration: state.duration.value,
+  buffered: state.buffered.value,
+  volume: state.volume.value,
+  muted: state.muted.value,
+  fullscreen: state.fullscreen.value,
+  pip: state.pip.value,
+  loading: state.loading.value,
+  error: state.error.value,
+  playbackRate: state.playbackRate.value,
+  remoteAvailable: state.remoteAvailable.value,
+  remoteState: state.remoteState.value,
+  methods
+}));
+const { colorClasses, colorStyles } = useColorEffect(props);
+const hasColorProp = computed(() => !!props.color);
+const hasBgColorProp = computed(() => !!props.bgColor);
+const { borderClasses, borderStyles } = useBorder(props);
+const { marginClasses, marginStyles } = useMargin(props);
+const { paddingClasses, paddingStyles } = usePadding(props);
+const { roundedClasses, roundedStyles } = useRounded(props);
+const { elevationClasses } = useElevation(props);
+const { dimensionStyles } = useDimension(props);
+const { typographyStyles: typographyLoadingStyles } = useTypography(props, "video__loading");
+const { typographyStyles: typographyErrorStyles } = useTypography(props, "video--error");
+const scrubberColorStyle = computed(() => {
+  if (hasColorProp.value || hasBgColorProp.value) {
+    return { "--origam-media-controller__scrubber---color": "currentColor" };
+  }
+  return { "--origam-media-controller__scrubber---color": "#ffffff" };
+});
+const rootClasses = computed(() => [
+  {
+    "origam-video--playing": state.playing.value,
+    "origam-video--paused": state.paused.value,
+    "origam-video--loading": state.loading.value,
+    "origam-video--error": state.error.value !== null,
+    "origam-video--fullscreen": state.fullscreen.value,
+    "origam-video--pip": state.pip.value,
+    "origam-video--controls-native": props.controls === "native",
+    "origam-video--controls-custom": props.controls === "custom",
+    "origam-video--controls-none": props.controls === "none",
+    "origam-video--has-color": hasColorProp.value,
+    "origam-video--has-bg-color": hasBgColorProp.value
+  },
+  ...colorClasses.value,
+  borderClasses.value,
+  roundedClasses.value,
+  elevationClasses.value,
+  marginClasses.value,
+  paddingClasses.value,
+  props.class
+]);
+const rootStyles = computed(() => [
+  colorStyles.value,
+  scrubberColorStyle.value,
+  borderStyles.value,
+  roundedStyles.value,
+  marginStyles.value,
+  paddingStyles.value,
+  dimensionStyles.value,
+  props.style
+]);
+defineExpose({
+  videoRef,
+  state,
+  methods
+});
+</script>
+
+<style lang="scss" scoped>
+	.origam-video {
+		position: relative;
+		display: block;
+		width: 100%;
+		background-color: var(--origam-video---background-color, #000000);
+		overflow: hidden;
+		border-radius: var(--origam-video---border-radius, 0);
+
+		/*
+		 * Force the chrome (MediaController play / volume / cog,
+		 * native `<button>`-based MediaVolumeControl) to white by
+		 * default — the controller's own SCSS reads `color:
+		 * var(--origam-media-controller---color, inherit)` which
+		 * defaults to the `#171717` text-primary token. On the dark
+		 * video overlay that produces near-invisible icons (the
+		 * user-reported "icons all black" symptom).
+		 *
+		 * The variable is overridden to `inherit` further down when
+		 * the consumer passes `color` / `bgColor`, so `useColorEffect`
+		 * gets to drive the tint through.
+		 */
+		--origam-media-controller---color: #ffffff;
+	}
+
+	/*
+	 * Tint propagation when the consumer passes `color` or `bgColor`:
+	 * the MediaController + the white-by-default `.origam-video__btn`
+	 * icons need to inherit the host colour so the scrubber's
+	 * `currentColor` (set by `scrubberColorStyle`) AND the icons
+	 * track the user's intent. Without these overrides the
+	 * MediaController's own scoped `color: var(--origam-media-controller---color, inherit)`
+	 * pins the chrome back to the dark text-primary token.
+	 */
+	.origam-video--has-color,
+	.origam-video--has-bg-color {
+		--origam-media-controller---color: inherit;
+
+		:deep(.origam-media-controller) {
+			color: inherit;
+		}
+
+		.origam-video__btn {
+			color: inherit;
+		}
+	}
+
+	/*
+	 * Native `<button class="origam-media-volume-control__btn">` lives
+	 * inside OrigamMediaVolumeControl with its own scoped CSS that
+	 * doesn't honour `--origam-media-controller---color`. Force it
+	 * to inherit from the controller (which is now white by default)
+	 * so the volume icon matches the rest of the chrome.
+	 */
+	:deep(.origam-media-volume-control__btn) {
+		color: inherit;
+	}
+
+	/*
+	 * Scrubber track / buffer background — overrides the MediaController
+	 * defaults so the dark, semi-translucent track doesn't let the
+	 * video frame underneath bleed through with whatever hue the
+	 * picture has at the playhead position (the user-reported "pink
+	 * scrubber" symptom on a pastel-toned video frame). White-tinted
+	 * translucent backgrounds give a uniform light-grey track on
+	 * every video regardless of content.
+	 *
+	 * The :deep(.) reaches into the OrigamMediaScrubber scope to set
+	 * its internal slots; the consumer can still override per-instance
+	 * via `--origam-media-scrubber---track-background-color`.
+	 */
+	:deep(.origam-media-controller__scrubber) {
+		--origam-media-scrubber---track-background-color: rgba(255, 255, 255, 0.28);
+		--origam-media-scrubber---buffer-background-color: rgba(255, 255, 255, 0.42);
+	}
+
+	.origam-video__el {
+		position: absolute;
+		inset: 0;
+		display: block;
+		width: 100%;
+		height: 100%;
+		object-fit: contain;
+	}
+
+	.origam-video__poster {
+		position: absolute;
+		inset: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
+		background-color: var(--origam-video__poster---background-color, #000000);
+	}
+
+	.origam-video__poster-img {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+
+	.origam-video__poster-btn {
+		all: unset;
+		position: relative;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: var(--origam-video---poster-btn-size, 64px);
+		height: var(--origam-video---poster-btn-size, 64px);
+		border-radius: 50%;
+		background-color: var(--origam-video---poster-btn-background-color, rgba(0, 0, 0, 0.6));
+		color: var(--origam-video---poster-btn-color, #ffffff);
+		font-size: var(--origam-video---poster-btn-font-size, 28px);
+		cursor: pointer;
+		transition: background-color 160ms ease;
+	}
+
+	.origam-video__poster-btn:hover {
+		background-color: var(--origam-video---poster-btn-background-color-hover, rgba(0, 0, 0, 0.8));
+	}
+
+	.origam-video__loading {
+		position: absolute;
+		inset: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--origam-video__loading---color, #ffffff);
+		font-size: var(--origam-video__loading---font-size, 32px);
+		pointer-events: none;
+	}
+
+	.origam-video__loading-icon {
+		animation: origam-video-spin 1s linear infinite;
+	}
+
+	@keyframes origam-video-spin {
+		from {
+			transform: rotate(0deg);
+		}
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	.origam-video__error {
+		position: absolute;
+		inset: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-direction: column;
+		gap: var(--origam-video--error---gap, 8px);
+		padding: var(--origam-video--error---padding, 16px);
+		background-color: var(--origam-video--error---background-color, rgba(0, 0, 0, 0.85));
+		color: var(--origam-video--error---color, #f87171);
+		font-size: var(--origam-video--error---font-size, 14px);
+		text-align: center;
+	}
+
+	.origam-video__error-icon {
+		font-size: var(--origam-video--error---icon-font-size, 32px);
+	}
+
+	/* State pulse — YouTube-style brief icon flash at the centre of
+	 * the video when play/pause toggles. PURELY cosmetic, never
+	 * absorbs clicks (pointer-events: none) so the underlying video
+	 * surface stays interactive. Fades in + scales up over ~600 ms
+	 * then disappears. */
+	.origam-video__state-pulse {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 80px;
+		height: 80px;
+		border-radius: 50%;
+		background: rgba(0, 0, 0, 0.55);
+		color: #ffffff;
+		pointer-events: none;
+		z-index: 2;
+	}
+
+	.origam-video__state-pulse-icon {
+		font-size: 40px;
+		line-height: 1;
+	}
+
+	.origam-video-state-pulse-enter-active {
+		transition: opacity 180ms ease, transform 480ms cubic-bezier(0.2, 0.6, 0.2, 1);
+	}
+	.origam-video-state-pulse-leave-active {
+		transition: opacity 280ms ease, transform 480ms cubic-bezier(0.2, 0.6, 0.2, 1);
+	}
+	.origam-video-state-pulse-enter-from {
+		opacity: 0;
+		transform: translate(-50%, -50%) scale(0.6);
+	}
+	.origam-video-state-pulse-leave-to {
+		opacity: 0;
+		transform: translate(-50%, -50%) scale(1.5);
+	}
+	.origam-video-state-pulse-enter-to,
+	.origam-video-state-pulse-leave-from {
+		opacity: 1;
+		transform: translate(-50%, -50%) scale(1);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.origam-video-state-pulse-enter-active,
+		.origam-video-state-pulse-leave-active {
+			transition: opacity 100ms ease;
+			transform: translate(-50%, -50%);
+		}
+
+		.origam-video__loading-icon {
+			animation: none;
+		}
+	}
+
+	// YouTube-parity double-tap skip overlay :
+	//
+	//   • Whole element is a PERFECT CIRCLE (`width: 40 %` of the
+	//     video width, `aspect-ratio: 1`, `border-radius: 50 %`).
+	//     Most of the disc lives OUTSIDE the video frame — we anchor
+	//     with `right: -28 %` (or `left: -28 %`), so only the
+	//     12 %-wide bulge intrudes into the visible area. The parent
+	//     `.origam-video` clips the offscreen portion via its existing
+	//     `overflow: hidden` — what the user sees is genuinely a slice
+	//     of a circle, not an elongated oval.
+	//   • Frosted background : light dark wash + `backdrop-filter:
+	//     blur(6px)` for the frosted look. Fallback (browsers without
+	//     backdrop-filter support) keeps a denser solid alpha so the
+	//     chevrons stay readable.
+	//   • Three chevrons stay visible at baseline opacity 0.5 ; a
+	//     brightness wave (opacity 1 + scale 1.1) cascades through
+	//     them on a 800 ms loop. The wave direction follows the skip
+	//     direction (right skip → wave runs left→right ; left skip →
+	//     wave runs right→left) via per-side animation-delay swap, so
+	//     the eye chases the chevrons toward the skip target.
+	//   • Disc itself fades + scales in/out (200 ms ease) — no
+	//     translate, just a subtle "puff in" matching YouTube.
+	.origam-video__skip-ripple {
+		position: absolute;
+		top: 50%;
+		width: 40%;
+		aspect-ratio: 1;
+		z-index: 3;
+		pointer-events: none;
+		background: rgba(0, 0, 0, 0.45);
+		border-radius: 50%;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+	}
+
+	@supports ((backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px))) {
+		.origam-video__skip-ripple {
+			background: rgba(0, 0, 0, 0.30);
+			backdrop-filter: blur(6px);
+			-webkit-backdrop-filter: blur(6px);
+		}
+	}
+
+	.origam-video__skip-ripple--left {
+		left: -25%;
+		align-items: flex-end;
+		padding-right: 5%;
+	}
+
+	.origam-video__skip-ripple--right {
+		right: -25%;
+		align-items: flex-start;
+		padding-left: 5%;
+	}
+
+	.origam-video__skip-ripple-content {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 4px;
+		color: #ffffff;
+		text-align: center;
+		filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
+	}
+
+	.origam-video__skip-chevrons {
+		display: inline-flex;
+		align-items: center;
+		gap: 0;
+		line-height: 0;
+	}
+
+	.origam-video__skip-chevron {
+		display: inline-block;
+		line-height: 0;
+		opacity: 0.5;
+		margin: 0 -4px;
+		animation: origam-video-chevron-wave 800ms ease-in-out infinite;
+	}
+
+	.origam-video__skip-chevron :deep(.origam-icon) {
+		font-size: 28px;
+		line-height: 1;
+	}
+
+	@keyframes origam-video-chevron-wave {
+		0%, 80%, 100% { opacity: 0.5; transform: scale(1); }
+		40%           { opacity: 1;   transform: scale(1.1); }
+	}
+
+	// Cascade order follows the skip direction :
+	//   right skip → chevrons peak 1 → 2 → 3 (left to right)
+	//   left skip  → chevrons peak 3 → 2 → 1 (right to left)
+	.origam-video__skip-ripple--right .origam-video__skip-chevron--1 { animation-delay:   0ms; }
+	.origam-video__skip-ripple--right .origam-video__skip-chevron--2 { animation-delay: 120ms; }
+	.origam-video__skip-ripple--right .origam-video__skip-chevron--3 { animation-delay: 240ms; }
+	.origam-video__skip-ripple--left  .origam-video__skip-chevron--1 { animation-delay: 240ms; }
+	.origam-video__skip-ripple--left  .origam-video__skip-chevron--2 { animation-delay: 120ms; }
+	.origam-video__skip-ripple--left  .origam-video__skip-chevron--3 { animation-delay:   0ms; }
+
+	.origam-video__skip-ripple-label {
+		font-size: 13px;
+		font-weight: 600;
+		font-family: var(--origam-font---family, system-ui, sans-serif);
+		letter-spacing: 0.02em;
+		white-space: nowrap;
+		user-select: none;
+		line-height: 1.2;
+	}
+
+	// Note: disc anchored at `top: 50%` with no transform — the y-axis
+	// `translateY(-50%)` we'd normally add is moved INTO the enter/leave
+	// keyframes so we can compose it with the scale puff-in without
+	// fighting the static positioning transform.
+	.origam-video__skip-ripple {
+		transform: translateY(-50%) scale(1);
+	}
+
+	.origam-video-skip-ripple-enter-active,
+	.origam-video-skip-ripple-leave-active {
+		transition: opacity 200ms ease, transform 200ms ease;
+	}
+
+	.origam-video-skip-ripple-enter-from,
+	.origam-video-skip-ripple-leave-to {
+		opacity: 0;
+		transform: translateY(-50%) scale(0.96);
+	}
+
+	.origam-video-skip-ripple-enter-to,
+	.origam-video-skip-ripple-leave-from {
+		opacity: 1;
+		transform: translateY(-50%) scale(1);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.origam-video__skip-icon,
+		.origam-video__skip-ripple,
+		.origam-video-skip-ripple-enter-active,
+		.origam-video-skip-ripple-leave-active {
+			transition: none;
+		}
+		.origam-video__skip-chevron {
+			animation: none;
+			opacity: 0.85;
+		}
+	}
+
+	:deep(.origam-video__btn.origam-btn) {
+		--origam-btn---color: #ffffff;
+		--origam-btn---min-width: 36px;
+		--origam-btn---width: 36px;
+		--origam-btn---height: 36px;
+		--origam-btn---min-height: 36px;
+		--origam-btn---border-radius: 50%;
+		opacity: 0.95;
+		transition: background-color 120ms ease, transform 120ms ease, opacity 120ms ease;
+
+		&:hover,
+		&:focus-visible {
+			opacity: 1;
+			background-color: rgba(255, 255, 255, 0.12);
+		}
+
+		&:active {
+			transform: scale(0.92);
+		}
+
+		.origam-icon {
+			font-size: 20px;
+			line-height: 1;
+		}
+	}
+
+	:deep(.origam-video__btn.origam-btn.origam-btn--active) {
+		opacity: 1;
+		position: relative;
+
+		&::after {
+			content: '';
+			position: absolute;
+			bottom: 2px;
+			width: 4px;
+			height: 4px;
+			border-radius: 50%;
+			background: #ef4444;
+		}
+	}
+
+	.origam-video--fullscreen {
+		border-radius: 0;
+	}
+
+	.origam-video--error .origam-video__poster {
+		display: none;
+	}
+</style>