@uibit/video 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 UIBit Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,25 @@
+# Video
+
+[Interactive Demonstration](https://rawlings.github.io/uibit/components/video)
+
+Video provides a customizable web component wrapper for native `<video>` elements and `<iframe>` video embeds. It replaces standard browser control interfaces with a sleek grayscale control bar featuring timeline scrubbing, volume controls, and fullscreen actions.
+
+## Value Delivery
+
+- **Unified Aesthetics** – Wraps both native video files and third-party iframe embeds (e.g. YouTube or Vimeo) under a single, cohesive design style.
+- **Enhanced Overlay Interaction** – Displays a custom poster preview and circular play button that transitions to live playback on user interaction.
+- **Accessible Controls** – Implements responsive keyboard navigation for playback control, volume adjusting, and fullscreen triggers.
+
+## Ideal Applications
+
+- **Product Showcases** – High-resolution feature clips, animations, and video hero slots.
+- **Case Studies & Testimonials** – Client interviews or background reviews hosted on third-party video networks.
+- **Tutorials & Guides** – Embedded step-by-step videos inside help files or documentation articles.
+
+## Further Information
+
+Detailed design guidelines, customizable attributes, and integration examples are available on our documentation site.
+
+## Changelog
+
+Please see the [Changelog](CHANGELOG.md) for version history.

package/custom-elements.json

@@ -0,0 +1,488 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "default",
+            "module": "./video"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Video",
+          "declaration": {
+            "name": "Video",
+            "module": "./video"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/types"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "default": "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; } `"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "styles",
+          "declaration": {
+            "name": "styles",
+            "module": "src/styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/types.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/video.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Enhanced custom video component that wraps a native `<video>` or `<iframe>` element.\nProvides custom interactive player controls with Scandinavian design aesthetics.",
+          "name": "Video",
+          "cssProperties": [
+            {
+              "description": "Border radius of the video player.",
+              "name": "--uibit-video-radius",
+              "default": "0.5rem"
+            },
+            {
+              "description": "Background color of the video player.",
+              "name": "--uibit-video-bg",
+              "default": "#000000"
+            },
+            {
+              "description": "Focus outline color.",
+              "name": "--uibit-video-focus-color",
+              "default": "#000000"
+            },
+            {
+              "description": "Background of the control bar.",
+              "name": "--uibit-video-control-bg",
+              "default": "rgba(17, 24, 39, 0.85)"
+            },
+            {
+              "description": "Border of the control bar.",
+              "name": "--uibit-video-control-border",
+              "default": "rgba(255, 255, 255, 0.1)"
+            },
+            {
+              "description": "Color of icons and text.",
+              "name": "--uibit-video-control-color",
+              "default": "#ffffff"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The default slot where the native `<video>` or `<iframe>` element is placed.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "poster",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Poster image URL. Also used as background for iframes before playing.",
+              "attribute": "poster"
+            },
+            {
+              "kind": "field",
+              "name": "controls",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Show player controls.",
+              "attribute": "controls"
+            },
+            {
+              "kind": "field",
+              "name": "_isPlaying",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_currentTime",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "_duration",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "_volume",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "1"
+            },
+            {
+              "kind": "field",
+              "name": "_isMuted",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_isFullscreen",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_isSeeking",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_isVolumeSeeking",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_isIframeMode",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_iframePlaying",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_containerEl",
+              "type": {
+                "text": "HTMLElement | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_videoEl",
+              "type": {
+                "text": "HTMLVideoElement | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "_iframeEl",
+              "type": {
+                "text": "HTMLIFrameElement | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "method",
+              "name": "_detectSlottedElements",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_setupVideoListeners",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_onSlotChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "togglePlay"
+            },
+            {
+              "kind": "method",
+              "name": "_playIframe",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "toggleMute"
+            },
+            {
+              "kind": "method",
+              "name": "_onVolumePointerDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "PointerEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_onVolumePointerMove",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "PointerEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_onVolumePointerUp",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "PointerEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_updateVolumeFromEvent",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "PointerEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "toggleFullscreen"
+            },
+            {
+              "kind": "method",
+              "name": "_onFullscreenChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_onTimelinePointerDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "PointerEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_onTimelinePointerMove",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "PointerEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_onTimelinePointerUp",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "PointerEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_updateTimelineFromEvent",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "PointerEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_onKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_formatTime",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "sec",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_onPlayerClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            }
+          ],
+          "attributes": [
+            {
+              "name": "poster",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Poster image URL. Also used as background for iframes before playing.",
+              "fieldName": "poster"
+            },
+            {
+              "name": "controls",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Show player controls.",
+              "fieldName": "controls"
+            }
+          ],
+          "superclass": {
+            "name": "UIBitElement",
+            "package": "@uibit/core"
+          },
+          "tagName": "uibit-video",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "Video",
+          "declaration": {
+            "name": "Video",
+            "module": "src/video.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "uibit-video",
+          "declaration": {
+            "name": "Video",
+            "module": "src/video.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Video",
+            "module": "src/video.ts"
+          }
+        }
+      ]
+    }
+  ]
+}

package/dist/frameworks/angular/index.ts

@@ -0,0 +1,27 @@
+import { Component, ChangeDetectionStrategy, ElementRef, input, effect, booleanAttribute } from '@angular/core';
+import '@uibit/video';
+import type { Video as HTMLElementClass } from '@uibit/video';
+
+@Component({
+  selector: 'uibit-video',
+  template: '<ng-content></ng-content>',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true
+})
+export class NgxVideo {
+  constructor(private el: ElementRef<HTMLElementClass>) {
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.poster = this.poster();
+      }
+    });
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.controls = this.controls();
+      }
+    });
+  }
+
+  readonly poster = input<string, any>('');
+  readonly controls = input<boolean, any>(true, { transform: booleanAttribute });
+}

package/dist/frameworks/astro/index.d.ts

@@ -0,0 +1,10 @@
+import type { Video as HTMLElementClass } from '@uibit/video';
+import '@uibit/video';
+
+declare global {
+  namespace astroHTML.JSX {
+    interface IntrinsicElements {
+      'uibit-video': Partial<HTMLElementClass> & astroHTML.JSX.HTMLAttributes;
+    }
+  }
+}

package/dist/frameworks/nuxt/index.ts

@@ -0,0 +1,7 @@
+import { defineNuxtPlugin } from '#app';
+
+export default defineNuxtPlugin(() => {
+  if (process.client) {
+    import('@uibit/video');
+  }
+});

package/dist/frameworks/preact/index.d.ts

@@ -0,0 +1,14 @@
+import type { JSX } from 'preact';
+import type { Video as HTMLElementClass } from '@uibit/video';
+import '@uibit/video';
+
+declare module 'preact' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'uibit-video': JSX.HTMLAttributes<HTMLElementClass> & {
+      poster?: string;
+      controls?: boolean;
+      };
+    }
+  }
+}

package/dist/frameworks/qwik/index.tsx

@@ -0,0 +1,10 @@
+import { component$, Slot } from '@builder.io/qwik';
+import '@uibit/video';
+
+export const Video = component$<any>((props) => {
+  return (
+    <uibit-video {...props}>
+      <Slot />
+    </uibit-video>
+  );
+});

package/dist/frameworks/react/index.d.ts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes, ClassAttributes } from 'react';
+import type { Video as HTMLElementClass } from '@uibit/video';
+import '@uibit/video';
+
+declare global {
+  namespace React {
+    namespace JSX {
+      interface IntrinsicElements {
+        'uibit-video': ClassAttributes<HTMLElementClass> & HTMLAttributes<HTMLElementClass> & {
+          children?: React.ReactNode;
+          class?: string;
+      poster?: string;
+      controls?: boolean;
+        };
+      }
+    }
+  }
+}

package/dist/frameworks/solid/index.d.ts

@@ -0,0 +1,15 @@
+import type { JSX } from 'solid-js';
+import type { Video as HTMLElementClass } from '@uibit/video';
+import '@uibit/video';
+
+declare module 'solid-js' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'uibit-video': Partial<HTMLElementClass> & JSX.HTMLAttributes<HTMLElementClass> & {
+              poster?: string;
+      controls?: boolean;
+
+      };
+    }
+  }
+}

package/dist/frameworks/stencil/index.d.ts

@@ -0,0 +1,13 @@
+import type { Video as HTMLElementClass } from '@uibit/video';
+import '@uibit/video';
+
+declare module '@stencil/core' {
+  export namespace JSX {
+    interface IntrinsicElements {
+      'uibit-video': HTMLElementClass & {
+    poster?: string;
+    controls?: boolean;
+      };
+    }
+  }
+}