origam 2.3.0 → 2.6.1

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

@@ -0,0 +1,442 @@
+<template>
+	<div
+			ref="rootEl"
+			class="origam-media-scrubber"
+			:class="rootClasses"
+			:style="rootStyles"
+			:role="resolvedRole"
+			:tabindex="resolvedTabIndex"
+			:aria-orientation="orientation"
+			:aria-valuemin="resolvedMin"
+			:aria-valuemax="resolvedMax"
+			:aria-valuenow="resolvedValue"
+			:aria-valuetext="ariaValueText || undefined"
+			:aria-label="ariaLabel"
+			:aria-disabled="disabled || undefined"
+			data-cy="origam-media-scrubber"
+			@pointerdown="onPointerDown"
+			@pointermove="onPointerMove"
+			@pointerleave="onPointerLeave"
+			@keydown="onKeyDown"
+	>
+		<div
+				class="origam-media-scrubber__track"
+				:class="[colorClasses, roundedClasses]"
+				:style="colorStyles"
+				aria-hidden="true"
+		>
+			<div
+					v-if="hasBuffer"
+					class="origam-media-scrubber__buffer"
+					:style="bufferStyles"
+					aria-hidden="true"
+			/>
+			<div
+					class="origam-media-scrubber__progress"
+					:style="progressStyles"
+					aria-hidden="true"
+			/>
+			<div
+					class="origam-media-scrubber__thumb"
+					:style="thumbStyles"
+					aria-hidden="true"
+			/>
+		</div>
+
+		<div
+				v-if="showTooltip"
+				class="origam-media-scrubber__hover-tooltip"
+				:style="tooltipStyles"
+				aria-hidden="true"
+		>
+			<slot
+					name="tooltip"
+					v-bind="{ value: hoverValue ?? 0 }"
+			>{{ tooltipLabel }}</slot>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import {
+  computed,
+  ref,
+  toRef
+} from "vue";
+import {
+  useBackgroundColor,
+  useRounded
+} from "../../composables";
+const props = defineProps({
+  modelValue: { type: Number, required: true },
+  min: { type: Number, required: false, default: 0 },
+  max: { type: Number, required: true },
+  step: { type: Number, required: false, default: 0 },
+  buffered: { type: Number, required: false, default: void 0 },
+  orientation: { type: String, required: false, default: "horizontal" },
+  disabled: { type: Boolean, required: false, default: false },
+  showThumbOnHoverOnly: { type: Boolean, required: false, default: false },
+  showHoverTooltip: { type: Boolean, required: false, default: false },
+  formatHoverTooltip: { type: Function, required: false, default: (value) => String(value) },
+  ariaLabel: { type: String, required: false },
+  ariaValueText: { type: String, required: false, default: void 0 },
+  dataCy: { type: String, required: false },
+  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 },
+  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 }
+});
+const emit = defineEmits(["update:modelValue", "change", "dragstart", "dragend", "hover"]);
+defineSlots();
+const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, "color"));
+const { roundedClasses } = useRounded(toRef(props, "rounded"));
+const colorClasses = computed(() => backgroundColorClasses.value);
+const colorStyles = computed(() => backgroundColorStyles.value);
+const resolvedMin = computed(() => props.min);
+const resolvedMax = computed(() => Math.max(props.max, props.min + 1e-7));
+const range = computed(() => resolvedMax.value - resolvedMin.value);
+const resolvedValue = computed(() => clamp(props.modelValue, resolvedMin.value, resolvedMax.value));
+const valuePct = computed(() => (resolvedValue.value - resolvedMin.value) / range.value * 100);
+const bufferPct = computed(() => {
+  if (!hasBuffer.value) return 0;
+  const clamped = clamp(props.buffered, resolvedMin.value, resolvedMax.value);
+  return (clamped - resolvedMin.value) / range.value * 100;
+});
+const hasBuffer = computed(() => typeof props.buffered === "number" && Number.isFinite(props.buffered));
+const resolvedRole = computed(() => props.disabled ? void 0 : "slider");
+const resolvedTabIndex = computed(() => props.disabled ? -1 : 0);
+const rootEl = ref(null);
+const isScrubbing = ref(false);
+const hoverValue = ref(null);
+const hoverPct = ref(null);
+const showTooltip = computed(
+  () => props.showHoverTooltip && props.orientation === "horizontal" && hoverPct.value !== null && !props.disabled
+);
+const tooltipLabel = computed(() => {
+  const fn = props.formatHoverTooltip;
+  const value = hoverValue.value ?? 0;
+  return fn ? fn(value) : String(value);
+});
+function pctFromPointer(event) {
+  const el = rootEl.value;
+  if (!el) return 0;
+  const rect = el.getBoundingClientRect();
+  if (props.orientation === "vertical") {
+    const y = clamp(event.clientY, rect.top, rect.bottom);
+    return (rect.bottom - y) / Math.max(1, rect.height) * 100;
+  }
+  const x = clamp(event.clientX, rect.left, rect.right);
+  return (x - rect.left) / Math.max(1, rect.width) * 100;
+}
+function valueFromPct(pct) {
+  const raw = resolvedMin.value + clamp(pct, 0, 100) / 100 * range.value;
+  if (props.step && props.step > 0) {
+    const snapped = Math.round((raw - resolvedMin.value) / props.step) * props.step + resolvedMin.value;
+    return clamp(snapped, resolvedMin.value, resolvedMax.value);
+  }
+  return clamp(raw, resolvedMin.value, resolvedMax.value);
+}
+function commit(value, withChange = false) {
+  emit("update:modelValue", value);
+  if (withChange) emit("change", value);
+}
+function onPointerDown(event) {
+  if (props.disabled) return;
+  const el = rootEl.value;
+  if (!el) return;
+  isScrubbing.value = true;
+  el.setPointerCapture(event.pointerId);
+  const pct = pctFromPointer(event);
+  const next = valueFromPct(pct);
+  hoverValue.value = next;
+  hoverPct.value = pct;
+  commit(next);
+  emit("dragstart");
+  const onMove = (e) => {
+    if (!isScrubbing.value) return;
+    const nextPct = pctFromPointer(e);
+    const nextValue = valueFromPct(nextPct);
+    hoverValue.value = nextValue;
+    hoverPct.value = nextPct;
+    commit(nextValue);
+  };
+  const onUp = (e) => {
+    if (!isScrubbing.value) return;
+    isScrubbing.value = false;
+    const lastPct = pctFromPointer(e);
+    const last = valueFromPct(lastPct);
+    commit(last, true);
+    emit("dragend");
+    el.removeEventListener("pointermove", onMove);
+    el.removeEventListener("pointerup", onUp);
+    el.removeEventListener("pointercancel", onUp);
+  };
+  el.addEventListener("pointermove", onMove);
+  el.addEventListener("pointerup", onUp);
+  el.addEventListener("pointercancel", onUp);
+}
+function onPointerMove(event) {
+  if (props.disabled) return;
+  if (isScrubbing.value) return;
+  const pct = pctFromPointer(event);
+  const value = valueFromPct(pct);
+  hoverPct.value = pct;
+  hoverValue.value = value;
+  emit("hover", value);
+}
+function onPointerLeave() {
+  if (isScrubbing.value) return;
+  hoverPct.value = null;
+  hoverValue.value = null;
+  emit("hover", null);
+}
+function keyStep() {
+  if (props.step && props.step > 0) return props.step;
+  return range.value * 0.05;
+}
+function onKeyDown(event) {
+  if (props.disabled) return;
+  const isVertical = props.orientation === "vertical";
+  const step = keyStep();
+  let next = null;
+  if (event.key === "ArrowRight" && !isVertical) next = resolvedValue.value + step;
+  else if (event.key === "ArrowLeft" && !isVertical) next = resolvedValue.value - step;
+  else if (event.key === "ArrowUp" && isVertical) next = resolvedValue.value + step;
+  else if (event.key === "ArrowDown" && isVertical) next = resolvedValue.value - step;
+  else if (event.key === "PageUp") next = resolvedValue.value + range.value * 0.1;
+  else if (event.key === "PageDown") next = resolvedValue.value - range.value * 0.1;
+  else if (event.key === "Home") next = resolvedMin.value;
+  else if (event.key === "End") next = resolvedMax.value;
+  else return;
+  event.preventDefault();
+  const snapped = props.step && props.step > 0 ? clamp(Math.round((next - resolvedMin.value) / props.step) * props.step + resolvedMin.value, resolvedMin.value, resolvedMax.value) : clamp(next, resolvedMin.value, resolvedMax.value);
+  commit(snapped, true);
+}
+const progressStyles = computed(() => {
+  if (props.orientation === "vertical") {
+    return { height: `${valuePct.value}%` };
+  }
+  return { width: `${valuePct.value}%` };
+});
+const bufferStyles = computed(() => {
+  if (props.orientation === "vertical") {
+    return { height: `${bufferPct.value}%` };
+  }
+  return { width: `${bufferPct.value}%` };
+});
+const thumbStyles = computed(() => {
+  if (props.orientation === "vertical") {
+    return { bottom: `${valuePct.value}%` };
+  }
+  return { left: `${valuePct.value}%` };
+});
+const tooltipStyles = computed(() => {
+  if (hoverPct.value === null) return {};
+  return { left: `${hoverPct.value}%` };
+});
+const rootClasses = computed(() => [
+  {
+    "origam-media-scrubber--horizontal": props.orientation === "horizontal",
+    "origam-media-scrubber--vertical": props.orientation === "vertical",
+    "origam-media-scrubber--disabled": props.disabled,
+    "origam-media-scrubber--scrubbing": isScrubbing.value,
+    "origam-media-scrubber--thumb-on-hover": props.showThumbOnHoverOnly
+  },
+  props.class
+]);
+const rootStyles = computed(() => [props.style]);
+function clamp(value, min, max) {
+  if (!Number.isFinite(value)) return min;
+  if (value < min) return min;
+  if (value > max) return max;
+  return value;
+}
+defineExpose({
+  rootEl,
+  isScrubbing,
+  hoverValue
+});
+</script>
+
+<style lang="scss" scoped>
+	.origam-media-scrubber {
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
+		touch-action: none;
+		outline: none;
+		user-select: none;
+		--origam-media-scrubber---primary: var(
+			--origam-media-scrubber---color,
+			var(--origam-color__action--primary---bg, #ef4444)
+		);
+		--origam-media-scrubber---track-bg: var(
+			--origam-media-scrubber---track-background-color,
+			rgba(255, 255, 255, 0.3)
+		);
+		--origam-media-scrubber---buffer-bg: var(
+			--origam-media-scrubber---buffer-background-color,
+			rgba(255, 255, 255, 0.4)
+		);
+		--origam-media-scrubber---thumb-size: var(
+			--origam-media-scrubber---thumb-diameter,
+			13px
+		);
+		--origam-media-scrubber---track-thickness: var(
+			--origam-media-scrubber---track-size,
+			3px
+		);
+		--origam-media-scrubber---track-thickness-active: var(
+			--origam-media-scrubber---track-size-active,
+			5px
+		);
+	}
+
+	.origam-media-scrubber--horizontal {
+		width: 100%;
+		min-width: 0;
+		height: 14px;
+	}
+
+	.origam-media-scrubber--vertical {
+		height: 100%;
+		min-height: 0;
+		width: 14px;
+		flex-direction: column;
+	}
+
+	.origam-media-scrubber--disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+
+	.origam-media-scrubber__track {
+		position: relative;
+		background-color: var(--origam-media-scrubber---track-bg);
+		border-radius: 2px;
+		transition: height 140ms ease, width 140ms ease;
+	}
+
+	.origam-media-scrubber--horizontal .origam-media-scrubber__track {
+		width: 100%;
+		height: var(--origam-media-scrubber---track-thickness);
+	}
+
+	.origam-media-scrubber--vertical .origam-media-scrubber__track {
+		height: 100%;
+		width: var(--origam-media-scrubber---track-thickness);
+	}
+
+	.origam-media-scrubber:hover .origam-media-scrubber__track,
+	.origam-media-scrubber:focus-visible .origam-media-scrubber__track,
+	.origam-media-scrubber--scrubbing .origam-media-scrubber__track {
+		--origam-media-scrubber---track-thickness: var(--origam-media-scrubber---track-thickness-active);
+	}
+
+	.origam-media-scrubber__buffer,
+	.origam-media-scrubber__progress {
+		position: absolute;
+		border-radius: 2px;
+		pointer-events: none;
+	}
+
+	.origam-media-scrubber--horizontal .origam-media-scrubber__buffer,
+	.origam-media-scrubber--horizontal .origam-media-scrubber__progress {
+		top: 0;
+		left: 0;
+		bottom: 0;
+	}
+
+	.origam-media-scrubber--vertical .origam-media-scrubber__buffer,
+	.origam-media-scrubber--vertical .origam-media-scrubber__progress {
+		left: 0;
+		right: 0;
+		bottom: 0;
+	}
+
+	.origam-media-scrubber__buffer {
+		background: var(--origam-media-scrubber---buffer-bg);
+		z-index: 1;
+	}
+
+	.origam-media-scrubber__progress {
+		background: var(--origam-media-scrubber---primary);
+		z-index: 2;
+	}
+
+	.origam-media-scrubber__thumb {
+		position: absolute;
+		width: var(--origam-media-scrubber---thumb-size);
+		height: var(--origam-media-scrubber---thumb-size);
+		border-radius: 50%;
+		background: var(--origam-media-scrubber---primary);
+		transition: transform 140ms ease;
+		pointer-events: none;
+		z-index: 3;
+		box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
+	}
+
+	.origam-media-scrubber--horizontal .origam-media-scrubber__thumb {
+		top: 50%;
+		transform: translate(-50%, -50%) scale(1);
+	}
+
+	.origam-media-scrubber--vertical .origam-media-scrubber__thumb {
+		left: 50%;
+		transform: translate(-50%, 50%) scale(1);
+	}
+
+	.origam-media-scrubber--thumb-on-hover .origam-media-scrubber__thumb {
+		transform: scale(0);
+	}
+
+	.origam-media-scrubber--horizontal.origam-media-scrubber--thumb-on-hover .origam-media-scrubber__thumb {
+		transform: translate(-50%, -50%) scale(0);
+	}
+
+	.origam-media-scrubber--vertical.origam-media-scrubber--thumb-on-hover .origam-media-scrubber__thumb {
+		transform: translate(-50%, 50%) scale(0);
+	}
+
+	.origam-media-scrubber--thumb-on-hover:hover .origam-media-scrubber__thumb,
+	.origam-media-scrubber--thumb-on-hover:focus-visible .origam-media-scrubber__thumb,
+	.origam-media-scrubber--thumb-on-hover.origam-media-scrubber--scrubbing .origam-media-scrubber__thumb {
+		transform: translate(-50%, -50%) scale(1);
+	}
+
+	.origam-media-scrubber--vertical.origam-media-scrubber--thumb-on-hover:hover .origam-media-scrubber__thumb,
+	.origam-media-scrubber--vertical.origam-media-scrubber--thumb-on-hover:focus-visible .origam-media-scrubber__thumb,
+	.origam-media-scrubber--vertical.origam-media-scrubber--thumb-on-hover.origam-media-scrubber--scrubbing .origam-media-scrubber__thumb {
+		transform: translate(-50%, 50%) scale(1);
+	}
+
+	.origam-media-scrubber__hover-tooltip {
+		position: absolute;
+		bottom: calc(100% + 8px);
+		transform: translateX(-50%);
+		padding: 3px 6px;
+		background: var(--origam-media-scrubber__tooltip---background-color, rgba(0, 0, 0, 0.85));
+		color: var(--origam-media-scrubber__tooltip---color, #ffffff);
+		font-size: 11px;
+		font-weight: 600;
+		font-family: var(--origam-font---family, system-ui, sans-serif);
+		border-radius: 3px;
+		white-space: nowrap;
+		pointer-events: none;
+		z-index: 4;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.origam-media-scrubber__track,
+		.origam-media-scrubber__thumb {
+			transition: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,152 @@
+<template>
+	<origam-tooltip
+			:open-delay="80"
+			:close-delay="300"
+			location="top"
+			content-class="origam-media-volume-control__tooltip"
+	>
+		<template #activator="{ props: activatorProps }">
+			<button
+					v-bind="activatorProps"
+					type="button"
+					class="origam-media-volume-control__btn"
+					:class="rootClasses"
+					:style="rootStyle"
+					:aria-label="muted ? unmuteLabel : muteLabel"
+					:data-cy="btnDataCy"
+					@click="onToggleMute"
+			>
+				<origam-icon
+						:icon="volumeIcon"
+						aria-hidden="true"
+				/>
+			</button>
+		</template>
+		<div
+				class="origam-media-volume-control__wrapper"
+				:data-cy="wrapperDataCy"
+		>
+			<origam-media-scrubber
+					class="origam-media-volume-control__scrubber"
+					orientation="vertical"
+					:model-value="resolvedVolume"
+					:max="1"
+					:step="0.05"
+					:aria-label="volumeLabel"
+					:aria-value-text="formattedVolume"
+					:format-hover-tooltip="formatVolumeTooltip"
+					:data-cy="scrubberDataCy"
+					@update:model-value="onVolumeFromScrubber"
+			/>
+		</div>
+	</origam-tooltip>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+import { OrigamIcon } from "../Icon";
+import { OrigamTooltip } from "../Tooltip";
+import OrigamMediaScrubber from "./OrigamMediaScrubber.vue";
+import { MDI_ICONS } from "../../enums";
+const props = defineProps({
+  volume: { type: Number, required: true },
+  muted: { type: Boolean, required: true },
+  muteLabel: { type: String, required: true },
+  unmuteLabel: { type: String, required: true },
+  volumeLabel: { type: String, required: true },
+  dataCy: { type: String, required: false, default: "origam-media-volume-control" },
+  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(["update:muted", "update:volume"]);
+const ICONS = {
+  VOLUME_HIGH: MDI_ICONS.VOLUME_HIGH,
+  VOLUME_MEDIUM: MDI_ICONS.VOLUME_MEDIUM,
+  VOLUME_LOW: MDI_ICONS.VOLUME_LOW,
+  VOLUME_OFF: MDI_ICONS.VOLUME_OFF
+};
+const rootClasses = computed(() => [props.class]);
+const rootStyle = computed(() => props.style);
+const btnDataCy = computed(() => `${props.dataCy}-mute`);
+const wrapperDataCy = computed(() => `${props.dataCy}-wrapper`);
+const scrubberDataCy = computed(() => props.dataCy);
+const volumeIcon = computed(() => {
+  if (props.muted || props.volume === 0) return ICONS.VOLUME_OFF;
+  if (props.volume < 0.34) return ICONS.VOLUME_LOW;
+  if (props.volume < 0.67) return ICONS.VOLUME_MEDIUM;
+  return ICONS.VOLUME_HIGH;
+});
+const resolvedVolume = computed(() => {
+  return props.muted ? 0 : props.volume;
+});
+const formattedVolume = computed(() => {
+  const pct = Math.round(resolvedVolume.value * 100);
+  return `${pct} %`;
+});
+function formatVolumeTooltip(value) {
+  return `${Math.round(value * 100)} %`;
+}
+function onToggleMute() {
+  emit("update:muted", !props.muted);
+}
+function onVolumeFromScrubber(value) {
+  emit("update:volume", value);
+}
+</script>
+
+<style lang="scss" scoped>
+	.origam-media-volume-control__btn {
+		all: unset;
+		box-sizing: border-box;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: var(--origam-media-volume-control---btn-size, 36px);
+		height: var(--origam-media-volume-control---btn-size, 36px);
+		border-radius: var(--origam-media-volume-control---btn-border-radius, 50%);
+		cursor: pointer;
+		color: var(--origam-media-volume-control---color, inherit);
+		transition: background-color 120ms ease, transform 120ms ease, opacity 120ms ease;
+		opacity: 0.95;
+	}
+
+	.origam-media-volume-control__btn:hover,
+	.origam-media-volume-control__btn:focus-visible {
+		opacity: 1;
+		background-color: var(--origam-media-volume-control---hover-background-color, color-mix(in srgb, currentColor 12%, transparent));
+	}
+
+	.origam-media-volume-control__btn:active {
+		transform: scale(0.92);
+	}
+
+	.origam-media-volume-control__btn .origam-icon {
+		font-size: var(--origam-media-volume-control---icon-size, 20px);
+		line-height: 1;
+	}
+
+	:deep(.origam-media-volume-control__tooltip) {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 10px 8px;
+		background-color: var(--origam-media-volume-control---tooltip-background-color, rgba(28, 28, 28, 0.92));
+	}
+
+	.origam-media-volume-control__wrapper {
+		width: 14px;
+		height: 80px;
+		display: flex;
+		align-items: stretch;
+		justify-content: center;
+	}
+
+	.origam-media-volume-control__scrubber {
+		--origam-media-scrubber---color: currentColor;
+		--origam-media-scrubber---track-background-color: color-mix(in srgb, currentColor 30%, transparent);
+		--origam-media-scrubber---track-size: 4px;
+		--origam-media-scrubber---track-size-active: 4px;
+		--origam-media-scrubber---thumb-diameter: 10px;
+	}
+</style>

package/dist/src/components/Media/index.cjs

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "OrigamMediaController", {
+  enumerable: true,
+  get: function () {
+    return _OrigamMediaController.default;
+  }
+});
+Object.defineProperty(exports, "OrigamMediaScrubber", {
+  enumerable: true,
+  get: function () {
+    return _OrigamMediaScrubber.default;
+  }
+});
+Object.defineProperty(exports, "OrigamMediaVolumeControl", {
+  enumerable: true,
+  get: function () {
+    return _OrigamMediaVolumeControl.default;
+  }
+});
+var _OrigamMediaController = _interopRequireDefault(require("./OrigamMediaController.vue"));
+var _OrigamMediaScrubber = _interopRequireDefault(require("./OrigamMediaScrubber.vue"));
+var _OrigamMediaVolumeControl = _interopRequireDefault(require("./OrigamMediaVolumeControl.vue"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/src/components/Media/index.d.ts

@@ -0,0 +1,3 @@
+export { default as OrigamMediaController } from './OrigamMediaController.vue';
+export { default as OrigamMediaScrubber } from './OrigamMediaScrubber.vue';
+export { default as OrigamMediaVolumeControl } from './OrigamMediaVolumeControl.vue';

package/dist/src/components/Media/index.js

@@ -0,0 +1,3 @@
+export { default as OrigamMediaController } from "./OrigamMediaController.vue";
+export { default as OrigamMediaScrubber } from "./OrigamMediaScrubber.vue";
+export { default as OrigamMediaVolumeControl } from "./OrigamMediaVolumeControl.vue";