@nexxtmove/ui 2.3.0 → 2.4.0

package/dist/components/organisms/VideoControls/VideoControls.vue.d.ts

@@ -49,9 +49,16 @@ export interface NexxtVideoControlsProps {
     fullscreenTarget?: HTMLElement | null;
     /**
      * `full`: the bar; `toggle`: a 32px play/pause button in the corner, with mute to its left on
-     * hover, focus or a tap. Both hide while playing by the same rules. Defaults to `full`.
+     * hover, focus or a tap (see `showMute`). Both hide while playing by the same rules. Defaults
+     * to `full`.
      */
     variant?: NexxtVideoControlsVariant;
+    /**
+     * Toggle only: the mute button left of play/pause. Off leaves play/pause alone in the corner,
+     * e.g. for a background video that is always muted and may only be paused. The `full` bar
+     * ignores it. Defaults to `true`.
+     */
+    showMute?: boolean;
     /** The video's name, for the name of the bar (or of the toggle's buttons). */
     name?: string;
     /** Hide the bar (or the toggle) after inactivity while the video plays. Off keeps it on show. Defaults to `true`. */

package/dist/index.js

@@ -13096,6 +13096,10 @@ var eh = { render: $m }, th = { class: "flex items-center justify-end self-stret
 		target: {},
 		fullscreenTarget: { default: null },
 		variant: { default: "full" },
+		showMute: {
+			type: Boolean,
+			default: !0
+		},
 		name: { default: "" },
 		autoHide: {
 			type: Boolean,
@@ -13278,7 +13282,9 @@ var eh = { render: $m }, th = { class: "flex items-center justify-end self-stret
 				e.variant === "full" && Oe();
 				return;
 			}
-			clearTimeout(Ee), z.value = !(e.variant === "toggle" ? me.value : ue.value), z.value && (Ee = setTimeout(() => {
+			clearTimeout(Ee);
+			let t = e.variant === "toggle" && e.showMute;
+			z.value = !(t ? me.value : ue.value), z.value && (Ee = setTimeout(() => {
 				z.value = !1;
 			}, e.hideDelay));
 		});
@@ -13328,7 +13334,8 @@ var eh = { render: $m }, th = { class: "flex items-center justify-end self-stret
 			onFocusin: Ze,
 			onFocusout: Qe,
 			onKeydown: et
-		}, [c("button", {
+		}, [e.showMute ? (D(), s("button", {
+			key: 0,
 			type: "button",
 			"aria-label": ge.value,
 			class: x(["group/mute flex cursor-pointer rounded-full bg-black/50 small-normal text-white ring-1 ring-white/30 backdrop-blur-xs transition-opacity focus-visible:ring-2 focus-visible:ring-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 motion-reduce:transition-none", he.value]),
@@ -13337,7 +13344,7 @@ var eh = { render: $m }, th = { class: "flex items-center justify-end self-stret
 			name: ae.value,
 			type: "solid",
 			class: "[--fa-width:auto]"
-		}, null, 8, ["name"])])])], 10, t_), c("button", {
+		}, null, 8, ["name"])])])], 10, t_)) : o("", !0), c("button", {
 			ref_key: "playButton",
 			ref: d,
 			type: "button",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/src/components/organisms/VideoControls/VideoControls.vue

@@ -54,9 +54,16 @@ export interface NexxtVideoControlsProps {
   fullscreenTarget?: HTMLElement | null
   /**
    * `full`: the bar; `toggle`: a 32px play/pause button in the corner, with mute to its left on
-   * hover, focus or a tap. Both hide while playing by the same rules. Defaults to `full`.
+   * hover, focus or a tap (see `showMute`). Both hide while playing by the same rules. Defaults
+   * to `full`.
    */
   variant?: NexxtVideoControlsVariant
+  /**
+   * Toggle only: the mute button left of play/pause. Off leaves play/pause alone in the corner,
+   * e.g. for a background video that is always muted and may only be paused. The `full` bar
+   * ignores it. Defaults to `true`.
+   */
+  showMute?: boolean
   /** The video's name, for the name of the bar (or of the toggle's buttons). */
   name?: string
   /** Hide the bar (or the toggle) after inactivity while the video plays. Off keeps it on show. Defaults to `true`. */
@@ -81,6 +88,7 @@ const {
   target,
   fullscreenTarget = null,
   variant = 'full',
+  showMute = true,
   name = '',
   autoHide = true,
   hideDelay = 2500,
@@ -583,9 +591,11 @@ const onVideoClick = () => {
     return
   }
 
-  // A tap toggles what touch cannot hover for: the bar, or the toggle's mute button
+  // A tap toggles what touch cannot hover for: the bar, or the toggle's mute button. A toggle
+  // without one is a bar of one button: the tap toggles the toggle itself
   clearTimeout(touchTimer)
-  touchShown.value = !(variant === 'toggle' ? toggleMuteShown.value : visible.value)
+  const tapRevealsMute = variant === 'toggle' && showMute
+  touchShown.value = !(tapRevealsMute ? toggleMuteShown.value : visible.value)
   if (touchShown.value) {
     touchTimer = setTimeout(() => {
       touchShown.value = false
@@ -747,7 +757,7 @@ onBeforeUnmount(() => {
       The corner buttons: play/pause in the corner, and mute to its left on hover, focus or a tap
       (DOM and tab order follow what is seen: mute, then play). Mute is transparent when hidden,
       never removed, so play keeps its place and both stay in the tab order. Both fade with the
-      same rules as the bar.
+      same rules as the bar. Without `showMute` there is no mute at all; play stays in the corner.
     -->
     <div
       ref="capsule"
@@ -762,6 +772,7 @@ onBeforeUnmount(() => {
       @keydown="onKeyInside"
     >
       <button
+        v-if="showMute"
         type="button"
         :aria-label="toggleMuteLabel"
         class="group/mute flex cursor-pointer rounded-full bg-black/50 small-normal text-white ring-1 ring-white/30 backdrop-blur-xs transition-opacity focus-visible:ring-2 focus-visible:ring-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 motion-reduce:transition-none"