@stubber/form-fields 1.7.8 → 1.8.0

package/dist/fields/components/Screenrecorder.svelte

@@ -1,276 +0,0 @@
-<script>
-  import { onMount } from "svelte";
-  import { Button } from "@stubber/ui/button";
-  import _ from "lodash-es";
-  import { deepEqual } from "fast-equals";
-  import { writable } from "svelte/store";
-  import { syncStoreToStore } from "../../utils/syncing";
-
-  import { Label } from "@stubber/ui/label";
-
-  export let form;
-  export let field;
-
-  const internal = writable({});
-
-  let isRecording;
-  let media = [];
-  let mediaRecorder = null;
-
-  $: state_key = $field.state?.state_key;
-  $: label = $field.spec?.title;
-  $: hide_label = $field.spec?.hide_label;
-  $: isValid = !$field.state?.validation || $field.state?.validation?.valid;
-  $: validationMessage = $field.state?.validation?.message;
-  $: max_files = isNaN(parseInt($field.spec?.params?.max_files))
-    ? Infinity
-    : parseInt($field.spec?.params?.max_files);
-  $: limit_remaining =
-    max_files - ($internal?.selected_files?.length ?? 0) - ($internal?.uploaded_files?.length ?? 0);
-
-  onMount(() => {
-    // set field values that aren't set yet
-    let f = _.cloneDeep($field);
-    let initial_value = _.isArray(f?.data?.base) ? f?.data?.base : [];
-    let initial_data = {
-      ...f?.data,
-      base: initial_value,
-    };
-    let initial_state_internal = {
-      selected_files: [],
-      uploaded_files: initial_value,
-      failed_files: [],
-    };
-
-    _.set(f, "data", initial_data);
-    _.set(f, "state.internal", initial_state_internal);
-    if (!deepEqual(f, $field)) $field = f;
-
-    syncStoreToStore(
-      field,
-      internal,
-      (a, b) => {
-        let _clone = _.cloneDeep(a.state?.internal) || {};
-
-        // get parts from data
-        let files = _.isArray(a?.data?.base) ? a?.data?.base : [];
-        _clone.uploaded_files = files;
-
-        // set field state if changed
-        if (!deepEqual(a?.state?.internal, _clone)) {
-          $field.state.internal = _clone;
-        }
-        return _clone;
-      },
-      (a, b) => {
-        let _clone = _.cloneDeep(a) || {};
-        // update the state
-        _.set(_clone, "state.internal", _.cloneDeep(b));
-        // update the data
-        _.set(_clone, "data.base", b?.uploaded_files);
-        return _clone;
-      }
-    );
-  });
-
-  async function initializeMediaRecorder() {
-    const stream = await navigator.mediaDevices.getDisplayMedia({
-      audio: true,
-      video: { mediaSource: "screen" },
-    });
-    const audiostream = await navigator.mediaDevices.getUserMedia({ audio: true });
-    const combine = new MediaStream([...stream.getVideoTracks(), ...audiostream.getAudioTracks()]);
-    mediaRecorder = new MediaRecorder(combine, { mimeType: "video/webm;codecs=vp9" });
-    mediaRecorder.ondataavailable = (e) => media.push(e.data);
-    mediaRecorder.onstop = function () {
-      let id = Math.random().toString(36).substring(7);
-      let filename = `${$field.spec?.name}_${id}.webm`;
-      let blob = new Blob(media, { type: "video/webm;codecs=vp9" });
-      let file = new File([blob], filename, { type: "video/webm;codecs=vp9" });
-      uploadFile(file, blob, filename);
-      media = [];
-      mediaRecorder = null;
-    };
-  }
-
-  async function startRecording() {
-    if (limit_remaining <= 0) {
-      alert("You have reached the maximum number of files allowed");
-      return;
-    }
-    await initializeMediaRecorder();
-    mediaRecorder.start();
-    isRecording = true;
-  }
-
-  function stopRecording() {
-    mediaRecorder.stop();
-    isRecording = false;
-  }
-
-  function toggleRecording() {
-    if (!isRecording) {
-      startRecording();
-    } else {
-      stopRecording();
-    }
-  }
-
-  async function uploadFile(file, blob, filename) {
-    let comparison = _.cloneDeep($internal);
-    let f_id = Math.random().toString(36).substring(7);
-    comparison.selected_files = comparison.selected_files || [];
-    comparison.selected_files.push({
-      blob,
-      file,
-      filename,
-      f_id,
-    });
-    if (!deepEqual(comparison, $internal)) {
-      $internal = comparison;
-    }
-
-    let upload_res = await form.uploadFiles([file]);
-    let { uploaded_files } = upload_res || {};
-
-    let comparison2 = _.cloneDeep($internal);
-    if (_.isArray(uploaded_files)) {
-      uploaded_files.forEach((a) => {
-        a.f_id = f_id;
-        form.appendAttachment(a);
-        comparison2.uploaded_files.push(a);
-      });
-    }
-
-    if (!uploaded_files?.length) {
-      comparison2.failed_files.push({
-        file,
-        filename,
-        f_id,
-      });
-    }
-
-    comparison2.selected_files = comparison2.selected_files.filter((f) => {
-      return f.f_id !== f_id;
-    });
-
-    if (!deepEqual(comparison2, $internal)) {
-      $internal = comparison2;
-    }
-  }
-
-  function removeFile(item) {
-    let name = item?.file?.filename ?? item?.file?.name;
-    let comparison = _.cloneDeep($internal);
-    comparison.selected_files = comparison.selected_files?.filter((f) => f.f_id !== item.f_id);
-    comparison.failed_files = comparison.failed_files?.filter((f) => f.f_id !== item.f_id);
-    comparison.uploaded_files = comparison.uploaded_files?.filter((f) => f.f_id !== item.f_id);
-
-    if (!deepEqual(comparison, $internal)) {
-      $internal = comparison;
-    }
-
-    if (item?.is_uploaded) {
-      form.removeAttachment(item?.file);
-    }
-  }
-
-  async function fileToBlob(file) {
-    return new Blob([new Uint8Array(await file.arrayBuffer())], { type: file.type });
-  }
-
-  let fileList = [];
-  $: formatFileList($internal);
-  async function formatFileList(i) {
-    let { uploaded_files, selected_files, failed_files } = i;
-    let r = [];
-    for (let item of uploaded_files || []) {
-      r.push({
-        file: item,
-        filename: item.filename,
-        is_uploaded: true,
-      });
-    }
-    for (let item of selected_files || []) {
-      r.push({
-        ...item,
-        is_selected: true,
-      });
-    }
-    for (let item of failed_files || []) {
-      r.push({
-        ...item,
-        is_failed: true,
-        blob: await fileToBlob(item.file),
-      });
-    }
-    fileList = r;
-  }
-
-  $: buttonLabel = isRecording ? "Stop recording" : "Start recording";
-</script>
-
-{#if $internal}
-  <div class="flex flex-col w-full text-surface-900">
-    <Label for="input_{state_key}" class="block py-2 {hide_label ? 'hidden' : ''}">
-      {label}
-    </Label>
-    <div>
-      <Button variant={isRecording ? "destructive" : "default"} on:click={toggleRecording}>
-        {#if isRecording}
-          <i class="fa-solid fa-video-slash" />
-        {:else}
-          <i class="fa-solid fa-video" />
-        {/if}
-        {buttonLabel}
-      </Button>
-      {#each fileList as item}
-        <div class="w-full flex flex-row items-center">
-          {#if item.is_uploaded}
-            <div class="px-2">
-              <i class="fa fa-check text-success-500" />
-            </div>
-          {:else if item.is_failed}
-            <div class="px-2 space-x-2 flex items-center text-danger-400">
-              <i class="fa-regular fa-triangle-exclamation" />
-              <p class="hidden md:block text-fluid-md">Failed</p>
-            </div>
-          {:else}
-            <div class="px-2 space-x-2 flex items-center text-surface-500">
-              <p class="hidden md:block text-fluid-md">uploading...</p>
-              <i class="fa fa-pulse fa-spinner" />
-            </div>
-          {/if}
-          {#if item?.blob}
-            <div class="shrink p-2">
-              <div class="overflow-hidden relative max-w-[200px]">
-                <!-- <audio controls src={window.URL.createObjectURL(item.blob)} /> -->
-                <video controls src={window.URL.createObjectURL(item.blob)} class="w-full">
-                  <track kind="captions" />
-                </video>
-              </div>
-            </div>
-          {:else}
-            <div class="w-full shrink py-1 pl-2 truncate border border-surface-200 rounded-sm">
-              <p class="text-surface-800 text-fluid-md">
-                {item?.filename}
-              </p>
-            </div>
-          {/if}
-          <button
-            type="button"
-            class="shrink-0 fa-solid fa-2xs fa-x bg-surface-0 rounded-full border border-surface-0 hover:border-warning-500 hover:text-warning-500"
-            on:click={() => {
-              removeFile(item);
-            }}
-          />
-        </div>
-      {/each}
-    </div>
-  </div>
-  {#if validationMessage}
-    <p class="text-label {!isValid ? `text-danger-500` : `text-success-500`}">
-      {validationMessage}
-    </p>
-  {/if}
-{/if}

package/dist/fields/components/Screenrecorder.svelte.d.ts

@@ -1,27 +0,0 @@
-/** @typedef {typeof __propDef.props}  ScreenrecorderProps */
-/** @typedef {typeof __propDef.events}  ScreenrecorderEvents */
-/** @typedef {typeof __propDef.slots}  ScreenrecorderSlots */
-export default class Screenrecorder extends SvelteComponent<{
-    form: any;
-    field: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type ScreenrecorderProps = typeof __propDef.props;
-export type ScreenrecorderEvents = typeof __propDef.events;
-export type ScreenrecorderSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        form: any;
-        field: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};

package/dist/fields/components/Screenshot.svelte

@@ -1,269 +0,0 @@
-<script>
-  import { onMount } from "svelte";
-  import { Button } from "@stubber/ui/button";
-  import _ from "lodash-es";
-  import { deepEqual } from "fast-equals";
-  import { writable } from "svelte/store";
-  import { syncStoreToStore } from "../../utils/syncing";
-
-  import { Label } from "@stubber/ui/label";
-
-  export let form;
-  export let field;
-
-  const internal = writable({});
-
-  let isRecording;
-
-  $: state_key = $field.state?.state_key;
-  $: label = $field.spec?.title;
-  $: hide_label = $field.spec?.hide_label;
-  $: isValid = !$field.state?.validation || $field.state?.validation?.valid;
-  $: validationMessage = $field.state?.validation?.message;
-  $: max_files = isNaN(parseInt($field.spec?.params?.max_files))
-    ? Infinity
-    : parseInt($field.spec?.params?.max_files);
-  $: limit_remaining =
-    max_files - ($internal?.selected_files?.length ?? 0) - ($internal?.uploaded_files?.length ?? 0);
-
-  onMount(() => {
-    // set field values that aren't set yet
-    let f = _.cloneDeep($field);
-    let initial_value = _.isArray(f?.data?.base) ? f?.data?.base : [];
-    let initial_data = {
-      ...f?.data,
-      base: initial_value,
-    };
-    let initial_state_internal = {
-      selected_files: [],
-      uploaded_files: initial_value,
-      failed_files: [],
-    };
-
-    _.set(f, "data", initial_data);
-    _.set(f, "state.internal", initial_state_internal);
-    if (!deepEqual(f, $field)) $field = f;
-
-    syncStoreToStore(
-      field,
-      internal,
-      (a, b) => {
-        let _clone = _.cloneDeep(a.state?.internal) || {};
-
-        // get parts from data
-        let files = _.isArray(a?.data?.base) ? a?.data?.base : [];
-        _clone.uploaded_files = files;
-
-        // set field state if changed
-        if (!deepEqual(a?.state?.internal, _clone)) {
-          $field.state.internal = _clone;
-        }
-        return _clone;
-      },
-      (a, b) => {
-        let _clone = _.cloneDeep(a) || {};
-        // update the state
-        _.set(_clone, "state.internal", _.cloneDeep(b));
-        // update the data
-        _.set(_clone, "data.base", b?.uploaded_files);
-        return _clone;
-      }
-    );
-  });
-
-  async function startRecording() {
-    if (limit_remaining <= 0) {
-      alert("You have reached the maximum number of files allowed");
-      return;
-    }
-    let id = Math.random().toString(36).substring(7);
-    let filename = `${$field.spec?.name}_${id}`;
-    if (!navigator.mediaDevices.getDisplayMedia) return;
-
-    const stream = await navigator.mediaDevices.getDisplayMedia({
-      video: { mediaSource: "screen" },
-    });
-    // get correct video track
-    const track = stream.getVideoTracks()[0];
-    // init Image Capture and not Video stream
-    const imageCapture = new ImageCapture(track);
-    // take first frame only
-    const bitmap = await imageCapture.grabFrame();
-    // destory video track to prevent more recording / mem leak
-    track.stop();
-
-    const canvas = document.createElement("canvas");
-    // this could be a document.createElement('canvas') if you want
-    // draw weird image type to canvas so we can get a useful image
-    canvas.width = bitmap.width;
-    canvas.height = bitmap.height;
-    const context = canvas.getContext("2d");
-    context.drawImage(bitmap, 0, 0, bitmap.width, bitmap.height);
-    const image = canvas.toDataURL();
-
-    // this turns the base 64 string to a [File] object
-    const res = await fetch(image);
-    const buff = await res.arrayBuffer();
-    // clone so we can rename, and put into array for easy proccessing
-    const file = [
-      new File([buff], `${filename}.png`, {
-        type: "image/png",
-      }),
-    ];
-
-    await uploadFile(file[0], `${filename}.png`);
-
-    toggleRecording();
-  }
-
-  function stopRecording() {}
-
-  function toggleRecording() {
-    isRecording = !isRecording;
-    if (isRecording) {
-      startRecording();
-    } else {
-      stopRecording();
-    }
-  }
-
-  async function uploadFile(file, filename) {
-    let comparison = _.cloneDeep($internal);
-    let f_id = Math.random().toString(36).substring(7);
-    comparison.selected_files = comparison.selected_files || [];
-    comparison.selected_files.push({
-      file,
-      filename,
-      f_id,
-    });
-    if (!deepEqual(comparison, $internal)) {
-      $internal = comparison;
-    }
-
-    let upload_res = await form.uploadFiles([file]);
-    let { uploaded_files } = upload_res || {};
-
-    let comparison2 = _.cloneDeep($internal);
-    if (_.isArray(uploaded_files)) {
-      uploaded_files.forEach((a) => {
-        a.f_id = f_id;
-        form.appendAttachment(a);
-        comparison2.uploaded_files.push(a);
-      });
-    }
-
-    if (!uploaded_files?.length) {
-      comparison2.failed_files.push({
-        file,
-        filename,
-        f_id,
-      });
-    }
-
-    comparison2.selected_files = comparison2.selected_files.filter((f) => {
-      return f.f_id !== f_id;
-    });
-
-    if (!deepEqual(comparison2, $internal)) {
-      $internal = comparison2;
-    }
-  }
-
-  function removeFile(item) {
-    let comparison = _.cloneDeep($internal);
-    comparison.selected_files = comparison.selected_files?.filter((f) => f.f_id !== item.file.f_id);
-    comparison.failed_files = comparison.failed_files?.filter((f) => f.f_id !== item.file.f_id);
-    comparison.uploaded_files = comparison.uploaded_files?.filter((f) => f.f_id !== item.file.f_id);
-
-    if (!deepEqual(comparison, $internal)) {
-      $internal = comparison;
-    }
-
-    if (item?.is_uploaded) {
-      form.removeAttachment(item?.file);
-    }
-  }
-
-  $: buttonLabel = isRecording ? "Cancel" : "Take screenshot";
-
-  $: fileList = (
-    ($internal?.uploaded_files || [])?.map((f) => {
-      return {
-        file: f,
-        is_uploaded: true,
-      };
-    }) || []
-  )
-    .concat(
-      $internal?.selected_files?.map((f) => {
-        return {
-          file: f,
-          is_selected: true,
-        };
-      }) || []
-    )
-    .concat(
-      $internal?.failed_files?.map((f) => {
-        return {
-          file: f,
-          is_failed: true,
-        };
-      }) || []
-    );
-</script>
-
-{#if $internal}
-  <div class="flex flex-col w-full text-surface-900">
-    <Label for="input_{state_key}" class="block py-2 {hide_label ? 'hidden' : ''}">
-      {label}
-    </Label>
-    <div>
-      <Button variant={isRecording ? "destructive" : "default"} on:click={toggleRecording}>
-        {#if isRecording}
-          <i class="fa-solid fa-camera-slash" />
-        {:else}
-          <i class="fa-solid fa-camera" />
-        {/if}
-        {buttonLabel}
-      </Button>
-    </div>
-    <div class="w-full mt-2">
-      {#each fileList as item}
-        <div class="w-full flex flex-row">
-          {#if item.is_uploaded}
-            <div class="px-2">
-              <i class="fa fa-check text-success-500" />
-            </div>
-          {:else if item.is_failed}
-            <div class="px-2 space-x-2 flex items-center text-danger-400">
-              <i class="fa-regular fa-triangle-exclamation" />
-              <p class="hidden md:block text-fluid-md">Failed</p>
-            </div>
-          {:else}
-            <div class="px-2 space-x-2 flex items-center text-surface-500">
-              <p class="hidden md:block text-fluid-md" />
-              <i class="fa fa-pulse fa-spinner" />
-            </div>
-          {/if}
-          <div class="w-full shrink py-1 pl-2 truncate border border-surface-200 rounded-sm">
-            <p class="text-surface-800 text-fluid-md">
-              {item?.file?.filename ?? item?.file?.name ?? item?.file?.path}
-            </p>
-          </div>
-          <button
-            type="button"
-            class="shrink-0 ml-1 p-1 px-2 fa-solid fa-2xs fa-x bg-surface-0 rounded-full border border-surface-0 hover:border-warning-500 hover:text-warning-500"
-            on:click={() => {
-              removeFile(item);
-            }}
-          />
-        </div>
-      {/each}
-    </div>
-  </div>
-  {#if validationMessage}
-    <p class="text-label {!isValid ? `text-danger-500` : `text-success-500`}">
-      {validationMessage}
-    </p>
-  {/if}
-{/if}

package/dist/fields/components/Screenshot.svelte.d.ts

@@ -1,27 +0,0 @@
-/** @typedef {typeof __propDef.props}  ScreenshotProps */
-/** @typedef {typeof __propDef.events}  ScreenshotEvents */
-/** @typedef {typeof __propDef.slots}  ScreenshotSlots */
-export default class Screenshot extends SvelteComponent<{
-    form: any;
-    field: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type ScreenshotProps = typeof __propDef.props;
-export type ScreenshotEvents = typeof __propDef.events;
-export type ScreenshotSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        form: any;
-        field: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};