@uibit/video 0.1.0

package/dist/frameworks/svelte/index.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import '@uibit/video';
+  import type { Video as HTMLElementClass } from '@uibit/video';
+  
+  let {
+    poster = undefined,
+      controls = undefined,
+      children
+  } = $props<{
+    children?: any;
+    poster?: string;
+    controls?: boolean;
+  
+  }>();
+  
+  let elementRef: HTMLElementClass | null = $state(null);
+  
+  $effect(() => {
+    if (elementRef && poster !== undefined) {
+      elementRef.poster = poster;
+    }
+    if (elementRef && controls !== undefined) {
+      elementRef.controls = controls;
+    }
+  });
+  
+</script>
+
+<uibit-video bind:this={elementRef} {...$$restProps}>
+
+  {#if children}
+    {@render children()}
+  {:else}
+    <slot />
+  {/if}
+</uibit-video>

package/dist/frameworks/vue/index.ts

@@ -0,0 +1,23 @@
+import { defineComponent, h } from 'vue';
+import type { Video as HTMLElementClass } from '@uibit/video';
+import '@uibit/video';
+
+export const Video = defineComponent({
+  name: 'Video',
+  props: {
+    poster: { type: [String, Number, Boolean, Array, Object] as any },
+    controls: { type: [String, Number, Boolean, Array, Object] as any }
+  },
+  emits: [],
+  setup(props, { slots, emit }) {
+    return () => {
+      const eventListeners: Record<string, any> = {};
+
+
+      return h('uibit-video', {
+        ...props,
+        ...eventListeners
+      }, slots.default?.());
+    };
+  }
+});

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default, Video } from './video';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AACzC,cAAc,SAAS,CAAC"}

package/dist/index.js

@@ -0,0 +1,3 @@
+export { default, Video } from './video';
+export * from './types';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AACzC,cAAc,SAAS,CAAC"}

package/dist/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=styles.d.ts.map

package/dist/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA8RlB,CAAC"}

package/dist/styles.js

@@ -0,0 +1,289 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    width: 100%;
+    font-size: var(--uibit-video-font-size, var(--uibit-font-size-sm, 0.875rem));
+    font-family: var(--uibit-video-font-family, inherit);
+    --uibit-video-radius: 0;
+    --uibit-video-bg: #000000;
+    --uibit-video-focus-color: #ffffff;
+    --uibit-video-control-color: #ffffff;
+  }
+
+  .player-container {
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+    background-color: var(--uibit-video-bg);
+    border-radius: var(--uibit-video-radius);
+    aspect-ratio: 16 / 9;
+    user-select: none;
+    outline: none;
+  }
+
+  .player-container:focus-visible {
+    outline: 0.125rem solid var(--uibit-video-focus-color);
+    outline-offset: 0.125rem;
+  }
+
+  ::slotted(video) {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    display: block;
+  }
+
+  ::slotted(iframe) {
+    width: 100%;
+    height: 100%;
+    border: 0;
+    display: block;
+  }
+
+  .iframe-container {
+    width: 100%;
+    height: 100%;
+  }
+
+  /* ── Overlay / Poster ────────────────────────────────────────── */
+
+  .poster-overlay {
+    position: absolute;
+    inset: 0;
+    background-size: cover;
+    background-position: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10;
+    transition: opacity 0.3s ease;
+  }
+
+  /* Premium play button - circular, translucent white background with blur and cut-out see-through play icon */
+  .center-play-btn {
+    position: relative;
+    z-index: 11;
+    width: 4.5rem;
+    height: 4.5rem;
+    border-radius: 9999px;
+    background: rgba(255, 255, 255, 0.75);
+    backdrop-filter: blur(0.5rem);
+    -webkit-backdrop-filter: blur(0.5rem);
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: none;
+    opacity: 0.9;
+    transition: opacity 0.2s ease, background-color 0.2s ease;
+    
+    /* Mask out the play icon so it is see-through */
+    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><mask id='m'><rect x='0' y='0' width='100' height='100' fill='white'/><polygon points='38,28 75,50 38,72' fill='black'/></mask><circle cx='50' cy='50' r='50' fill='white' mask='url(%23m)'/></svg>") no-repeat center / contain;
+    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><mask id='m'><rect x='0' y='0' width='100' height='100' fill='white'/><polygon points='38,28 75,50 38,72' fill='black'/></mask><circle cx='50' cy='50' r='50' fill='white' mask='url(%23m)'/></svg>") no-repeat center / contain;
+  }
+
+  .center-play-btn:hover {
+    opacity: 1;
+    background: rgba(255, 255, 255, 0.9);
+  }
+
+  .center-play-btn:active {
+    opacity: 0.8;
+  }
+
+  /* ── Minimal Single-Row Controls Bar ────────────────────────── */
+
+  .controls-bar {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 20;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent); /* Vignette gradient */
+    padding: 1.25rem 1.5rem;
+    color: var(--uibit-video-control-color);
+    opacity: 0;
+    transition: opacity 0.2s ease;
+  }
+
+  /* Show controls on hover, focus, or when paused */
+  .player-container:hover .controls-bar,
+  .player-container:focus-within .controls-bar,
+  .player-container.paused .controls-bar,
+  .player-container.seeking .controls-bar {
+    opacity: 1;
+  }
+
+  .control-btn {
+    background: transparent;
+    border: none;
+    color: inherit;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem; /* Larger hit target (40px) */
+    height: 2.5rem; /* Larger hit target (40px) */
+    padding: 0;
+    opacity: 0.8;
+    transition: transform 0.2s ease, opacity 0.2s ease;
+  }
+
+  .control-btn:hover {
+    opacity: 1;
+    transform: scale(1.05);
+  }
+
+  .control-btn:active {
+    transform: scale(0.95);
+  }
+
+  .control-btn:focus-visible {
+    outline: 0.125rem solid #ffffff;
+  }
+
+  .control-btn svg {
+    width: 1.125rem;
+    height: 1.125rem;
+  }
+
+  .time-display {
+    font-size: 0.75rem;
+    font-variant-numeric: tabular-nums;
+    font-weight: 500;
+    opacity: 0.9;
+    white-space: nowrap;
+  }
+
+  /* ── Timeline (Flex-Grow) ────────────────────────────────────── */
+
+  .timeline-container {
+    flex-grow: 1;
+    height: 2rem; /* Larger hit target (32px height) */
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    position: relative;
+  }
+
+  .timeline-bar {
+    width: 100%;
+    height: 0.125rem; /* Ultra thin line */
+    background: rgba(255, 255, 255, 0.25);
+    position: relative;
+    transition: height 0.15s ease;
+  }
+
+  .timeline-container:hover .timeline-bar {
+    height: 0.25rem;
+  }
+
+  .timeline-progress {
+    height: 100%;
+    background: #ffffff;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+
+  /* Handle is circular, borderless, shadowless */
+  .timeline-handle {
+    width: 0.625rem;
+    height: 0.625rem;
+    border-radius: 9999px;
+    background: #ffffff;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%) scale(0);
+    transition: transform 0.15s ease;
+    box-shadow: none;
+    border: none;
+  }
+
+  .timeline-container:hover .timeline-handle,
+  .timeline-container:active .timeline-handle {
+    transform: translate(-50%, -50%) scale(1);
+  }
+
+  /* ── Volume Slider ───────────────────────────────────────────── */
+
+  .volume-container {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .volume-slider-wrap {
+    width: 0;
+    overflow: hidden;
+    height: 2rem; /* Matches button height for hit alignment */
+    display: flex;
+    align-items: center;
+    transition: width 0.2s ease;
+  }
+
+  .volume-container:hover .volume-slider-wrap {
+    width: 3.5rem;
+  }
+
+  .volume-slider-container {
+    width: 100%;
+    height: 2rem; /* Larger hit target (32px height) */
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    position: relative;
+    outline: none;
+    padding: 0 0.3125rem; /* Inset track slightly so the handle does not clip on the edges */
+    box-sizing: border-box;
+  }
+
+  .volume-slider-bar {
+    width: 100%;
+    height: 0.125rem; /* Ultra thin line */
+    background: rgba(255, 255, 255, 0.25);
+    position: relative;
+    transition: height 0.15s ease;
+  }
+
+  .volume-container:hover .volume-slider-bar,
+  .volume-slider-container:hover .volume-slider-bar {
+    height: 0.25rem;
+  }
+
+  .volume-slider-progress {
+    height: 100%;
+    background: #ffffff;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+
+  .volume-slider-handle {
+    width: 0.625rem;
+    height: 0.625rem;
+    border-radius: 9999px;
+    background: #ffffff;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%) scale(0);
+    transition: transform 0.15s ease;
+    box-shadow: none;
+    border: none;
+  }
+
+  .volume-container:hover .volume-slider-handle {
+    transform: translate(-50%, -50%) scale(1);
+  }
+
+  /* Hide raw slots */
+  .hidden-slot-wrap {
+    display: none;
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8RxB,CAAC"}

package/dist/types.d.ts

@@ -0,0 +1,7 @@
+import type Video from './video';
+declare global {
+    interface HTMLElementTagNameMap {
+        'uibit-video': Video;
+    }
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AAEjC,OAAO,CAAC,MAAM,CAAC;IACf,UAAU,qBAAqB;QAAG,aAAa,EAAE,KAAK,CAAC;KACtD;CACA"}

package/dist/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/dist/video.d.ts

@@ -0,0 +1,59 @@
+import type { PropertyValues } from 'lit';
+import { UIBitElement } from '@uibit/core';
+/**
+ * Enhanced custom video component that wraps a native `<video>` or `<iframe>` element.
+ * Provides custom interactive player controls with Scandinavian design aesthetics.
+ *
+ * @slot - The default slot where the native `<video>` or `<iframe>` element is placed.
+ *
+ * @cssprop [--uibit-video-radius=0.5rem] - Border radius of the video player.
+ * @cssprop [--uibit-video-bg=#000000] - Background color of the video player.
+ * @cssprop [--uibit-video-focus-color=#000000] - Focus outline color.
+ * @cssprop [--uibit-video-control-bg=rgba(17, 24, 39, 0.85)] - Background of the control bar.
+ * @cssprop [--uibit-video-control-border=rgba(255, 255, 255, 0.1)] - Border of the control bar.
+ * @cssprop [--uibit-video-control-color=#ffffff] - Color of icons and text.
+ */
+export declare class Video extends UIBitElement {
+    static styles: import("lit").CSSResult;
+    /** Poster image URL. Also used as background for iframes before playing. */
+    poster: string;
+    /** Show player controls. */
+    controls: boolean;
+    private _isPlaying;
+    private _currentTime;
+    private _duration;
+    private _volume;
+    private _isMuted;
+    private _isFullscreen;
+    private _isSeeking;
+    private _isVolumeSeeking;
+    private _isIframeMode;
+    private _iframePlaying;
+    private _containerEl?;
+    private _videoEl;
+    private _iframeEl;
+    connectedCallback(): void;
+    firstUpdated(changedProperties: PropertyValues): void;
+    private _detectSlottedElements;
+    private _setupVideoListeners;
+    private _onSlotChange;
+    togglePlay(): void;
+    private _playIframe;
+    toggleMute(): void;
+    private _onVolumePointerDown;
+    private _onVolumePointerMove;
+    private _onVolumePointerUp;
+    private _updateVolumeFromEvent;
+    toggleFullscreen(): void;
+    private _onFullscreenChange;
+    private _onTimelinePointerDown;
+    private _onTimelinePointerMove;
+    private _onTimelinePointerUp;
+    private _updateTimelineFromEvent;
+    private _onKeyDown;
+    private _formatTime;
+    private _onPlayerClick;
+    render(): import("lit").TemplateResult<1>;
+}
+export default Video;
+//# sourceMappingURL=video.d.ts.map

package/dist/video.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"video.d.ts","sourceRoot":"","sources":["../src/video.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1C,OAAO,EAA2C,YAAY,EAAE,MAAM,aAAa,CAAC;AAKpF;;;;;;;;;;;;GAYG;AACH,qBACa,KAAM,SAAQ,YAAY;IACrC,MAAM,CAAC,MAAM,0BAAU;IAEvB,4EAA4E;IAChD,MAAM,SAAM;IAExC,4BAA4B;IACC,QAAQ,UAAQ;IAEpC,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,SAAS,CAAK;IACtB,OAAO,CAAC,OAAO,CAAK;IACpB,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,gBAAgB,CAAS;IACjC,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,cAAc,CAAS;IAEZ,OAAO,CAAC,YAAY,CAAC,CAAc;IAE/D,OAAO,CAAC,QAAQ,CAAiC;IACjD,OAAO,CAAC,SAAS,CAAkC;IAEnD,iBAAiB,SAGhB;IAED,YAAY,CAAC,iBAAiB,EAAE,cAAc,QAG7C;IAED,OAAO,CAAC,sBAAsB;IA8B9B,OAAO,CAAC,oBAAoB;IAuC5B,OAAO,CAAC,aAAa;IAMrB,UAAU,SAYT;IAED,OAAO,CAAC,WAAW;IAcnB,UAAU,SAIT;IAED,OAAO,CAAC,oBAAoB;IAO5B,OAAO,CAAC,oBAAoB;IAK5B,OAAO,CAAC,kBAAkB;IAQ1B,OAAO,CAAC,sBAAsB;IAY9B,gBAAgB,SASf;IAED,OAAO,CAAC,mBAAmB;IAM3B,OAAO,CAAC,sBAAsB;IAQ9B,OAAO,CAAC,sBAAsB;IAK9B,OAAO,CAAC,oBAAoB;IAQ5B,OAAO,CAAC,wBAAwB;IAWhC,OAAO,CAAC,UAAU;IAiClB,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,cAAc;IAUtB,MAAM,oCA+HL;CACF;eAEc,KAAK"}