poe-svelte-ui-lib 1.9.21 → 1.9.23

package/dist/VideoViewer/VideoViewer.svelte

@@ -0,0 +1,147 @@
+<script lang="ts">
+  import Button from "../Button/Button.svelte"
+  import Error from "../libIcons/Error.svelte"
+  import { T } from "../locales/i18n"
+  import type { IVideoViewerProps } from "../types"
+  import { onMount } from "svelte"
+
+  let { id = crypto.randomUUID(), stream = $bindable(), onstream, ondevicechange }: IVideoViewerProps = $props()
+
+  let videoElement = $state<HTMLVideoElement | null>(null)
+  // let stream = $state<MediaStream | null>(null)
+  let error = $state<string | null>(null)
+  let isStreaming = $state(false)
+  // let source = $state<MediaDeviceInfo[]>([])
+  let loading = $state(false)
+
+  // 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 () => {
+    loading = true
+    error = null
+
+    try {
+      if (stream) stopStream()
+
+      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")
+      error = errorMessage
+      console.error("Camera error:", e)
+    } finally {
+      loading = false
+    }
+  }
+
+  const stopStream = () => {
+    if (stream) {
+      stream.getTracks().forEach((track) => track.stop())
+      stream = null
+    }
+    if (videoElement) {
+      videoElement.srcObject = null
+    }
+    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 startStream()
+      } else if (permission.state === "prompt") {
+        // await getDevices()
+        await startStream()
+      } else {
+        error = $T("constructor.props.video.viewer.no.permission")
+      }
+    } catch {
+      // await getDevices()
+      await startStream()
+    }
+  }
+
+  $effect(() => {
+    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>
+  {/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>
+      <Button wrapperClass="w-fit" content={{ name: $T("library.retry") }} componentClass="bg-blue px-5" onClick={handlePermission} />
+    </div>
+  {/if}
+
+  <video bind:this={videoElement} class="w-full h-full block {!isStreaming || loading ? 'hidden' : 'visible'}"></video>
+</div>

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

@@ -0,0 +1,4 @@
+import type { IVideoViewerProps } from "../types";
+declare const VideoViewer: import("svelte").Component<IVideoViewerProps, {}, "stream">;
+type VideoViewer = ReturnType<typeof VideoViewer>;
+export default VideoViewer;

package/dist/Widget/README.md

@@ -173,7 +173,7 @@
 - Поддерживает настройку типа управления (ввод, слайдер, переключатель)
 - Включает настройки числового диапазона и иконок
 - Имеет различные наборы полей в зависимости от режима (`forConstructor`)
-- Использует систему локализации через `$t('constructor.props.*')`
+- Использует систему локализации через `$T('constructor.props.*')`
 
 ## Заметки
 

package/dist/Widget/WidgetProps.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { t } from "../locales/i18n"
+  import { T } from "../locales/i18n"
   import { updateProperty, type IUIComponentHandler, type UIComponent } from "../types"
   import * as UI from ".."
   import { optionsStore } from "../options"
@@ -30,7 +30,7 @@
 
 {#snippet WidgetSettingsLabel()}
   <UI.Input
-    label={{ name: $t("constructor.props.settings.label") }}
+    label={{ name: $T("constructor.props.settings.label") }}
     value={component.properties.settings.label as string}
     onUpdate={(value) => updateProperty("settings.label", value, component, onPropertyChange)}
   />
@@ -39,7 +39,7 @@
 {#snippet WidgetSettingsColor()}
   <UI.Select
     wrapperClass="!h-14"
-    label={{ name: $t("constructor.props.componentcolor") }}
+    label={{ name: $T("constructor.props.componentcolor") }}
     type="buttons"
     options={$optionsStore.COLOR_OPTIONS}
     value={initialColor}
@@ -52,7 +52,7 @@
 {#snippet WidgetIconColor()}
   <UI.Select
     wrapperClass="!h-14"
-    label={{ name: $t("constructor.props.iconcolor") }}
+    label={{ name: $T("constructor.props.iconcolor") }}
     type="buttons"
     options={$optionsStore.TEXT_COLOR_OPTIONS}
     value={$optionsStore.TEXT_COLOR_OPTIONS.find((c) =>
@@ -66,7 +66,7 @@
 
 {#snippet WidgetType()}
   <UI.Select
-    label={{ name: $t("constructor.props.settings.type") }}
+    label={{ name: $T("constructor.props.settings.type") }}
     type="buttons"
     options={$optionsStore.WIDGET_TYPE_OPTIONS}
     value={$optionsStore.WIDGET_TYPE_OPTIONS.find((o) => o.value == component.properties.settings.type)}
@@ -78,12 +78,12 @@
 
 {#snippet WidgetSwitchCaptions()}
   <UI.Input
-    label={{ name: $t("constructor.props.caption.left") }}
+    label={{ name: $T("constructor.props.caption.left") }}
     value={component.properties.settings.switch.captionLeft}
     onUpdate={(value) => updateProperty("settings.switch.captionLeft", value as string, component, onPropertyChange)}
   />
   <UI.Input
-    label={{ name: $t("constructor.props.caption.right") }}
+    label={{ name: $T("constructor.props.caption.right") }}
     value={component.properties.settings.switch.captionRight}
     onUpdate={(value) => updateProperty("settings.switch.captionRight", value as string, component, onPropertyChange)}
   />
@@ -91,7 +91,7 @@
 
 {#snippet WidgetUnits()}
   <UI.Input
-    label={{ name: $t("constructor.props.units") }}
+    label={{ name: $T("constructor.props.units") }}
     value={component.properties.settings.number.units as string}
     onUpdate={(value) => updateProperty("settings.number.units", value, component, onPropertyChange)}
   />
@@ -99,7 +99,7 @@
 
 {#snippet WidgetSwitchingMode()}
   <UI.Switch
-    label={{ name: $t("constructor.props.widget.mode") }}
+    label={{ name: $T("constructor.props.widget.mode") }}
     value={component.properties.icons.cycling}
     options={[{ id: crypto.randomUUID(), value: 0, class: "" }]}
     onChange={(value) => updateProperty("icons.cycling", value, component, onPropertyChange)}
@@ -110,7 +110,7 @@
   <CommonSnippets
     snippet="IconsLib"
     initialValue={{
-      name: $t("constructor.props.labelicon"),
+      name: $T("constructor.props.labelicon"),
       icon: component.properties.icons.array,
       updateProperty: (icons: string[]) => updateProperty("icons.array", icons as string[], component, onPropertyChange),
       icons: { array: ICONS_ARRAY, selectArray: true },

package/dist/index.d.ts

@@ -31,9 +31,10 @@ export { default as Tabs } from "./Tabs/Tabs.svelte";
 export { default as TabsProps } from "./Tabs/TabsProps.svelte";
 export { default as TextField } from "./TextField/TextField.svelte";
 export { default as TextFieldProps } from "./TextField/TextFieldProps.svelte";
+export { default as VideoViewer } from "./VideoViewer/VideoViewer.svelte";
 export { default as Widget } from "./Widget/Widget.svelte";
 export { default as WidgetProps } from "./Widget/WidgetProps.svelte";
 export * from "./locales/i18n";
 export * from "./locales/translations";
 export * from "./ModalStackStore";
-export { type UIComponent, type Position, type IUIComponentHandler, type IButtonProps, type IAccordionProps, type IInputProps, type ISelectProps, type IOption, type ISwitchProps, type IColorPickerProps, type ISliderProps, type ITextFieldProps, type IMapProps, type IProgressBarProps, type IWidgetProps, type IGraphProps, type IGraphDataObject, type ITableHeader, type ITableProps, type ITabsProps, type IJoystickProps, type IFileAttachProps, type IDeviceGNSS, type ICarouselProps, type IReceivingDataObject, } from "./types";
+export { type UIComponent, type Position, type IUIComponentHandler, type IButtonProps, type IAccordionProps, type IInputProps, type ISelectProps, type IOption, type ISwitchProps, type IColorPickerProps, type ISliderProps, type ITextFieldProps, type IMapProps, type IProgressBarProps, type IWidgetProps, type IGraphProps, type IGraphDataObject, type ITableHeader, type ITableProps, type ITabsProps, type IJoystickProps, type IFileAttachProps, type IDeviceGNSS, type ICarouselProps, type IReceivingDataObject, type IVideoViewerProps, } from "./types";

package/dist/index.js

@@ -32,6 +32,8 @@ export { default as Tabs } from "./Tabs/Tabs.svelte";
 export { default as TabsProps } from "./Tabs/TabsProps.svelte";
 export { default as TextField } from "./TextField/TextField.svelte";
 export { default as TextFieldProps } from "./TextField/TextFieldProps.svelte";
+export { default as VideoViewer } from "./VideoViewer/VideoViewer.svelte";
+// export { default as VideoViewerProps } from "./VideoViewer/VideoViewerProps.svelte"
 export { default as Widget } from "./Widget/Widget.svelte";
 export { default as WidgetProps } from "./Widget/WidgetProps.svelte";
 export * from "./locales/i18n";

package/dist/libIcons/Error.svelte

@@ -0,0 +1,8 @@
+<script lang="ts"></script>
+
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24"
+  ><path
+    fill="currentColor"
+    d="M12 16.462q.262 0 .439-.177q.176-.177.176-.439q0-.261-.177-.438T12 15.23t-.438.177t-.177.438t.177.439t.438.177m0-3.308q.214 0 .357-.144t.143-.356v-5q0-.213-.144-.356t-.357-.144t-.356.144t-.143.356v5q0 .212.144.356t.357.144M12.003 21q-1.867 0-3.51-.708q-1.643-.709-2.859-1.924t-1.925-2.856T3 12.003t.709-3.51Q4.417 6.85 5.63 5.634t2.857-1.925T11.997 3t3.51.709q1.643.708 2.859 1.922t1.925 2.857t.709 3.509t-.708 3.51t-1.924 2.859t-2.856 1.925t-3.509.709M12 20q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5.675T12 20m0-8"
+  /></svg
+>

package/dist/libIcons/Error.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Error: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Error = InstanceType<typeof Error>;
+export default Error;

package/dist/locales/i18n.d.ts

@@ -7,4 +7,4 @@ export declare const LOCALES: {
     value: string;
     component: import("svelte/legacy").LegacyComponentType;
 }[];
-export declare const t: Readable<(key: string) => string>;
+export declare const T: Readable<(key: string) => string>;

package/dist/locales/i18n.js

@@ -33,4 +33,4 @@ export const LOCALES = [
 function translate(locale, key) {
     return translations[locale]?.[key] || key;
 }
-export const t = derived(Language, ($lang) => (key) => translate($lang, key));
+export const T = derived(Language, ($lang) => (key) => translate($lang, key));

package/dist/locales/translations.js

@@ -9,6 +9,7 @@ const translations = {
         "library.palette": "Палитра",
         "library.regexp": "Регулярные выражения",
         "library.props": "Свойства",
+        "library.retry": "Повторить",
         "library.props.name": "Название",
         "library.props.type": "Тип",
         "library.props.default": "По умолчанию",
@@ -84,6 +85,7 @@ const translations = {
         "constructor.props.variables": "Перечень переменных",
         "constructor.props.variables.info": "Поле для ввода имён переменных, разделенных пробелами",
         "constructor.props.value": "Значение",
+        "constructor.props.defaultvalue": "Значение по умолчанию",
         "constructor.props.value.info": "Поле для ввода Value пакета в формате JSON",
         "constructor.props.align": "Выравнивание надписи",
         "constructor.props.align.header": "Выравнивание заголовка",
@@ -174,6 +176,9 @@ const translations = {
         "constructor.props.file.notselected": "Файл не выбран",
         "constructor.props.map.loading": "Загрузка карты...",
         "constructor.props.map.noconnection": "Карта не загружена. Нет подключения к интернету",
+        "constructor.props.video.viewer.loading": "Загрузка камеры...",
+        "constructor.props.video.viewer.no.permission": "Нет разрешения для доступа к камере",
+        "constructor.props.video.viewer.no.access": "Камера недоступна",
         "constructor.props.widget.mode": "Зацикленный",
         "constructor.props.table.type": "Тип таблицы",
         "constructor.props.table.type.table": "Статическая таблица",