zarebin-player-library 1.0.30 → 1.0.31

package/dist/src/videoPlayerLibrary/shared/helpers/helpers.d.ts

@@ -1,5 +1,6 @@
 import { BookmarkCategory, VideoNumberTypeEnum } from '../interfaces/enums';
 import { default as View360 } from '@egjs/view360';
+import { Ad } from '../interfaces';
 export declare const wait: (s: number) => Promise<unknown>;
 export declare const getRemainingTime: (timestamp: number) => string;
 export declare const compare: (a: any, b: any) => 0 | 1 | -1;
@@ -85,3 +86,5 @@ export declare const sortLanguages: (array: any) => any;
 export declare const hexToRGB: (hex: string, alpha?: number) => string;
 export declare const checkIsOnPremise: (baseUrl: string) => string;
 export declare const handle360: () => Promise<View360>;
+export declare const providerHandler: (ignoreSendProvider?: boolean) => string | undefined;
+export declare const getRandomAd: (ads: Ad[]) => Ad | undefined;

package/dist/src/videoPlayerLibrary/shared/images/importImages.d.ts

@@ -75,5 +75,6 @@ declare const IMAGES: {
     gameOverMagenta: string;
     gameOverBlue: string;
     medal: string;
+    muteBlack: string;
 };
 export default IMAGES;

package/dist/src/videoPlayerLibrary/shared/interfaces/enums.d.ts

@@ -309,6 +309,7 @@ export declare const enum ConditionName {
     handleOverflowHidden = "handleOverflowHidden",
     thresholdOnlineViewers = "thresholdOnlineViewers",
     setSubtitleFirstPlay = "setSubtitleFirstPlay",
+    hasAd = "hasAd",
     showQuizPopover = "showQuizPopover",
     showUserStatus = "showUserStatus",
     isQuizStatusEqual1 = "isQuizStatusEqual1",

package/dist/src/videoPlayerLibrary/shared/interfaces/interfaces.d.ts

@@ -91,6 +91,7 @@ export interface IParams {
     uuid?: string;
     handleRedirectCards?: (id: string, type: string) => void;
     homeButtonClickFlag?: number | null;
+    ad?: Ad;
     redirectOnEndedUrl?: string;
     lang?: "ar" | "fa" | "en";
 }
@@ -359,6 +360,7 @@ export interface IControllerSlice {
     isClickInnerCard: boolean;
     loadedFragmentsCount: number[];
     isViewChangeIn360: boolean;
+    firstMute: boolean;
 }
 export interface IPopoversSlice {
     markersListPopover: boolean;
@@ -1129,3 +1131,16 @@ export interface ICommentSettingsPopoverProps {
         y: number;
     };
 }
+export type Ad = {
+    id: number;
+    url: string;
+    ad_link: string;
+    play_weight: number;
+    mandatory_play_time: number;
+    channel: number;
+    banner?: string;
+    video_id?: number;
+    user_id?: number;
+    content_id?: number;
+    content_type?: number;
+};

package/dist/src/videoPlayerLibrary/shared/redux/slices/controllerSlice.d.ts

@@ -28,6 +28,7 @@ export declare const controllerSlice: import('@reduxjs/toolkit').Slice<IControll
         isClickInnerCard: boolean;
         loadedFragmentsCount: number[];
         isViewChangeIn360: boolean;
+        firstMute: boolean;
     }, action: PayloadAction<boolean>) => void;
     setIsAutoPlay: (state: {
         play: boolean;
@@ -56,6 +57,7 @@ export declare const controllerSlice: import('@reduxjs/toolkit').Slice<IControll
         isClickInnerCard: boolean;
         loadedFragmentsCount: number[];
         isViewChangeIn360: boolean;
+        firstMute: boolean;
     }, action: PayloadAction<boolean>) => void;
     setDuration: (state: {
         play: boolean;
@@ -84,6 +86,7 @@ export declare const controllerSlice: import('@reduxjs/toolkit').Slice<IControll
         isClickInnerCard: boolean;
         loadedFragmentsCount: number[];
         isViewChangeIn360: boolean;
+        firstMute: boolean;
     }, action: PayloadAction<number>) => void;
     setCurrentTime: (state: {
         play: boolean;
@@ -112,6 +115,7 @@ export declare const controllerSlice: import('@reduxjs/toolkit').Slice<IControll
         isClickInnerCard: boolean;
         loadedFragmentsCount: number[];
         isViewChangeIn360: boolean;
+        firstMute: boolean;
     }, action: PayloadAction<number>) => void;
     setMouseMoveTime: (state: {
         play: boolean;
@@ -140,6 +144,7 @@ export declare const controllerSlice: import('@reduxjs/toolkit').Slice<IControll
         isClickInnerCard: boolean;
         loadedFragmentsCount: number[];
         isViewChangeIn360: boolean;
+        firstMute: boolean;
     }, action: PayloadAction<number>) => void;
     setManualQuality: (state: {
         play: boolean;
@@ -168,6 +173,7 @@ export declare const controllerSlice: import('@reduxjs/toolkit').Slice<IControll
         isClickInnerCard: boolean;
         loadedFragmentsCount: number[];
         isViewChangeIn360: boolean;
+        firstMute: boolean;
     }, action: PayloadAction<number | undefined>) => void;
     setAutoQuality: (state: {
         play: boolean;
@@ -196,6 +202,7 @@ export declare const controllerSlice: import('@reduxjs/toolkit').Slice<IControll
         isClickInnerCard: boolean;
         loadedFragmentsCount: number[];
         isViewChangeIn360: boolean;
+        firstMute: boolean;
     }, action: PayloadAction<number | undefined>) => void;
     setQualityLevels: (state: {
         play: boolean;
@@ -224,6 +231,7 @@ export declare const controllerSlice: import('@reduxjs/toolkit').Slice<IControll
         isClickInnerCard: boolean;
         loadedFragmentsCount: number[];
         isViewChangeIn360: boolean;
+        firstMute: boolean;
     }, action: PayloadAction<any[]>) => void;
     setQualityBitrates: (state: {
         play: boolean;
@@ -252,6 +260,7 @@ export declare const controllerSlice: import('@reduxjs/toolkit').Slice<IControll
         isClickInnerCard: boolean;
         loadedFragmentsCount: number[];
         isViewChangeIn360: boolean;
+        firstMute: boolean;
     }, action: PayloadAction<string[]>) => void;
     setActiveElements: (state: {
         play: boolean;
@@ -280,6 +289,7 @@ export declare const controllerSlice: import('@reduxjs/toolkit').Slice<IControll
         isClickInnerCard: boolean;
         loadedFragmentsCount: number[];
         isViewChangeIn360: boolean;
+        firstMute: boolean;
     }, action: PayloadAction<boolean>) => void;
     setIsLive: (state: {
         play: boolean;
@@ -308,6 +318,7 @@ export declare const controllerSlice: import('@reduxjs/toolkit').Slice<IControll
         isClickInnerCard: boolean;
         loadedFragmentsCount: number[];
         isViewChangeIn360: boolean;
+        firstMute: boolean;
     }, action: PayloadAction<boolean>) => void;
     setIsLoading: (state: {
         play: boolean;
@@ -336,6 +347,7 @@ export declare const controllerSlice: import('@reduxjs/toolkit').Slice<IControll
         isClickInnerCard: boolean;
         loadedFragmentsCount: number[];
         isViewChangeIn360: boolean;
+        firstMute: boolean;
     }, action: PayloadAction<boolean>) => void;
     setIsFullScreen: (state: {
         play: boolean;
@@ -364,6 +376,7 @@ export declare const controllerSlice: import('@reduxjs/toolkit').Slice<IControll
         isClickInnerCard: boolean;
         loadedFragmentsCount: number[];
         isViewChangeIn360: boolean;
+        firstMute: boolean;
     }, action: PayloadAction<boolean>) => void;
     setBufferedTimeWidth: (state: {
         play: boolean;
@@ -392,6 +405,7 @@ export declare const controllerSlice: import('@reduxjs/toolkit').Slice<IControll
         isClickInnerCard: boolean;
         loadedFragmentsCount: number[];
         isViewChangeIn360: boolean;
+        firstMute: boolean;
     }, action: PayloadAction<number>) => void;
     setFirstPlay: (state: {
         play: boolean;
@@ -420,6 +434,7 @@ export declare const controllerSlice: import('@reduxjs/toolkit').Slice<IControll
         isClickInnerCard: boolean;
         loadedFragmentsCount: number[];
         isViewChangeIn360: boolean;
+        firstMute: boolean;
     }, action: PayloadAction<boolean>) => void;
     setHlsLivePosition: (state: {
         play: boolean;
@@ -448,6 +463,7 @@ export declare const controllerSlice: import('@reduxjs/toolkit').Slice<IControll
         isClickInnerCard: boolean;
         loadedFragmentsCount: number[];
         isViewChangeIn360: boolean;
+        firstMute: boolean;
     }, action: PayloadAction<any>) => void;
     setActivePointerProgressBar: (state: {
         play: boolean;
@@ -476,6 +492,7 @@ export declare const controllerSlice: import('@reduxjs/toolkit').Slice<IControll
         isClickInnerCard: boolean;
         loadedFragmentsCount: number[];
         isViewChangeIn360: boolean;
+        firstMute: boolean;
     }, action: PayloadAction<boolean>) => void;
     setDelayTurnOffControlbar: (state: {
         play: boolean;
@@ -504,6 +521,7 @@ export declare const controllerSlice: import('@reduxjs/toolkit').Slice<IControll
         isClickInnerCard: boolean;
         loadedFragmentsCount: number[];
         isViewChangeIn360: boolean;
+        firstMute: boolean;
     }, action: PayloadAction<boolean>) => void;
     setCanPlayVideo: (state: {
         play: boolean;
@@ -532,6 +550,7 @@ export declare const controllerSlice: import('@reduxjs/toolkit').Slice<IControll
         isClickInnerCard: boolean;
         loadedFragmentsCount: number[];
         isViewChangeIn360: boolean;
+        firstMute: boolean;
     }, action: PayloadAction<boolean>) => void;
     setLock: (state: {
         play: boolean;
@@ -560,6 +579,7 @@ export declare const controllerSlice: import('@reduxjs/toolkit').Slice<IControll
         isClickInnerCard: boolean;
         loadedFragmentsCount: number[];
         isViewChangeIn360: boolean;
+        firstMute: boolean;
     }, action: PayloadAction<boolean>) => void;
     setIsEnded: (state: {
         play: boolean;
@@ -588,6 +608,7 @@ export declare const controllerSlice: import('@reduxjs/toolkit').Slice<IControll
         isClickInnerCard: boolean;
         loadedFragmentsCount: number[];
         isViewChangeIn360: boolean;
+        firstMute: boolean;
     }, action: PayloadAction<boolean>) => void;
     setTooltipTime: (state: {
         play: boolean;
@@ -616,6 +637,7 @@ export declare const controllerSlice: import('@reduxjs/toolkit').Slice<IControll
         isClickInnerCard: boolean;
         loadedFragmentsCount: number[];
         isViewChangeIn360: boolean;
+        firstMute: boolean;
     }, action: PayloadAction<number>) => void;
     setShowMiniPlayer: (state: {
         play: boolean;
@@ -644,6 +666,7 @@ export declare const controllerSlice: import('@reduxjs/toolkit').Slice<IControll
         isClickInnerCard: boolean;
         loadedFragmentsCount: number[];
         isViewChangeIn360: boolean;
+        firstMute: boolean;
     }, action: PayloadAction<boolean | undefined>) => void;
     setIsClickInnerCard: (state: {
         play: boolean;
@@ -672,6 +695,7 @@ export declare const controllerSlice: import('@reduxjs/toolkit').Slice<IControll
         isClickInnerCard: boolean;
         loadedFragmentsCount: number[];
         isViewChangeIn360: boolean;
+        firstMute: boolean;
     }, action: PayloadAction<boolean>) => void;
     setLoadedFragmentsCount: (state: {
         play: boolean;
@@ -700,6 +724,7 @@ export declare const controllerSlice: import('@reduxjs/toolkit').Slice<IControll
         isClickInnerCard: boolean;
         loadedFragmentsCount: number[];
         isViewChangeIn360: boolean;
+        firstMute: boolean;
     }, action: PayloadAction<number[]>) => void;
     setIsViewChangeIn360: (state: {
         play: boolean;
@@ -728,9 +753,39 @@ export declare const controllerSlice: import('@reduxjs/toolkit').Slice<IControll
         isClickInnerCard: boolean;
         loadedFragmentsCount: number[];
         isViewChangeIn360: boolean;
+        firstMute: boolean;
+    }, action: PayloadAction<boolean>) => void;
+    setFirstMute: (state: {
+        play: boolean;
+        isAutoPlay: boolean;
+        duration: number;
+        currentTime: number;
+        mouseMoveTime: number;
+        qualityLevels: number[];
+        qualityBitrates: string[];
+        manualQuality?: number | undefined;
+        autoQuality?: number | undefined;
+        activeElements: boolean;
+        isLive: boolean;
+        isLoading: boolean;
+        isFullScreen: boolean;
+        bufferedTimeWidth: number;
+        firstPlay: boolean;
+        hlsLiveSyncPosition: number;
+        activePointerProgressBar: boolean;
+        delayTurnOffControlbar: boolean;
+        canPlayVideo: boolean;
+        lock: boolean;
+        isEnded: boolean;
+        tooltipTime: number;
+        showMiniPlayer?: boolean | undefined;
+        isClickInnerCard: boolean;
+        loadedFragmentsCount: number[];
+        isViewChangeIn360: boolean;
+        firstMute: boolean;
     }, action: PayloadAction<boolean>) => void;
     setClearControllerSlice: () => IControllerSlice;
 }, "controller", "controller", import('@reduxjs/toolkit').SliceSelectors<IControllerSlice>>;
-export declare const setPlay: import('@reduxjs/toolkit').ActionCreatorWithPayload<boolean, "controller/setPlay">, setIsAutoPlay: import('@reduxjs/toolkit').ActionCreatorWithPayload<boolean, "controller/setIsAutoPlay">, setDuration: import('@reduxjs/toolkit').ActionCreatorWithPayload<number, "controller/setDuration">, setCurrentTime: import('@reduxjs/toolkit').ActionCreatorWithPayload<number, "controller/setCurrentTime">, setMouseMoveTime: import('@reduxjs/toolkit').ActionCreatorWithPayload<number, "controller/setMouseMoveTime">, setQualityLevels: import('@reduxjs/toolkit').ActionCreatorWithPayload<any[], "controller/setQualityLevels">, setQualityBitrates: import('@reduxjs/toolkit').ActionCreatorWithPayload<string[], "controller/setQualityBitrates">, setAutoQuality: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<number | undefined, "controller/setAutoQuality">, setActiveElements: import('@reduxjs/toolkit').ActionCreatorWithPayload<boolean, "controller/setActiveElements">, setIsLive: import('@reduxjs/toolkit').ActionCreatorWithPayload<boolean, "controller/setIsLive">, setIsLoading: import('@reduxjs/toolkit').ActionCreatorWithPayload<boolean, "controller/setIsLoading">, setIsFullScreen: import('@reduxjs/toolkit').ActionCreatorWithPayload<boolean, "controller/setIsFullScreen">, setBufferedTimeWidth: import('@reduxjs/toolkit').ActionCreatorWithPayload<number, "controller/setBufferedTimeWidth">, setFirstPlay: import('@reduxjs/toolkit').ActionCreatorWithPayload<boolean, "controller/setFirstPlay">, setHlsLivePosition: import('@reduxjs/toolkit').ActionCreatorWithPayload<any, "controller/setHlsLivePosition">, setActivePointerProgressBar: import('@reduxjs/toolkit').ActionCreatorWithPayload<boolean, "controller/setActivePointerProgressBar">, setDelayTurnOffControlbar: import('@reduxjs/toolkit').ActionCreatorWithPayload<boolean, "controller/setDelayTurnOffControlbar">, setManualQuality: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<number | undefined, "controller/setManualQuality">, setCanPlayVideo: import('@reduxjs/toolkit').ActionCreatorWithPayload<boolean, "controller/setCanPlayVideo">, setLock: import('@reduxjs/toolkit').ActionCreatorWithPayload<boolean, "controller/setLock">, setIsEnded: import('@reduxjs/toolkit').ActionCreatorWithPayload<boolean, "controller/setIsEnded">, setTooltipTime: import('@reduxjs/toolkit').ActionCreatorWithPayload<number, "controller/setTooltipTime">, setShowMiniPlayer: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<boolean | undefined, "controller/setShowMiniPlayer">, setIsClickInnerCard: import('@reduxjs/toolkit').ActionCreatorWithPayload<boolean, "controller/setIsClickInnerCard">, setLoadedFragmentsCount: import('@reduxjs/toolkit').ActionCreatorWithPayload<number[], "controller/setLoadedFragmentsCount">, setIsViewChangeIn360: import('@reduxjs/toolkit').ActionCreatorWithPayload<boolean, "controller/setIsViewChangeIn360">, setClearControllerSlice: import('@reduxjs/toolkit').ActionCreatorWithoutPayload<"controller/setClearControllerSlice">;
+export declare const setPlay: import('@reduxjs/toolkit').ActionCreatorWithPayload<boolean, "controller/setPlay">, setIsAutoPlay: import('@reduxjs/toolkit').ActionCreatorWithPayload<boolean, "controller/setIsAutoPlay">, setDuration: import('@reduxjs/toolkit').ActionCreatorWithPayload<number, "controller/setDuration">, setCurrentTime: import('@reduxjs/toolkit').ActionCreatorWithPayload<number, "controller/setCurrentTime">, setMouseMoveTime: import('@reduxjs/toolkit').ActionCreatorWithPayload<number, "controller/setMouseMoveTime">, setQualityLevels: import('@reduxjs/toolkit').ActionCreatorWithPayload<any[], "controller/setQualityLevels">, setQualityBitrates: import('@reduxjs/toolkit').ActionCreatorWithPayload<string[], "controller/setQualityBitrates">, setAutoQuality: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<number | undefined, "controller/setAutoQuality">, setActiveElements: import('@reduxjs/toolkit').ActionCreatorWithPayload<boolean, "controller/setActiveElements">, setIsLive: import('@reduxjs/toolkit').ActionCreatorWithPayload<boolean, "controller/setIsLive">, setIsLoading: import('@reduxjs/toolkit').ActionCreatorWithPayload<boolean, "controller/setIsLoading">, setIsFullScreen: import('@reduxjs/toolkit').ActionCreatorWithPayload<boolean, "controller/setIsFullScreen">, setBufferedTimeWidth: import('@reduxjs/toolkit').ActionCreatorWithPayload<number, "controller/setBufferedTimeWidth">, setFirstPlay: import('@reduxjs/toolkit').ActionCreatorWithPayload<boolean, "controller/setFirstPlay">, setHlsLivePosition: import('@reduxjs/toolkit').ActionCreatorWithPayload<any, "controller/setHlsLivePosition">, setActivePointerProgressBar: import('@reduxjs/toolkit').ActionCreatorWithPayload<boolean, "controller/setActivePointerProgressBar">, setDelayTurnOffControlbar: import('@reduxjs/toolkit').ActionCreatorWithPayload<boolean, "controller/setDelayTurnOffControlbar">, setManualQuality: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<number | undefined, "controller/setManualQuality">, setCanPlayVideo: import('@reduxjs/toolkit').ActionCreatorWithPayload<boolean, "controller/setCanPlayVideo">, setLock: import('@reduxjs/toolkit').ActionCreatorWithPayload<boolean, "controller/setLock">, setIsEnded: import('@reduxjs/toolkit').ActionCreatorWithPayload<boolean, "controller/setIsEnded">, setTooltipTime: import('@reduxjs/toolkit').ActionCreatorWithPayload<number, "controller/setTooltipTime">, setShowMiniPlayer: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<boolean | undefined, "controller/setShowMiniPlayer">, setIsClickInnerCard: import('@reduxjs/toolkit').ActionCreatorWithPayload<boolean, "controller/setIsClickInnerCard">, setLoadedFragmentsCount: import('@reduxjs/toolkit').ActionCreatorWithPayload<number[], "controller/setLoadedFragmentsCount">, setIsViewChangeIn360: import('@reduxjs/toolkit').ActionCreatorWithPayload<boolean, "controller/setIsViewChangeIn360">, setFirstMute: import('@reduxjs/toolkit').ActionCreatorWithPayload<boolean, "controller/setFirstMute">, setClearControllerSlice: import('@reduxjs/toolkit').ActionCreatorWithoutPayload<"controller/setClearControllerSlice">;
 declare const _default: import('redux').Reducer<IControllerSlice>;
 export default _default;

package/dist/src/videoPlayerLibrary/shared/ui/src/components/advertisement/Advertisement.d.ts

@@ -0,0 +1,2 @@
+declare const Advertisement: () => import("react/jsx-runtime").JSX.Element;
+export default Advertisement;

package/dist/src/videoPlayerLibrary/shared/ui/src/components/advertisement/MoreInfoButton.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    link: string;
+    currentTime: number;
+}
+declare const MoreInfoButton: ({ link }: Props) => import("react/jsx-runtime").JSX.Element | null;
+export default MoreInfoButton;

package/dist/src/videoPlayerLibrary/shared/ui/src/components/advertisement/ProgressBar.d.ts

@@ -0,0 +1,6 @@
+interface ProgressBarProps {
+    progress: number;
+    buffered: number;
+}
+declare const ProgressBar: ({ progress, buffered }: ProgressBarProps) => import("react/jsx-runtime").JSX.Element;
+export default ProgressBar;

package/dist/src/videoPlayerLibrary/shared/ui/src/components/advertisement/SkipButton.d.ts

@@ -0,0 +1,9 @@
+import { Ad, IParams } from '../../../../interfaces';
+interface Props {
+    ad: Ad;
+    params: IParams;
+    skipCounter: number | null;
+    currentTime: number;
+}
+declare const SkipButton: ({ ad, params, skipCounter }: Props) => import("react/jsx-runtime").JSX.Element;
+export default SkipButton;

package/dist/src/videoPlayerLibrary/shared/ui/src/components/advertisement/UnMuteVideo.d.ts

@@ -0,0 +1,4 @@
+declare const UnMuteVideo: ({ advertisement }: {
+    advertisement?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export default UnMuteVideo;

package/dist/src/videoPlayerLibrary/shared/ui/src/components/advertisement/VideoControls.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    progress: number;
+    buffered: number;
+    duration: number;
+    currentTime: number;
+    showControls: boolean;
+}
+declare const VideoControls: ({ progress, buffered, duration, currentTime, showControls }: Props) => import("react/jsx-runtime").JSX.Element;
+export default VideoControls;

package/dist/src/videoPlayerLibrary/shared/ui/src/components/advertisement/hooks/useControlsVisibility.d.ts

@@ -0,0 +1,5 @@
+declare const useControlsVisibility: (isPaused: boolean) => {
+    showControls: boolean;
+    resetTimer: (delay?: number) => void;
+};
+export default useControlsVisibility;

package/dist/src/videoPlayerLibrary/shared/ui/src/components/advertisement/hooks/useVideoControls.d.ts

@@ -0,0 +1,18 @@
+interface AdData {
+    url: string;
+    ad_link?: string;
+    mandatory_play_time?: number;
+}
+interface UseVideoControlsResult {
+    progress: number;
+    buffered: number;
+    currentTime: number;
+    duration: number;
+    firstPlay: boolean;
+    setFirstPlay: React.Dispatch<React.SetStateAction<boolean>>;
+    isPaused: boolean;
+    skipCounter: number | null;
+    hasSkip: boolean;
+}
+declare const useVideoControls: (ad?: AdData, params?: any) => UseVideoControlsResult;
+export default useVideoControls;

package/dist/zarebin-player-library.css

@@ -11490,6 +11490,12 @@ video {
     aspect-ratio: 1 / 1;
 }.pl-aspect-video{
     aspect-ratio: 16 / 9;
+}.pl-size-4{
+    width: 1rem;
+    height: 1rem;
+}.pl-size-6{
+    width: 1.5rem;
+    height: 1.5rem;
 }.\!pl-h-5{
     height: 1.25rem !important;
 }.\!pl-h-6{
@@ -11523,6 +11529,10 @@ video {
     height: 0.25rem;
 }.pl-h-1\.5{
     height: 0.375rem;
+}.pl-h-10{
+    height: 2.5rem;
+}.pl-h-11{
+    height: 2.75rem;
 }.pl-h-12{
     height: 3rem;
 }.pl-h-2{
@@ -11697,6 +11707,8 @@ video {
     width: 0.5rem;
 }.pl-w-2\/3{
     width: 66.666667%;
+}.pl-w-20{
+    width: 5rem;
 }.pl-w-3{
     width: 0.75rem;
 }.pl-w-4{
@@ -11799,6 +11811,8 @@ video {
     width: 65vw;
 }.pl-w-\[71px\]{
     width: 71px;
+}.pl-w-\[72px\]{
+    width: 72px;
 }.pl-w-\[790px\]{
     width: 790px;
 }.pl-w-\[80\%\]{