@smartimpact-it/modern-video-embed 2.0.5 → 2.0.7

package/src/index.ts

@@ -1,3 +1,4 @@
 // Main entry point for Video Embed Components
 import "./components/YouTubeEmbed.js";
 import "./components/VimeoEmbed.js";
+import "./components/VideoEmbed.js";

package/src/styles/_embed-base.scss

@@ -0,0 +1,275 @@
+/**
+ * Base styles and mixins for all video embed components
+ * Provides reusable CSS patterns to reduce duplication
+ */
+
+@use "shared-functions" as *;
+
+// CSS Variables (common across all components)
+// All variables are prefixed with --si-embed- to prevent conflicts
+@mixin embed-css-variables {
+  --si-embed-video-aspect-ratio: 56.25%; // Default 16:9
+  --si-embed-aspect-width: 16; // For dynamic aspect ratio calculations
+  --si-embed-aspect-height: 9; // For dynamic aspect ratio calculations
+  --si-embed-poster-object-fit: cover;
+  --si-embed-video-object-fit: contain;
+  --si-embed-control-button-size: 70px;
+  --si-embed-control-button-color: #ffffff;
+  --si-embed-overlay-background-color: rgba(0, 0, 0, 0.5);
+}
+
+// Base container styles
+@mixin embed-container-base {
+  display: block;
+  position: relative;
+  width: 100%;
+  padding-top: var(--si-embed-video-aspect-ratio);
+  overflow: hidden;
+  background-color: #000;
+}
+
+// Media element positioning (iframe or video)
+@mixin embed-media-base {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+  object-fit: var(--si-embed-video-object-fit);
+}
+
+// Poster image styles
+@mixin embed-poster {
+  .video-poster,
+  .youtube-poster,
+  .vimeo-poster {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: var(--si-embed-poster-object-fit);
+    display: block;
+    cursor: pointer;
+  }
+}
+
+// Custom control button overlay
+@mixin embed-button-overlay {
+  .button-overlay {
+    background: var(--si-embed-overlay-background-color);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    height: 100%;
+    width: 100%;
+    transition: opacity 0.3s ease;
+    z-index: 10;
+  }
+
+  &.is-playing .button-overlay {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  &.is-playing:hover .button-overlay {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .button-overlay .button {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: var(--si-embed-control-button-size);
+    width: var(--si-embed-control-button-size);
+    background-image: inline-svg(
+      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#ffffff" d="M8,5.14V19.14L19,12.14L8,5.14Z" /></svg>'
+    );
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+
+  &.is-playing .button-overlay .button {
+    background-image: inline-svg(
+      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#ffffff" d="M14,19H18V5H14M6,19H10V5H6V19Z" /></svg>'
+    );
+  }
+}
+
+// Background mode styles (for background video effect)
+@mixin embed-background-mode($media-type: "iframe") {
+  &.is-background {
+    padding-top: 0;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    z-index: 0;
+    overflow: hidden;
+    background: #000;
+
+    @if $media-type == "iframe" {
+      iframe {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        // Use aspect-ratio with min-dimensions to ensure coverage
+        aspect-ratio: var(--si-embed-aspect-width) /
+          var(--si-embed-aspect-height);
+        // Start with auto sizing based on aspect ratio
+        width: auto;
+        height: auto;
+        // Ensure iframe covers entire container
+        min-width: 100%;
+        min-height: 100%;
+        pointer-events: none;
+      }
+    } @else if $media-type == "video" {
+      video {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        // Use CSS custom properties for dynamic aspect ratio
+        width: 100%;
+        height: calc(
+          (100% * var(--si-embed-aspect-height)) / var(--si-embed-aspect-width)
+        );
+        min-width: 100%;
+        min-height: 100%;
+        object-fit: cover;
+        pointer-events: none;
+
+        // Hide native media controls in background mode
+        &::-webkit-media-controls {
+          display: none !important;
+        }
+        &::-webkit-media-controls-enclosure {
+          display: none !important;
+        }
+      }
+    }
+
+    .button-overlay {
+      display: none;
+    }
+  }
+
+  // When background controls are enabled
+  &.has-background-controls {
+    .button-overlay {
+      display: flex;
+      background: none;
+      justify-content: flex-end;
+      align-items: flex-end;
+      padding: 1rem;
+
+      .button {
+        --si-embed-control-button-size: 40px;
+        opacity: 0.7;
+        transition: opacity 0.2s ease;
+        &:hover {
+          opacity: 1;
+        }
+      }
+    }
+
+    &.is-playing .button-overlay {
+      opacity: 0;
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+// Error message display
+@mixin embed-error-message(
+  $error-class,
+  $accent-color: #ff4444,
+  $hover-color: #cc0000
+) {
+  .#{$error-class} {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.9);
+    color: white;
+    z-index: 1000;
+
+    .error-content {
+      text-align: center;
+      padding: 2rem;
+      max-width: 400px;
+
+      svg {
+        color: $accent-color;
+        margin-bottom: 1rem;
+      }
+
+      .error-message {
+        margin: 1rem 0;
+        font-size: 1rem;
+        line-height: 1.5;
+      }
+
+      .retry-button {
+        margin-top: 1rem;
+        padding: 0.75rem 1.5rem;
+        background: $accent-color;
+        color: white;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 1rem;
+        font-weight: 600;
+        transition: background 0.2s ease;
+
+        &:hover {
+          background: $hover-color;
+        }
+
+        &:focus {
+          outline: 2px solid white;
+          outline-offset: 2px;
+        }
+      }
+    }
+  }
+}
+
+// Complete base mixin that includes all common styles
+@mixin embed-base-styles(
+  $component-name,
+  $media-type: "iframe",
+  $accent-color: #ff4444,
+  $hover-color: #cc0000
+) {
+  @include embed-css-variables;
+  @include embed-container-base;
+  @include embed-poster;
+  @include embed-button-overlay;
+  @include embed-background-mode($media-type);
+  @include embed-error-message(
+    "#{$component-name}-error-message",
+    $accent-color,
+    $hover-color
+  );
+}

package/src/styles/_shared-functions.scss

@@ -0,0 +1,56 @@
+/**
+ * Shared SCSS functions for SVG encoding
+ * Used by all video embed components
+ */
+
+// No imports needed - this is a base module
+
+@function svg-str-replace($string, $search, $replace: "") {
+  $index: str-index($string, $search);
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace +
+      svg-str-replace(
+        str-slice($string, $index + str-length($search)),
+        $search,
+        $replace
+      );
+  }
+  @return $string;
+}
+
+@function svg-url-encode($string) {
+  $map: (
+    "%": "%25",
+    "<": "%3C",
+    ">": "%3E",
+    " ": "%20",
+    "!": "%21",
+    "*": "%2A",
+    "'": "%27",
+    '"': "%22",
+    "(": "%28",
+    ")": "%29",
+    ";": "%3B",
+    ":": "%3A",
+    "@": "%40",
+    "&": "%26",
+    "=": "%3D",
+    "+": "%2B",
+    "$": "%24",
+    ",": "%2C",
+    "/": "%2F",
+    "?": "%3F",
+    "#": "%23",
+    "[": "%5B",
+    "]": "%5D",
+  );
+  $new: $string;
+  @each $search, $replace in $map {
+    $new: #{svg-str-replace($new, $search, $replace)};
+  }
+  @return $new;
+}
+
+@function inline-svg($string) {
+  @return url("data:image/svg+xml;utf8,#{svg-url-encode($string)}");
+}

package/src/styles/components.scss

@@ -2,6 +2,7 @@
 // This file contains only the essential styles needed for the video embed components
 // Use this when integrating into your website
 
-// Import our custom video embed styles
-@import "./youtube-embed.scss";
-@import "./vimeo-embed.scss";
+// Use our custom video embed styles
+@use "./youtube-embed.scss";
+@use "./vimeo-embed.scss";
+@use "./video-embed.scss";

package/src/styles/main.scss

@@ -2,9 +2,11 @@
 // This file includes Bootstrap and component styles for demos and examples
 // For production integration, use components.scss instead
 
-// Import Bootstrap SCSS (only needed for demos)
-@import "../../node_modules/bootstrap/scss/bootstrap";
+// Use Bootstrap SCSS (only needed for demos)
+// Using 'as *' to maintain global namespace compatibility
+@use "../../node_modules/bootstrap/scss/bootstrap" as *;
 
-// Import our custom video embed styles
-@import "./youtube-embed.scss";
-@import "./vimeo-embed.scss";
+// Use our custom video embed styles
+@use "./youtube-embed.scss";
+@use "./vimeo-embed.scss";
+@use "./video-embed.scss";

package/src/styles/video-embed.scss

@@ -0,0 +1,55 @@
+/**
+ * Video Embed Component Styles
+ * Uses shared base styles with video-specific overrides
+ */
+@use "embed-base" as *;
+
+video-embed {
+  // Import all common embed styles
+  @include embed-base-styles("video", "video", #ff4444, #cc0000);
+
+  // Video-specific styles only
+  video {
+    @include embed-media-base;
+
+    // Hide native controls when controls attribute is not set
+    &::-webkit-media-controls {
+      display: none !important;
+    }
+    &::-webkit-media-controls-enclosure {
+      display: none !important;
+    }
+  }
+
+  // Show native controls only when explicitly enabled
+  &[controls] video {
+    &::-webkit-media-controls {
+      display: flex !important;
+    }
+    &::-webkit-media-controls-enclosure {
+      display: flex !important;
+    }
+  }
+
+  // Poster image specific to video (uses background-image pattern)
+  .video-poster {
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+  }
+
+  // Fullscreen mode (video-specific)
+  &.is-fullscreen {
+    padding-top: 0;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 9999;
+
+    video {
+      object-fit: contain;
+    }
+  }
+}

package/src/styles/vimeo-embed.scss

@@ -1,255 +1,15 @@
 /**
-* SVG encoding functions (shared with YouTube embed)
-*/
-@function svg-str-replace($string, $search, $replace: "") {
-  $index: str-index($string, $search);
-  @if $index {
-    @return str-slice($string, 1, $index - 1) + $replace +
-      svg-str-replace(
-        str-slice($string, $index + str-length($search)),
-        $search,
-        $replace
-      );
-  }
-  @return $string;
-}
-
-@function svg-url-encode($string) {
-  $map: (
-    "%": "%25",
-    "<": "%3C",
-    ">": "%3E",
-    " ": "%20",
-    "!": "%21",
-    "*": "%2A",
-    "'": "%27",
-    '"': "%22",
-    "(": "%28",
-    ")": "%29",
-    ";": "%3B",
-    ":": "%3A",
-    "@": "%40",
-    "&": "%26",
-    "=": "%3D",
-    "+": "%2B",
-    "$": "%24",
-    ",": "%2C",
-    "/": "%2F",
-    "?": "%3F",
-    "#": "%23",
-    "[": "%5B",
-    "]": "%5D",
-  );
-  $new: $string;
-  @each $search, $replace in $map {
-    $new: #{svg-str-replace($new, $search, $replace)};
-  }
-  @return $new;
-}
-
-@function inline-svg($string) {
-  @return url("data:image/svg+xml;utf8,#{svg-url-encode($string)}");
-}
+ * Vimeo Embed Component Styles
+ * Uses shared base styles with Vimeo-specific branding
+ */
+@use "embed-base" as *;
 
 vimeo-embed {
-  // CSS Variables for customization
-  --video-aspect-ratio: 56.25%; // Default 16:9
-  --poster-object-fit: cover;
-  --video-object-fit: contain;
-  --control-button-size: 70px;
-  --control-button-color: #ffffff;
-  --overlay-background-color: rgba(0, 0, 0, 0.5);
-
-  display: block;
-  position: relative;
-  width: 100%;
-  padding-top: var(--video-aspect-ratio);
-  overflow: hidden;
-  background-color: #000;
+  // Import all common embed styles with Vimeo blue accent
+  @include embed-base-styles("vimeo", "iframe", #00adef, #0088bf);
 
+  // iframe-specific styles
   iframe {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border: none;
-    object-fit: var(--video-object-fit);
-  }
-
-  // Poster image
-  .vimeo-poster,
-  .video-poster {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: var(--poster-object-fit);
-    display: block;
-    cursor: pointer;
-  }
-
-  // Custom control overlay
-  .button-overlay {
-    background: var(--overlay-background-color);
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    height: 100%;
-    width: 100%;
-    transition: opacity 0.3s ease;
-    z-index: 10;
-  }
-
-  &.is-playing .button-overlay {
-    opacity: 0;
-  }
-
-  &.is-playing:hover .button-overlay {
-    opacity: 1;
-  }
-
-  .button-overlay .button {
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: var(--control-button-size);
-    width: var(--control-button-size);
-    background-image: inline-svg(
-      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#ffffff" d="M8,5.14V19.14L19,12.14L8,5.14Z" /></svg>'
-    );
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center;
-  }
-
-  &.is-playing .button-overlay .button {
-    background-image: inline-svg(
-      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#ffffff" d="M14,19H18V5H14M6,19H10V5H6V19Z" /></svg>'
-    );
-  }
-
-  // Background mode styles
-  &.is-background {
-    padding-top: 0;
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    top: 0;
-    left: 0;
-    z-index: 0;
-    overflow: hidden;
-    background: #000;
-
-    iframe {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-
-      min-width: 100%;
-      min-height: 100%;
-      width: auto;
-      height: auto;
-
-      @supports (aspect-ratio: 16 / 9) {
-        aspect-ratio: 16 / 9;
-      }
-
-      pointer-events: none;
-    }
-
-    .button-overlay {
-      display: none;
-    }
-  }
-
-  // When background controls are enabled
-  &.has-background-controls {
-    .button-overlay {
-      display: flex;
-      background: none;
-      justify-content: flex-end;
-      align-items: flex-end;
-      padding: 1rem;
-
-      .button {
-        --control-button-size: 40px;
-        opacity: 0.7;
-        transition: opacity 0.2s ease;
-        &:hover {
-          opacity: 1;
-        }
-      }
-    }
-
-    &.is-playing .button-overlay {
-      opacity: 0;
-      &:hover {
-        opacity: 1;
-      }
-    }
-  }
-
-  // Error message styling
-  .vimeo-error-message {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: rgba(0, 0, 0, 0.9);
-    color: white;
-    z-index: 1000;
-
-    .error-content {
-      text-align: center;
-      padding: 2rem;
-      max-width: 400px;
-
-      svg {
-        color: #00adef;
-        margin-bottom: 1rem;
-      }
-
-      .error-message {
-        margin: 1rem 0;
-        font-size: 1rem;
-        line-height: 1.5;
-      }
-
-      .retry-button {
-        margin-top: 1rem;
-        padding: 0.75rem 1.5rem;
-        background: #00adef;
-        color: white;
-        border: none;
-        border-radius: 4px;
-        cursor: pointer;
-        font-size: 1rem;
-        font-weight: 600;
-        transition: background 0.2s ease;
-
-        &:hover {
-          background: #0088bf;
-        }
-
-        &:focus {
-          outline: 2px solid white;
-          outline-offset: 2px;
-        }
-      }
-    }
+    @include embed-media-base;
   }
 }