@smitch/breeze 0.1.0

package/lib/videoplayer/Video.js

@@ -0,0 +1,130 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useEffect, useCallback, useMemo, useState } from "react";
+import VideoTracks from "./VideoTracks";
+import { twMerge } from "tailwind-merge";
+import { Loading, Alert } from "..";
+var posterSrc = "/poster.png";
+var loadingClasses = "[&&::-webkit-media-controls-panel]:!hidden [&&::-webkit-media-controls-enclosure]:!hidden [&&::-webkit-media-controls]:!hidden";
+var grayscaleClasses = {
+    none: "",
+    grayscale: "grayscale",
+    sepia: "sepia",
+};
+var aspects = {
+    square: "aspect-square",
+    phone: "aspect-[9/16]",
+    video: "aspect-video",
+    television: "aspect-[4/3]",
+    cinema: "aspect-[21/9]",
+    ultrawide: "aspect-[12/5]",
+};
+var Video = function (_a) {
+    var src = _a.src, _b = _a.poster, poster = _b === void 0 ? posterSrc : _b, tracks = _a.tracks, srcLangs = _a.srcLangs, trackIndex = _a.trackIndex, _c = _a.controls, controls = _c === void 0 ? true : _c, _d = _a.aspect, aspect = _d === void 0 ? "video" : _d, _e = _a.videoWidth, videoWidth = _e === void 0 ? "100%" : _e, _f = _a.videoHeight, videoHeight = _f === void 0 ? "auto" : _f, _g = _a.loop, loop = _g === void 0 ? false : _g, muted = _a.muted, autoplay = _a.autoplay, setDuration = _a.setDuration, setTime = _a.setTime, play = _a.play, togglePlay = _a.togglePlay, _h = _a.preload, preload = _h === void 0 ? "metadata" : _h, _j = _a.fallback, fallback = _j === void 0 ? "Your browser does not support the video tag." : _j, currentTime = _a.currentTime, playEnded = _a.playEnded, _k = _a.volume, volume = _k === void 0 ? 5 : _k, _l = _a.formats, formats = _l === void 0 ? ["mp4"] : _l, _m = _a.pictureInPicture, pictureInPicture = _m === void 0 ? false : _m, _o = _a.defaultError, defaultError = _o === void 0 ? "Video cannot be loaded." : _o, _p = _a.grayscale, grayscale = _p === void 0 ? "none" : _p, _q = _a.blur, blur = _q === void 0 ? false : _q, _r = _a.className, className = _r === void 0 ? "" : _r;
+    var videoRef = useRef(null);
+    var _s = useState(false), loading = _s[0], setLoading = _s[1];
+    var _t = useState(""), error = _t[0], setError = _t[1];
+    var aspectRatioClasses = useMemo(function () { return aspects[aspect]; }, [aspect]);
+    useEffect(function () {
+        var node = videoRef.current;
+        if (node) {
+            if (play)
+                node.play();
+            else
+                node.pause();
+        }
+    }, [play]);
+    useEffect(function () {
+        var node = videoRef.current;
+        if (node && trackIndex) {
+            var textTracks = node.textTracks;
+            for (var i = 0; i < textTracks.length; i++) {
+                if (i === Number(trackIndex))
+                    textTracks[i].mode = "showing";
+                else
+                    textTracks[i].mode = "disabled";
+            }
+        }
+    }, [trackIndex]);
+    useEffect(function () {
+        var node = videoRef.current;
+        if (node && typeof document !== null && node.duration) {
+            if (document.pictureInPictureElement) {
+                document.exitPictureInPicture();
+            }
+            else if (document.pictureInPictureEnabled) {
+                node.requestPictureInPicture();
+            }
+        }
+    }, [pictureInPicture]);
+    useEffect(function () {
+        var node = videoRef.current;
+        if (node && currentTime) {
+            node.currentTime = currentTime;
+        }
+    }, [currentTime]);
+    useEffect(function () {
+        var node = videoRef.current;
+        if (node)
+            node.volume = volume / 10;
+    }, [volume]);
+    var handleLoadedmetadata = useCallback(function () {
+        if (videoRef.current && setDuration)
+            setDuration(videoRef.current.duration);
+    }, [setDuration]);
+    var handleTogglePlay = function () {
+        if (togglePlay)
+            togglePlay();
+    };
+    var handleEnd = useCallback(function () {
+        var node = videoRef.current;
+        if (node && !loop) {
+            node.currentTime = 0;
+        }
+        if (playEnded)
+            playEnded();
+    }, [playEnded, loop]);
+    var handleTime = useCallback(function () {
+        if (videoRef.current && setTime)
+            setTime(videoRef.current.currentTime);
+    }, [setTime]);
+    var handleError = useCallback(function () {
+        var _a;
+        var node = videoRef.current;
+        if (node) {
+            var error_1 = ((_a = node.error) === null || _a === void 0 ? void 0 : _a.message) || defaultError;
+            setError(error_1);
+            setLoading(false);
+        }
+    }, [setError, defaultError]);
+    var handleWaiting = useCallback(function () {
+        setLoading(true);
+    }, [setLoading]);
+    var handleCanPlay = useCallback(function () {
+        setLoading(false);
+    }, [setLoading]);
+    var setVideoRef = useCallback(function (node) {
+        if (node) {
+            videoRef.current = node;
+            node.addEventListener("waiting", handleWaiting);
+            node.addEventListener("canplay", handleCanPlay);
+            node.addEventListener("loadedmetadata", handleLoadedmetadata, true);
+            node.addEventListener("ended", handleEnd, true);
+            node.addEventListener("timeupdate", handleTime, true);
+            node.addEventListener("error", handleError, true);
+        }
+        return function () {
+            if (node) {
+                node.removeEventListener("waiting", handleWaiting);
+                node.removeEventListener("canplay", handleCanPlay);
+                node.removeEventListener("loadedmetadata", handleLoadedmetadata, true);
+                node.removeEventListener("ended", handleEnd, true);
+                node.removeEventListener("timeupdate", handleTime, true);
+                node.removeEventListener("error", handleError, true);
+            }
+        };
+    }, [handleEnd, handleError, handleLoadedmetadata, handleTime, handleWaiting, handleCanPlay]);
+    return (_jsxs("figure", { className: twMerge("video-figure group overflow-hidden flex items-center relative ".concat(aspectRatioClasses), className), children: [_jsxs("video", { poster: poster, width: videoWidth, height: videoHeight, controls: controls, loop: loop, ref: setVideoRef, className: "video bg-black ".concat(grayscaleClasses[grayscale], " ").concat(blur ? "blur" : "", " ").concat(videoHeight === "100%" ? "object-cover h-full" : "", " ").concat(loading ? loadingClasses : ""), muted: muted, autoPlay: autoplay, preload: preload, onClick: handleTogglePlay, children: [formats.map(function (format, index) { return (_jsx("source", { src: "".concat(src.slice(0, src.lastIndexOf(".")), ".").concat(format), type: "video/".concat(format) }, index)); }), tracks ? _jsx(VideoTracks, { tracks: tracks, srcLangs: srcLangs }) : null, _jsx("p", { children: fallback })] }), error && (_jsx(Alert, { title: "Error", message: error, status: "error", layout: "solid", className: "!absolute inset-0" })), loading && _jsx(Loading, { className: "absolute w-full", size: "lg" })] }));
+};
+export default Video;
+//# sourceMappingURL=Video.js.map

package/lib/videoplayer/Video.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Video.js","sourceRoot":"","sources":["../../../src/ui/videoplayer/Video.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\";\n\nimport React, { useRef, useEffect, useCallback, useMemo, useState } from \"react\";\nimport VideoTracks from \"./VideoTracks\";\nimport { twMerge } from \"tailwind-merge\";\nimport { Loading, Alert } from \"..\";\n\nimport { VideoProps } from \"./types\";\n\nconst posterSrc = \"/poster.png\";\n\nconst loadingClasses =\n  \"[&&::-webkit-media-controls-panel]:!hidden [&&::-webkit-media-controls-enclosure]:!hidden [&&::-webkit-media-controls]:!hidden\";\n\nconst grayscaleClasses = {\n  none: \"\",\n  grayscale: \"grayscale\",\n  sepia: \"sepia\",\n};\n\nconst aspects = {\n  square: \"aspect-square\",\n  phone: \"aspect-[9/16]\",\n  video: \"aspect-video\",\n  television: \"aspect-[4/3]\",\n  cinema: \"aspect-[21/9]\",\n  ultrawide: \"aspect-[12/5]\",\n};\n\nconst Video = ({\n  src,\n  poster = posterSrc,\n  tracks,\n  srcLangs,\n  trackIndex,\n  controls = true,\n  aspect = \"video\",\n  videoWidth = \"100%\",\n  videoHeight = \"auto\",\n  loop = false,\n  muted,\n  autoplay,\n  setDuration,\n  setTime,\n  play,\n  togglePlay,\n  preload = \"metadata\",\n  fallback = \"Your browser does not support the video tag.\",\n  currentTime,\n  playEnded,\n  volume = 5,\n  formats = [\"mp4\"],\n  pictureInPicture = false,\n  defaultError = \"Video cannot be loaded.\",\n  grayscale = \"none\",\n  blur = false,\n  className = \"\",\n}: VideoProps) => {\n  const videoRef = useRef<HTMLVideoElement | null>(null);\n  const [loading, setLoading] = useState(false);\n  const [error, setError] = useState(\"\");\n\n  const aspectRatioClasses = useMemo(() => aspects[aspect], [aspect]);\n\n  useEffect(() => {\n    const node = videoRef.current;\n    if (node) {\n      if (play) node.play();\n      else node.pause();\n    }\n  }, [play]);\n\n  useEffect(() => {\n    const node = videoRef.current;\n    if (node && trackIndex) {\n      const textTracks = node.textTracks;\n      for (let i = 0; i < textTracks.length; i++) {\n        if (i === Number(trackIndex)) textTracks[i].mode = \"showing\";\n        else textTracks[i].mode = \"disabled\";\n      }\n    }\n  }, [trackIndex]);\n\n  useEffect(() => {\n    const node = videoRef.current;\n    if (node && typeof document !== null && node.duration) {\n      if (document.pictureInPictureElement) {\n        document.exitPictureInPicture();\n      } else if (document.pictureInPictureEnabled) {\n        node.requestPictureInPicture();\n      }\n    }\n  }, [pictureInPicture]);\n\n  useEffect(() => {\n    const node = videoRef.current;\n    if (node && currentTime) {\n      node.currentTime = currentTime;\n    }\n  }, [currentTime]);\n\n  useEffect(() => {\n    const node = videoRef.current;\n    if (node) node.volume = volume / 10;\n  }, [volume]);\n\n  const handleLoadedmetadata = useCallback(() => {\n    if (videoRef.current && setDuration) setDuration(videoRef.current.duration);\n  }, [setDuration]);\n\n  const handleTogglePlay = () => {\n    if (togglePlay) togglePlay();\n  };\n\n  const handleEnd = useCallback(() => {\n    const node = videoRef.current;\n    if (node && !loop) {\n      node.currentTime = 0;\n    }\n    if (playEnded) playEnded();\n  }, [playEnded, loop]);\n\n  const handleTime = useCallback(() => {\n    if (videoRef.current && setTime) setTime(videoRef.current.currentTime);\n  }, [setTime]);\n\n  const handleError = useCallback(() => {\n    const node = videoRef.current;\n    if (node) {\n      const error = node.error?.message || defaultError;\n      setError(error);\n      setLoading(false);\n    }\n  }, [setError, defaultError]);\n\n  const handleWaiting = useCallback(() => {\n    setLoading(true);\n  }, [setLoading]);\n\n  const handleCanPlay = useCallback(() => {\n    setLoading(false);\n  }, [setLoading]);\n\n  const setVideoRef = useCallback(\n    (node: HTMLVideoElement) => {\n      if (node) {\n        videoRef.current = node;\n        node.addEventListener(\"waiting\", handleWaiting);\n        node.addEventListener(\"canplay\", handleCanPlay);\n        node.addEventListener(\"loadedmetadata\", handleLoadedmetadata, true);\n        node.addEventListener(\"ended\", handleEnd, true);\n        node.addEventListener(\"timeupdate\", handleTime, true);\n        node.addEventListener(\"error\", handleError, true);\n      }\n      return () => {\n        if (node) {\n          node.removeEventListener(\"waiting\", handleWaiting);\n          node.removeEventListener(\"canplay\", handleCanPlay);\n          node.removeEventListener(\"loadedmetadata\", handleLoadedmetadata, true);\n          node.removeEventListener(\"ended\", handleEnd, true);\n          node.removeEventListener(\"timeupdate\", handleTime, true);\n          node.removeEventListener(\"error\", handleError, true);\n        }\n      };\n    },\n    [handleEnd, handleError, handleLoadedmetadata, handleTime, handleWaiting, handleCanPlay]\n  );\n\n  return (\n    <figure\n      className={twMerge(\n        `video-figure group overflow-hidden flex items-center relative ${aspectRatioClasses}`,\n        className\n      )}\n    >\n      <video\n        poster={poster}\n        width={videoWidth}\n        height={videoHeight}\n        controls={controls}\n        loop={loop}\n        ref={setVideoRef}\n        className={`video bg-black ${grayscaleClasses[grayscale]} ${blur ? \"blur\" : \"\"} ${\n          videoHeight === \"100%\" ? \"object-cover h-full\" : \"\"\n        } ${loading ? loadingClasses : \"\"}`}\n        muted={muted}\n        autoPlay={autoplay}\n        preload={preload}\n        onClick={handleTogglePlay}\n      >\n        {formats.map((format, index) => (\n          <source\n            src={`${src.slice(0, src.lastIndexOf(\".\"))}.${format}`}\n            key={index}\n            type={`video/${format}`}\n          />\n        ))}\n        {tracks ? <VideoTracks tracks={tracks} srcLangs={srcLangs} /> : null}\n        <p>{fallback}</p>\n      </video>\n      {error && (\n        <Alert\n          title=\"Error\"\n          message={error}\n          status=\"error\"\n          layout=\"solid\"\n          className=\"!absolute inset-0\"\n        />\n      )}\n      {loading && <Loading className=\"absolute w-full\" size=\"lg\" />}\n    </figure>\n  );\n};\n\nexport default Video;\n"]}

package/lib/videoplayer/VideoControls.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { CaptionsControl, FullscreenControl, SoundControl, PipControl } from "./controls/";
+import { FaPlay, FaPause } from "react-icons/fa";
+import { Button } from "..";
+var toHHMMSS = function (secs) {
+    var s = secs || 0;
+    var sec_num = parseInt(String(s), 10);
+    var hours = Math.floor(sec_num / 3600);
+    var minutes = Math.floor(sec_num / 60) % 60;
+    var seconds = sec_num % 60;
+    return [hours, minutes, seconds]
+        .map(function (v) { return (v < 10 ? "0" + v : String(v)); })
+        .filter(function (v, i) { return v !== "00" || i > 0; })
+        .join(":");
+};
+var VideoControls = function (_a) {
+    var duration = _a.duration, _b = _a.time, time = _b === void 0 ? 0 : _b, togglePlay = _a.togglePlay, _c = _a.play, play = _c === void 0 ? false : _c, fullscreen = _a.fullscreen, onFullscreen = _a.onFullscreen, muted = _a.muted, onMute = _a.onMute, onScrubChange = _a.onScrubChange, onVolume = _a.onVolume, onPIP = _a.onPIP, onCaption = _a.onCaption, controlOptions = _a.controlOptions, progressBg = _a.progressBg, progressColor = _a.progressColor, tracks = _a.tracks, srcLangs = _a.srcLangs;
+    var _d = useState(0), scrubRange = _d[0], setScrubRange = _d[1];
+    var _e = useState(5), volumeLevel = _e[0], setVolumeLevel = _e[1];
+    useEffect(function () {
+        if (time)
+            setScrubRange((time / duration) * 100);
+        else
+            setScrubRange(0);
+    }, [time, duration]);
+    var scrubStyle = {
+        backgroundImage: "linear-gradient(to right, ".concat(progressColor, " 0%, ").concat(progressColor, " ").concat(scrubRange, "%, ").concat(progressBg, " ").concat(scrubRange, "%, ").concat(progressBg, " 100%)"),
+    };
+    var handleScrubChange = function (event) {
+        setScrubRange(Number(event.target.value));
+        if (onScrubChange)
+            onScrubChange((scrubRange * duration) / 100);
+    };
+    var handleVolumeChange = function (event) {
+        var value = Number(event.target.value);
+        setVolumeLevel(value);
+        if (onVolume)
+            onVolume(value);
+    };
+    var handleCaptionChange = function (value) {
+        if (onCaption)
+            onCaption(value);
+    };
+    return (_jsxs("div", { className: "bg-gradient-to-t from-black from-60% to-transparent text-light absolute bottom-0 w-full flex flex-col justify-between opacity-0 group-hover:opacity-100", children: [_jsx("div", { className: "mx-2 ".concat(duration > 0 ? "block" : "hidden"), children: _jsx("input", { type: "range", min: "0", max: "100", step: "any", id: "scrubRange", value: scrubRange, onChange: handleScrubChange, onInputCapture: handleScrubChange, style: scrubStyle, className: "w-full rounded-none [&&::-webkit-slider-thumb]:duration-500 [&&::-webkit-slider-thumb]:transition-all [&&::-webkit-slider-thumb]:cursor-grab h-1 cursor-pointer appearance-none [&&::-webkit-slider-thumb]:appearance-none" }) }), _jsxs("div", { className: "flex justify-between", children: [_jsxs("p", { className: "flex justify-start gap-2 items-center", children: [_jsxs(Button, { title: play ? "Pause" : "Play", onClick: togglePlay, btnBackground: "transparent", btnColor: "light", size: "sm", children: [play ? _jsx(FaPause, {}) : _jsx(FaPlay, {}), _jsx("span", { className: "sr-only", children: "Toggle Play" })] }), _jsxs("span", { className: "video-time font-mono text-sm", children: [_jsx("time", { children: toHHMMSS(time) }), " ", duration > 0 && (_jsxs("span", { children: ["/ ", _jsx("time", { children: toHHMMSS(duration) })] }))] })] }), _jsx("div", { className: "flex justify-end gap-2 items-center", children: controlOptions
+                            ? controlOptions.map(function (option, index) {
+                                switch (option) {
+                                    case "sound":
+                                        return (_jsx("div", { children: SoundControl(muted, onMute, duration, volumeLevel, handleVolumeChange) }, index));
+                                    case "fullscreen":
+                                        return (_jsx("div", { children: FullscreenControl(fullscreen, duration, onFullscreen) }, index));
+                                    case "pip":
+                                        return _jsx("div", { children: PipControl(duration, onPIP) }, index);
+                                    case "captions":
+                                        return (_jsx("div", { children: CaptionsControl(handleCaptionChange, tracks || [], srcLangs || []) }, index));
+                                    default:
+                                        return null;
+                                }
+                            })
+                            : null })] })] }));
+};
+export default VideoControls;
+//# sourceMappingURL=VideoControls.js.map

package/lib/videoplayer/VideoControls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoControls.js","sourceRoot":"","sources":["../../../src/ui/videoplayer/VideoControls.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE3F,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,MAAM,IAAI,CAAC;AAI5B,IAAM,QAAQ,GAAG,UAAC,IAAiC;IACjD,IAAM,CAAC,GAAG,IAAI,IAAI,CAAC,CAAC;IACpB,IAAM,OAAO,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IACxC,IAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;IACzC,IAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC;IAC9C,IAAM,OAAO,GAAG,OAAO,GAAG,EAAE,CAAC;IAE7B,OAAO,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,CAAC;SAC7B,GAAG,CAAC,UAAC,CAAC,IAAK,OAAA,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAA9B,CAA8B,CAAC;SAC1C,MAAM,CAAC,UAAC,CAAC,EAAE,CAAC,IAAK,OAAA,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,CAAC,EAAnB,CAAmB,CAAC;SACrC,IAAI,CAAC,GAAG,CAAC,CAAC;AACf,CAAC,CAAC;AAEF,IAAM,aAAa,GAAG,UAAC,EAkBH;QAjBlB,QAAQ,cAAA,EACR,YAAQ,EAAR,IAAI,mBAAG,CAAC,KAAA,EACR,UAAU,gBAAA,EACV,YAAY,EAAZ,IAAI,mBAAG,KAAK,KAAA,EACZ,UAAU,gBAAA,EACV,YAAY,kBAAA,EACZ,KAAK,WAAA,EACL,MAAM,YAAA,EACN,aAAa,mBAAA,EACb,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,SAAS,eAAA,EACT,cAAc,oBAAA,EACd,UAAU,gBAAA,EACV,aAAa,mBAAA,EACb,MAAM,YAAA,EACN,QAAQ,cAAA;IAEF,IAAA,KAA8B,QAAQ,CAAC,CAAC,CAAC,EAAxC,UAAU,QAAA,EAAE,aAAa,QAAe,CAAC;IAC1C,IAAA,KAAgC,QAAQ,CAAC,CAAC,CAAC,EAA1C,WAAW,QAAA,EAAE,cAAc,QAAe,CAAC;IAElD,SAAS,CAAC;QACR,IAAI,IAAI;YAAE,aAAa,CAAC,CAAC,IAAI,GAAG,QAAQ,CAAC,GAAG,GAAG,CAAC,CAAC;;YAC5C,aAAa,CAAC,CAAC,CAAC,CAAC;IACxB,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC;IAErB,IAAM,UAAU,GAAG;QACjB,eAAe,EAAE,oCAA6B,aAAa,kBAAQ,aAAa,cAAI,UAAU,gBAAM,UAAU,cAAI,UAAU,gBAAM,UAAU,WAAQ;KACrJ,CAAC;IAEF,IAAM,iBAAiB,GAAG,UAAC,KAA0C;QACnE,aAAa,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;QAC1C,IAAI,aAAa;YAAE,aAAa,CAAC,CAAC,UAAU,GAAG,QAAQ,CAAC,GAAG,GAAG,CAAC,CAAC;IAClE,CAAC,CAAC;IAEF,IAAM,kBAAkB,GAAG,UAAC,KAA0C;QACpE,IAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACzC,cAAc,CAAC,KAAK,CAAC,CAAC;QACtB,IAAI,QAAQ;YAAE,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChC,CAAC,CAAC;IAEF,IAAM,mBAAmB,GAAG,UAAC,KAAa;QACxC,IAAI,SAAS;YAAE,SAAS,CAAC,KAAK,CAAC,CAAC;IAClC,CAAC,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,yJAAyJ,aACtK,cAAK,SAAS,EAAE,eAAQ,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAE,YACzD,gBACE,IAAI,EAAC,OAAO,EACZ,GAAG,EAAC,GAAG,EACP,GAAG,EAAC,KAAK,EACT,IAAI,EAAC,KAAK,EACV,EAAE,EAAC,YAAY,EACf,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,iBAAiB,EAC3B,cAAc,EAAE,iBAAiB,EACjC,KAAK,EAAE,UAAU,EACjB,SAAS,EAAC,4NAA4N,GACtO,GACE,EACN,eAAK,SAAS,EAAC,sBAAsB,aACnC,aAAG,SAAS,EAAC,uCAAuC,aAClD,MAAC,MAAM,IACL,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAC9B,OAAO,EAAE,UAAU,EACnB,aAAa,EAAC,aAAa,EAC3B,QAAQ,EAAC,OAAO,EAChB,IAAI,EAAC,IAAI,aAER,IAAI,CAAC,CAAC,CAAC,KAAC,OAAO,KAAG,CAAC,CAAC,CAAC,KAAC,MAAM,KAAG,EAChC,eAAM,SAAS,EAAC,SAAS,4BAAmB,IACrC,EACT,gBAAM,SAAS,EAAC,8BAA8B,aAC5C,yBAAO,QAAQ,CAAC,IAAI,CAAC,GAAQ,EAAC,GAAG,EAChC,QAAQ,GAAG,CAAC,IAAI,CACf,iCACI,yBAAO,QAAQ,CAAC,QAAQ,CAAC,GAAQ,IAC9B,CACR,IACI,IACL,EACJ,cAAK,SAAS,EAAC,qCAAqC,YACjD,cAAc;4BACb,CAAC,CAAC,cAAc,CAAC,GAAG,CAAC,UAAC,MAAM,EAAE,KAAK;gCAC/B,QAAQ,MAAM,EAAE,CAAC;oCACf,KAAK,OAAO;wCACV,OAAO,CACL,wBACG,YAAY,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,kBAAkB,CAAC,IAD/D,KAAK,CAET,CACP,CAAC;oCACJ,KAAK,YAAY;wCACf,OAAO,CACL,wBAAkB,iBAAiB,CAAC,UAAU,EAAE,QAAQ,EAAE,YAAY,CAAC,IAA7D,KAAK,CAA+D,CAC/E,CAAC;oCACJ,KAAK,KAAK;wCACR,OAAO,wBAAkB,UAAU,CAAC,QAAQ,EAAE,KAAK,CAAC,IAAnC,KAAK,CAAqC,CAAC;oCAC9D,KAAK,UAAU;wCACb,OAAO,CACL,wBACG,eAAe,CAAC,mBAAmB,EAAE,MAAM,IAAI,EAAE,EAAE,QAAQ,IAAI,EAAE,CAAC,IAD3D,KAAK,CAET,CACP,CAAC;oCACJ;wCACE,OAAO,IAAI,CAAC;gCAChB,CAAC;4BACH,CAAC,CAAC;4BACJ,CAAC,CAAC,IAAI,GACJ,IACF,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import React, { useState, useEffect } from \"react\";\n\nimport { CaptionsControl, FullscreenControl, SoundControl, PipControl } from \"./controls/\";\n\nimport { FaPlay, FaPause } from \"react-icons/fa\";\n\nimport { Button } from \"..\";\n\nimport { VideoControlProps } from \"./types\";\n\nconst toHHMMSS = (secs: number | string | undefined) => {\n  const s = secs || 0;\n  const sec_num = parseInt(String(s), 10);\n  const hours = Math.floor(sec_num / 3600);\n  const minutes = Math.floor(sec_num / 60) % 60;\n  const seconds = sec_num % 60;\n\n  return [hours, minutes, seconds]\n    .map((v) => (v < 10 ? \"0\" + v : String(v)))\n    .filter((v, i) => v !== \"00\" || i > 0)\n    .join(\":\");\n};\n\nconst VideoControls = ({\n  duration,\n  time = 0,\n  togglePlay,\n  play = false,\n  fullscreen,\n  onFullscreen,\n  muted,\n  onMute,\n  onScrubChange,\n  onVolume,\n  onPIP,\n  onCaption,\n  controlOptions,\n  progressBg,\n  progressColor,\n  tracks,\n  srcLangs,\n}: VideoControlProps) => {\n  const [scrubRange, setScrubRange] = useState(0);\n  const [volumeLevel, setVolumeLevel] = useState(5);\n\n  useEffect(() => {\n    if (time) setScrubRange((time / duration) * 100);\n    else setScrubRange(0);\n  }, [time, duration]);\n\n  const scrubStyle = {\n    backgroundImage: `linear-gradient(to right, ${progressColor} 0%, ${progressColor} ${scrubRange}%, ${progressBg} ${scrubRange}%, ${progressBg} 100%)`,\n  };\n\n  const handleScrubChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setScrubRange(Number(event.target.value));\n    if (onScrubChange) onScrubChange((scrubRange * duration) / 100);\n  };\n\n  const handleVolumeChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const value = Number(event.target.value);\n    setVolumeLevel(value);\n    if (onVolume) onVolume(value);\n  };\n\n  const handleCaptionChange = (value: string) => {\n    if (onCaption) onCaption(value);\n  };\n\n  return (\n    <div className=\"bg-gradient-to-t from-black from-60% to-transparent text-light absolute bottom-0 w-full flex flex-col justify-between opacity-0 group-hover:opacity-100\">\n      <div className={`mx-2 ${duration > 0 ? \"block\" : \"hidden\"}`}>\n        <input\n          type=\"range\"\n          min=\"0\"\n          max=\"100\"\n          step=\"any\"\n          id=\"scrubRange\"\n          value={scrubRange}\n          onChange={handleScrubChange}\n          onInputCapture={handleScrubChange}\n          style={scrubStyle}\n          className=\"w-full rounded-none [&&::-webkit-slider-thumb]:duration-500 [&&::-webkit-slider-thumb]:transition-all [&&::-webkit-slider-thumb]:cursor-grab h-1 cursor-pointer appearance-none [&&::-webkit-slider-thumb]:appearance-none\"\n        />\n      </div>\n      <div className=\"flex justify-between\">\n        <p className=\"flex justify-start gap-2 items-center\">\n          <Button\n            title={play ? \"Pause\" : \"Play\"}\n            onClick={togglePlay}\n            btnBackground=\"transparent\"\n            btnColor=\"light\"\n            size=\"sm\"\n          >\n            {play ? <FaPause /> : <FaPlay />}\n            <span className=\"sr-only\">Toggle Play</span>\n          </Button>\n          <span className=\"video-time font-mono text-sm\">\n            <time>{toHHMMSS(time)}</time>{\" \"}\n            {duration > 0 && (\n              <span>\n                / <time>{toHHMMSS(duration)}</time>\n              </span>\n            )}\n          </span>\n        </p>\n        <div className=\"flex justify-end gap-2 items-center\">\n          {controlOptions\n            ? controlOptions.map((option, index) => {\n                switch (option) {\n                  case \"sound\":\n                    return (\n                      <div key={index}>\n                        {SoundControl(muted, onMute, duration, volumeLevel, handleVolumeChange)}\n                      </div>\n                    );\n                  case \"fullscreen\":\n                    return (\n                      <div key={index}>{FullscreenControl(fullscreen, duration, onFullscreen)}</div>\n                    );\n                  case \"pip\":\n                    return <div key={index}>{PipControl(duration, onPIP)}</div>;\n                  case \"captions\":\n                    return (\n                      <div key={index}>\n                        {CaptionsControl(handleCaptionChange, tracks || [], srcLangs || [])}\n                      </div>\n                    );\n                  default:\n                    return null;\n                }\n              })\n            : null}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default VideoControls;\n"]}

package/lib/videoplayer/VideoPlayer.js

@@ -0,0 +1,66 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { twMerge } from 'tailwind-merge';
+import Video from './Video';
+import VideoControls from './VideoControls';
+var VideoPlayer = function (_a) {
+    var src = _a.src, poster = _a.poster, loop = _a.loop, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.aspect, aspect = _c === void 0 ? 'video' : _c, preload = _a.preload, fallback = _a.fallback, _d = _a.formats, formats = _d === void 0 ? ['mp4'] : _d, _e = _a.defaultError, defaultError = _e === void 0 ? 'Oops! There was an unknown error.' : _e, _f = _a.muted, muted = _f === void 0 ? false : _f, autoplay = _a.autoplay, _g = _a.controlOptions, controlOptions = _g === void 0 ? ['sound', 'fullscreen', 'pip'] : _g, _h = _a.progressBg, progressBg = _h === void 0 ? '#cccccc' : _h, _j = _a.progressColor, progressColor = _j === void 0 ? '#ffffff' : _j, tracks = _a.tracks, srcLangs = _a.srcLangs, grayscale = _a.grayscale;
+    var _k = useState(false), play = _k[0], setPlay = _k[1];
+    var _l = useState(0), duration = _l[0], setDuration = _l[1];
+    var _m = useState(0), time = _m[0], setTime = _m[1];
+    var _o = useState(0), currentTime = _o[0], setCurrentTime = _o[1];
+    var _p = useState(false), fullscreen = _p[0], setFullscreen = _p[1];
+    var _q = useState(false), pictureInPicture = _q[0], setPictureInPicture = _q[1];
+    var _r = useState(muted), mute = _r[0], setMute = _r[1];
+    var _s = useState(5), volume = _s[0], setVolume = _s[1];
+    var _t = useState(), trackIndex = _t[0], setTrackIndex = _t[1];
+    useEffect(function () {
+        var handleFullscreenChange = function () {
+            if (fullscreen && !document.fullscreenElement)
+                setFullscreen(false);
+        };
+        document.addEventListener('fullscreenchange', handleFullscreenChange);
+        return function () {
+            document.removeEventListener('fullscreenchange', handleFullscreenChange);
+        };
+    }, [setFullscreen, fullscreen]);
+    useEffect(function () {
+        setPlay(autoplay !== null && autoplay !== void 0 ? autoplay : false);
+        return function () {
+            setPlay(false);
+        };
+    }, [autoplay]);
+    var handleScrubChange = function (time) {
+        setTime(time);
+        setCurrentTime(time);
+    };
+    var handleEnded = function () {
+        setPlay(false);
+        handleScrubChange(0);
+    };
+    var handleVolume = function (volume) {
+        setVolume(volume);
+        volume === 0 ? setMute(true) : setMute(false);
+    };
+    var handleTogglePlay = function () { return setPlay(!play); };
+    var handleMute = function () { return setMute(!mute); };
+    var handleFullscreen = function () {
+        setFullscreen(!fullscreen);
+        if (typeof document !== null) {
+            var player = document.getElementById('player');
+            if (player) {
+                if (!fullscreen) {
+                    player.requestFullscreen();
+                }
+                else
+                    document.exitFullscreen();
+            }
+        }
+    };
+    var handlePiP = function () { return setPictureInPicture(!pictureInPicture); };
+    var handleCaption = function (index) { return setTrackIndex(index); };
+    return (_jsxs("div", { id: 'player', className: twMerge("video-player w-full dark bg-black group relative ".concat(fullscreen ? 'fullscreen' : ''), className), children: [_jsx(Video, { src: src, controls: false, poster: poster, aspect: aspect, loop: loop, setDuration: setDuration, setTime: setTime, currentTime: currentTime, togglePlay: handleTogglePlay, playEnded: handleEnded, play: play, muted: mute, autoplay: autoplay, preload: preload, fallback: fallback, volume: volume, formats: formats, pictureInPicture: pictureInPicture, defaultError: defaultError, tracks: tracks, srcLangs: srcLangs, trackIndex: trackIndex, grayscale: grayscale }), _jsx(VideoControls, { duration: duration, time: time, togglePlay: handleTogglePlay, play: play, onFullscreen: handleFullscreen, fullscreen: fullscreen, onMute: handleMute, muted: mute, onScrubChange: handleScrubChange, onVolume: handleVolume, onPIP: handlePiP, onCaption: handleCaption, controlOptions: controlOptions, progressBg: progressBg, progressColor: progressColor, tracks: tracks, srcLangs: srcLangs })] }));
+};
+export default VideoPlayer;
+//# sourceMappingURL=VideoPlayer.js.map

package/lib/videoplayer/VideoPlayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoPlayer.js","sourceRoot":"","sources":["../../../src/ui/videoplayer/VideoPlayer.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client'\n\nimport React, { useState, useEffect } from 'react'\n\nimport { twMerge } from 'tailwind-merge'\n\nimport Video from './Video'\nimport VideoControls from './VideoControls'\nimport { VideoPlayerProps } from './types'\n\nconst VideoPlayer = ({\n\tsrc,\n\tposter,\n\tloop,\n\tclassName = '',\n\taspect = 'video',\n\tpreload,\n\tfallback,\n\tformats = ['mp4'],\n\tdefaultError = 'Oops! There was an unknown error.',\n\tmuted = false,\n\tautoplay,\n\tcontrolOptions = ['sound', 'fullscreen', 'pip'],\n\tprogressBg = '#cccccc',\n\tprogressColor = '#ffffff',\n\ttracks,\n\tsrcLangs,\n\tgrayscale,\n}: VideoPlayerProps) => {\n\tconst [play, setPlay] = useState(false)\n\tconst [duration, setDuration] = useState(0)\n\tconst [time, setTime] = useState(0)\n\tconst [currentTime, setCurrentTime] = useState(0)\n\tconst [fullscreen, setFullscreen] = useState(false)\n\tconst [pictureInPicture, setPictureInPicture] = useState(false)\n\tconst [mute, setMute] = useState(muted)\n\tconst [volume, setVolume] = useState(5)\n\tconst [trackIndex, setTrackIndex] = useState<string>()\n\n\tuseEffect(() => {\n\t\tconst handleFullscreenChange = () => {\n\t\t\tif (fullscreen && !document.fullscreenElement) setFullscreen(false)\n\t\t}\n\n\t\tdocument.addEventListener('fullscreenchange', handleFullscreenChange)\n\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('fullscreenchange', handleFullscreenChange)\n\t\t}\n\t}, [setFullscreen, fullscreen])\n\n\tuseEffect(() => {\n\t\tsetPlay(autoplay ?? false)\n\n\t\treturn () => {\n\t\t\tsetPlay(false)\n\t\t}\n\t}, [autoplay])\n\n\tconst handleScrubChange = (time: number) => {\n\t\tsetTime(time)\n\t\tsetCurrentTime(time)\n\t}\n\n\tconst handleEnded = () => {\n\t\tsetPlay(false)\n\t\thandleScrubChange(0)\n\t}\n\n\tconst handleVolume = (volume: number) => {\n\t\tsetVolume(volume)\n\t\tvolume === 0 ? setMute(true) : setMute(false)\n\t}\n\n\tconst handleTogglePlay = () => setPlay(!play)\n\n\tconst handleMute = () => setMute(!mute)\n\n\tconst handleFullscreen = () => {\n\t\tsetFullscreen(!fullscreen)\n\t\tif (typeof document !== null) {\n\t\t\tconst player = document.getElementById('player')\n\t\t\tif (player) {\n\t\t\t\tif (!fullscreen) {\n\t\t\t\t\tplayer.requestFullscreen()\n\t\t\t\t} else document.exitFullscreen()\n\t\t\t}\n\t\t}\n\t}\n\n\tconst handlePiP = () => setPictureInPicture(!pictureInPicture)\n\n\tconst handleCaption = (index: string) => setTrackIndex(index)\n\n\treturn (\n\t\t<div\n\t\t\tid='player'\n\t\t\tclassName={twMerge(\n\t\t\t\t`video-player w-full dark bg-black group relative ${\n\t\t\t\t\tfullscreen ? 'fullscreen' : ''\n\t\t\t\t}`,\n\t\t\t\tclassName\n\t\t\t)}\n\t\t>\n\t\t\t<Video\n\t\t\t\tsrc={src}\n\t\t\t\tcontrols={false}\n\t\t\t\tposter={poster}\n\t\t\t\taspect={aspect}\n\t\t\t\tloop={loop}\n\t\t\t\tsetDuration={setDuration}\n\t\t\t\tsetTime={setTime}\n\t\t\t\tcurrentTime={currentTime}\n\t\t\t\ttogglePlay={handleTogglePlay}\n\t\t\t\tplayEnded={handleEnded}\n\t\t\t\tplay={play}\n\t\t\t\tmuted={mute}\n\t\t\t\tautoplay={autoplay}\n\t\t\t\tpreload={preload}\n\t\t\t\tfallback={fallback}\n\t\t\t\tvolume={volume}\n\t\t\t\tformats={formats}\n\t\t\t\tpictureInPicture={pictureInPicture}\n\t\t\t\tdefaultError={defaultError}\n\t\t\t\ttracks={tracks}\n\t\t\t\tsrcLangs={srcLangs}\n\t\t\t\ttrackIndex={trackIndex}\n\t\t\t\tgrayscale={grayscale}\n\t\t\t/>\n\t\t\t<VideoControls\n\t\t\t\tduration={duration}\n\t\t\t\ttime={time}\n\t\t\t\ttogglePlay={handleTogglePlay}\n\t\t\t\tplay={play}\n\t\t\t\tonFullscreen={handleFullscreen}\n\t\t\t\tfullscreen={fullscreen}\n\t\t\t\tonMute={handleMute}\n\t\t\t\tmuted={mute}\n\t\t\t\tonScrubChange={handleScrubChange}\n\t\t\t\tonVolume={handleVolume}\n\t\t\t\tonPIP={handlePiP}\n\t\t\t\tonCaption={handleCaption}\n\t\t\t\tcontrolOptions={controlOptions}\n\t\t\t\tprogressBg={progressBg}\n\t\t\t\tprogressColor={progressColor}\n\t\t\t\ttracks={tracks}\n\t\t\t\tsrcLangs={srcLangs}\n\t\t\t/>\n\t\t</div>\n\t)\n}\n\nexport default VideoPlayer\n"]}

package/lib/videoplayer/VideoTracks.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+var VideoTracks = function (_a) {
+    var tracks = _a.tracks, srcLangs = _a.srcLangs;
+    return tracks && srcLangs
+        ? tracks.map(function (src, index) { return (_jsx("track", { kind: 'subtitles', src: src, srcLang: srcLangs[index] }, index)); })
+        : null;
+};
+export default VideoTracks;
+//# sourceMappingURL=VideoTracks.js.map

package/lib/videoplayer/VideoTracks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoTracks.js","sourceRoot":"","sources":["../../../src/ui/videoplayer/VideoTracks.tsx"],"names":[],"mappings":";AAIA,IAAM,WAAW,GAAG,UAAC,EAAsC;QAApC,MAAM,YAAA,EAAE,QAAQ,cAAA;IACtC,OAAO,MAAM,IAAI,QAAQ;QACxB,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,UAAC,GAAG,EAAE,KAAK,IAAK,OAAA,CAC3B,gBACC,IAAI,EAAC,WAAW,EAChB,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,QAAQ,CAAC,KAAK,CAAC,IACnB,KAAK,CACT,CACD,EAP0B,CAO1B,CAAC;QACJ,CAAC,CAAC,IAAI,CAAA;AACR,CAAC,CAAA;AAED,eAAe,WAAW,CAAA","sourcesContent":["import React from 'react'\n\nimport { VideoTracksProps } from './types'\n\nconst VideoTracks = ({ tracks, srcLangs }: VideoTracksProps) => {\n\treturn tracks && srcLangs\n\t\t? tracks.map((src, index) => (\n\t\t\t\t<track\n\t\t\t\t\tkind='subtitles'\n\t\t\t\t\tsrc={src}\n\t\t\t\t\tsrcLang={srcLangs[index]}\n\t\t\t\t\tkey={index}\n\t\t\t\t/>\n\t\t  ))\n\t\t: null\n}\n\nexport default VideoTracks\n"]}

package/lib/videoplayer/controls/CaptionsControl.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { FaClosedCaptioning } from 'react-icons/fa';
+import { Button, Select } from '../..';
+var CaptionsControl = function (handleCaptionChange, tracks, srcLangs) {
+    var _a = useState(false), showSelect = _a[0], setShowSelect = _a[1];
+    var onCaptionChange = function (e) {
+        setShowSelect(false);
+        if (handleCaptionChange)
+            handleCaptionChange(e.target.value);
+    };
+    return tracks ? (_jsxs("div", { id: 'captions-control', className: 'relative', children: [_jsxs(Button, { title: 'Toggle caption options', onClick: function () { return setShowSelect(!showSelect); }, btnBackground: 'transparent', btnColor: 'light', size: 'sm', className: 'lg:-ml-2', children: [_jsx(FaClosedCaptioning, {}), _jsx("span", { className: 'sr-only', children: "Toggle caption options" })] }), _jsx(Select, { title: 'Select Captions', className: "!bg-light !text-dark bottom-8 right-0 absolute ".concat(showSelect ? 'block' : 'hidden'), onChange: onCaptionChange, dropdownSize: 'sm', rows: tracks.length + 1, children: _jsxs(_Fragment, { children: [_jsx("option", { value: '-1', children: "off" }), tracks.map(function (_track, index) { return (_jsx("option", { value: "".concat(index), children: srcLangs[index] }, index)); })] }) })] })) : null;
+};
+export default CaptionsControl;
+//# sourceMappingURL=CaptionsControl.js.map

package/lib/videoplayer/controls/CaptionsControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CaptionsControl.js","sourceRoot":"","sources":["../../../../src/ui/videoplayer/controls/CaptionsControl.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAA;AAEnD,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAEtC,IAAM,eAAe,GAAG,UACvB,mBAA4C,EAC5C,MAAgB,EAChB,QAAkB;IAEZ,IAAA,KAA8B,QAAQ,CAAC,KAAK,CAAC,EAA5C,UAAU,QAAA,EAAE,aAAa,QAAmB,CAAA;IAEnD,IAAM,eAAe,GAAG,UAAC,CAAuC;QAC/D,aAAa,CAAC,KAAK,CAAC,CAAA;QACpB,IAAI,mBAAmB;YAAE,mBAAmB,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;IAC7D,CAAC,CAAA;IAED,OAAO,MAAM,CAAC,CAAC,CAAC,CACf,eACC,EAAE,EAAC,kBAAkB,EACrB,SAAS,EAAC,UAAU,aAEpB,MAAC,MAAM,IACN,KAAK,EAAC,wBAAwB,EAC9B,OAAO,EAAE,cAAM,OAAA,aAAa,CAAC,CAAC,UAAU,CAAC,EAA1B,CAA0B,EACzC,aAAa,EAAC,aAAa,EAC3B,QAAQ,EAAC,OAAO,EAChB,IAAI,EAAC,IAAI,EACT,SAAS,EAAC,UAAU,aAEpB,KAAC,kBAAkB,KAAG,EACtB,eAAM,SAAS,EAAC,SAAS,uCAA8B,IAC/C,EACT,KAAC,MAAM,IACN,KAAK,EAAC,iBAAiB,EACvB,SAAS,EAAE,yDACV,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAC9B,EACF,QAAQ,EAAE,eAAe,EACzB,YAAY,EAAC,IAAI,EACjB,IAAI,EAAE,MAAM,CAAC,MAAM,GAAG,CAAC,YAEvB,8BACC,iBAAQ,KAAK,EAAC,IAAI,oBAAa,EAC9B,MAAM,CAAC,GAAG,CAAC,UAAC,MAAM,EAAE,KAAK,IAAK,OAAA,CAC9B,iBAEC,KAAK,EAAE,UAAG,KAAK,CAAE,YAEhB,QAAQ,CAAC,KAAK,CAAC,IAHX,KAAK,CAIF,CACT,EAP8B,CAO9B,CAAC,IACA,GACK,IACJ,CACN,CAAC,CAAC,CAAC,IAAI,CAAA;AACT,CAAC,CAAA;AAED,eAAe,eAAe,CAAA","sourcesContent":["import React, { useState } from 'react'\n\nimport { FaClosedCaptioning } from 'react-icons/fa'\n\nimport { Button, Select } from '../..'\n\nconst CaptionsControl = (\n\thandleCaptionChange: (value: string) => void,\n\ttracks: string[],\n\tsrcLangs: string[]\n) => {\n\tconst [showSelect, setShowSelect] = useState(false)\n\n\tconst onCaptionChange = (e: React.ChangeEvent<HTMLSelectElement>) => {\n\t\tsetShowSelect(false)\n\t\tif (handleCaptionChange) handleCaptionChange(e.target.value)\n\t}\n\n\treturn tracks ? (\n\t\t<div\n\t\t\tid='captions-control'\n\t\t\tclassName='relative'\n\t\t>\n\t\t\t<Button\n\t\t\t\ttitle='Toggle caption options'\n\t\t\t\tonClick={() => setShowSelect(!showSelect)}\n\t\t\t\tbtnBackground='transparent'\n\t\t\t\tbtnColor='light'\n\t\t\t\tsize='sm'\n\t\t\t\tclassName='lg:-ml-2'\n\t\t\t>\n\t\t\t\t<FaClosedCaptioning />\n\t\t\t\t<span className='sr-only'>Toggle caption options</span>\n\t\t\t</Button>\n\t\t\t<Select\n\t\t\t\ttitle='Select Captions'\n\t\t\t\tclassName={`!bg-light !text-dark bottom-8 right-0 absolute ${\n\t\t\t\t\tshowSelect ? 'block' : 'hidden'\n\t\t\t\t}`}\n\t\t\t\tonChange={onCaptionChange}\n\t\t\t\tdropdownSize='sm'\n\t\t\t\trows={tracks.length + 1}\n\t\t\t>\n\t\t\t\t<>\n\t\t\t\t\t<option value='-1'>off</option>\n\t\t\t\t\t{tracks.map((_track, index) => (\n\t\t\t\t\t\t<option\n\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\tvalue={`${index}`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{srcLangs[index]}\n\t\t\t\t\t\t</option>\n\t\t\t\t\t))}\n\t\t\t\t</>\n\t\t\t</Select>\n\t\t</div>\n\t) : null\n}\n\nexport default CaptionsControl\n"]}

package/lib/videoplayer/controls/FullscreenControl.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "../..";
+import { FaExpand, FaCompress } from "react-icons/fa";
+var FullscreenControl = function (fullscreen, duration, onFullscreen) {
+    return (_jsx("div", { id: "fullscreen", children: _jsxs(Button, { title: fullscreen ? "Exit Fullscreen" : "View Fullscreen", onClick: onFullscreen, btnBackground: "transparent", btnColor: "light", size: "sm", disabled: duration === 0, children: [fullscreen ? _jsx(FaCompress, {}) : _jsx(FaExpand, {}), _jsx("span", { className: "sr-only", children: "Toggle Fullscreen" })] }) }));
+};
+export default FullscreenControl;
+//# sourceMappingURL=FullscreenControl.js.map

package/lib/videoplayer/controls/FullscreenControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FullscreenControl.js","sourceRoot":"","sources":["../../../../src/ui/videoplayer/controls/FullscreenControl.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEtD,IAAM,iBAAiB,GAAG,UAAC,UAAmB,EAAE,QAAgB,EAAE,YAAyB;IACzF,OAAO,CACL,cAAK,EAAE,EAAC,YAAY,YAClB,MAAC,MAAM,IACL,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,iBAAiB,EACzD,OAAO,EAAE,YAAY,EACrB,aAAa,EAAC,aAAa,EAC3B,QAAQ,EAAC,OAAO,EAChB,IAAI,EAAC,IAAI,EACT,QAAQ,EAAE,QAAQ,KAAK,CAAC,aAEvB,UAAU,CAAC,CAAC,CAAC,KAAC,UAAU,KAAG,CAAC,CAAC,CAAC,KAAC,QAAQ,KAAG,EAC3C,eAAM,SAAS,EAAC,SAAS,kCAAyB,IAC3C,GACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["import { Button } from \"../..\";\n\nimport { FaExpand, FaCompress } from \"react-icons/fa\";\n\nconst FullscreenControl = (fullscreen: boolean, duration: number, onFullscreen?: () => void) => {\n  return (\n    <div id=\"fullscreen\">\n      <Button\n        title={fullscreen ? \"Exit Fullscreen\" : \"View Fullscreen\"}\n        onClick={onFullscreen}\n        btnBackground=\"transparent\"\n        btnColor=\"light\"\n        size=\"sm\"\n        disabled={duration === 0}\n      >\n        {fullscreen ? <FaCompress /> : <FaExpand />}\n        <span className=\"sr-only\">Toggle Fullscreen</span>\n      </Button>\n    </div>\n  );\n};\n\nexport default FullscreenControl;\n"]}

package/lib/videoplayer/controls/PipControl.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "../..";
+import { MdPictureInPictureAlt } from "react-icons/md";
+var PipControl = function (duration, onPIP) {
+    return (_jsx("div", { id: "pip", children: _jsxs(Button, { title: "Toggle Picture in Picture", onClick: onPIP, btnBackground: "transparent", btnColor: "light", size: "sm", className: "lg:-ml-2", disabled: duration === 0, children: [_jsx(MdPictureInPictureAlt, {}), _jsx("span", { className: "sr-only", children: "Toggle Picture in Picture" })] }) }));
+};
+export default PipControl;
+//# sourceMappingURL=PipControl.js.map

package/lib/videoplayer/controls/PipControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PipControl.js","sourceRoot":"","sources":["../../../../src/ui/videoplayer/controls/PipControl.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AAEvD,IAAM,UAAU,GAAG,UAAC,QAAgB,EAAE,KAAkB;IACtD,OAAO,CACL,cAAK,EAAE,EAAC,KAAK,YACX,MAAC,MAAM,IACL,KAAK,EAAC,2BAA2B,EACjC,OAAO,EAAE,KAAK,EACd,aAAa,EAAC,aAAa,EAC3B,QAAQ,EAAC,OAAO,EAChB,IAAI,EAAC,IAAI,EACT,SAAS,EAAC,UAAU,EACpB,QAAQ,EAAE,QAAQ,KAAK,CAAC,aAExB,KAAC,qBAAqB,KAAG,EACzB,eAAM,SAAS,EAAC,SAAS,0CAAiC,IACnD,GACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { Button } from \"../..\";\n\nimport { MdPictureInPictureAlt } from \"react-icons/md\";\n\nconst PipControl = (duration: number, onPIP?: () => void) => {\n  return (\n    <div id=\"pip\">\n      <Button\n        title=\"Toggle Picture in Picture\"\n        onClick={onPIP}\n        btnBackground=\"transparent\"\n        btnColor=\"light\"\n        size=\"sm\"\n        className=\"lg:-ml-2\"\n        disabled={duration === 0}\n      >\n        <MdPictureInPictureAlt />\n        <span className=\"sr-only\">Toggle Picture in Picture</span>\n      </Button>\n    </div>\n  );\n};\n\nexport default PipControl;\n"]}

package/lib/videoplayer/controls/SoundControl.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "../..";
+import { FaVolumeMute, FaVolumeUp } from "react-icons/fa";
+var SoundControl = function (muted, onMute, duration, volumeLevel, handleVolumeChange) {
+    return (_jsxs("div", { id: "sound", className: "flex gap-1 items-center", children: [_jsxs(Button, { title: muted ? "Unmute Sound" : "Mute Sound", onClick: onMute, btnBackground: "transparent", btnColor: "light", size: "sm", children: [muted ? _jsx(FaVolumeMute, {}) : _jsx(FaVolumeUp, {}), _jsx("span", { className: "sr-only", children: "Toggle Mute Sound" })] }), _jsx("input", { type: "range", min: "0", max: "10", step: "1", value: volumeLevel, onChange: handleVolumeChange, className: "volume-slider w-16 hidden lg:block", disabled: duration === 0 })] }));
+};
+export default SoundControl;
+//# sourceMappingURL=SoundControl.js.map

package/lib/videoplayer/controls/SoundControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SoundControl.js","sourceRoot":"","sources":["../../../../src/ui/videoplayer/controls/SoundControl.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE1D,IAAM,YAAY,GAAG,UACnB,KAAc,EACd,MAAkB,EAClB,QAAgB,EAChB,WAAmB,EACnB,kBAAoE;IAEpE,OAAO,CACL,eAAK,EAAE,EAAC,OAAO,EAAC,SAAS,EAAC,yBAAyB,aACjD,MAAC,MAAM,IACL,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY,EAC5C,OAAO,EAAE,MAAM,EACf,aAAa,EAAC,aAAa,EAC3B,QAAQ,EAAC,OAAO,EAChB,IAAI,EAAC,IAAI,aAER,KAAK,CAAC,CAAC,CAAC,KAAC,YAAY,KAAG,CAAC,CAAC,CAAC,KAAC,UAAU,KAAG,EAC1C,eAAM,SAAS,EAAC,SAAS,kCAAyB,IAC3C,EACT,gBACE,IAAI,EAAC,OAAO,EACZ,GAAG,EAAC,GAAG,EACP,GAAG,EAAC,IAAI,EACR,IAAI,EAAC,GAAG,EACR,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,kBAAkB,EAC5B,SAAS,EAAC,oCAAoC,EAC9C,QAAQ,EAAE,QAAQ,KAAK,CAAC,GACxB,IACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { Button } from \"../..\";\n\nimport { FaVolumeMute, FaVolumeUp } from \"react-icons/fa\";\n\nconst SoundControl = (\n  muted: boolean,\n  onMute: () => void,\n  duration: number,\n  volumeLevel: number,\n  handleVolumeChange: (e: React.ChangeEvent<HTMLInputElement>) => void\n) => {\n  return (\n    <div id=\"sound\" className=\"flex gap-1 items-center\">\n      <Button\n        title={muted ? \"Unmute Sound\" : \"Mute Sound\"}\n        onClick={onMute}\n        btnBackground=\"transparent\"\n        btnColor=\"light\"\n        size=\"sm\"\n      >\n        {muted ? <FaVolumeMute /> : <FaVolumeUp />}\n        <span className=\"sr-only\">Toggle Mute Sound</span>\n      </Button>\n      <input\n        type=\"range\"\n        min=\"0\"\n        max=\"10\"\n        step=\"1\"\n        value={volumeLevel}\n        onChange={handleVolumeChange}\n        className=\"volume-slider w-16 hidden lg:block\"\n        disabled={duration === 0}\n      />\n    </div>\n  );\n};\n\nexport default SoundControl;\n"]}

package/lib/videoplayer/controls/index.js

@@ -0,0 +1,5 @@
+export { default as CaptionsControl } from './CaptionsControl';
+export { default as FullscreenControl } from './FullscreenControl';
+export { default as PipControl } from './PipControl';
+export { default as SoundControl } from './SoundControl';
+//# sourceMappingURL=index.js.map

package/lib/videoplayer/controls/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/ui/videoplayer/controls/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAC9D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAClE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAA;AACpD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAA","sourcesContent":["export { default as CaptionsControl } from './CaptionsControl'\nexport { default as FullscreenControl } from './FullscreenControl'\nexport { default as PipControl } from './PipControl'\nexport { default as SoundControl } from './SoundControl'\n"]}

package/lib/videoplayer/index.js

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

package/lib/videoplayer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/videoplayer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAA;AAC1C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAA","sourcesContent":["export { default as Video } from './Video'\nexport { default as VideoPlayer } from './VideoPlayer'"]}

package/lib/videoplayer/types/index.js

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

package/lib/videoplayer/types/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/ui/videoplayer/types/index.ts"],"names":[],"mappings":"","sourcesContent":["export type VideoFormat = 'mp4' | 'webm' | 'ogg'\nexport type PreloadOption = 'auto' | 'metadata' | 'none'\nexport type ControlOption = 'sound' | 'fullscreen' | 'pip' | 'captions'\n\nexport interface VideoTracksProps {\n\ttracks?: string[]\n\tsrcLangs?: string[]\n}\n\nexport interface MediaProps extends VideoTracksProps {\n\tsrc: string\n\tposter?: string\n\tloop?: boolean\n\tpreload?: PreloadOption\n\tformats?: VideoFormat[]\n\tfallback?: string\n\tmuted?: boolean\n\tautoplay?: boolean\n\taspect?: 'square' | 'phone' | 'video' | 'television' | 'cinema' | 'ultrawide'\n\tgrayscale?: 'none' | 'grayscale' | 'sepia'\n}\n\nexport interface VideoSpecificProps {\n\tdefaultError?: string\n\tplay?: boolean\n\ttogglePlay?: () => void\n\tplayEnded?: () => void\n\tpictureInPicture?: boolean\n\tcontrols?: boolean\n\ttrackIndex?: string\n\tvideoWidth?: string\n\tvideoHeight?: string\n\tblur?: boolean\n}\n\nexport interface VideoProps extends MediaProps, VideoSpecificProps {\n\tsetDuration?: (duration: number) => void\n\tsetTime?: (time: number) => void\n\tcurrentTime?: number\n\tvolume?: number\n\tclassName?: string\n}\n\nexport interface VideoPlayerProps extends React.HTMLAttributes<HTMLDivElement>, MediaProps {\n\tclassName?: string\n\tdefaultError?: string\n\tcontrolOptions?: ControlOption[]\n\tprogressBg?: string\n\tprogressColor?: string\n}\n\nexport interface VideoControlProps extends React.HTMLAttributes<HTMLDivElement>, VideoTracksProps {\n\tduration: number\n\ttime: number\n\ttogglePlay: () => void\n\tplay: boolean\n\tfullscreen: boolean\n\tmuted: boolean\n\tonScrubChange?: (time: number) => void\n\tonFullscreen?: () => void\n\tonPIP?: () => void\n\tonMute: () => void\n\tonVolume: (volume: number) => void\n\tonCaption: (index: string) => void\n\tcontrolOptions?: ControlOption[]\n\tprogressBg?: string\n\tprogressColor?: string\n}\n"]}

package/lib/youtubeembed/YoutubeEmbed.js

@@ -0,0 +1,33 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { twMerge } from "tailwind-merge";
+var YoutubeEmbed = function (_a) {
+    var _b = _a.className, className = _b === void 0 ? "" : _b, style = _a.style, videoId = _a.videoId, _c = _a.title, title = _c === void 0 ? "YouTube video player" : _c, _d = _a.playerParams, playerParams = _d === void 0 ? {} : _d, _e = _a.loading, loading = _e === void 0 ? "lazy" : _e, _f = _a.allow, allow = _f === void 0 ? "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" : _f, iframeProps = __rest(_a, ["className", "style", "videoId", "title", "playerParams", "loading", "allow"]);
+    var baseUrl = "https://www.youtube-nocookie.com/embed/";
+    var params = new URLSearchParams(playerParams).toString();
+    var embedUrl = "".concat(baseUrl).concat(videoId, "?").concat(params);
+    return (_jsx("div", { className: twMerge("aspect-video w-full ", className), style: style, children: _jsx("iframe", __assign({ className: "w-full h-full", src: embedUrl, title: title, allowFullScreen: true, loading: loading, referrerPolicy: "strict-origin-when-cross-origin", allow: allow }, iframeProps)) }));
+};
+export default YoutubeEmbed;
+//# sourceMappingURL=YoutubeEmbed.js.map

package/lib/youtubeembed/YoutubeEmbed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"YoutubeEmbed.js","sourceRoot":"","sources":["../../../src/ui/youtubeembed/YoutubeEmbed.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAGA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEzC,IAAM,YAAY,GAAG,UAAC,EASF;IARlB,IAAA,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,KAAK,WAAA,EACL,OAAO,aAAA,EACP,aAA8B,EAA9B,KAAK,mBAAG,sBAAsB,KAAA,EAC9B,oBAAiB,EAAjB,YAAY,mBAAG,EAAE,KAAA,EACjB,eAAgB,EAAhB,OAAO,mBAAG,MAAM,KAAA,EAChB,aAAkG,EAAlG,KAAK,mBAAG,0FAA0F,KAAA,EAC/F,WAAW,cARM,8EASrB,CADe;IAEd,IAAM,OAAO,GAAG,yCAAyC,CAAC;IAC1D,IAAM,MAAM,GAAG,IAAI,eAAe,CAAC,YAAsC,CAAC,CAAC,QAAQ,EAAE,CAAC;IACtF,IAAM,QAAQ,GAAG,UAAG,OAAO,SAAG,OAAO,cAAI,MAAM,CAAE,CAAC;IAElD,OAAO,CACL,cAAK,SAAS,EAAE,OAAO,CAAC,sBAAsB,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,YACtE,0BACE,SAAS,EAAC,eAAe,EACzB,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE,KAAK,EACZ,eAAe,QACf,OAAO,EAAE,OAAO,EAChB,cAAc,EAAC,iCAAiC,EAChD,KAAK,EAAE,KAAK,IACR,WAAW,EACf,GACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import React from \"react\";\nimport { YoutubeEmbedProps } from \"./types\";\n\nimport { twMerge } from \"tailwind-merge\";\n\nconst YoutubeEmbed = ({\n  className = \"\",\n  style,\n  videoId,\n  title = \"YouTube video player\",\n  playerParams = {},\n  loading = \"lazy\",\n  allow = \"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\",\n  ...iframeProps\n}: YoutubeEmbedProps) => {\n  const baseUrl = \"https://www.youtube-nocookie.com/embed/\";\n  const params = new URLSearchParams(playerParams as Record<string, string>).toString();\n  const embedUrl = `${baseUrl}${videoId}?${params}`;\n\n  return (\n    <div className={twMerge(\"aspect-video w-full \", className)} style={style}>\n      <iframe\n        className=\"w-full h-full\"\n        src={embedUrl}\n        title={title}\n        allowFullScreen\n        loading={loading}\n        referrerPolicy=\"strict-origin-when-cross-origin\"\n        allow={allow}\n        {...iframeProps}\n      />\n    </div>\n  );\n};\n\nexport default YoutubeEmbed;\n"]}

package/lib/youtubeembed/index.js

@@ -0,0 +1,2 @@
+export { default as YoutubeEmbed } from './YoutubeEmbed';
+//# sourceMappingURL=index.js.map

package/lib/youtubeembed/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/youtubeembed/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAA","sourcesContent":["export { default as YoutubeEmbed } from './YoutubeEmbed'\n"]}

package/lib/youtubeembed/types/index.js

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

package/lib/youtubeembed/types/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/ui/youtubeembed/types/index.ts"],"names":[],"mappings":"","sourcesContent":["interface PlayerParamsProps {\n  autoplay?: 0 | 1;\n  controls?: 0 | 1;\n  loop?: 0 | 1;\n  mute?: 0 | 1;\n  start?: number;\n  end?: number;\n  modestbranding?: 0 | 1;\n  rel?: 0 | 1;\n  fs?: 0 | 1;\n  cc_load_policy?: 0 | 1;\n  playsinline?: 0 | 1;\n}\n\ninterface IFrameProps {\n  loading?: \"eager\" | \"lazy\";\n  allow?: string;\n}\n\nexport interface YoutubeEmbedProps extends IFrameProps {\n  className?: string;\n  style?: React.CSSProperties;\n  videoId: string;\n  title?: string;\n  playerParams?: PlayerParamsProps;\n}\n"]}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@smitch/breeze",
+  "version": "0.1.0",
+  "description": "A lightweight, Tailwind-powered React/Next.js UI component library.",
+  "main": "index.js",
+  "keywords": [
+    "react",
+    "tailwindcss",
+    "ui-components",
+    "nextjs",
+    "breeze-ui"
+  ],
+  "author": "Stephen Mitchell",
+  "license": "MIT",
+  "files": [
+    "lib",
+    "index.d.ts",
+    "package.json",
+    "README.md",
+    ".npmignore"
+  ],
+  "dependencies": {
+    "@smitch/js-lib": "^0.3.22",
+    "react-icons": "^5.5.0",
+    "tailwind-merge": "^2.5.4",
+    "@tailwindcss/forms": "^0.5.9",
+    "@tailwindcss/typography": "^0.5.15",
+    "prismjs": "^1.30.0"
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-dom": "^19.0.0",
+    "next": ">=15",
+    "tailwindcss": ">=3"
+  },
+  "devDependencies": {
+    "@types/prismjs": "^1.26.5"
+  }
+}