vue-parley 5.2.0 → 5.4.0

package/README.md

@@ -69,6 +69,7 @@ createApp(App)
       media: mediaHandlers,       // MediaHandlers: download files, file sizes
       profile: profileHandlers,   // optional: profile panel's media and files tabs
       call: callHandlers,         // optional: enables voice/video calls
+      screenShare: true,          // optional: shows the call's screen-share button (off by default)
       user: { id: me.id, name: me.fullName },
     }),
   )
@@ -216,7 +217,7 @@ What a host has to do for group calls: nothing beyond what one-to-one calls need
 
 **Protocol.** Group calls add optional fields to existing messages and no new message types, so 5.0 clients and the earlier simple-peer builds still call this one: `join.joinedAt` and `join.to` (a reconnect aimed at one participant; older clients take it as aimed at them), `track_type.media` (`{ audio, video }`, sent on every mic or camera change) and `track_type.joinedAt`, and `presence.joinedAt`. Older clients ignore the fields, and a message without them is handled as before: no badges for that participant, and they order last for the cap.
 
-**Test ids** for hosts' own tests, besides the existing `call-remote-video`, `call-remote-screen` and `call-local-video`: `call-top-bar`, `call-participant-count`, `call-people-button`, `call-people-list`, `call-participant` (with `data-participant-id`), `call-tile` (with `data-participant-id` and `data-kind` `camera`, `screen` or `self`), `call-tile-muted`, `call-tile-avatar`, `call-tile-unreachable`, `call-pin`, `call-notice`, `call-waiting` and `call-strip`.
+**Test ids** for hosts' own tests, besides the existing `call-remote-video`, `call-remote-screen` and `call-local-video`: `call-top-bar`, `call-participant-count`, `call-people-button`, `call-people-list`, `call-participant` (with `data-participant-id`), `call-tile` (with `data-participant-id` and `data-kind` `camera`, `screen` or `self`), `call-tile-muted`, `call-tile-avatar`, `call-tile-unreachable`, `call-pin`, `call-notice`, `call-waiting`, `call-strip` and `call-flip-camera` (with `data-facing` `user` or `environment`; phones only).
 
 ### Fake backend
 

package/dist/chunks/{Call-DvVJ7IsY.mjs → Call-DfAAePMJ.mjs}

@@ -1,5 +1,5 @@
 import { ref, onMounted, onUnmounted, watch, nextTick, reactive, onBeforeUnmount, computed, defineComponent, openBlock, createElementBlock, createBlock, unref, mergeProps, withCtx, createVNode, normalizeClass, createElementVNode, normalizeStyle, createSlots, toDisplayString, createCommentVNode, withDirectives, Fragment, useModel, renderList, createTextVNode, mergeModels, withModifiers, Transition, vShow } from "vue";
-import { u as useCallStore, a as useLocalI18n, c as chat, n as nameInitials, b as avatarToneStyle, _ as _sfc_main$5, d as useDirection, e as useChatStore, f as formatDuration } from "./index-C5yf_PW0.mjs";
+import { u as useCallStore, a as useLocalI18n, c as chat, n as nameInitials, b as avatarToneStyle, _ as _sfc_main$5, d as useDirection, e as useChatStore, f as formatDuration } from "./index-BdXnFhTL.mjs";
 import { useElementSize, useEventListener, useWindowSize, useDraggable } from "@vueuse/core";
 import Button from "primevue/button";
 import Menu from "primevue/menu";
@@ -35,16 +35,15 @@ function useCallUi(opts) {
     detachAll();
   });
   const isFullscreen = ref(false);
+  const canFullscreen = typeof document !== "undefined" && !!document.fullscreenEnabled;
+  const syncFullscreen = () => isFullscreen.value = !!document.fullscreenElement;
   function toggleFullscreen(target = document.documentElement) {
     var _a;
-    if (!document.fullscreenElement) {
-      void ((_a = target.requestFullscreen) == null ? void 0 : _a.call(target));
-      isFullscreen.value = true;
-    } else {
-      void document.exitFullscreen();
-      isFullscreen.value = false;
-    }
+    const change = document.fullscreenElement ? document.exitFullscreen() : (_a = target.requestFullscreen) == null ? void 0 : _a.call(target);
+    void (change == null ? void 0 : change.then(syncFullscreen, syncFullscreen));
   }
+  onMounted(() => document.addEventListener("fullscreenchange", syncFullscreen));
+  onUnmounted(() => document.removeEventListener("fullscreenchange", syncFullscreen));
   const toggleRemote = (tileId, el) => {
     const container = el ?? remoteParents.value[tileId];
     if (container) toggleFullscreen(container);
@@ -124,6 +123,7 @@ function useCallUi(opts) {
     showControls,
     resetControlsTimeout,
     isFullscreen,
+    canFullscreen,
     toggleFullscreen: () => toggleFullscreen(),
     toggleRemote,
     videoPaused,
@@ -150,8 +150,19 @@ function useCall({ layoutKey } = {}) {
     layoutKey
   });
   async function switchCamera(deviceId) {
-    const stream = await session.switchCamera(deviceId);
-    if (stream && ui.localVideo.value) ui.localVideo.value.srcObject = stream;
+    refreshPreview(await session.switchCamera(deviceId));
+  }
+  async function flipCamera() {
+    refreshPreview(await session.flipCamera());
+  }
+  function refreshPreview(stream) {
+    const el = ui.localVideo.value;
+    if (stream && el) {
+      el.srcObject = null;
+      el.srcObject = stream;
+      el.play().catch(() => {
+      });
+    }
   }
   return {
     // Call state
@@ -169,6 +180,8 @@ function useCall({ layoutKey } = {}) {
     remoteScreens: peers.remoteScreens,
     // Local media
     cameras: media.cameras,
+    facingMode: media.facingMode,
+    canFlipCamera: media.canFlipCamera,
     isAudioOn: media.isAudioOn,
     isVideoOn: media.isVideoOn,
     isScreenSharing: media.isScreenSharing,
@@ -179,12 +192,14 @@ function useCall({ layoutKey } = {}) {
     toggleFlashlight: media.toggleFlashlight,
     toggleScreenShare: session.toggleScreenShare,
     switchCamera,
+    flipCamera,
     endCall: callStore.endCall,
     // View
     showCameraModal: ref(false),
     showControls: ui.showControls,
     resetControlsTimeout: ui.resetControlsTimeout,
     isFullscreen: ui.isFullscreen,
+    canFullscreen: ui.canFullscreen,
     toggleFullscreen: ui.toggleFullscreen,
     toggleRemote: ui.toggleRemote,
     videoPaused: ui.videoPaused,
@@ -577,6 +592,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     compact: { type: Boolean, default: false },
     paused: { type: Boolean, default: false },
     isFullscreen: { type: Boolean, default: false },
+    mirrored: { type: Boolean, default: false },
     hint: {}
   },
   emits: ["pin", "pause", "fullscreen", "retry", "video"],
@@ -658,7 +674,8 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             muted: isSelf.value || isScreen.value,
             class: normalizeClass(["absolute inset-0 size-full rounded-[inherit]", [
               isScreen.value ? "object-contain" : "object-cover",
-              __props.tile.kind === "self" && "pointer-events-none -scale-x-100"
+              __props.tile.kind === "self" && "pointer-events-none",
+              __props.mirrored && "-scale-x-100"
             ]])
           }, null, 10, _hoisted_3$2),
           showAvatar.value ? (openBlock(), createElementBlock("div", _hoisted_4$2, [
@@ -1008,11 +1025,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       toggleAudio,
       toggleVideo,
       switchCamera,
+      flipCamera,
+      canFlipCamera,
+      facingMode,
       isFlashlightSupported,
       isAudioOn,
       isVideoOn,
       isFlashlightOn,
       isFullscreen,
+      canFullscreen,
       isScreenSharing,
       showControls,
       resetControlsTimeout,
@@ -1092,6 +1113,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const shareLabel = computed(
       () => isScreenSharing.value ? t("chat.call.controls.stopSharing") : t("chat.call.controls.shareScreen")
     );
+    const flipLabel = computed(
+      () => facingMode.value === "environment" ? t("chat.call.controls.frontCamera") : t("chat.call.controls.backCamera")
+    );
+    const showCameraPicker = computed(() => cameras.value.length > 1 && !canFlipCamera.value);
+    const isFlipping = ref(false);
+    const flip = async () => {
+      if (isFlipping.value) return;
+      isFlipping.value = true;
+      try {
+        await flipCamera();
+      } finally {
+        isFlipping.value = false;
+      }
+    };
     const fullscreenLabel = computed(
       () => isFullscreen.value ? t("chat.call.controls.exitFullscreen") : t("chat.call.controls.fullscreen")
     );
@@ -1120,20 +1155,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         items: cameras.value.map((camera, index) => ({
           label: camera.label || `${t("chat.call.controls.chooseCamera")} ${index + 1}`,
           callIcon: camera.deviceId === currentCameraId.value ? "check" : void 0,
-          command: () => {
+          command: async () => {
+            var _a, _b;
             currentCameraId.value = camera.deviceId;
-            void switchCamera(camera.deviceId);
+            await switchCamera(camera.deviceId);
+            currentCameraId.value = ((_b = (_a = localStream.value) == null ? void 0 : _a.getVideoTracks()[0]) == null ? void 0 : _b.getSettings().deviceId) ?? null;
           }
         }))
       }
     ]);
     const moreMenu = ref(null);
     const moreItems = computed(() => [
-      {
-        label: fullscreenLabel.value,
-        callIcon: isFullscreen.value ? "fullscreenExit" : "fullscreen",
-        command: () => toggleFullscreen()
-      },
       ...isFlashlightSupported.value ? [
         {
           label: isFlashlightOn.value ? t("chat.call.controls.flashlightOff") : t("chat.call.controls.flashlightOn"),
@@ -1247,7 +1279,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       canPin: canPin.value,
       compact,
       paused: !!videoPaused.value[tile.id],
-      isFullscreen: isFullscreen.value
+      isFullscreen: isFullscreen.value,
+      // The user's own camera shows as a mirror, as people expect; the back one shows the world as is.
+      mirrored: tile.kind === "self" && facingMode.value !== "environment"
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
@@ -1268,10 +1302,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             playsinline: "",
             class: "pointer-events-none absolute inset-0 size-full object-cover"
           }, null, 512),
-          _cache[17] || (_cache[17] = createElementVNode("div", { class: "pointer-events-none absolute inset-0 bg-linear-to-t from-black/60 via-transparent to-black/30" }, null, -1)),
+          _cache[18] || (_cache[18] = createElementVNode("div", { class: "pointer-events-none absolute inset-0 bg-linear-to-t from-black/60 via-transparent to-black/30" }, null, -1)),
           createElementVNode("div", _hoisted_2, [
             createElementVNode("div", _hoisted_3, [
-              _cache[16] || (_cache[16] = createElementVNode("span", { class: "relative flex size-2.5" }, [
+              _cache[17] || (_cache[17] = createElementVNode("span", { class: "relative flex size-2.5" }, [
                 createElementVNode("span", { class: "absolute inline-flex size-full animate-ping rounded-full bg-red-500/60 motion-reduce:animate-none" }),
                 createElementVNode("span", { class: "relative inline-flex size-2.5 rounded-full bg-red-500" })
               ], -1)),
@@ -1349,12 +1383,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           createElementVNode("div", {
             "data-testid": "call-top-bar",
             class: normalizeClass(["flex h-14 shrink-0 items-center gap-x-3 px-3 transition-opacity duration-300 motion-reduce:transition-none md:h-16 md:px-6", unref(showControls) ? "opacity-100" : "opacity-0"]),
-            onMouseenter: _cache[5] || (_cache[5] = //@ts-ignore
+            onMouseenter: _cache[6] || (_cache[6] = //@ts-ignore
             (...args) => unref(resetControlsTimeout) && unref(resetControlsTimeout)(...args))
           }, [
             createElementVNode("div", _hoisted_10, [
               createElementVNode("h1", _hoisted_11, toDisplayString(callTitle.value), 1),
-              _cache[18] || (_cache[18] = createElementVNode("span", {
+              _cache[19] || (_cache[19] = createElementVNode("span", {
                 "aria-hidden": "true",
                 class: "h-4 w-px shrink-0 bg-white/30"
               }, null, -1)),
@@ -1388,6 +1422,25 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   { bottom: true }
                 ]
               ]),
+              unref(canFullscreen) ? withDirectives((openBlock(), createBlock(_sfc_main$3, {
+                key: 0,
+                icon: unref(isFullscreen) ? "fullscreenExit" : "fullscreen",
+                label: fullscreenLabel.value,
+                dt: unref(callButtonDt),
+                text: false,
+                "icon-class": "size-5",
+                class: normalizeClass(["size-11!", unref(focusRing)]),
+                "data-testid": "call-fullscreen",
+                "data-active": unref(isFullscreen),
+                onClick: _cache[5] || (_cache[5] = ($event) => unref(toggleFullscreen)())
+              }, null, 8, ["icon", "label", "dt", "class", "data-active"])), [
+                [
+                  unref(vTooltip),
+                  unref(tip)(fullscreenLabel.value),
+                  void 0,
+                  { bottom: true }
+                ]
+              ]) : createCommentVNode("", true),
               withDirectives(createVNode(_sfc_main$3, {
                 icon: "pictureInPicture",
                 label: unref(t)("chat.call.controls.minimize"),
@@ -1412,7 +1465,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ref: stageRef,
             class: "relative min-h-0 flex-1 px-2 pb-2 md:px-4 md:pb-4",
             style: { "--call-gap": "0.5rem" },
-            onMousemove: _cache[10] || (_cache[10] = //@ts-ignore
+            onMousemove: _cache[11] || (_cache[11] = //@ts-ignore
             (...args) => unref(resetControlsTimeout) && unref(resetControlsTimeout)(...args))
           }, [
             unref(soundBlocked) ? (openBlock(), createBlock(unref(Button), {
@@ -1459,9 +1512,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               }, tileProps(selfTile.value), {
                 hint: unref(t)("chat.call.cameraIsOff"),
                 class: "size-full",
-                onVideo: _cache[6] || (_cache[6] = (el, prev) => bindVideo(selfTile.value, el, prev)),
-                onPause: _cache[7] || (_cache[7] = (el) => togglePause(selfTile.value, el)),
-                onFullscreen: _cache[8] || (_cache[8] = (el) => toggleTileFullscreen(selfTile.value, el))
+                onVideo: _cache[7] || (_cache[7] = (el, prev) => bindVideo(selfTile.value, el, prev)),
+                onPause: _cache[8] || (_cache[8] = (el) => togglePause(selfTile.value, el)),
+                onFullscreen: _cache[9] || (_cache[9] = (el) => toggleTileFullscreen(selfTile.value, el))
               }), null, 16, ["hint"])),
               showWaiting.value ? (openBlock(), createElementBlock("div", _hoisted_17, [
                 createElementVNode("div", _hoisted_18, [
@@ -1487,7 +1540,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               }, tileProps(selfTile.value, true), {
                 "can-pin": false,
                 class: "absolute! end-5 bottom-4 z-10 aspect-video w-36 shadow-xl outline outline-white/25 sm:w-56 md:end-6 md:bottom-6 md:w-64",
-                onVideo: _cache[9] || (_cache[9] = (el, prev) => bindVideo(selfTile.value, el, prev))
+                onVideo: _cache[10] || (_cache[10] = (el, prev) => bindVideo(selfTile.value, el, prev))
               }), null, 16))
             ], 64)) : unref(layout).mode.value === "grid" ? (openBlock(), createElementBlock("div", {
               key: 3,
@@ -1542,9 +1595,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ], 544),
           createElementVNode("div", {
             class: normalizeClass(["flex h-20 shrink-0 items-center justify-center px-3 transition-opacity duration-300 motion-reduce:transition-none md:px-6", unref(showControls) ? "opacity-100" : "opacity-0"]),
-            onMouseenter: _cache[13] || (_cache[13] = //@ts-ignore
+            onMouseenter: _cache[14] || (_cache[14] = //@ts-ignore
             (...args) => unref(resetControlsTimeout) && unref(resetControlsTimeout)(...args)),
-            onMousemove: _cache[14] || (_cache[14] = //@ts-ignore
+            onMousemove: _cache[15] || (_cache[15] = //@ts-ignore
             (...args) => unref(resetControlsTimeout) && unref(resetControlsTimeout)(...args))
           }, [
             createElementVNode("div", _hoisted_21, [
@@ -1566,9 +1619,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 ]
               ]),
               createElementVNode("div", {
-                class: normalizeClass(["flex items-center rounded-full", unref(cameras).length > 1 && "bg-white/12"])
+                class: normalizeClass(["flex items-center rounded-full", showCameraPicker.value && "bg-white/12"])
               }, [
-                unref(cameras).length > 1 ? withDirectives((openBlock(), createBlock(_sfc_main$3, {
+                showCameraPicker.value ? withDirectives((openBlock(), createBlock(_sfc_main$3, {
                   key: 0,
                   icon: "arrowDropUp",
                   label: unref(t)("chat.call.controls.chooseCamera"),
@@ -1578,7 +1631,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   "icon-class": "size-6",
                   class: normalizeClass(["h-12! w-8! rounded-e-none! ps-1!", unref(focusRing)]),
                   "aria-haspopup": "true",
-                  onClick: _cache[11] || (_cache[11] = ($event) => {
+                  onClick: _cache[12] || (_cache[12] = ($event) => {
                     var _a;
                     return (_a = cameraMenu.value) == null ? void 0 : _a.toggle($event);
                   })
@@ -1608,7 +1661,25 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   ]
                 ])
               ], 2),
-              withDirectives(createVNode(_sfc_main$3, mergeProps({
+              unref(canFlipCamera) ? withDirectives((openBlock(), createBlock(_sfc_main$3, mergeProps({
+                key: 0,
+                icon: "cameraSwitch",
+                label: flipLabel.value,
+                disabled: !unref(isVideoOn) || isFlipping.value
+              }, barButton, {
+                "data-testid": "call-flip-camera",
+                "data-facing": unref(facingMode) ?? void 0,
+                onClick: flip
+              }), null, 16, ["label", "disabled", "data-facing"])), [
+                [
+                  unref(vTooltip),
+                  unref(tip)(flipLabel.value),
+                  void 0,
+                  { top: true }
+                ]
+              ]) : createCommentVNode("", true),
+              unref(callStore).canShareScreen ? withDirectives((openBlock(), createBlock(_sfc_main$3, mergeProps({
+                key: 1,
                 icon: unref(isScreenSharing) ? "cancelPresentation" : "presentToAll",
                 label: shareLabel.value,
                 severity: unref(isScreenSharing) ? "contrast" : "secondary"
@@ -1616,33 +1687,34 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 "data-testid": "call-toggle-screen",
                 "data-active": unref(isScreenSharing),
                 onClick: unref(toggleScreenShare)
-              }), null, 16, ["icon", "label", "severity", "data-active", "onClick"]), [
+              }), null, 16, ["icon", "label", "severity", "data-active", "onClick"])), [
                 [
                   unref(vTooltip),
                   unref(tip)(shareLabel.value),
                   void 0,
                   { top: true }
                 ]
-              ]),
-              withDirectives(createVNode(_sfc_main$3, mergeProps({
+              ]) : createCommentVNode("", true),
+              moreItems.value.length ? withDirectives((openBlock(), createBlock(_sfc_main$3, mergeProps({
+                key: 2,
                 icon: "moreVert",
                 label: unref(t)("chat.call.controls.more")
               }, barButton, {
                 class: "h-12! w-10! sm:w-12!",
                 "aria-haspopup": "true",
                 "data-testid": "call-more",
-                onClick: _cache[12] || (_cache[12] = ($event) => {
+                onClick: _cache[13] || (_cache[13] = ($event) => {
                   var _a;
                   return (_a = moreMenu.value) == null ? void 0 : _a.toggle($event);
                 })
-              }), null, 16, ["label"]), [
+              }), null, 16, ["label"])), [
                 [
                   unref(vTooltip),
                   unref(tip)(unref(t)("chat.call.controls.more")),
                   void 0,
                   { top: true }
                 ]
-              ]),
+              ]) : createCommentVNode("", true),
               withDirectives(createVNode(_sfc_main$3, {
                 icon: "callEnd",
                 label: unref(t)("chat.call.controls.endCall"),
@@ -1666,7 +1738,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ], 34),
           createVNode(_sfc_main$1, {
             visible: peopleOpen.value,
-            "onUpdate:visible": _cache[15] || (_cache[15] = ($event) => peopleOpen.value = $event),
+            "onUpdate:visible": _cache[16] || (_cache[16] = ($event) => peopleOpen.value = $event),
             participants: unref(participants)
           }, null, 8, ["visible", "participants"]),
           createVNode(unref(Menu), {
@@ -1714,4 +1786,4 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 export {
   _sfc_main as default
 };
-//# sourceMappingURL=Call-DvVJ7IsY.mjs.map
+//# sourceMappingURL=Call-DfAAePMJ.mjs.map