@webitch/player 0.1.0

package/dist/features/player-tools/ui/player-tools.js

@@ -0,0 +1,48 @@
+'use client';
+
+import { ProgressBar } from '../../../entites/progress-bar';
+import { SettingsButtons } from "../../../entites/settings-buttons";
+import { PlayButtons } from "../../../entites/play-buttons";
+import { SoundAndTimeVolume } from "../../../entites/sound-volume";
+import styles from './styles.module.scss';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const PlayerTools = ({
+  duration,
+  videoRef,
+  isVisibleTools,
+  fragments
+}) => {
+  const currentTime = videoRef.current?.currentTime;
+  const handleGetCurrentFragment = () => {
+    return fragments?.find(fragment => fragment.start < currentTime && currentTime < fragment.end);
+  };
+  return (_jsx("div", {
+      className: styles.toolsContainer,
+      children: _jsxs("div", {
+        className: styles.toolsWrapper,
+        onClick: e => e.stopPropagation(),
+        children: [_jsx(ProgressBar, {
+          duration: duration,
+          videoRef: videoRef,
+          fragments: fragments
+        }), _jsx("div", {
+          className: styles.toolsBackground
+        }), _jsxs("div", {
+          className: styles.toolsArea,
+          children: [_jsxs("div", {
+            className: styles.toolsArea2,
+            children: [_jsx(PlayButtons, {
+              videoRef: videoRef
+            }), _jsx(SoundAndTimeVolume, {
+              videoRef: videoRef,
+              duration: duration,
+              fragmentTitle: handleGetCurrentFragment()?.title
+            })]
+          }), _jsx(SettingsButtons, {
+            videoRef: videoRef
+          })]
+        })]
+      })
+    })
+  );
+};

package/dist/features/player-tools/ui/styles.module.scss

@@ -0,0 +1,90 @@
+body {
+    margin: 20;
+}
+
+.toolsContainer {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    align-items: center;
+    justify-content: center;
+
+    opacity: 1;
+    visibility: visible;
+    transition: opacity 0.3s ease, visibility 0.3s ease;
+
+    &_hidden {
+        transition: opacity 0.3s ease, visibility 0.3s ease;
+        opacity: 0;
+        visibility: hidden;
+    }
+}
+
+.toolsWrapper {
+    position: absolute;
+    bottom: 0;
+    // left: -0;
+    width: 100%;
+    height: 6%;
+    display: block;
+    pointer-events: auto;
+
+    
+    @media (max-width: 1080px) {
+        height: 8%;
+    }
+    
+    @media (max-width: 1440px) {
+        height: 8%;
+    }
+
+    @media (max-width: 1920px) {
+        height: 9%;
+    }
+
+    @media (min-width: 1920px) {
+        height: 9%;
+    }
+
+    // @media (max-width: 2500px) {
+    //     height: 10%;
+    // }
+}
+
+.toolsBackground {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    // background-color: rgba(255, 255, 255, 0.7); 
+    pointer-events: none;
+    z-index: 1;
+}
+
+.toolsArea {
+    // position: absolute;
+    // bottom: 0;
+    width: 100%;
+    height: 90%;
+    display: flex;
+    justify-content: space-between;
+
+    // align-self: flex-end;
+    // justify-content: end;
+    // align-items: end;
+    z-index: 50;
+}
+
+.toolsArea2 {
+    width: 100%;
+    display: flex;
+    gap: 20px;
+    height:100%;
+    justify-content: start;
+}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { Player } from './component';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA"}

package/dist/index.js

@@ -0,0 +1 @@
+export { Player } from './component';

package/dist/shared/constants/svgs.d.ts

@@ -0,0 +1,17 @@
+export declare const svgs: {
+    stop: string;
+    play: string;
+    backword: string;
+    forward: string;
+    fullScreenOn: string;
+    fullScreenOff: string;
+    pictureInPicture: string;
+    settings: string;
+    soundOn: string;
+    soundOff: string;
+    subtitle: string;
+    wideScreen: string;
+    prevVideo: string;
+    nextVideo: string;
+};
+//# sourceMappingURL=svgs.d.ts.map

package/dist/shared/constants/svgs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"svgs.d.ts","sourceRoot":"","sources":["../../../src/shared/constants/svgs.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;CAehB,CAAA"}

package/dist/shared/constants/svgs.js

@@ -0,0 +1,16 @@
+export const svgs = {
+  stop: 'stop',
+  play: 'play',
+  backword: 'backword',
+  forward: 'forward',
+  fullScreenOn: 'fullScreenOn',
+  fullScreenOff: 'fullScreenOff',
+  pictureInPicture: 'pictureInPicture',
+  settings: 'settings',
+  soundOn: 'soundOn',
+  soundOff: 'soundOff',
+  subtitle: 'subtitle',
+  wideScreen: "wideScreen",
+  prevVideo: "prevVideo",
+  nextVideo: "nextVideo"
+};

package/dist/shared/ui/Svg/index.d.ts

@@ -0,0 +1,13 @@
+import { svgs } from "@/shared/constants/svgs";
+declare const sizes: {
+    small: number;
+    middle: number;
+    big: number;
+};
+interface ISvg {
+    name: keyof typeof svgs;
+    size?: keyof typeof sizes;
+}
+export declare const Svg: React.FC<ISvg>;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/shared/ui/Svg/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/shared/ui/Svg/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAA;AAE9C,QAAA,MAAM,KAAK;;;;CAIV,CAAA;AAED,UAAU,IAAI;IACV,IAAI,EAAE,MAAM,OAAO,IAAI,CAAA;IACvB,IAAI,CAAC,EAAE,MAAM,OAAO,KAAK,CAAA;CAC5B;AAED,eAAO,MAAM,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CA4E9B,CAAA"}

package/dist/shared/ui/Svg/index.js

@@ -0,0 +1,170 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const sizes = {
+  small: 16,
+  middle: 24,
+  big: 32
+};
+export const Svg = ({
+  name,
+  size = 'middle'
+}) => {
+  switch (name) {
+    case 'stop':
+      return _jsx("svg", {
+        fill: "currentColor",
+        height: sizes[size],
+        viewBox: "0 0 36 36",
+        width: sizes[size],
+        children: _jsx("path", {
+          d: "M 12.75 4.5 L 9.75 4.5 C 9.15 4.5 8.58 4.73 8.15 5.15 C 7.73 5.58 7.5 6.15 7.5 6.75 L 7.5 29.25 C 7.5 29.84 7.73 30.41 8.15 30.84 C 8.58 31.26 9.15 31.5 9.75 31.5 L 12.75 31.5 C 13.34 31.5 13.91 31.26 14.34 30.84 C 14.76 30.41 15 29.84 15 29.25 L 15 6.75 C 15 6.15 14.76 5.58 14.34 5.15 C 13.91 4.73 13.34 4.5 12.75 4.5 Z M 26.25 4.5 L 23.25 4.5 C 22.65 4.5 22.08 4.73 21.65 5.15 C 21.23 5.58 21 6.15 21 6.75 V 29.25 C 21 29.84 21.23 30.41 21.65 30.84 C 22.08 31.26 22.65 31.5 23.25 31.5 L 26.25 31.5 C 26.84 31.5 27.41 31.26 27.84 30.84 C 28.26 30.41 28.5 29.84 28.5 29.25 V 6.75 L 28.5 6.75 C 28.5 6.15 28.26 5.58 27.84 5.15 C 27.41 4.73 26.84 4.5 26.25 4.5 Z",
+          fill: "white"
+        })
+      });
+    case 'play':
+      return _jsx("svg", {
+        fill: "currentColor",
+        height: sizes[size],
+        viewBox: "0 0 36 36",
+        width: sizes[size],
+        children: _jsx("path", {
+          d: "M 17 8.6 L 10.89 4.99 C 9.39 4.11 7.5 5.19 7.5 6.93 C 7.5 6.93 7.5 6.93 7.5 6.93 L 7.5 29.06 C 7.5 30.8 9.39 31.88 10.89 31 C 10.89 31 10.89 31 10.89 31 L 17 27.4 C 17 27.4 17 27.4 17 27.4 C 17 27.4 17 27.4 17 27.4 L 17 8.6 C 17 8.6 17 8.6 17 8.6 C 17 8.6 17 8.6 17 8.6 Z M 17 8.6 L 17 8.6 C 17 8.6 17 8.6 17 8.6 C 17 8.6 17 8.6 17 8.6 V 27.4 C 17 27.4 17 27.4 17 27.4 C 17 27.4 17 27.4 17 27.4 L 33 18 C 33 18 33 18 33 18 C 33 18 33 18 33 18 V 18 L 17 8.6 C 17 8.6 17 8.6 17 8.6 C 17 8.6 17 8.6 17 8.6 Z",
+          fill: "white"
+        })
+      });
+    case 'backword':
+      return '';
+    case 'forward':
+      return '';
+    case 'fullScreenOn':
+      return _jsx("svg", {
+        fill: "currentColor",
+        height: sizes[size],
+        viewBox: "0 0 24 24",
+        width: sizes[size],
+        children: _jsx("path", {
+          d: "M10 3H3V10C3 10.26 3.10 10.51 3.29 10.70C3.48 10.89 3.73 11 4 11C4.26 11 4.51 10.89 4.70 10.70C4.89 10.51 5 10.26 5 10V6.41L9.29 10.70L9.36 10.77C9.56 10.92 9.80 11.00 10.04 10.99C10.29 10.98 10.52 10.87 10.70 10.70C10.87 10.52 10.98 10.29 10.99 10.04C11.00 9.80 10.92 9.56 10.77 9.36L10.70 9.29L6.41 5H10C10.26 5 10.51 4.89 10.70 4.70C10.89 4.51 11 4.26 11 4C11 3.73 10.89 3.48 10.70 3.29C10.51 3.10 10.26 3 10 3ZM20 13C19.73 13 19.48 13.10 19.29 13.29C19.10 13.48 19 13.73 19 14V17.58L14.70 13.29L14.63 13.22C14.43 13.07 14.19 12.99 13.95 13.00C13.70 13.01 13.47 13.12 13.29 13.29C13.12 13.47 13.01 13.70 13.00 13.95C12.99 14.19 13.07 14.43 13.22 14.63L13.29 14.70L17.58 19H14C13.73 19 13.48 19.10 13.29 19.29C13.10 19.48 13 19.73 13 20C13 20.26 13.10 20.51 13.29 20.70C13.48 20.89 13.73 21 14 21H21V14C21 13.73 20.89 13.48 20.70 13.29C20.51 13.10 20.26 13 20 13Z",
+          fill: "white"
+        })
+      });
+    case 'fullScreenOff':
+      return _jsx("svg", {
+        fill: "currentColor",
+        height: sizes[size],
+        viewBox: "0 0 24 24",
+        width: sizes[size],
+        children: _jsx("path", {
+          d: "M3.29 3.29C3.11 3.46 3.01 3.70 3.00 3.94C2.98 4.19 3.06 4.43 3.22 4.63L3.29 4.70L7.58 8.99H5C4.73 8.99 4.48 9.10 4.29 9.29C4.10 9.47 4 9.73 4 9.99C4 10.26 4.10 10.51 4.29 10.70C4.48 10.89 4.73 10.99 5 10.99H11V4.99C11 4.73 10.89 4.47 10.70 4.29C10.51 4.10 10.26 3.99 10 3.99C9.73 3.99 9.48 4.10 9.29 4.29C9.10 4.47 9 4.73 9 4.99V7.58L4.70 3.29L4.63 3.22C4.43 3.06 4.19 2.98 3.94 3.00C3.70 3.01 3.46 3.11 3.29 3.29ZM19 13H13V19C13 19.26 13.10 19.51 13.29 19.70C13.48 19.89 13.73 20 14 20C14.26 20 14.51 19.89 14.70 19.70C14.89 19.51 15 19.26 15 19V16.41L19.29 20.70L19.36 20.77C19.56 20.92 19.80 21.00 20.04 20.99C20.29 20.98 20.52 20.87 20.70 20.70C20.87 20.52 20.98 20.29 20.99 20.04C21.00 19.80 20.92 19.56 20.77 19.36L20.70 19.29L16.41 15H19C19.26 15 19.51 14.89 19.70 14.70C19.89 14.51 20 14.26 20 14C20 13.73 19.89 13.48 19.70 13.29C19.51 13.10 19.26 13 19 13Z",
+          fill: "white"
+        })
+      });
+    case 'pictureInPicture':
+      return _jsxs("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: sizes[size],
+        height: sizes[size],
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        children: [_jsx("path", {
+          stroke: "none",
+          d: "M0 0h24v24H0z"
+        }), _jsx("path", {
+          d: "M11 19h-6a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v4"
+        }), _jsx("path", {
+          d: "M14 15a1 1 0 0 1 1 -1h5a1 1 0 0 1 1 1v3a1 1 0 0 1 -1 1h-5a1 1 0 0 1 -1 -1l0 -3"
+        })]
+      });
+    case 'settings':
+      return _jsx("svg", {
+        fill: "currentColor",
+        xmlns: "http://www.w3.org/2000/svg",
+        height: sizes[size],
+        viewBox: "0 0 24 24",
+        width: sizes[size],
+        focusable: "false",
+        "aria-hidden": "true",
+        children: _jsx("path", {
+          d: "M20 5H4a1 1 0 000 2h16a1 1 0 100-2Zm0 6H4a1 1 0 000 2h16a1 1 0 000-2Zm0 6H4a1 1 0 000 2h16a1 1 0 000-2Z"
+        })
+      });
+    case 'soundOn':
+      return _jsxs("svg", {
+        fill: "currentColor",
+        height: sizes[size],
+        viewBox: "0 0 24 24",
+        width: sizes[size],
+        children: [_jsx("path", {
+          d: "M 11.60 2.08 L 11.48 2.14 L 3.91 6.68 C 3.02 7.21 2.28 7.97 1.77 8.87 C 1.26 9.77 1.00 10.79 1 11.83 V 12.16 L 1.01 12.56 C 1.07 13.52 1.37 14.46 1.87 15.29 C 2.38 16.12 3.08 16.81 3.91 17.31 L 11.48 21.85 C 11.63 21.94 11.80 21.99 11.98 21.99 C 12.16 22.00 12.33 21.95 12.49 21.87 C 12.64 21.78 12.77 21.65 12.86 21.50 C 12.95 21.35 13 21.17 13 21 V 3 C 12.99 2.83 12.95 2.67 12.87 2.52 C 12.80 2.37 12.68 2.25 12.54 2.16 C 12.41 2.07 12.25 2.01 12.08 2.00 C 11.92 1.98 11.75 2.01 11.60 2.08 Z",
+          fill: "#fff"
+        }), _jsx("path", {
+          d: " M 15.53 7.05 C 15.35 7.22 15.25 7.45 15.24 7.70 C 15.23 7.95 15.31 8.19 15.46 8.38 L 15.53 8.46 L 15.70 8.64 C 16.09 9.06 16.39 9.55 16.61 10.08 L 16.70 10.31 C 16.90 10.85 17 11.42 17 12 L 16.99 12.24 C 16.96 12.73 16.87 13.22 16.70 13.68 L 16.61 13.91 C 16.36 14.51 15.99 15.07 15.53 15.53 C 15.35 15.72 15.25 15.97 15.26 16.23 C 15.26 16.49 15.37 16.74 15.55 16.92 C 15.73 17.11 15.98 17.21 16.24 17.22 C 16.50 17.22 16.76 17.12 16.95 16.95 C 17.6 16.29 18.11 15.52 18.46 14.67 L 18.59 14.35 C 18.82 13.71 18.95 13.03 18.99 12.34 L 19 12 C 18.99 11.19 18.86 10.39 18.59 9.64 L 18.46 9.32 C 18.15 8.57 17.72 7.89 17.18 7.3 L 16.95 7.05 L 16.87 6.98 C 16.68 6.82 16.43 6.74 16.19 6.75 C 15.94 6.77 15.71 6.87 15.53 7.05",
+          fill: "#fff",
+          transform: "translate(18, 12) scale(1) translate(-18,-12)"
+        }), _jsx("path", {
+          d: "M18.36 4.22C18.18 4.39 18.08 4.62 18.07 4.87C18.05 5.12 18.13 5.36 18.29 5.56L18.36 5.63L18.66 5.95C19.36 6.72 19.91 7.60 20.31 8.55L20.47 8.96C20.82 9.94 21 10.96 21 11.99L20.98 12.44C20.94 13.32 20.77 14.19 20.47 15.03L20.31 15.44C19.86 16.53 19.19 17.52 18.36 18.36C18.17 18.55 18.07 18.80 18.07 19.07C18.07 19.33 18.17 19.59 18.36 19.77C18.55 19.96 18.80 20.07 19.07 20.07C19.33 20.07 19.59 19.96 19.77 19.77C20.79 18.75 21.61 17.54 22.16 16.20L22.35 15.70C22.72 14.68 22.93 13.62 22.98 12.54L23 12C22.99 10.73 22.78 9.48 22.35 8.29L22.16 7.79C21.67 6.62 20.99 5.54 20.15 4.61L19.77 4.22L19.70 4.15C19.51 3.99 19.26 3.91 19.02 3.93C18.77 3.94 18.53 4.04 18.36 4.22 Z",
+          fill: "#fff",
+          transform: "translate(22, 12) scale(1) translate(-22, -12)"
+        })]
+      });
+    case 'soundOff':
+      return _jsx("svg", {
+        fill: "currentColor",
+        height: sizes[size],
+        viewBox: "0 0 24 24",
+        width: sizes[size],
+        children: _jsx("path", {
+          d: "M11.60 2.08L11.48 2.14L3.91 6.68C3.02 7.21 2.28 7.97 1.77 8.87C1.26 9.77 1.00 10.79 1 11.83V12.16L1.01 12.56C1.07 13.52 1.37 14.46 1.87 15.29C2.38 16.12 3.08 16.81 3.91 17.31L11.48 21.85C11.63 21.94 11.80 21.99 11.98 21.99C12.16 22.00 12.33 21.95 12.49 21.87C12.64 21.78 12.77 21.65 12.86 21.50C12.95 21.35 13 21.17 13 21V3C12.99 2.83 12.95 2.67 12.87 2.52C12.80 2.37 12.68 2.25 12.54 2.16C12.41 2.07 12.25 2.01 12.08 2.00C11.92 1.98 11.75 2.01 11.60 2.08ZM4.94 8.4V8.40L11 4.76V19.23L4.94 15.6C4.38 15.26 3.92 14.80 3.58 14.25C3.24 13.70 3.05 13.07 3.00 12.43L3 12.17V11.83C2.99 11.14 3.17 10.46 3.51 9.86C3.85 9.25 4.34 8.75 4.94 8.4ZM21.29 8.29L19 10.58L16.70 8.29L16.63 8.22C16.43 8.07 16.19 7.99 15.95 8.00C15.70 8.01 15.47 8.12 15.29 8.29C15.12 8.47 15.01 8.70 15.00 8.95C14.99 9.19 15.07 9.43 15.22 9.63L15.29 9.70L17.58 12L15.29 14.29C15.19 14.38 15.12 14.49 15.06 14.61C15.01 14.73 14.98 14.87 14.98 15.00C14.98 15.13 15.01 15.26 15.06 15.39C15.11 15.51 15.18 15.62 15.28 15.71C15.37 15.81 15.48 15.88 15.60 15.93C15.73 15.98 15.86 16.01 15.99 16.01C16.12 16.01 16.26 15.98 16.38 15.93C16.50 15.87 16.61 15.80 16.70 15.70L19 13.41L21.29 15.70L21.36 15.77C21.56 15.93 21.80 16.01 22.05 15.99C22.29 15.98 22.53 15.88 22.70 15.70C22.88 15.53 22.98 15.29 22.99 15.05C23.00 14.80 22.93 14.56 22.77 14.36L22.70 14.29L20.41 12L22.70 9.70C22.80 9.61 22.87 9.50 22.93 9.38C22.98 9.26 23.01 9.12 23.01 8.99C23.01 8.86 22.98 8.73 22.93 8.60C22.88 8.48 22.81 8.37 22.71 8.28C22.62 8.18 22.51 8.11 22.39 8.06C22.26 8.01 22.13 7.98 22.00 7.98C21.87 7.98 21.73 8.01 21.61 8.06C21.49 8.12 21.38 8.19 21.29 8.29Z",
+          fill: "white"
+        })
+      });
+    case 'subtitle':
+      return _jsx("svg", {
+        fill: "currentColor",
+        height: sizes[size],
+        viewBox: "0 0 24 24",
+        width: sizes[size],
+        children: _jsx("path", {
+          d: "M21.20 3.01L21 3H3L2.79 3.01C2.30 3.06 1.84 3.29 1.51 3.65C1.18 4.02 .99 4.50 1 5V19L1.01 19.20C1.05 19.66 1.26 20.08 1.58 20.41C1.91 20.73 2.33 20.94 2.79 20.99L3 21H21L21.20 20.98C21.66 20.94 22.08 20.73 22.41 20.41C22.73 20.08 22.94 19.66 22.99 19.20L23 19V5C23.00 4.50 22.81 4.02 22.48 3.65C22.15 3.29 21.69 3.06 21.20 3.01ZM3 19V5H21V19H3ZM8 11H6C5.73 11 5.48 11.10 5.29 11.29C5.10 11.48 5 11.73 5 12C5 12.26 5.10 12.51 5.29 12.70C5.48 12.89 5.73 13 6 13H8C8.26 13 8.51 12.89 8.70 12.70C8.89 12.51 9 12.26 9 12C9 11.73 8.89 11.48 8.70 11.29C8.51 11.10 8.26 11 8 11ZM18 11H12C11.73 11 11.48 11.10 11.29 11.29C11.10 11.48 11 11.73 11 12C11 12.26 11.10 12.51 11.29 12.70C11.48 12.89 11.73 13 12 13H18C18.26 13 18.51 12.89 18.70 12.70C18.89 12.51 19 12.26 19 12C19 11.73 18.89 11.48 18.70 11.29C18.51 11.10 18.26 11 18 11ZM18 15H16C15.73 15 15.48 15.10 15.29 15.29C15.10 15.48 15 15.73 15 16C15 16.26 15.10 16.51 15.29 16.70C15.48 16.89 15.73 17 16 17H18C18.26 17 18.51 16.89 18.70 16.70C18.89 16.51 19 16.26 19 16C19 15.73 18.89 15.48 18.70 15.29C18.51 15.10 18.26 15 18 15ZM12 15H6C5.73 15 5.48 15.10 5.29 15.29C5.10 15.48 5 15.73 5 16C5 16.26 5.10 16.51 5.29 16.70C5.48 16.89 5.73 17 6 17H12C12.26 17 12.51 16.89 12.70 16.70C12.89 16.51 13 16.26 13 16C13 15.73 12.89 15.48 12.70 15.29C12.51 15.10 12.26 15 12 15Z",
+          fill: "white"
+        })
+      });
+    case 'wideScreen':
+      return _jsx("svg", {
+        fill: "currentColor",
+        height: sizes[size],
+        viewBox: "0 0 24 24",
+        width: sizes[size],
+        children: _jsx("path", {
+          d: "M21.20 3.01L21 3H3L2.79 3.01C2.30 3.06 1.84 3.29 1.51 3.65C1.18 4.02 .99 4.50 1 5V19L1.01 19.20C1.05 19.66 1.26 20.08 1.58 20.41C1.91 20.73 2.33 20.94 2.79 20.99L3 21H21L21.20 20.98C21.66 20.94 22.08 20.73 22.41 20.41C22.73 20.08 22.94 19.66 22.99 19.20L23 19V5C23.00 4.50 22.81 4.02 22.48 3.65C22.15 3.29 21.69 3.06 21.20 3.01ZM3 15V5H21V15H3ZM7.87 6.72L7.79 6.79L4.58 10L7.79 13.20C7.88 13.30 7.99 13.37 8.11 13.43C8.23 13.48 8.37 13.51 8.50 13.51C8.63 13.51 8.76 13.48 8.89 13.43C9.01 13.38 9.12 13.31 9.21 13.21C9.31 13.12 9.38 13.01 9.43 12.89C9.48 12.76 9.51 12.63 9.51 12.50C9.51 12.37 9.48 12.23 9.43 12.11C9.37 11.99 9.30 11.88 9.20 11.79L7.41 10L9.20 8.20L9.27 8.13C9.42 7.93 9.50 7.69 9.48 7.45C9.47 7.20 9.36 6.97 9.19 6.80C9.02 6.63 8.79 6.52 8.54 6.51C8.30 6.49 8.06 6.57 7.87 6.72ZM14.79 6.79C14.60 6.98 14.50 7.23 14.50 7.5C14.50 7.76 14.60 8.01 14.79 8.20L16.58 10L14.79 11.79L14.72 11.86C14.57 12.06 14.49 12.30 14.50 12.54C14.51 12.79 14.62 13.02 14.79 13.20C14.97 13.37 15.20 13.48 15.45 13.49C15.69 13.50 15.93 13.42 16.13 13.27L16.20 13.20L19.41 10L16.20 6.79C16.01 6.60 15.76 6.50 15.5 6.50C15.23 6.50 14.98 6.60 14.79 6.79ZM3 19V17H21V19H3Z",
+          fill: "white"
+        })
+      });
+    case 'prevVideo':
+      return _jsx("svg", {
+        fill: "currentColor",
+        height: sizes[size],
+        viewBox: "0 0 24 24",
+        width: sizes[size],
+        children: _jsx("path", {
+          d: "M4 4C3.73 4 3.48 4.10 3.29 4.29C3.10 4.48 3 4.73 3 5V19C3 19.26 3.10 19.51 3.29 19.70C3.48 19.89 3.73 20 4 20C4.26 20 4.51 19.89 4.70 19.70C4.89 19.51 5 19.26 5 19V5C5 4.73 4.89 4.48 4.70 4.29C4.51 4.10 4.26 4 4 4ZM18.95 4.23L6 12.00L18.95 19.77C19.15 19.89 19.39 19.96 19.63 19.96C19.87 19.97 20.10 19.91 20.31 19.79C20.52 19.67 20.69 19.50 20.81 19.29C20.93 19.09 21.00 18.85 21 18.61V5.38C20.99 5.14 20.93 4.91 20.81 4.70C20.69 4.50 20.52 4.33 20.31 4.21C20.10 4.09 19.87 4.03 19.63 4.03C19.39 4.04 19.15 4.10 18.95 4.23Z",
+          fill: "white"
+        })
+      });
+    case 'nextVideo':
+      return _jsx("svg", {
+        fill: "colorFill",
+        height: sizes[size],
+        viewBox: "0 0 24 24",
+        width: sizes[size],
+        children: _jsx("path", {
+          d: "M20 20C20.26 20 20.51 19.89 20.70 19.70C20.89 19.51 21 19.26 21 19V5C21 4.73 20.89 4.48 20.70 4.29C20.51 4.10 20.26 4 20 4C19.73 4 19.48 4.10 19.29 4.29C19.10 4.48 19 4.73 19 5V19C19 19.26 19.10 19.51 19.29 19.70C19.48 19.89 19.73 20 20 20ZM5.04 19.77L18 12L5.04 4.22C4.84 4.10 4.60 4.03 4.36 4.03C4.12 4.03 3.89 4.09 3.68 4.21C3.47 4.32 3.30 4.49 3.18 4.70C3.06 4.91 2.99 5.14 3 5.38V18.61C2.99 18.85 3.06 19.08 3.18 19.29C3.30 19.50 3.47 19.67 3.68 19.79C3.89 19.90 4.12 19.96 4.36 19.96C4.60 19.96 4.84 19.89 5.04 19.77Z",
+          fill: "white"
+        })
+      });
+    default:
+      break;
+  }
+};

package/dist/shared/ui/index.d.ts

@@ -0,0 +1,3 @@
+export { Modal, ModalProvider } from './modal/modal';
+export { Svg } from './Svg';
+//# sourceMappingURL=index.d.ts.map

package/dist/shared/ui/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/shared/ui/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AACpD,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA"}

package/dist/shared/ui/index.js

@@ -0,0 +1,2 @@
+export { Modal, ModalProvider } from './modal/modal';
+export { Svg } from './Svg';

package/dist/shared/ui/modal/modal.d.ts

@@ -0,0 +1,19 @@
+interface IModalProvider {
+    isOpened: boolean;
+    setIsOpened: (el: boolean) => void;
+    children: React.ReactNode;
+}
+interface IModal {
+    children?: React.ReactNode;
+    title?: string;
+    level: number;
+}
+interface IModalContext {
+    openedModal: string | undefined | null;
+    setOpenedModal: (title: string | undefined | null) => void;
+}
+export declare const ModalContext: import("react").Context<IModalContext | null | undefined>;
+export declare const ModalProvider: React.FC<IModalProvider>;
+export declare const Modal: React.FC<IModal>;
+export {};
+//# sourceMappingURL=modal.d.ts.map

package/dist/shared/ui/modal/modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../../src/shared/ui/modal/modal.tsx"],"names":[],"mappings":"AAGA,UAAU,cAAc;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,CAAC,EAAE,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AACD,UAAU,MAAM;IACZ,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,aAAa;IACnB,WAAW,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;IACvC,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,KAAK,IAAI,CAAC;CAC9D;AAED,eAAO,MAAM,YAAY,2DAA6D,CAAA;AAEtF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAelD,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAWlC,CAAA"}

package/dist/shared/ui/modal/modal.js

@@ -0,0 +1,39 @@
+import { createContext, useContext, useState } from 'react';
+import styles from './styles.module.scss';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const ModalContext = createContext(undefined);
+export const ModalProvider = ({
+  isOpened = 'settings',
+  setIsOpened,
+  children
+}) => {
+  console.log('isOpened = ', isOpened);
+  const [openedModal, setOpenedModal] = useState();
+  console.log('openedModal:::: ', openedModal);
+  return _jsx("div", {
+    className: isOpened ? styles.modalContainer : styles.modalContainer_hidden,
+    children: _jsx(ModalContext.Provider, {
+      value: {
+        openedModal,
+        setOpenedModal
+      },
+      children: children
+    })
+  });
+};
+export const Modal = ({
+  children,
+  title,
+  level
+}) => {
+  const context = useContext(ModalContext);
+  console.log('openedModal = ', context?.openedModal);
+  return _jsxs("div", {
+    className: context?.openedModal === title ? styles.wrappedModal : styles.wrappedModal_hidden,
+    children: [_jsx("div", {
+      className: styles.modalTitle,
+      onClick: e => context?.setOpenedModal(title),
+      children: title
+    }), children]
+  });
+};

package/dist/shared/ui/modal/styles.module.scss

@@ -0,0 +1,21 @@
+.modalContainer {
+    display: block;
+    position: absolute;
+    bottom: 200%;
+    background-color: aqua;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    &_hidden {
+        display: none;
+    }
+}
+
+.wrappedModal {
+    display: block;
+    position: absolute;
+    bottom: 200%;
+    display: flex;
+    flex-direction: column;
+}

package/dist/shared/utils/getHHSStime.d.ts

@@ -0,0 +1,2 @@
+export declare const getHHSStime: (duartion: number) => string | undefined;
+//# sourceMappingURL=getHHSStime.d.ts.map

package/dist/shared/utils/getHHSStime.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getHHSStime.d.ts","sourceRoot":"","sources":["../../../src/shared/utils/getHHSStime.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,GAAI,UAAU,MAAM,uBA2B3C,CAAA"}

package/dist/shared/utils/getHHSStime.js

@@ -0,0 +1,20 @@
+export const getHHSStime = duartion => {
+  if (duartion === 0) return `00:00`;
+  if (!duartion) return;
+  if (duartion < 10) return `0:0${duartion}`;
+  if (duartion < 60) return `0:${duartion}`;
+  if (duartion === 60) return `1:00`;
+  if (duartion > 60) {
+    var seconds = Math.trunc(duartion % 60);
+    var minutes = Math.trunc(duartion / 60);
+    var secondsFormatet;
+    var minutesFormatet;
+    if (seconds < 1) secondsFormatet = `00`;
+    if (seconds < 10) secondsFormatet = `0${seconds}`;
+    if (seconds >= 10) secondsFormatet = `${seconds}`;
+    if (minutes === 1) minutesFormatet = `00`;
+    if (minutes < 10) minutesFormatet = `${minutes}`;
+    if (minutes >= 10) minutesFormatet = `${minutes}`;
+    return `${minutesFormatet}:${secondsFormatet}`;
+  }
+};

package/dist/widget/video-tag/lib/handlers.d.ts

@@ -0,0 +1,6 @@
+import { RefObject } from "react";
+export declare const VideoTagHandlers: (hideToolsTimer: RefObject<NodeJS.Timeout | null>, setIsVisibleTools: (visible: boolean) => void) => {
+    handleMouseMove: () => void;
+    handleMouseLeave: () => void;
+};
+//# sourceMappingURL=handlers.d.ts.map

package/dist/widget/video-tag/lib/handlers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"handlers.d.ts","sourceRoot":"","sources":["../../../../src/widget/video-tag/lib/handlers.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,eAAO,MAAM,gBAAgB,GACzB,gBAAgB,SAAS,CAAC,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC,EAChD,mBAAmB,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI;;;CAwBhD,CAAC"}

package/dist/widget/video-tag/lib/handlers.js

@@ -0,0 +1,21 @@
+export const VideoTagHandlers = (hideToolsTimer, setIsVisibleTools) => {
+  const handleMouseMove = () => {
+    setIsVisibleTools(true);
+    if (hideToolsTimer.current) {
+      clearTimeout(hideToolsTimer.current);
+    }
+    hideToolsTimer.current = setTimeout(() => {
+      setIsVisibleTools(false);
+    }, 3000);
+  };
+  const handleMouseLeave = () => {
+    if (hideToolsTimer.current) {
+      clearTimeout(hideToolsTimer.current);
+    }
+    setIsVisibleTools(false);
+  };
+  return {
+    handleMouseMove,
+    handleMouseLeave
+  };
+};

package/dist/widget/video-tag/model/video-tag.interface.d.ts

@@ -0,0 +1,16 @@
+import { RefObject } from "react";
+export interface IFragment {
+    start: number;
+    end: number;
+    title: string;
+}
+export interface IVideoTag {
+    duration: number;
+    videoRef: RefObject<HTMLVideoElement | null>;
+    fragments?: IFragment[];
+    isLiveStream?: boolean;
+}
+export interface IVideoTagHandlers {
+    setIsVisibleTools: (isVisible: boolean) => void;
+}
+//# sourceMappingURL=video-tag.interface.d.ts.map

package/dist/widget/video-tag/model/video-tag.interface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"video-tag.interface.d.ts","sourceRoot":"","sources":["../../../../src/widget/video-tag/model/video-tag.interface.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,WAAW,SAAS;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAA;CAChB;AAED,MAAM,WAAW,SAAS;IACtB,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAA;IAC5C,SAAS,CAAC,EAAE,SAAS,EAAE,CAAA;IACvB,YAAY,CAAC,EAAE,OAAO,CAAA;CACzB;AAED,MAAM,WAAW,iBAAiB;IAC9B,iBAAiB,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAA;CAClD"}

package/dist/widget/video-tag/model/video-tag.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/widget/video-tag/ui/styles.module.scss

@@ -0,0 +1,16 @@
+.playerContainer {
+    position: relative;
+    width: 1400px;
+
+    &_hidden {
+        transition: all 1s ease;
+        position: relative;
+        width: 1400px;
+        cursor: none;
+    }
+}
+
+.video {
+    height: 100%;
+    width: 100%;
+}

package/dist/widget/video-tag/ui/video-tag.d.ts

@@ -0,0 +1,3 @@
+import { IVideoTag } from "../model/video-tag.interface";
+export declare const VideoTag: React.FC<IVideoTag>;
+//# sourceMappingURL=video-tag.d.ts.map

package/dist/widget/video-tag/ui/video-tag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"video-tag.d.ts","sourceRoot":"","sources":["../../../../src/widget/video-tag/ui/video-tag.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAKxD,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAuBxC,CAAA"}

package/dist/widget/video-tag/ui/video-tag.js

@@ -0,0 +1,38 @@
+'use client';
+
+import { PlayerTools } from "../../../features/player-tools/ui/player-tools";
+import { usePlayerContext } from "../../../component";
+import { VideoTagHandlers } from "../lib/handlers";
+import styles from './styles.module.scss';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const VideoTag = ({
+  duration,
+  videoRef,
+  fragments,
+  isLiveStream
+}) => {
+  const context = usePlayerContext();
+  const {
+    handleMouseMove,
+    handleMouseLeave
+  } = VideoTagHandlers(context.hideToolsTimer, context.setIsVisibleTools);
+  return _jsxs("div", {
+    id: "playerContainer",
+    className: context.isVisibleTools ? styles.playerContainer : styles.playerContainer_hidden,
+    onClick: () => {
+      context.setIsPaused(prev => !prev);
+    },
+    onMouseMove: handleMouseMove,
+    onMouseLeave: handleMouseLeave,
+    children: [_jsx("video", {
+      className: styles.video,
+      id: "video",
+      ref: videoRef
+    }), _jsx(PlayerTools, {
+      duration: duration,
+      videoRef: videoRef,
+      isVisibleTools: context.isVisibleTools,
+      fragments: fragments
+    })]
+  });
+};