@webitch/player 0.1.0

package/dist/entites/play-buttons/ui/styles.module.scss

@@ -0,0 +1,65 @@
+.toolsBtns {
+    bottom: 0%;
+    left: 2%;
+    z-index: 10;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    align-self: center;
+    align-content: center;
+    top: 105%;
+}
+
+.playBtnWrap {
+    background-color: rgb(0, 0, 0, 0.3);
+    user-select: none;
+    border: none;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    border-radius: 28px;
+    padding: 3px 3px 3px 3px;
+}
+
+.playBtn {
+    background-color: rgb(0, 0, 0, 0.0);
+    user-select: none;
+    border: none;
+    transition: all 0.2s ease;
+    border-radius: 28px;
+    padding: 2px 6px 2px 6px;
+
+        &:hover {
+            background-color: rgb(255, 255, 255, 0.1);
+        }
+}
+
+.replaceVideoBtns {
+    background-color: rgb(0, 0, 0, 0.3);
+    border-radius: 28px;
+    padding: 4px 4px 4px 4px;
+    align-items: center;
+    display: flex;
+    gap: 0px;
+}
+
+.forwardBtn {
+    background: none;
+    border-radius: 28px;
+    padding: 4px 16px 0px 16px;
+    border: none;
+    color: #fff;
+    cursor: pointer;
+    user-select: none;
+
+    &:hover {
+        background-color: rgb(255, 255, 255, 0.1);
+    }
+}
+
+.rewindBtn {
+    background: none;
+    border: none;
+    color: #fff;
+    cursor: pointer;
+    user-select: none;
+}

package/dist/entites/progress-bar/index.d.ts

@@ -0,0 +1,2 @@
+export { ProgressBar } from './ui/progress-bar';
+//# sourceMappingURL=index.d.ts.map

package/dist/entites/progress-bar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/entites/progress-bar/index.ts"],"names":[],"mappings":"AAAA,OAAQ,EAAC,WAAW,EAAE,MAAM,mBAAmB,CAAA"}

package/dist/entites/progress-bar/index.js

@@ -0,0 +1 @@
+export { ProgressBar } from './ui/progress-bar';

package/dist/entites/progress-bar/lib/handlers.d.ts

@@ -0,0 +1,16 @@
+import { IFragment } from "@/widget/video-tag/model/video-tag.interface";
+import { Dispatch, JSX, RefObject, SetStateAction } from "react";
+export declare const handleMouseOver: (e: React.MouseEvent, isDragging: boolean, duration: number, progressContainerRef: RefObject<HTMLDivElement | null>, setHoverTime: (newHoverTime: number) => void) => void;
+export declare const handleClick: (e: React.MouseEvent, isDragging: boolean, duration: number, progressContainerRef: RefObject<HTMLDivElement | null>, videoRef: RefObject<HTMLMediaElement>, setCurrentVideoTime: (newCurrentVideoTime: number) => void) => void;
+export declare const handleMouseDown: (e: React.MouseEvent, setIsDragging: Dispatch<SetStateAction<boolean>>) => void;
+export interface ProgressBarFragmentProps {
+    duration: number;
+    fragments: IFragment[] | null | undefined;
+    bufferedFragments: Array<{
+        start: number;
+        end: number;
+    }>;
+    currentVideoTime: number;
+}
+export declare const getProgressBarFragments: ({ duration, fragments, bufferedFragments, currentVideoTime, }: ProgressBarFragmentProps) => JSX.Element[];
+//# sourceMappingURL=handlers.d.ts.map

package/dist/entites/progress-bar/lib/handlers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"handlers.d.ts","sourceRoot":"","sources":["../../../../src/entites/progress-bar/lib/handlers.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,8CAA8C,CAAC;AACzE,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,SAAS,EAAE,cAAc,EAAW,MAAM,OAAO,CAAA;AAIzE,eAAO,MAAM,eAAe,GAAI,GAAG,KAAK,CAAC,UAAU,EAAE,YAAY,OAAO,EAAE,UAAU,MAAM,EAAE,sBAAsB,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,EAAE,cAAc,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,SAO/L,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,GAAG,KAAK,CAAC,UAAU,EAAE,YAAY,OAAO,EAAE,UAAU,MAAM,EAAE,sBAAsB,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,EAAE,UAAU,SAAS,CAAC,gBAAgB,CAAC,EAAE,qBAAqB,CAAC,mBAAmB,EAAE,MAAM,KAAK,IAAI,SAShP,CAAC;AAEF,eAAO,MAAM,eAAe,GACxB,GAAG,KAAK,CAAC,UAAU,EACnB,eAAe,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,SAMnD,CAAC;AAEF,MAAM,WAAW,wBAAwB;IACvC,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,SAAS,EAAE,GAAG,IAAI,GAAG,SAAS,CAAC;IAC1C,iBAAiB,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACzD,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,uBAAuB,GAAI,+DAKrC,wBAAwB,kBAuH1B,CAAC"}

package/dist/entites/progress-bar/lib/handlers.js

@@ -0,0 +1,97 @@
+import styles from '../ui/styles.module.scss';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const handleMouseOver = (e, isDragging, duration, progressContainerRef, setHoverTime) => {
+  if (!isDragging && progressContainerRef.current && duration) {
+    const rect = progressContainerRef.current.getBoundingClientRect();
+    const clickPosition = Math.min(Math.max(e.clientX - rect.left, 0), rect.width);
+    const newTime = clickPosition / rect.width * duration;
+    setHoverTime(newTime);
+  }
+};
+export const handleClick = (e, isDragging, duration, progressContainerRef, videoRef, setCurrentVideoTime) => {
+  if (!isDragging && progressContainerRef.current && duration) {
+    const rect = progressContainerRef.current.getBoundingClientRect();
+    const clickPosition = Math.min(Math.max(e.clientX - rect.left, 0), rect.width);
+    const newTime = clickPosition / rect.width * duration;
+    videoRef.current.currentTime = newTime;
+    setCurrentVideoTime(newTime);
+  }
+};
+export const handleMouseDown = (e, setIsDragging) => {
+  e.preventDefault();
+  console.log('handleMouseDown');
+  setIsDragging(true);
+};
+export const getProgressBarFragments = ({
+  duration,
+  fragments,
+  bufferedFragments,
+  currentVideoTime
+}) => {
+  const elements = [];
+  const getGradientStops = (start, end, progress, buffers) => {
+    const gradientStops = [];
+    const progressPercent = progress >= end ? 100 : progress > start ? (progress - start) / (end - start) * 100 : 0;
+    if (progressPercent > 0) {
+      gradientStops.push("#1e90ff 0%");
+      gradientStops.push(`#1e90ff ${progressPercent}%`);
+      gradientStops.push(`#444 ${progressPercent}%`);
+    } else {
+      gradientStops.push("#444 0%");
+    }
+    const bufferStops = [];
+    buffers.forEach(buffered => {
+      const overlapStart = Math.max(start, buffered.start);
+      const overlapEnd = Math.min(end, buffered.end);
+      if (overlapStart < overlapEnd) {
+        const bufferStartPercent = (overlapStart - start) / (end - start) * 100;
+        const bufferEndPercent = (overlapEnd - start) / (end - start) * 100;
+        if (bufferEndPercent > progressPercent) {
+          bufferStops.push({
+            start: Math.max(bufferStartPercent, progressPercent),
+            end: bufferEndPercent
+          });
+        }
+      }
+    });
+    bufferStops.forEach(buffer => {
+      gradientStops.push(`#666 ${buffer.start}%`);
+      gradientStops.push(`#666 ${buffer.end}%`);
+    });
+    const lastValue = gradientStops.length > 0 ? parseFloat(gradientStops[gradientStops.length - 1].split(" ")[1].replace("%", "")) : 0;
+    if (lastValue < 100) {
+      gradientStops.push(`#444 ${Math.max(lastValue, progressPercent)}%`);
+      gradientStops.push(`#444 100%`);
+    }
+    return gradientStops;
+  };
+  if (!duration || !fragments || fragments.length === 0) {
+    const gradientStops = getGradientStops(0, duration || 100, currentVideoTime, bufferedFragments);
+    const gradient = `linear-gradient(to right, ${gradientStops.join(", ")})`;
+    elements.push(_jsx("div", {
+      className: styles.fragment,
+      style: {
+        left: "0%",
+        width: "100%",
+        background: gradient
+      }
+    }, "single-fragment"));
+    return elements;
+  }
+  fragments.forEach((fragment, index) => {
+    const fragmentStartPercent = fragment.start / duration * 100;
+    const fragmentEndPercent = fragment.end / duration * 100;
+    const fragmentWidthPercent = fragmentEndPercent - fragmentStartPercent;
+    const gradientStops = getGradientStops(fragment.start, fragment.end, currentVideoTime, bufferedFragments);
+    const gradient = `linear-gradient(to right, ${gradientStops.join(", ")})`;
+    elements.push(_jsx("div", {
+      className: styles.fragment,
+      style: {
+        left: `${fragmentStartPercent}%`,
+        width: `${fragmentWidthPercent}%`,
+        background: gradient
+      }
+    }, index));
+  });
+  return elements;
+};

package/dist/entites/progress-bar/ui/progress-bar.d.ts

@@ -0,0 +1,11 @@
+import { RefObject } from "react";
+import { IFragment } from "../../../widget/video-tag/model/video-tag.interface";
+interface IProgressBar {
+    duration: number;
+    videoRef: RefObject<HTMLVideoElement>;
+    fragments?: IFragment[];
+    isLiveStream?: boolean;
+}
+export declare const ProgressBar: React.FC<IProgressBar>;
+export {};
+//# sourceMappingURL=progress-bar.d.ts.map

package/dist/entites/progress-bar/ui/progress-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-bar.d.ts","sourceRoot":"","sources":["../../../../src/entites/progress-bar/ui/progress-bar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,SAAS,EAAwC,MAAM,OAAO,CAAC;AAI7E,OAAO,EAAE,SAAS,EAAE,MAAM,qDAAqD,CAAC;AAWhF,UAAU,YAAY;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;IACtC,SAAS,CAAC,EAAE,SAAS,EAAE,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAA;CACzB;AAOD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA0K9C,CAAC"}

package/dist/entites/progress-bar/ui/progress-bar.js

@@ -0,0 +1,140 @@
+'use client';
+
+import { useEffect, useRef, useState } from "react";
+import { usePlayerContext } from "../../../component";
+import { getHHSStime } from "../../../shared/utils/getHHSStime";
+import { getProgressBarFragments, handleClick, handleMouseDown, handleMouseOver } from "../lib/handlers";
+import styles from './styles.module.scss';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const ProgressBar = ({
+  duration,
+  videoRef,
+  fragments,
+  isLiveStream
+}) => {
+  const [hoverTime, setHoverTime] = useState(0);
+  const [isDragging, setIsDragging] = useState(false);
+  const [bufferedFragments, setBufferedFragments] = useState([]);
+  const [currentVideoTime, setCurrentVideoTime] = useState(0);
+  const progressContainerRef = useRef(null);
+  const animationFrameRef = useRef(0);
+  const context = usePlayerContext();
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video || isDragging) return;
+    const updateTime = () => {
+      setCurrentVideoTime(video.currentTime);
+      animationFrameRef.current = requestAnimationFrame(updateTime);
+    };
+    animationFrameRef.current = requestAnimationFrame(updateTime);
+    return () => {
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+    };
+  }, [videoRef, duration, isDragging]);
+  useEffect(() => {
+    if (!isDragging) return;
+    let isUpdating = false;
+    const handleMouseMoveWrapper = e => {
+      if (!progressContainerRef.current || !duration || isUpdating) return;
+      isUpdating = true;
+      context.setIsPaused(true);
+      requestAnimationFrame(() => {
+        const rect = progressContainerRef.current.getBoundingClientRect();
+        const clickPosition = Math.min(Math.max(e.clientX - rect.left, 0), rect.width);
+        const clickPercentage = clickPosition / rect.width;
+        const newTime = clickPercentage * duration;
+        setCurrentVideoTime(newTime);
+        videoRef.current.currentTime = newTime;
+        setHoverTime(newTime);
+        const timeHoverPosition = document.getElementById('timeHover');
+        if (timeHoverPosition) {
+          timeHoverPosition.style.left = `${clickPosition}px`;
+        }
+        isUpdating = false;
+      });
+    };
+    const handleMouseUpWrapper = e => {
+      if (!progressContainerRef.current || !videoRef.current || !duration) return;
+      const rect = progressContainerRef.current.getBoundingClientRect();
+      const clickPosition = Math.min(Math.max(e.clientX - rect.left, 0), rect.width);
+      const clickPercentage = clickPosition / rect.width;
+      const newTime = clickPercentage * duration;
+      videoRef.current.currentTime = newTime;
+      setCurrentVideoTime(newTime);
+      setHoverTime(0);
+      setIsDragging(false);
+    };
+    const playerContainer = document.documentElement;
+    if (!playerContainer) return;
+    playerContainer.addEventListener('mousemove', handleMouseMoveWrapper, {
+      passive: true
+    });
+    playerContainer.addEventListener('mouseup', handleMouseUpWrapper, {
+      passive: true
+    });
+    return () => {
+      playerContainer.removeEventListener('mousemove', handleMouseMoveWrapper);
+      playerContainer.removeEventListener('mouseup', handleMouseUpWrapper);
+    };
+  }, [isDragging, duration, videoRef, context]);
+  useEffect(() => {
+    if (!videoRef?.current) return;
+    const videoElement = videoRef.current;
+    const updateBufferedRanges = () => {
+      const fragments = [];
+      for (let index = 0; index < videoElement.buffered.length; index++) {
+        fragments.push({
+          start: videoElement.buffered.start(index),
+          end: videoElement.buffered.end(index)
+        });
+      }
+      setBufferedFragments(fragments);
+    };
+    videoElement.addEventListener('progress', updateBufferedRanges);
+    videoElement.addEventListener('loadeddata', updateBufferedRanges);
+    return () => {
+      videoElement.removeEventListener('progress', updateBufferedRanges);
+      videoElement.removeEventListener('loadeddata', updateBufferedRanges);
+    };
+  }, [videoRef]);
+  if (isLiveStream || !duration) return _jsx("div", {
+    children: "\u044D\u0442\u043E \u0441\u0442\u0440\u0438\u043C, \u043D\u0443\u0436\u043D\u043E \u043F\u0435\u0440\u0435\u0434\u0435\u043B\u0430\u0442\u044C \u043F\u0440\u043E\u0433\u0440\u0435\u0441 \u0431\u0430\u0440"
+  });
+  return _jsxs("div", {
+    className: styles.progressBarContainer,
+    children: [_jsx("div", {
+      id: "timeHover",
+      className: hoverTime ? styles.progressTimeHover : styles.progressTimeHover_hidden,
+      style: {
+        left: `${hoverTime / duration * 100}%`,
+        display: hoverTime ? 'block' : 'none'
+      },
+      children: getHHSStime(Math.trunc(hoverTime))
+    }), _jsx("div", {
+      id: "progressBar",
+      ref: progressContainerRef,
+      className: styles.progressContainer,
+      onClick: e => handleClick(e, isDragging, duration, progressContainerRef, videoRef, setCurrentVideoTime),
+      onMouseDown: e => {
+        handleMouseDown(e, setIsDragging);
+      },
+      onMouseLeave: () => {
+        if (!isDragging) {
+          setHoverTime(0);
+        }
+      },
+      onMouseMove: e => handleMouseOver(e, isDragging, duration, progressContainerRef, setHoverTime),
+      children: _jsx("div", {
+        className: styles.fragmentsContainer,
+        children: getProgressBarFragments({
+          duration,
+          fragments,
+          bufferedFragments,
+          currentVideoTime
+        })
+      })
+    })]
+  });
+};

package/dist/entites/progress-bar/ui/styles.module.scss

@@ -0,0 +1,91 @@
+// .progressBarContainer {
+//     z-index: 1000;
+// }
+
+.progressContainer {
+    position: relative;
+    width: 100%;
+    min-height: 4px;
+    height: 4px;
+    max-height: 6px;
+    cursor: pointer;
+    // overflow: hidden;
+    border-radius: 0px;
+    z-index: 200;
+
+        &:hover {
+            transform: scaleY(1.1);
+        }
+}
+
+.background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #333;
+    z-index: 0;
+}
+
+.fragment {
+    // position: absolute;
+    height: 100%;
+    top: 0;
+    z-index: 1000;
+    // pointer-events: none;
+    // border-radius: 200px;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+
+}
+
+.progressTimeHover {
+    position: absolute;
+    bottom: 100%;
+    transform: translateX(-50%);
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    white-space: nowrap;
+    z-index: 100;
+}
+
+.progressTimeHover_hidden {
+    display: none;
+}
+
+.fragmentsContainer {
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    gap: 2px;
+    z-index: 100;
+
+        // &:hover {
+        //     height: 6px;
+        // }
+                &:hover {
+            transform: scaleY(2);
+        }
+}
+
+.pointer {
+    z-index: 1000;
+    position: absolute;
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+    user-select: none;
+    background-color: #ff0000;
+    bottom: -5px;
+    // right: 0;
+    // left: 0;
+    transform: translateX(50%);
+}

package/dist/entites/settings-buttons/index.d.ts

@@ -0,0 +1,2 @@
+export { SettingsButtons } from './ui/setting-buttons';
+//# sourceMappingURL=index.d.ts.map

package/dist/entites/settings-buttons/index.d.ts.map

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

package/dist/entites/settings-buttons/index.js

@@ -0,0 +1 @@
+export { SettingsButtons } from './ui/setting-buttons';

package/dist/entites/settings-buttons/lib/handlers.d.ts

@@ -0,0 +1,9 @@
+import { Dispatch, RefObject, SetStateAction } from "react";
+import { ModalType } from "../models/settings-buttons.interface";
+export declare const handleChangeVideoSpeed: (videoRef: RefObject<HTMLVideoElement>, value: number) => void;
+export declare const openModal: (newTitle: ModalType, setModalHistory: (newModalHistory: ModalType[] | ((prev: ModalType[]) => ModalType[])) => void, setActiveModal: (activeModal: ModalType) => void) => void;
+export declare const closeModal: (modalHistory: ModalType[], setModalHistory: (newModalHistory: ModalType[]) => void, setActiveModal: (activeModal: ModalType) => void) => void;
+export declare const goBack: (modalHistory: ModalType[], setModalHistory: (newModalHistory: ModalType[] | ((prev: ModalType[]) => ModalType[])) => void, setActiveModal: (activeModal: ModalType) => void) => void;
+export declare const handleOpenFullScreen: (setIsFull: Dispatch<SetStateAction<boolean>>) => void;
+export declare const enablePictureInPicture: (videoRef: RefObject<HTMLVideoElement>) => Promise<void>;
+//# sourceMappingURL=handlers.d.ts.map

package/dist/entites/settings-buttons/lib/handlers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"handlers.d.ts","sourceRoot":"","sources":["../../../../src/entites/settings-buttons/lib/handlers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAGjE,eAAO,MAAM,sBAAsB,GAAI,UAAU,SAAS,CAAC,gBAAgB,CAAC,EAAE,OAAO,MAAM,SAI1F,CAAA;AAED,eAAO,MAAM,SAAS,GAAI,UAAU,SAAS,EAAE,iBAAiB,CAAC,eAAe,EAAE,SAAS,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,SAAS,EAAE,CAAC,KAAK,IAAI,EAAE,gBAAgB,CAAC,WAAW,EAAE,SAAS,KAAK,IAAI,SAK9L,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,cAAc,SAAS,EAAE,EAAE,iBAAiB,CAAC,eAAe,EAAE,SAAS,EAAE,KAAK,IAAI,EAAE,gBAAgB,CAAC,WAAW,EAAE,SAAS,KAAK,IAAI,SAG9J,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,cAAc,SAAS,EAAE,EAAE,iBAAiB,CAAC,eAAe,EAAE,SAAS,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,SAAS,EAAE,CAAC,KAAK,IAAI,EAAE,gBAAgB,CAAC,WAAW,EAAE,SAAS,KAAK,IAAI,SAMjM,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,WAAW,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,SAYhF,CAAA;AAED,eAAO,MAAM,sBAAsB,GAAS,UAAU,SAAS,CAAC,gBAAgB,CAAC,kBAQhF,CAAA"}

package/dist/entites/settings-buttons/lib/handlers.js

@@ -0,0 +1,42 @@
+export const handleChangeVideoSpeed = (videoRef, value) => {
+  if (!videoRef || !videoRef.current) return;
+  videoRef.current.playbackRate = value;
+};
+export const openModal = (newTitle, setModalHistory, setActiveModal) => {
+  if (newTitle) {
+    setModalHistory(prev => [...prev, newTitle]);
+    setActiveModal(newTitle);
+  }
+};
+export const closeModal = (modalHistory, setModalHistory, setActiveModal) => {
+  setModalHistory([]);
+  setActiveModal(null);
+};
+export const goBack = (modalHistory, setModalHistory, setActiveModal) => {
+  if (modalHistory.length > 0) {
+    const previousModal = modalHistory[modalHistory.length - 2];
+    setModalHistory(prev => prev.slice(0, -1));
+    setActiveModal(previousModal);
+  }
+};
+export const handleOpenFullScreen = setIsFull => {
+  const playerContainer = document.getElementById('playerContainer');
+  setIsFull(prev => {
+    if (prev) {
+      document?.exitFullscreen();
+      return false;
+    } else {
+      playerContainer?.requestFullscreen();
+      return true;
+    }
+  });
+};
+export const enablePictureInPicture = async videoRef => {
+  if (document.pictureInPictureEnabled) {
+    try {
+      await videoRef.current.requestPictureInPicture();
+    } catch (error) {
+      console.error(error);
+    }
+  }
+};

package/dist/entites/settings-buttons/models/settings-buttons.interface.d.ts

@@ -0,0 +1,6 @@
+import { RefObject } from "react";
+export interface ISettingsButtons {
+    videoRef: RefObject<HTMLVideoElement>;
+}
+export type ModalType = 'settings' | 'quality' | 'speed' | null;
+//# sourceMappingURL=settings-buttons.interface.d.ts.map

package/dist/entites/settings-buttons/models/settings-buttons.interface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings-buttons.interface.d.ts","sourceRoot":"","sources":["../../../../src/entites/settings-buttons/models/settings-buttons.interface.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,WAAW,gBAAgB;IAC7B,QAAQ,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;CACzC;AAED,MAAM,MAAM,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,IAAI,CAAC"}

package/dist/entites/settings-buttons/models/settings-buttons.interface.js

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

package/dist/entites/settings-buttons/ui/setting-buttons.d.ts

@@ -0,0 +1,3 @@
+import { ISettingsButtons } from '../models/settings-buttons.interface';
+export declare const SettingsButtons: React.FC<ISettingsButtons>;
+//# sourceMappingURL=setting-buttons.d.ts.map

package/dist/entites/settings-buttons/ui/setting-buttons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setting-buttons.d.ts","sourceRoot":"","sources":["../../../../src/entites/settings-buttons/ui/setting-buttons.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,gBAAgB,EAAa,MAAM,sCAAsC,CAAA;AAMlF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA4HtD,CAAA"}