sveltekit-ui 1.1.74 → 1.1.76

package/src/lib/Components/YoutubeVideo/index.svelte

@@ -1,164 +0,0 @@
-<script>
-  import LoadingWheel from "$lib/Components/LoadingWheel/index.svelte"
-  import { onMount } from "svelte"
-
-  let { manager } = $props()
-
-  onMount(() => {
-    if (typeof manager?.render_video === "function") {
-      manager.render_video()
-    }
-  })
-</script>
-
-<div id={manager?.selector_id}>
-  {#if manager?.error_message}
-    <div class="failed_to_load_box">
-      <p>{manager?.error_message}</p>
-      <a href={manager?.youtube_url} target="_blank" rel="noreferrer">{manager?.youtube_url}</a>
-    </div>
-  {:else if manager?.use_poster_preview && !manager?.is_iframe_active}
-    <button
-      type="button"
-      class="video_preview_button"
-      aria-label={`Play ${manager?.title}`}
-      onclick={() => manager?.activate_video?.()}
-    >
-      <img
-        class="video_preview_image"
-        src={manager?.poster_src}
-        alt={manager?.title}
-        loading="lazy"
-        onerror={manager?.handle_poster_error}
-      />
-      <span class="video_preview_overlay">
-        <span class="video_preview_play">
-          <svg viewBox="0 0 24 24" aria-hidden="true">
-            <path d="M8 6v12l10-6z"></path>
-          </svg>
-        </span>
-      </span>
-    </button>
-  {:else}
-    <div class="video_container" style={`border-radius: ${manager?.border_radius}rem;`}>
-      {#if manager?.is_loading}
-        <div class="loading_box">
-          <LoadingWheel size={8} />
-          <p>Loading Youtube Video</p>
-        </div>
-      {/if}
-
-      <div class="video_inner_container">
-        <iframe
-          class:is_hidden={!!manager?.error_message}
-          src={manager?.embed_src}
-          title={manager?.title}
-          loading="lazy"
-          frameborder="0"
-          allow="autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-          allowfullscreen
-        ></iframe>
-      </div>
-    </div>
-  {/if}
-</div>
-
-<style>
-  .video_container {
-    position: relative;
-    width: 100%;
-    overflow: hidden;
-  }
-
-  .video_inner_container {
-    position: relative;
-    padding-bottom: 56.25%;
-    height: 0;
-    overflow: hidden;
-  }
-
-  .video_inner_container iframe {
-    position: absolute;
-    inset: 0;
-    width: 100%;
-    height: 100%;
-  }
-
-  .video_preview_button {
-    position: relative;
-    display: block;
-    width: 100%;
-    border: 0;
-    padding: 0;
-    background: transparent;
-    border-radius: 1rem;
-    overflow: hidden;
-    cursor: pointer;
-  }
-
-  .video_preview_image {
-    display: block;
-    width: 100%;
-    aspect-ratio: 16 / 9;
-    object-fit: cover;
-  }
-
-  .video_preview_overlay {
-    position: absolute;
-    inset: 0;
-    display: grid;
-    place-items: center;
-    background: linear-gradient(to top, rgb(0 0 0 / 0.28), rgb(0 0 0 / 0.06));
-    transition: background 0.2s ease;
-  }
-
-  .video_preview_button:hover .video_preview_overlay,
-  .video_preview_button:focus-visible .video_preview_overlay {
-    background: linear-gradient(to top, rgb(0 0 0 / 0.42), rgb(0 0 0 / 0.12));
-  }
-
-  .video_preview_play {
-    display: grid;
-    place-items: center;
-    width: 4.25rem;
-    height: 4.25rem;
-    border-radius: 999px;
-    background: rgb(255 255 255 / 0.94);
-    color: #111827;
-    box-shadow: 0 0.5rem 2rem rgb(0 0 0 / 0.18);
-  }
-
-  .video_preview_play svg {
-    width: 1.8rem;
-    height: 1.8rem;
-    fill: currentColor;
-    transform: translateX(0.08rem);
-  }
-
-  .loading_box {
-    width: 100%;
-    height: 30rem;
-    display: grid;
-    place-items: center;
-    background-color: var(--shadow2-t);
-    border-radius: 1rem;
-    margin-top: 2rem;
-  }
-
-  .failed_to_load_box {
-    margin: 1rem 0;
-    background-color: oklch(var(--l8-t) var(--c16) var(--h3) / var(--o3));
-    border-radius: 1rem;
-    padding: 1rem;
-  }
-
-  .failed_to_load_box p {
-    color: oklch(var(--l3-t) var(--c16) var(--h3));
-  }
-
-  .is_hidden {
-    max-width: 0;
-    max-height: 0;
-    overflow: hidden;
-  }
-</style>

package/src/lib/Components/YoutubeVideo/index.svelte.js

@@ -1,133 +0,0 @@
-import { create_unique_id } from "$lib/client/index.js"
-
-export function create_youtube_video_manager(config) {
-  const id = create_unique_id(null, 20)
-
-  let theme = $derived(config?.is_dark_theme ? "dark" : "light")
-  let selector_id = $derived(config?.selector_id ?? `youtube_video_${id}`)
-  let use_poster_preview = $derived(config?.use_poster_preview ?? false)
-  let autoplay_on_activate = $derived(config?.autoplay_on_activate ?? true)
-  let border_radius = $derived(config?.border_radius ?? 1)
-  let title = $derived(config?.title ?? "YouTube video player")
-
-  let is_loading = $state(false)
-  let error_message = $state("")
-  let is_iframe_active = $state(!(config?.use_poster_preview ?? true))
-
-  function handle_poster_error(e) {
-    if (manager?.poster_fallback_src && e.currentTarget.src !== manager.poster_fallback_src) {
-      e.currentTarget.src = manager.poster_fallback_src
-    }
-  }
-
-  function get_thumbnail_src(quality = "maxresdefault") {
-    if (!config?.video_id) return null
-    return `https://img.youtube.com/vi/${config.video_id}/${quality}.jpg`
-  }
-
-  async function render_video() {
-    error_message = ""
-
-    if (!config?.video_id) {
-      error_message = "YouTube video not found or failed to load."
-      return
-    }
-
-    is_loading = true
-
-    await new Promise((resolve) => {
-      const img = new Image()
-
-      img.onload = function () {
-        if (this.naturalWidth === 120) {
-          error_message = "YouTube video not found or failed to load."
-        } else {
-          error_message = ""
-        }
-        is_loading = false
-        resolve()
-      }
-
-      img.onerror = function () {
-        error_message = "YouTube video not found or failed to load."
-        is_loading = false
-        resolve()
-      }
-
-      img.src = get_thumbnail_src("hqdefault")
-    })
-  }
-
-  function activate_video() {
-    if (!config?.video_id || error_message) return
-    is_iframe_active = true
-  }
-
-  function deactivate_video() {
-    is_iframe_active = !use_poster_preview
-  }
-
-  function resize_video() {
-    // CSS handles sizing now.
-  }
-
-  return {
-    id,
-    get selector_id() {
-      return selector_id
-    },
-    get video_id() {
-      return config?.video_id
-    },
-    get theme() {
-      return theme
-    },
-    get title() {
-      return title
-    },
-    get border_radius() {
-      return border_radius
-    },
-    get is_loading() {
-      return is_loading
-    },
-    get error_message() {
-      return error_message
-    },
-    get use_poster_preview() {
-      return use_poster_preview
-    },
-    get is_iframe_active() {
-      return is_iframe_active
-    },
-    get poster_src() {
-      return config?.poster_src ?? get_thumbnail_src("maxresdefault")
-    },
-    get poster_fallback_src() {
-      return config?.poster_fallback_src ?? get_thumbnail_src("hqdefault")
-    },
-    get youtube_url() {
-      return config?.video_id ? `https://youtu.be/${config.video_id}` : ""
-    },
-    get embed_src() {
-      if (!config?.video_id) return ""
-
-      const params = new URLSearchParams({
-        rel: "0",
-      })
-
-      const shouldAutoplay = use_poster_preview ? is_iframe_active && autoplay_on_activate : !!config?.autoplay
-
-      if (shouldAutoplay) {
-        params.set("autoplay", "1")
-      }
-
-      return `https://www.youtube.com/embed/${config.video_id}?${params.toString()}`
-    },
-    render_video,
-    activate_video,
-    deactivate_video,
-    resize_video,
-    handle_poster_error,
-  }
-}

package/src/lib/actions/draggable.js

@@ -1,49 +0,0 @@
-export default function draggable(node) {
-  let is_dragging = false
-  let left
-  let top
-
-  function handle_pointerdown(e) {
-    is_dragging = true
-    top = JSON.parse(node.style.top.replace(/[^\d.-]/g, ""))
-    left = JSON.parse(node.style.left.replace(/[^\d.-]/g, ""))
-  }
-
-  function handle_pointerup(e) {
-    is_dragging = false
-  }
-
-  function handle_pointermove(e) {
-    if (is_dragging) {
-      left += e.movementX
-      top += e.movementY
-      node.style.top = `${top}px`
-      node.style.left = `${left}px`
-      node.dispatchEvent(
-        new CustomEvent("drag", { detail: { top: top, left: left } })
-      )
-    }
-  }
-
-  node.style.position = "absolute"
-  node.style.cursor = "move"
-  node.style.userSelect = "none"
-  node.style["touch-action"] = "none"
-  node.style["-webkit-touch-callout"] = "none"
-  node.style["-ms-touch-action"] = "none"
-  node.style["-moz-user-select"] = "none"
-  node.style["-webkit-user-select"] = "none"
-  node.style["-ms-user-select"] = "none"
-
-  node.addEventListener("pointerdown", handle_pointerdown)
-  window.addEventListener("pointerup", handle_pointerup)
-  window.addEventListener("pointermove", handle_pointermove)
-
-  return {
-    destroy() {
-      node.removeEventListener("pointerdown", handle_pointerdown)
-      window.removeEventListener("pointerup", handle_pointerup)
-      window.removeEventListener("pointermove", handle_pointermove)
-    },
-  }
-}

package/src/lib/actions/index.js

@@ -1,24 +0,0 @@
-export function intersection_observer(node) {
-  let observer = null
-  observer = new IntersectionObserver(
-    (entries) => {
-      entries.forEach((entry) => {
-        if (entry.isIntersecting) {
-          node.dispatchEvent(new CustomEvent("appeared"))
-        } else {
-          node.dispatchEvent(new CustomEvent("disappeared"))
-        }
-      })
-    },
-    { threshold: 1 }
-  )
-  observer.observe(node)
-
-  return {
-    destroy() {
-      if (observer) {
-        observer.disconnect()
-      }
-    },
-  }
-}

package/src/lib/actions/no_spaces.js

@@ -1,33 +0,0 @@
-export default function no_spaces(node, is_no_spaces) {
-  function handle_input(e) {
-    if (is_no_spaces) {
-      const cleaned_val = e.target.value.replace(/\s+/g, "")
-      if (cleaned_val !== e.target.value) {
-        e.target.value = ""
-        e.target.value = cleaned_val
-        node.dispatchEvent(
-          new CustomEvent("clean_val", { detail: cleaned_val })
-        )
-      }
-    }
-  }
-
-  function handle_keydown(e) {
-    if (is_no_spaces && e.which === 32) {
-      e.preventDefault()
-    }
-  }
-
-  node.addEventListener("input", handle_input)
-  node.addEventListener("keydown", handle_keydown)
-
-  return {
-    update(new_is_no_spaces) {
-      is_no_spaces = new_is_no_spaces
-    },
-    destroy() {
-      node.removeEventListener("input", handle_input)
-      node.removeEventListener("keydown", handle_keydown)
-    },
-  }
-}

package/src/lib/actions/numbers_only.js

@@ -1,26 +0,0 @@
-export default function numbers_only(node) {
-  function handle_input(e) {
-    const cleaned_val = e.target.value.replace(/\D+/g, "")
-    if (cleaned_val !== e.target.value) {
-      e.target.value = ""
-      e.target.value = cleaned_val
-      node.dispatchEvent(new CustomEvent("clean_val", { detail: cleaned_val }))
-    }
-  }
-
-  function handle_keydown(e) {
-    if (e.which === 32) {
-      e.preventDefault()
-    }
-  }
-
-  node.addEventListener("input", handle_input)
-  node.addEventListener("keydown", handle_keydown)
-
-  return {
-    destroy() {
-      node.removeEventListener("input", handle_input)
-      node.removeEventListener("keydown", handle_keydown)
-    },
-  }
-}

package/src/lib/actions/scroll_y.js

@@ -1,28 +0,0 @@
-export default function scroll_y(node) {
-  const handle_wheel = (e) => {
-    node.scrollTop = node.scrollTop + e.deltaY
-  }
-
-  let touch_start_y
-  let node_el_scroll_top_start_y
-  const handle_touchstart = (e) => {
-    touch_start_y = Math.round(e.targetTouches[0].clientY)
-    node_el_scroll_top_start_y = node.scrollTop
-  }
-
-  const handle_touchmove = (e) => {
-    node.scrollTop = node_el_scroll_top_start_y + touch_start_y - Math.round(e.targetTouches[0].clientY)
-  }
-
-  node.addEventListener("wheel", handle_wheel, { passive: true })
-  node.addEventListener("touchmove", handle_touchmove)
-  node.addEventListener("touchstart", handle_touchstart)
-
-  return {
-    destroy() {
-      node.removeEventListener("wheel", handle_wheel)
-      node.removeEventListener("touchmove", handle_touchmove)
-      node.removeEventListener("touchstart", handle_touchstart)
-    },
-  }
-}

package/src/lib/actions/stop_scroll_propagation_y.js

@@ -1,42 +0,0 @@
-export default function stop_scroll_propagation_y(node) {
-  const handle_wheel = (e) => {
-    let dy
-    if (e.deltaY) {
-      dy = e.deltaY
-    } else if (e.wheelDelta) {
-      dy = e.wheelDelta
-    }
-    check_to_prevent(e, dy)
-  }
-
-  let prev_touch_y
-  const handle_touchstart = (e) => {
-    prev_touch_y = e.changedTouches[0].clientY
-  }
-  const handle_touchmove = (e) => {
-    let dy = prev_touch_y - e.changedTouches[0].clientY
-    check_to_prevent(e, dy)
-    prev_touch_y = e.changedTouches[0].clientY
-  }
-
-  function check_to_prevent(e, dy) {
-    if (node.scrollTop === 0 && dy < 0) {
-      e.stopPropagation()
-      if (e.cancelable) e.preventDefault()
-    } else if (node.scrollTop === node.scrollHeight - node.clientHeight && dy > 0) {
-      e.stopPropagation()
-      if (e.cancelable) e.preventDefault()
-    }
-  }
-  node.addEventListener("wheel", handle_wheel, { passive: true })
-  node.addEventListener("touchmove", handle_touchmove)
-  node.addEventListener("touchstart", handle_touchstart)
-
-  return {
-    destroy() {
-      node.removeEventListener("wheel", handle_wheel)
-      node.removeEventListener("touchmove", handle_touchmove)
-      node.removeEventListener("touchstart", handle_touchstart)
-    },
-  }
-}