poe-svelte-ui-lib 1.9.23 → 1.10.0

package/dist/Button/ButtonProps.svelte

@@ -83,14 +83,14 @@
     wrapperClass="{Header.value === 'SET' ? 'mt-1' : ''} "
     value={component.eventHandler.Argument}
     maxlength={32}
-    disabled={Header.value === "SET" && (component.eventHandler.Argument == "Save" || component.eventHandler.Argument == "NoSave")}
+    disabled={Header.value === "SET" && component.eventHandler.Argument == "Save"}
     help={{ info: $T("constructor.props.argument.info"), autocomplete: "on", regExp: /^[a-zA-Z0-9\-_]{0,32}$/ }}
     onUpdate={(value) => onPropertyChange({ eventHandler: { Argument: value as string } })}
   />
 {/snippet}
 
 {#snippet ButtonVariables()}
-  {#if (component.eventHandler.Argument !== "Save" && component.eventHandler.Argument !== "NoSave") || Header.value === "SET"}
+  {#if component.eventHandler.Argument !== "Save" || Header.value === "SET"}
     <UI.Input
       label={{ name: $T("constructor.props.value") }}
       value={component.eventHandler.Value}

package/dist/Select/SelectProps.svelte

@@ -71,7 +71,7 @@
     wrapperClass="{Header.value === 'SET' ? 'mt-1' : ''} "
     value={component.eventHandler.Argument}
     maxlength={32}
-    disabled={component.eventHandler.Argument == "Save" || component.eventHandler.Argument == "NoSave"}
+    disabled={component.eventHandler.Argument == "Save"}
     help={{ info: $T("constructor.props.argument.info"), autocomplete: "on", regExp: /^[a-zA-Z0-9\-_]{0,32}$/ }}
     onUpdate={(value) => onPropertyChange({ eventHandler: { Argument: value as string } })}
   />

package/dist/TextField/TextField.svelte

@@ -15,7 +15,7 @@
 
 <div
   id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
-  class={twMerge(`relative flex w-full flex-col items-center  ${background ? "rounded-2xl bg-max px-6 py-2" : ""}`, wrapperClass)}
+  class={twMerge(`relative flex w-full flex-col items-center  ${background ? "rounded-2xl bg-(--back-color) px-6 py-2" : ""}`, wrapperClass)}
 >
   <p class={twMerge(`w-full text-center ${textSize[content.size ?? "base"]}`, content.class)}>
     {content.name}

package/dist/VideoViewer/VideoViewer.svelte

@@ -2,42 +2,56 @@
   import Button from "../Button/Button.svelte"
   import Error from "../libIcons/Error.svelte"
   import { T } from "../locales/i18n"
-  import type { IVideoViewerProps } from "../types"
+  import Select from "../Select/Select.svelte"
+  import type { IOption, IVideoViewerProps } from "../types"
   import { onMount } from "svelte"
+  import { twMerge } from "tailwind-merge"
 
-  let { id = crypto.randomUUID(), stream = $bindable(), onstream, ondevicechange }: IVideoViewerProps = $props()
+  let { id = crypto.randomUUID(), wrapperClass, label = { name: "", class: "" }, showSelect = true }: IVideoViewerProps = $props()
 
   let videoElement = $state<HTMLVideoElement | null>(null)
-  // let stream = $state<MediaStream | null>(null)
+  let stream = $state<MediaStream | null>(null)
   let error = $state<string | null>(null)
   let isStreaming = $state(false)
-  // let source = $state<MediaDeviceInfo[]>([])
+  let sources = $state<MediaDeviceInfo[]>([])
   let loading = $state(false)
+  let devId: string = $state("")
 
-  // const getDevices = async (): Promise<(MediaDeviceInfo)[]> => {
-  //   try {
-  //     const deviceList = await navigator.mediaDevices.enumerateDevices()
-  //     source = deviceList.filter((d) => d.kind === "videoinput")
-  //     ondevicechange?.(source)
-  //     return source
-  //   } catch (e) {
-  //     console.error("Failed to enumerate source:", e)
-  //     return []
-  //   }
-  // }
-
-  const startStream = async () => {
+  export const getDevices = async (): Promise<MediaDeviceInfo[]> => {
+    try {
+      const deviceList = await navigator.mediaDevices.enumerateDevices()
+      sources = deviceList.filter((d) => d.kind === "videoinput")
+      return sources
+    } catch (e) {
+      return []
+    }
+  }
+
+  export const startStream = async (devId?: string) => {
     loading = true
     error = null
 
     try {
       if (stream) stopStream()
 
+      const deviceId = devId ?? sources[0].deviceId
+
+      const constraints: MediaStreamConstraints = {
+        video: {
+          width: { ideal: 640 },
+          height: { ideal: 480 },
+          facingMode: "user",
+          ...(deviceId && { deviceId: { exact: deviceId } }),
+        },
+        audio: false,
+      }
+
+      stream = await navigator.mediaDevices.getUserMedia(constraints)
+
       if (videoElement) {
         videoElement.srcObject = stream as MediaStream
         await videoElement.play()
         isStreaming = true
-        onstream?.(stream as MediaStream)
       }
     } catch (e: unknown) {
       const errorMessage = e instanceof Error ? e.message : $T("constructor.props.video.viewer.no.access")
@@ -48,7 +62,7 @@
     }
   }
 
-  const stopStream = () => {
+  export const stopStream = () => {
     if (stream) {
       stream.getTracks().forEach((track) => track.stop())
       stream = null
@@ -59,89 +73,84 @@
     isStreaming = false
   }
 
-  // const captureScreenshot = (): string | null => {
-  //   if (!videoElement || !isStreaming) return null
-
-  //   const canvas = document.createElement("canvas")
-  //   canvas.width = videoElement.videoWidth
-  //   canvas.height = videoElement.videoHeight
-
-  //   const context = canvas.getContext("2d")
-  //   if (!context) return null
-
-  //   context.drawImage(videoElement, 0, 0)
-  //   return canvas.toDataURL("image/png")
-  // }
-
-  // const downloadScreenshot = (filename: string = "screenshot.png") => {
-  //   const dataUrl = captureScreenshot()
-  //   if (!dataUrl) return
-
-  //   const link = document.createElement("a")
-  //   link.href = dataUrl
-  //   link.download = filename
-  //   link.click()
-  // }
-
   const handlePermission = async () => {
     try {
       const permission = await navigator.permissions.query({ name: "camera" as PermissionName })
       if (permission.state === "granted") {
-        // await getDevices()
+        await getDevices()
 
         await startStream()
       } else if (permission.state === "prompt") {
-        // await getDevices()
+        await getDevices()
         await startStream()
       } else {
         error = $T("constructor.props.video.viewer.no.permission")
       }
     } catch {
-      // await getDevices()
+      await getDevices()
       await startStream()
     }
   }
 
-  $effect(() => {
+  setInterval(async () => {
+    sources = await getDevices()
+  }, 1000)
+
+  onMount(() => {
+    getDevices()
     if (typeof window !== "undefined" && "mediaDevices" in navigator) {
       handlePermission()
     }
-
     return () => {
       stopStream()
     }
   })
-
-  onMount(() => {
-    if (videoElement) {
-      videoElement.addEventListener("loadedmetadata", () => {
-        if (!videoElement!.paused) {
-          videoElement!.play().catch(console.error)
-        }
-      })
-    }
-  })
 </script>
 
-<div
-  id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
-  class="relative h-full bg-(--border-color)/50 rounded-xl shadow-sm transition duration-200 hover:shadow-md"
->
-  {#if loading}
-    <div class="h-full w-full flex items-center justify-center rounded-xl bg-(--border-color)/50 z-10">
-      <h2>{$T("constructor.props.video.viewer.loading")}</h2>
-    </div>
+<div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class={twMerge("flex flex-col w-full h-full items-center", wrapperClass)}>
+  {#if label.name}
+    <h5 class={twMerge(`w-full px-4 text-center`, label.class)}>{label.name}</h5>
   {/if}
-
-  {#if error}
-    <div class="h-full w-full flex flex-col items-center justify-center rounded-xl bg-(--border-color)/50 gap-4 z-10">
-      <div class="flex flex-col items-center justify-center gap-4 text-red-500">
-        <Error />
-        <h4>{error}</h4>
+  <div class="relative flex flex-1 w-full items-center justify-center">
+    {#if loading || error}
+      <div class="absolute h-full w-full rounded-2xl px-40 py-15 flex flex-col items-center justify-center bg-(--border-color)/50 gap-4 z-10">
+        {#if loading}
+          <h2>{$T("constructor.props.camera.loading")}</h2>
+        {:else if error}
+          <svg class="w-12 h-12 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+            />
+          </svg>
+          <h5 class="text-red-600">{error}</h5>
+          <Button wrapperClass="w-fit" content={{ name: $T("library.retry") }} componentClass="bg-blue px-5" onClick={handlePermission} />
+        {/if}
       </div>
-      <Button wrapperClass="w-fit" content={{ name: $T("library.retry") }} componentClass="bg-blue px-5" onClick={handlePermission} />
+    {/if}
+    <div class="absolute h-full w-full rounded-2xl bg-(--border-color)/50">
+      <video bind:this={videoElement} class="h-full w-full rounded-2xl object-contain block {!isStreaming || loading ? 'invisible' : 'visible'}"></video>
     </div>
+  </div>
+
+  {#if showSelect}
+    {@const deviceOptions = sources.map((dev) => {
+      return { id: dev.deviceId, name: dev.label, value: dev.deviceId }
+    })}
+    <Select
+      wrapperClass="w-[50%]"
+      disabled={deviceOptions.length == 0}
+      type="buttons"
+      label={{ name: $T("constructor.props.source") }}
+      value={deviceOptions.find((p) => p.value == devId) || deviceOptions[0]}
+      options={deviceOptions}
+      onUpdate={async (value) => {
+        stopStream()
+        devId = (value as IOption).value as string
+        await startStream(devId)
+      }}
+    />
   {/if}
-
-  <video bind:this={videoElement} class="w-full h-full block {!isStreaming || loading ? 'hidden' : 'visible'}"></video>
 </div>

package/dist/VideoViewer/VideoViewer.svelte.d.ts

@@ -1,4 +1,8 @@
 import type { IVideoViewerProps } from "../types";
-declare const VideoViewer: import("svelte").Component<IVideoViewerProps, {}, "stream">;
+declare const VideoViewer: import("svelte").Component<IVideoViewerProps, {
+    getDevices: () => Promise<MediaDeviceInfo[]>;
+    startStream: (devId?: string) => Promise<void>;
+    stopStream: () => void;
+}, "">;
 type VideoViewer = ReturnType<typeof VideoViewer>;
 export default VideoViewer;

package/dist/VideoViewer/VideoViewerProps.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import { T } from "../locales/i18n"
+  import { updateProperty, type IUIComponentHandler, type UIComponent } from "../types"
+  import * as UI from ".."
+  import CommonSnippets from "../CommonSnippets.svelte"
+
+  const {
+    component,
+    onPropertyChange,
+    forConstructor = true,
+  } = $props<{
+    component: UIComponent & { properties: Partial<UI.IVideoViewerProps> }
+    onPropertyChange: (updates: Partial<{ properties?: string | object; name?: string; access?: string; eventHandler?: IUIComponentHandler }>) => void
+    forConstructor?: boolean
+  }>()
+</script>
+
+{#snippet VideoViewershowSelect()}
+  <UI.Switch
+    label={{ name: $T("constructor.props.showSelect") }}
+    value={component.properties?.showSelect ? 1 : 0}
+    options={[{ id: crypto.randomUUID(), value: 0, class: "" }]}
+    onChange={(value) => updateProperty("showSelect", value, component, onPropertyChange)}
+  />
+{/snippet}
+
+{#if forConstructor}
+  <div class="flex mb-4 justify-center gap-8">
+    <div class="flex w-1/3 flex-col px-2">
+      <CommonSnippets snippet="Access" {component} {onPropertyChange} />
+    </div>
+    <div class="flex w-1/3 flex-col px-2">
+      <CommonSnippets snippet="Label" {component} {onPropertyChange} />
+    </div>
+    <div class="flex w-1/3 flex-col px-2">
+      {@render VideoViewershowSelect()}
+    </div>
+  </div>
+{:else}
+  <div class="flex mb-4 justify-center gap-8">
+    <div class="flex w-1/3 flex-col px-2">
+      <CommonSnippets snippet="Identificator" {component} {onPropertyChange} />
+      <CommonSnippets snippet="Access" {component} {onPropertyChange} />
+    </div>
+    <div class="flex w-1/3 flex-col px-2">
+      <CommonSnippets snippet="WrapperClass" {component} {onPropertyChange} />
+      <CommonSnippets snippet="Label" {component} {onPropertyChange} />
+    </div>
+    <div class="flex w-1/3 flex-col px-2">
+      {@render VideoViewershowSelect()}
+    </div>
+  </div>
+{/if}

package/dist/VideoViewer/VideoViewerProps.svelte.d.ts

@@ -0,0 +1,17 @@
+import { type IUIComponentHandler, type UIComponent } from "../types";
+import * as UI from "..";
+type $$ComponentProps = {
+    component: UIComponent & {
+        properties: Partial<UI.IVideoViewerProps>;
+    };
+    onPropertyChange: (updates: Partial<{
+        properties?: string | object;
+        name?: string;
+        access?: string;
+        eventHandler?: IUIComponentHandler;
+    }>) => void;
+    forConstructor?: boolean;
+};
+declare const VideoViewerProps: import("svelte").Component<$$ComponentProps, {}, "">;
+type VideoViewerProps = ReturnType<typeof VideoViewerProps>;
+export default VideoViewerProps;

package/dist/locales/translations.js

@@ -176,9 +176,11 @@ const translations = {
         "constructor.props.file.notselected": "Файл не выбран",
         "constructor.props.map.loading": "Загрузка карты...",
         "constructor.props.map.noconnection": "Карта не загружена. Нет подключения к интернету",
-        "constructor.props.video.viewer.loading": "Загрузка камеры...",
+        "constructor.props.camera.loading": "Загрузка камеры...",
         "constructor.props.video.viewer.no.permission": "Нет разрешения для доступа к камере",
         "constructor.props.video.viewer.no.access": "Камера недоступна",
+        "constructor.props.source": "Источник",
+        "constructor.props.showSelect": "Выбор источника",
         "constructor.props.widget.mode": "Зацикленный",
         "constructor.props.table.type": "Тип таблицы",
         "constructor.props.table.type.table": "Статическая таблица",

package/dist/options.js

@@ -13,12 +13,10 @@ export const optionsStore = derived(T, ($T) => {
             { id: id(), name: "ER!", value: "ER!" },
         ],
         SHORT_ARGUMENT_OPTION: [
-            { id: id(), value: "NoSave", name: $T("constructor.props.action.update") },
             { id: id(), value: "Save", name: $T("constructor.props.action.save") },
             { id: id(), value: "NoSend", name: $T("constructor.props.action.nosend") },
         ],
         FULL_ARGUMENT_OPTION: [
-            { id: id(), value: "NoSave", name: $T("constructor.props.action.update") },
             { id: id(), value: "Save", name: $T("constructor.props.action.save") },
             { id: id(), value: "", name: $T("constructor.props.action.custom") },
         ],

package/dist/types.d.ts

@@ -413,9 +413,12 @@ export interface ITextFieldProps {
 }
 export interface IVideoViewerProps {
     id?: string;
-    stream?: MediaStream | null;
-    onstream?: (stream: MediaStream) => void;
-    ondevicechange?: (devices: MediaDeviceInfo[]) => void;
+    wrapperClass?: string;
+    label?: {
+        name?: string;
+        class?: string;
+    };
+    showSelect?: boolean;
 }
 export interface IWidgetProps {
     id?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.9.23",
+  "version": "1.10.0",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -37,23 +37,23 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-static": "^3.0.10",
-    "@sveltejs/kit": "^2.61.1",
-    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/kit": "^2.68.0",
+    "@sveltejs/package": "^2.5.8",
     "@sveltejs/vite-plugin-svelte": "^7.1.2",
-    "@tailwindcss/vite": "^4.3.0",
+    "@tailwindcss/vite": "^4.3.1",
     "@types/maplibre-gl": "^1.14.0",
-    "@types/node": "^25.9.1",
-    "dompurify": "^3.4.7",
-    "marked": "^18.0.4",
-    "prettier": "^3.8.3",
-    "prettier-plugin-svelte": "^4.0.1",
+    "@types/node": "^26.0.1",
+    "dompurify": "^3.4.11",
+    "marked": "^18.0.5",
+    "prettier": "^3.9.3",
+    "prettier-plugin-svelte": "^4.1.1",
     "prettier-plugin-tailwindcss": "^0.8.0",
     "publint": "^0.3.21",
-    "svelte": "^5.55.10",
-    "tailwindcss": "^4.3.0",
-    "tsx": "^4.22.3",
+    "svelte": "^5.56.4",
+    "tailwindcss": "^4.3.1",
+    "tsx": "^4.22.4",
     "typescript": "^6.0.3",
-    "vite": "^8.0.14",
+    "vite": "^8.1.0",
     "vite-plugin-compression": "^0.5.1"
   }
 }