+
+
+ {!isLight &&
+ highlights?.map((item, index) => (
+
+ ))}
+ {searchResults?.hits?.map((searchResultsItem, index) => (
+
goToSlide(index)}
+ data-id={searchResultsItem.id}
+ />
+ ))}
+
+
+
+
+
+ {searchResults.hits?.map((slideData, index) => (
+
+
+ ))}
+
+
+ {!isBeginning && (
+ <>
+
+
changeSlide("prev")}
+ aria-label="Previous slide"
+ >
+
+
+ )}
+
+ {!isEnd && (
+ <>
+
+
changeSlide("next")}
+ aria-label="Next slide"
+ >
+
+
+ )}
+
+
+ );
+};
+
+export default SearchResults;
diff --git a/packages/player-react/src/components/search/search-results/styles.css b/packages/player-react/src/components/search/search-results/styles.css
new file mode 100644
index 0000000..d519624
--- /dev/null
+++ b/packages/player-react/src/components/search/search-results/styles.css
@@ -0,0 +1,124 @@
+.sr-swiper .swiper {
+ padding: 2rem;
+}
+
+.sr-swiper.light .swiper {
+ padding: 0.5rem;
+}
+
+.swiper-truncate-overflow {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ line-clamp: 3;
+ -webkit-line-clamp: 3;
+ -webkit-box-orient: vertical;
+}
+
+.sr-timeline-bg {
+ background: rgba(0, 0, 0, 0.2);
+ border-radius: 30px;
+}
+
+.sr-timeline-bg.light {
+ background: #f3f4f6;
+ border: 1px solid #e5e7eb;
+ border-radius: 30px;
+}
+
+.swiper-slide.sr {
+ height: 128px;
+ padding: 10px;
+}
+
+.swiper-slide.sr:hover {
+ background: rgba(12, 12, 12, 0.4);
+}
+
+.swiper-slide.sr.light:hover {
+ background: #eceff3;
+}
+
+.swiper-slide.sr:hover .relevant-text-br {
+ color: #cde210;
+}
+
+.swiper-slide.sr.light:hover .relevant-text-br {
+ color: #53b745;
+}
+
+.swiper-slide.sr:hover .exact-text-br {
+ color: #f8c450;
+}
+
+.swiper-slide.sr:hover .swiper-time.light {
+ background-color: #fff;
+}
+
+.swiper-time {
+ width: fit-content;
+ background-color: #323232;
+ border-radius: 4px;
+ padding: 6px;
+ display: flex;
+}
+
+.swiper-time.light {
+ background-color: #eceff3;
+}
+
+.swiper-time>img {
+ width: 14px;
+ height: auto;
+ margin-right: 4px;
+}
+
+.text-lime {
+ color: #cde210;
+}
+
+.text-lime.light {
+ background-color: #53b745;
+}
+
+.bg-lime {
+ background-color: #cde210;
+}
+
+.bg-lime.light {
+ background-color: #53b745;
+}
+
+.sr-dot {
+ box-sizing: content-box;
+}
+
+.sr-dot.active:not(.light) {
+ outline: 1px solid rgba(0, 0, 0, 0.35);
+}
+
+.sr-dot.light {
+ outline: 1px solid rgba(255, 255, 255, 1);
+}
+
+.sr-dot.relevant:not(.light):hover,
+.sr-dot.forced-hover.relevant:not(.light) {
+ outline: 7px solid rgba(180, 194, 54, 0.35);
+ box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.53);
+}
+
+.sr-dot.exact:not(.light):hover,
+.sr-dot.forced-hover.exact:not(.light) {
+ outline: 7px solid rgba(248, 196, 80, 0.35);
+ box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.53);
+}
+
+.sr-dot.light.relevant:hover,
+.sr-dot.forced-hover.light.relevant {
+ outline: 7px solid rgba(83, 183, 69, 0.35);
+ box-shadow: 0px 1px 4px rgba(255, 255, 255, 0.53);
+}
+
+.swiper-time-light-text {
+ color: #374151;
+}
\ No newline at end of file
diff --git a/packages/player-react/src/components/videos/progress-bar/index.css b/packages/player-react/src/components/videos/progress-bar/index.css
new file mode 100644
index 0000000..503f267
--- /dev/null
+++ b/packages/player-react/src/components/videos/progress-bar/index.css
@@ -0,0 +1,108 @@
+.chapter {
+ position: relative;
+ background-color: rgba(255, 255, 255, 0.2);
+ height: 6px;
+ transition: all 0.2s ease-in-out;
+}
+
+.chaptersCont {
+ min-height: 10px;
+}
+
+.progress-bar .main-timeline .chapter.manualSlid {
+ background-color: rgb(251, 220, 150, 0.5);
+}
+
+.progress-bar .main-timeline .chapter.manualSlid.active {
+ background-color: #f8c450;
+}
+
+.progress-bar .main-timeline .chapter.active {
+ /* backdrop-filter: blur(16px); */
+ /* background: rgba(0, 0, 0, 0.24); */
+ height: 10px;
+}
+
+.chapter:hover {
+ height: 10px;
+}
+
+/* .progress-bar:hover .head {
+ opacity: 1;
+ } */
+
+.head:hover {
+ border-width: 2px;
+ width: 14px;
+ height: 14px;
+}
+
+/*
+ @media (any-hover: none) {
+ .head {
+ opacity: 1 !important;
+ }
+ } */
+
+@media (max-width: 641px) {
+ .chapter {
+ height: 4px;
+ }
+
+ .progress-bar .main-timeline .chapter.active {
+ height: 6px;
+ }
+
+ .chaptersCont {
+ min-height: 6px;
+ }
+}
+
+.summary-card {
+ /* height: 20vw;
+ max-height: 220px;
+ min-width: 280px; */
+
+ height: auto;
+ max-height: 220px;
+ width: auto;
+ max-width: 280px;
+}
+
+.popover-width {
+ width: 130px;
+}
+
+.three-line-ellipses {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ line-clamp: 3;
+ -webkit-line-clamp: 3;
+ -webkit-box-orient: vertical;
+}
+
+.title-blur {
+ background: rgba(20, 20, 20, 0.39);
+ backdrop-filter: blur(24px);
+}
+
+.title-blur {
+ text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.4);
+}
+
+.chapter-title-cont {
+ height: 62px;
+}
+
+.chapter-title-cont>p {
+ font-size: 11px;
+ line-height: 16px;
+}
+
+@media (max-width: 640px) {
+ .chapter-title-cont {
+ width: 130%;
+ transform: translateX(-12.5%);
+ }
+}
\ No newline at end of file
diff --git a/packages/player-react/src/components/videos/progress-bar/index.tsx b/packages/player-react/src/components/videos/progress-bar/index.tsx
new file mode 100644
index 0000000..2366938
--- /dev/null
+++ b/packages/player-react/src/components/videos/progress-bar/index.tsx
@@ -0,0 +1,625 @@
+import debounce from "lodash.debounce";
+import React, {
+ JSX,
+ useCallback,
+ useEffect,
+ useMemo,
+ useRef,
+ useState,
+} from "react";
+import videojs from "video.js";
+import Player from "video.js/dist/types/player";
+import { useVideoPlayerContext } from "../../../context";
+import "./index.css";
+
+interface Chapter {
+ id?: string | number;
+ start: number;
+ length: number;
+ title?: string;
+ end?: number;
+}
+
+interface Props {
+ isActive?: boolean;
+ autoHide?: boolean;
+ streamUrl?: string;
+ chaptersList?: Chapter[];
+ persistentChapter?: boolean;
+ manualSlide?: number | null;
+ activeChapterProp?: string | null;
+ showChapters?: boolean;
+ previewPlayer?: string;
+ isChapterExpanded?: boolean;
+ setActiveChapter?: (chapterIndex: number | null) => void;
+ hideChapterSummary?: (isVisible: boolean) => void;
+ setPreviewVisibility?: (isVisible: boolean) => void;
+}
+
+export default function ProgressBar({
+ isActive = true,
+ autoHide = true,
+ streamUrl = "",
+ chaptersList = [],
+ persistentChapter = false,
+ manualSlide = null,
+ activeChapterProp: activeChapterPropRaw = null,
+ showChapters = false,
+ isChapterExpanded = false,
+ setActiveChapter = () => {},
+ hideChapterSummary = () => {},
+ setPreviewVisibility = () => {},
+}: Props): JSX.Element {
+ const { time, duration, seekTo, showElements } = useVideoPlayerContext();
+
+ const feedbackPlayerRef = useRef
(null);
+ const progressBarRef = useRef(null);
+ const videoPreviewRef = useRef(null);
+ const progressBarInteractRef = useRef(null);
+ const videoFeedbackPlayerRef = useRef(null);
+
+ const [moveToRatio, setMoveToRatio] = useState(0);
+ const [videoDrag, setVideoDrag] = useState(false);
+ const [seekGoToPoint, setSeekGoToPoint] = useState({
+ ratio: 0,
+ timePosition: 0,
+ });
+ const [showSummaryInfo, setShowSummaryInfo] = useState(true);
+ const [activeChapterLocal, setActiveChapterLocal] = useState(
+ activeChapterPropRaw !== null ? Number(activeChapterPropRaw) : null,
+ );
+ const [leftOffset, setLeftOffset] = useState(0);
+
+ useEffect(() => {
+ setActiveChapterLocal(
+ activeChapterPropRaw !== null ? Number(activeChapterPropRaw) : null,
+ );
+ }, [activeChapterPropRaw]);
+
+ useEffect(() => {
+ setActiveChapter(activeChapterLocal);
+ }, [activeChapterLocal, setActiveChapter]);
+
+ useEffect(() => {
+ if (typeof window !== "undefined") {
+ const isWide = window.innerWidth > 640;
+ const maxRatio = isWide ? 11 / 12 : 10.5 / 12;
+ const minRatio = isWide ? 1 / 12 : 1.5 / 12;
+ const clampedRatio = Math.max(Math.min(moveToRatio, maxRatio), minRatio);
+ setLeftOffset(clampedRatio * 100);
+ }
+ }, [moveToRatio]);
+
+ const videoDateVal = useMemo(() => {
+ if (!duration || !moveToRatio) return 0;
+ return moveToRatio * duration * 1000;
+ }, [duration, moveToRatio]);
+
+ const shouldNotShowVideoPopover = useMemo(() => {
+ if (typeof window === "undefined") return true;
+ if (showChapters) {
+ return (
+ activeChapterLocal === null ||
+ moveToRatio === 0 ||
+ (window.innerWidth < 640 && persistentChapter)
+ );
+ }
+ return moveToRatio === 0;
+ }, [showChapters, activeChapterLocal, moveToRatio, persistentChapter]);
+
+ const summaryCardVisible = useMemo(() => {
+ const overlapThreshold = isChapterExpanded ? 0.22 : 0.52;
+ if (activeChapterPropRaw === null) return false;
+ if (persistentChapter) {
+ return moveToRatio > overlapThreshold;
+ }
+ return true;
+ }, [isChapterExpanded, activeChapterPropRaw, persistentChapter, moveToRatio]);
+
+ const isSummaryCardOverlapping = useMemo(() => {
+ return summaryCardVisible && persistentChapter;
+ }, [summaryCardVisible, persistentChapter]);
+
+ useEffect(() => {
+ hideChapterSummary(isSummaryCardOverlapping);
+ }, [isSummaryCardOverlapping, hideChapterSummary]);
+
+ const summaryHiddenOnceRef = useRef(false);
+ useEffect(() => {
+ if (moveToRatio > 0 && showSummaryInfo && !summaryHiddenOnceRef.current) {
+ summaryHiddenOnceRef.current = true;
+ const timer = setTimeout(() => {
+ setShowSummaryInfo(false);
+ }, 2000);
+ return () => clearTimeout(timer);
+ }
+ }, [moveToRatio, showSummaryInfo]);
+
+ useEffect(() => {
+ setPreviewVisibility(moveToRatio > 0);
+ }, [moveToRatio, setPreviewVisibility]);
+
+ useEffect(() => {
+ const getSource = () => {
+ const src = streamUrl;
+ if (!src) return null;
+ let type = "video/mp4";
+ if (src.endsWith("m3u8")) {
+ type = "application/x-mpegURL";
+ }
+ return { src, type };
+ };
+ const source = getSource();
+
+ if (videoFeedbackPlayerRef.current && source) {
+ if (!feedbackPlayerRef.current) {
+ feedbackPlayerRef.current = videojs(videoFeedbackPlayerRef.current, {
+ autoplay: false,
+ controls: false,
+ currentTime: 0,
+ html5: { nativeTextTracks: false },
+ preload: "auto",
+ sources: [source],
+ });
+ }
+ }
+ return () => {
+ if (
+ feedbackPlayerRef.current &&
+ !feedbackPlayerRef.current.isDisposed()
+ ) {
+ feedbackPlayerRef.current.dispose();
+ feedbackPlayerRef.current = null;
+ }
+ };
+ }, [streamUrl]);
+
+ const findCurrentChapter = useCallback(
+ (timeToCheck: number): number | null => {
+ if (duration === 0) return null;
+ const referenceTime = Math.min(Math.max(timeToCheck, 0), duration);
+ for (let i = 0; i < chaptersList.length; i++) {
+ const chapter = chaptersList[i];
+ if (
+ chapter.start <= referenceTime &&
+ chapter.start + chapter.length > referenceTime
+ ) {
+ return i;
+ }
+ }
+ return null;
+ },
+ [chaptersList, duration],
+ );
+
+ const updateFeedbackPlayer = useCallback(
+ debounce((t: number) => {
+ if (
+ feedbackPlayerRef.current &&
+ !feedbackPlayerRef.current.isDisposed()
+ ) {
+ feedbackPlayerRef.current.currentTime(t);
+ }
+ }, 300),
+ [],
+ );
+
+ const seekVideoTimeCallback = useCallback(
+ (x: number) => {
+ if (!progressBarRef.current || duration === 0) {
+ return;
+ }
+ const rect = progressBarRef.current.getBoundingClientRect();
+ let position = x - rect.left;
+ const totalWidth = rect.width;
+
+ position = Math.max(0, Math.min(position, totalWidth));
+
+ const newRatio = position / totalWidth;
+ const newTimePosition = Math.round(duration * newRatio);
+
+ setSeekGoToPoint({
+ ratio: newRatio,
+ timePosition: newTimePosition,
+ });
+ },
+ [duration, setSeekGoToPoint],
+ );
+
+ const handleDragStartMouseDown = useCallback(
+ (e: React.MouseEvent) => {
+ setVideoDrag(true);
+ seekVideoTimeCallback(e.pageX);
+ },
+ [seekVideoTimeCallback, setVideoDrag],
+ );
+
+ const handleDragStartTouchStart = useCallback(
+ (e: React.TouchEvent) => {
+ if (e.touches.length > 0) {
+ setVideoDrag(true);
+ seekVideoTimeCallback(e.touches[0].clientX);
+ }
+ },
+ [seekVideoTimeCallback, setVideoDrag],
+ );
+
+ // Effect for managing global event listeners during drag
+ useEffect(() => {
+ const handleWindowMouseMove = (e: MouseEvent) => {
+ seekVideoTimeCallback(e.pageX);
+ };
+
+ const handleWindowTouchMove = (e: TouchEvent) => {
+ if (e.touches.length > 0) {
+ seekVideoTimeCallback(Math.floor(e.touches[0].clientX));
+ }
+ };
+
+ const handleWindowMouseUp = () => {
+ setVideoDrag(false);
+ seekTo(seekGoToPoint.timePosition);
+ if (persistentChapter) {
+ const chapter = findCurrentChapter(seekGoToPoint.timePosition);
+ setActiveChapterLocal(chapter);
+ }
+ };
+
+ const handleWindowTouchEnd = () => {
+ setVideoDrag(false);
+ seekTo(Math.floor(seekGoToPoint.timePosition));
+ setMoveToRatio(0); // Reset hover ratio
+ if (!persistentChapter) {
+ setActiveChapterLocal(null);
+ }
+ };
+
+ if (videoDrag) {
+ window.addEventListener("mousemove", handleWindowMouseMove);
+ window.addEventListener("touchmove", handleWindowTouchMove, {
+ passive: true,
+ }); // passive: false if preventDefault is used
+ window.addEventListener("mouseup", handleWindowMouseUp);
+ window.addEventListener("touchend", handleWindowTouchEnd);
+
+ return () => {
+ window.removeEventListener("mousemove", handleWindowMouseMove);
+ window.removeEventListener("touchmove", handleWindowTouchMove);
+ window.removeEventListener("mouseup", handleWindowMouseUp);
+ window.removeEventListener("touchend", handleWindowTouchEnd);
+ };
+ }
+ }, [
+ videoDrag,
+ seekVideoTimeCallback,
+ seekTo,
+ persistentChapter,
+ findCurrentChapter,
+ setActiveChapterLocal,
+ setMoveToRatio,
+ seekGoToPoint, // Ensure latest seekGoToPoint is used in up/end handlers
+ ]);
+
+ // --- Hover and Click Logic on progressBarInteract ---
+ const handleMouseMoveForHover = useCallback(
+ (e: React.MouseEvent) => {
+ if (!progressBarRef.current || duration === 0) return;
+ const rect = progressBarRef.current.getBoundingClientRect();
+ const tempRatio = (e.clientX - rect.x) / rect.width;
+
+ const currentMoveToRatio = Math.min(Math.max(0, tempRatio), 1); // Clamp between 0 and 1
+ setMoveToRatio(currentMoveToRatio);
+
+ const newTime = duration * currentMoveToRatio;
+ updateFeedbackPlayer(newTime);
+
+ if (chaptersList.length > 0) {
+ setActiveChapterLocal(findCurrentChapter(newTime));
+ } else {
+ setActiveChapterLocal(null); // Vue had `true`, null seems more appropriate
+ }
+ },
+ [
+ duration,
+ updateFeedbackPlayer,
+ chaptersList,
+ findCurrentChapter,
+ setMoveToRatio,
+ setActiveChapterLocal /* progressBarRef is stable */,
+ ],
+ );
+
+ const handleMouseLeaveForHover = useCallback(() => {
+ // Reset active chapter and hover ratio if not dragging
+ if (!videoDrag) {
+ // Only reset if not in midst of a drag
+ setActiveChapterLocal(null);
+ setMoveToRatio(0);
+ // Potentially reset showSummaryInfo if it should reappear
+ // setShowSummaryInfo(true);
+ // summaryHiddenOnceRef.current = false;
+ }
+ }, [setActiveChapterLocal, setMoveToRatio, videoDrag]);
+
+ const handleTouchMoveOnProgressBar = useCallback(
+ (e: React.TouchEvent) => {
+ if (e.touches.length > 0 && progressBarRef.current && duration > 0) {
+ e.preventDefault(); // Prevent scrolling while scrubbing preview
+ const clientX = e.touches[0].clientX;
+ const rect = progressBarRef.current.getBoundingClientRect();
+ const tempRatio = (clientX - rect.left) / rect.width;
+
+ const currentMoveToRatio = Math.min(Math.max(0, tempRatio), 1);
+ setMoveToRatio(currentMoveToRatio);
+
+ const newTime = duration * currentMoveToRatio;
+ updateFeedbackPlayer(newTime);
+
+ if (chaptersList.length > 0) {
+ setActiveChapterLocal(findCurrentChapter(newTime));
+ } else {
+ setActiveChapterLocal(null);
+ }
+ }
+ },
+ [
+ duration,
+ updateFeedbackPlayer,
+ chaptersList,
+ findCurrentChapter,
+ setMoveToRatio,
+ setActiveChapterLocal /* progressBarRef stable */,
+ ],
+ );
+
+ const handleProgressClick = useCallback(() => {
+ if (duration > 0) {
+ const goTo = duration * moveToRatio; // moveToRatio is from hover state
+ seekTo(goTo);
+ }
+ }, [duration, moveToRatio, seekTo]);
+
+ const getActiveChapterTitle = useCallback(() => {
+ if (activeChapterLocal === null || !chaptersList[activeChapterLocal])
+ return "";
+ return chaptersList[activeChapterLocal]?.title || "";
+ }, [chaptersList, activeChapterLocal]);
+
+ const isManuallySlid = (key: number) => {
+ return persistentChapter && manualSlide === key && moveToRatio === 0;
+ };
+
+ const isActiveChapter = (key: number) => {
+ // Vue: isActiveChapter(key) && (persistentChapter && manualSlide && !moveToRatio ? isManuallySlid(key) : true)) || isManuallySlid(key)
+ // This logic in React becomes:
+ const currentlyActive = activeChapterLocal === key;
+ const manuallySlid = isManuallySlid(key);
+
+ if (manuallySlid) return true;
+ if (currentlyActive) {
+ if (
+ persistentChapter &&
+ manualSlide !== null &&
+ manualSlide <= key &&
+ moveToRatio === 0
+ ) {
+ // Check this condition. Vue had manualSlide >= key for manualSlid class
+ return isManuallySlid(key); // Which means if manualSlide is not key, it's false. So it means only if it *is* manually slid.
+ }
+ return true;
+ }
+ return false;
+ };
+
+ const headLeftPercent = videoDrag
+ ? seekGoToPoint.ratio * 100
+ : duration > 0
+ ? (time / duration) * 100
+ : 0;
+
+ return (
+
+
+
+
+ {showChapters && (
+
+
+ {activeChapterLocal !== null
+ ? `${activeChapterLocal + 1}. `
+ : ""}
+ {getActiveChapterTitle()}
+
+
+ )}
+
+
+ {new Date(videoDateVal || 0).toISOString().substring(11, 19)}
+
+
+
+
+ {/* Main timelines */}
+
+ {chaptersList.length === 0 ? (
+
+ {/* Seekbar */}
+
0
+ ? `${(time / duration) * 100}%`
+ : "0%",
+ }}
+ />
+ {/* Hover fade bar */}
+
+
+ ) : (
+
+ {chaptersList.map((chapter, key) => (
+
= key &&
+ moveToRatio === 0
+ ? "manualSlid"
+ : ""
+ }`}
+ style={{
+ width:
+ duration > 0
+ ? `${(chapter.length / duration) * 100}%`
+ : "0%",
+ maxWidth:
+ duration > 0
+ ? `${(chapter.length / duration) * 100}%`
+ : "0%",
+ }}
+ >
+ {/* Hover faded bar */}
+
0
+ ? `${
+ Math.max(
+ 0,
+ Math.min(
+ 1,
+ (moveToRatio * duration - chapter.start) /
+ chapter.length,
+ ),
+ ) * 100
+ }%`
+ : "0%",
+ }}
+ />
+ {/* Seekbar */}
+
0
+ ? `${
+ Math.max(
+ 0,
+ Math.min(
+ 1,
+ ((videoDrag
+ ? seekGoToPoint.ratio * duration
+ : time) -
+ chapter.start) /
+ chapter.length,
+ ),
+ ) * 100
+ }%`
+ : "0%",
+ }}
+ />
+
+ ))}
+
+ )}
+
+
+
+
0 && time / duration <= 0.1
+ ? "vdb-p-justify-start"
+ : duration > 0 && time / duration >= 0.9
+ ? "vdb-p-justify-end"
+ : "vdb-p-justify-center"
+ }`}
+ style={{
+ left: `${headLeftPercent}%`,
+ }}
+ >
+
+
+ {new Date(time * 1000).toISOString().substring(11, 19)}
+
+
+ ย /ย
+ {new Date(duration * 1000).toISOString().substring(11, 19)}
+
+
+
+
+
+ {/* Fallback for when not active */}
+ {!isActive && (
+
+ )}
+
+ );
+}
diff --git a/packages/player-react/src/components/videos/videodb-player/index.tsx b/packages/player-react/src/components/videos/videodb-player/index.tsx
new file mode 100644
index 0000000..79b98e1
--- /dev/null
+++ b/packages/player-react/src/components/videos/videodb-player/index.tsx
@@ -0,0 +1,392 @@
+import React, {
+ forwardRef,
+ ReactNode,
+ useCallback,
+ useEffect,
+ useRef,
+ useState,
+} from "react";
+import {
+ SubtitlesConfig,
+ VideoPlayerContext,
+ VideoPlayerContextType,
+} from "../../../context";
+import useVideoDBPlayer from "../../../hooks/useVideoJSPlayer";
+import "../../../styles.css";
+import "../../../videojs.css";
+import TimeCode from "../../atoms/time-code";
+import BigCenterButton from "../../buttons/big-center-button";
+import CaptionToggleButton from "../../buttons/caption-button";
+import FullscreenToggleButton from "../../buttons/full-screen-button";
+import PlayPauseButton from "../../buttons/play-pause-button";
+import SpeedControlButton from "../../buttons/speed-control-button";
+import VolumeControlButton from "../../buttons/volume-control-button";
+import ProgressBar from "../progress-bar";
+
+interface VideoPlayerProps {
+ streamUrl: string;
+ thumbnailUrl?: string;
+ subtitlesConfig?: SubtitlesConfig;
+ startAt?: number;
+ autoPlay?: boolean;
+ autoHideDuration?: number;
+ defaultControls?: boolean;
+ defaultOverlay?: boolean;
+ defaultPlayBackRate?: number;
+ aspectRatio?: string;
+ debug?: boolean;
+ overlayContent?: ReactNode;
+ controlsContent?: ReactNode;
+ onPlay?: (event?: Event) => void;
+ onPause?: (event?: Event) => void;
+ onEnded?: (event?: Event) => void;
+ onLoadedData?: (event?: Event) => void;
+ onWaiting?: (event?: Event) => void;
+ onPlaying?: (event?: Event) => void;
+ onTimeUpdate?: (event?: Event) => void;
+ onCanPlay?: (event?: Event) => void;
+ onCanPlayThrough?: (event?: Event) => void;
+ onVideoError?: (error?: Error) => void;
+ onToggleSubtitles?: (isShowingSubtitles?: boolean) => void;
+ onFullScreenChange?: (isFullScreen?: boolean) => void;
+}
+
+const VideoPlayer = forwardRef
(
+ function VideoPlayer(
+ {
+ streamUrl,
+ thumbnailUrl = "",
+ subtitlesConfig = {
+ src: "",
+ kind: "captions",
+ lang: "en",
+ label: "English",
+ },
+ startAt = 0,
+ autoPlay = false,
+ autoHideDuration = 5000,
+ defaultControls = true,
+ defaultOverlay = true,
+ defaultPlayBackRate = 1,
+ aspectRatio = "16:9",
+ controlsContent,
+ overlayContent,
+ onPlay,
+ onPause,
+ onEnded,
+ onLoadedData,
+ onWaiting,
+ onPlaying,
+ onTimeUpdate,
+ onCanPlay,
+ onCanPlayThrough,
+ onVideoError,
+ onToggleSubtitles,
+ onFullScreenChange,
+ }: VideoPlayerProps,
+ ref,
+ ) {
+ const videoWrapperRef = useRef(null);
+ const videoElementRef = useRef(null);
+ const showElementsMouseMoveInterval = useRef(null);
+
+ const [showElements, setShowElements] = useState(true);
+ const [isFullScreen, setIsFullScreen] = useState(false);
+ const [showSubtitles, setShowSubtitles] = useState(false);
+
+ const aspectRatioPadding = `${
+ (Number(aspectRatio.split(":")[1]) / Number(aspectRatio.split(":")[0])) *
+ 100
+ }%`;
+
+ const emit = useCallback(
+ (event: string, data: { event: Event; error?: Error }) => {
+ switch (event) {
+ case "play":
+ if (onPlay) onPlay(data.event);
+ break;
+ case "pause":
+ if (onPause) onPause(data.event);
+ break;
+ case "ended":
+ if (onEnded) onEnded(data.event);
+ break;
+ case "loadeddata":
+ if (onLoadedData) onLoadedData(data.event);
+ break;
+ case "waiting":
+ if (onWaiting) onWaiting(data.event);
+ break;
+ case "playing":
+ if (onPlaying) onPlaying(data.event);
+ break;
+ case "timeupdate":
+ if (onTimeUpdate) onTimeUpdate(data.event);
+ break;
+ case "canplay":
+ if (onCanPlay) onCanPlay(data.event);
+ break;
+ case "canplaythrough":
+ if (onCanPlayThrough) onCanPlayThrough(data.event);
+ break;
+ case "videoerror":
+ if (onVideoError) onVideoError(data.error);
+ break;
+ default:
+ break;
+ }
+ },
+ [
+ onPlay,
+ onPause,
+ onEnded,
+ onLoadedData,
+ onWaiting,
+ onPlaying,
+ onTimeUpdate,
+ onCanPlay,
+ onCanPlayThrough,
+ onVideoError,
+ ],
+ );
+
+ const {
+ playing,
+ volume,
+ videoMuted,
+ duration,
+ time,
+ percentagePlayed,
+ playBackRate,
+ play,
+ pause,
+ togglePlay,
+ toggleMute,
+ seekTo,
+ seekToPercentage,
+ setVolume,
+ setPlayBackRate,
+ convertTimeToDuration,
+ togglePictureInPicture,
+ initializePlayer,
+ } = useVideoDBPlayer(emit, {
+ streamUrl,
+ thumbnailUrl,
+ startAt,
+ autoPlay,
+ defaultPlayBackRate,
+ });
+
+ const toggleFullScreen = useCallback(
+ (value?: boolean) => {
+ const newState = value !== undefined ? value : !isFullScreen;
+ setIsFullScreen(newState);
+ if (onFullScreenChange) onFullScreenChange(newState);
+ },
+ [isFullScreen, onFullScreenChange],
+ );
+
+ const toggleSubtitlesHandler = useCallback(
+ (value: boolean) => {
+ setShowSubtitles(value);
+ if (onToggleSubtitles) onToggleSubtitles(value);
+ },
+ [onToggleSubtitles],
+ );
+
+ useEffect(() => {
+ if (videoElementRef.current) {
+ initializePlayer(videoElementRef.current);
+ }
+ }, []);
+
+ useEffect(() => {
+ const handleKeyDown = (e: KeyboardEvent) => {
+ if (
+ ["TEXTAREA", "INPUT"].includes(document.activeElement?.tagName || "")
+ )
+ return;
+
+ if (e.code === "Space") {
+ e.preventDefault();
+ togglePlay();
+ } else if (e.code === "Escape" && isFullScreen) {
+ toggleFullScreen(false);
+ }
+ };
+
+ const handleMouseMove = () => {
+ if (showElementsMouseMoveInterval.current) {
+ clearTimeout(showElementsMouseMoveInterval.current);
+ }
+ setShowElements(true);
+ showElementsMouseMoveInterval.current = setTimeout(() => {
+ if (playing) {
+ setShowElements(false);
+ }
+ }, autoHideDuration);
+ };
+
+ const handleTouchEnd = () => {
+ if (showElementsMouseMoveInterval.current) {
+ clearTimeout(showElementsMouseMoveInterval.current);
+ }
+ setShowElements(true);
+ showElementsMouseMoveInterval.current = setTimeout(() => {
+ if (playing) {
+ setShowElements(false);
+ }
+ }, autoHideDuration);
+ };
+
+ const handleMouseEnter = () => {
+ setShowElements(true);
+ window.addEventListener("mousemove", handleMouseMove);
+ };
+
+ const handleMouseLeave = () => {
+ if (showElementsMouseMoveInterval.current) {
+ clearTimeout(showElementsMouseMoveInterval.current);
+ }
+ if (playing) {
+ setShowElements(false);
+ }
+ window.removeEventListener("mousemove", handleMouseMove);
+ };
+
+ const wrapper = videoWrapperRef.current;
+ document.addEventListener("keydown", handleKeyDown);
+ if (wrapper) {
+ if (window.matchMedia("(any-hover: none)").matches) {
+ wrapper.addEventListener("touchend", handleTouchEnd);
+ } else {
+ wrapper.addEventListener("mouseenter", handleMouseEnter);
+ wrapper.addEventListener("mouseleave", handleMouseLeave);
+ }
+ }
+
+ return () => {
+ document.removeEventListener("keydown", handleKeyDown);
+ if (wrapper) {
+ wrapper.removeEventListener("touchend", handleTouchEnd);
+ wrapper.removeEventListener("mouseenter", handleMouseEnter);
+ wrapper.removeEventListener("mouseleave", handleMouseLeave);
+ }
+ window.removeEventListener("mousemove", handleMouseMove);
+ if (showElementsMouseMoveInterval.current) {
+ clearTimeout(showElementsMouseMoveInterval.current);
+ }
+ };
+ }, [playing, autoHideDuration, togglePlay, isFullScreen, toggleFullScreen]);
+
+ const contextValue: VideoPlayerContextType = {
+ showElements,
+ playing,
+ volume,
+ videoMuted,
+ duration,
+ time,
+ percentagePlayed,
+ playBackRate,
+ showSubtitles,
+ subtitlesConfig,
+ isFullScreen,
+ play,
+ pause,
+ togglePlay,
+ toggleMute,
+ seekTo,
+ seekToPercentage,
+ setPlayBackRate,
+ setVolume,
+ convertTimeToDuration,
+ toggleFullScreen,
+ togglePictureInPicture,
+ toggleSubtitles: toggleSubtitlesHandler,
+ };
+
+ return (
+
+
+
+
+
+ {subtitlesConfig?.src && (
+
+
+ {/* Backlayer */}
+
+
+ {!defaultOverlay ? (
+ overlayContent
+ ) : (
+
+ )}
+
+
+
+ {!defaultControls ? (
+ controlsContent
+ ) : (
+
+ )}
+
+
+
+
+ );
+ },
+);
+
+export default VideoPlayer;
diff --git a/packages/player-react/src/context.ts b/packages/player-react/src/context.ts
new file mode 100644
index 0000000..8936696
--- /dev/null
+++ b/packages/player-react/src/context.ts
@@ -0,0 +1,47 @@
+import { createContext, useContext } from "react";
+
+export type SubtitlesConfig = {
+ src: string;
+ kind?: string;
+ lang?: string;
+ label?: string;
+};
+
+export type VideoPlayerContextType = {
+ showElements: boolean;
+ playing: boolean;
+ volume: number;
+ videoMuted: boolean;
+ duration: number;
+ time: number;
+ percentagePlayed: number;
+ playBackRate: number;
+ showSubtitles: boolean;
+ subtitlesConfig: SubtitlesConfig;
+ isFullScreen: boolean;
+ play: () => void;
+ pause: () => void;
+ togglePlay: () => void;
+ toggleMute: () => void;
+ seekTo: (seconds: number) => void;
+ seekToPercentage: (percent: number) => void;
+ setPlayBackRate: (rate: number) => void;
+ setVolume: (volume: number) => void;
+ convertTimeToDuration: (time: number) => string;
+ toggleFullScreen: (value?: boolean) => void;
+ togglePictureInPicture: () => void;
+ toggleSubtitles: (value: boolean) => void;
+};
+
+export const VideoPlayerContext = createContext<
+ VideoPlayerContextType | undefined
+>(undefined);
+
+export const useVideoPlayerContext = (): VideoPlayerContextType => {
+ const context = useContext(VideoPlayerContext);
+ if (!context)
+ throw new Error(
+ "useVideoPlayerContext must be used within a VideoPlayerProvider",
+ );
+ return context;
+};
diff --git a/packages/player-react/src/hooks/useVideoJSPlayer.ts b/packages/player-react/src/hooks/useVideoJSPlayer.ts
new file mode 100644
index 0000000..8e7012c
--- /dev/null
+++ b/packages/player-react/src/hooks/useVideoJSPlayer.ts
@@ -0,0 +1,254 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import videojs from "video.js";
+import type Player from "video.js/dist/types/player";
+
+type PlayerProps = {
+ streamUrl: string;
+ autoPlay?: boolean;
+ muted?: boolean;
+ startAt?: number;
+ thumbnailUrl?: string;
+ defaultPlayBackRate?: number;
+ debug?: boolean;
+ onVideoError?: (error: Error) => void;
+};
+
+type PlayerEvents =
+ | "play"
+ | "pause"
+ | "ended"
+ | "loadeddata"
+ | "waiting"
+ | "playing"
+ | "timeupdate"
+ | "canplay"
+ | "canplaythrough";
+
+type EventEmitter = (event: PlayerEvents, data: { event: Event }) => void;
+
+export default function useVideoDBPlayer(
+ emit: EventEmitter,
+ props: PlayerProps,
+) {
+ const [playing, setPlaying] = useState(false);
+ const [volume, setVolume] = useState(1);
+ const [videoMuted, setVideoMuted] = useState(props.muted || false);
+ const [time, setTime] = useState(props.startAt || 0);
+ const [duration, setDuration] = useState(0);
+ const [percentagePlayed, setPercentagePlayed] = useState(0);
+ const [playBackRate, setPlayBackRate] = useState(
+ props.defaultPlayBackRate || 1,
+ );
+
+ const playerRef = useRef(null);
+
+ const getSource = () => {
+ const src = props.streamUrl;
+ const type = "application/x-mpegURL";
+
+ return { src, type };
+ };
+
+ const events: PlayerEvents[] = [
+ "play",
+ "pause",
+ "ended",
+ "loadeddata",
+ "waiting",
+ "playing",
+ "timeupdate",
+ "canplay",
+ "canplaythrough",
+ ];
+
+ const initializePlayer = (playerElement: HTMLVideoElement | null) => {
+ if (playerElement) {
+ try {
+ const source = getSource();
+ playerRef.current = videojs(playerElement, {
+ autoplay: props.autoPlay,
+ controls: false,
+ html5: {
+ nativeTextTracks: false,
+ },
+ preload: true,
+ poster: props.thumbnailUrl,
+ sources: [source],
+ crossorigin: "anonymous",
+ });
+ bindEvents(events, emit);
+ } catch (err) {
+ if (props.onVideoError) {
+ props.onVideoError(err as Error);
+ }
+ console.error("Error in initializing player ", err);
+ return;
+ }
+ }
+ };
+
+ const play = async () => {
+ if (playerRef.current) {
+ await playerRef.current.play();
+ setPlaying(true);
+ }
+ };
+
+ const pause = () => {
+ if (playerRef.current) {
+ playerRef.current.pause();
+ setPlaying(false);
+ }
+ };
+
+ const togglePlay = () => {
+ if (playing) {
+ pause();
+ } else {
+ play();
+ }
+ };
+
+ const setMuted = (state: boolean) => {
+ if (playerRef.current) {
+ playerRef.current.muted(state);
+ setVideoMuted(state);
+ }
+ };
+
+ const toggleMute = () => {
+ if (videoMuted) {
+ setMuted(false);
+ } else {
+ setMuted(true);
+ }
+ };
+
+ const setVolumeValue = (percentAsDecimal: number) => {
+ if (playerRef.current) {
+ playerRef.current.volume(percentAsDecimal);
+ setVolume(percentAsDecimal);
+ }
+ };
+
+ const seekTo = useCallback(
+ (timeValue: number) => {
+ if (playerRef.current) {
+ let newTime = parseInt(timeValue.toString());
+ if (isNaN(newTime) && !isFinite(newTime)) return;
+
+ if (newTime < 0) {
+ newTime = 0;
+ }
+
+ if (newTime > duration) {
+ newTime = duration;
+ pause();
+ }
+ playerRef.current.currentTime(timeValue);
+ }
+ },
+ [duration],
+ );
+
+ const seekToPercentage = (percentage: number) => {
+ const newTime = (percentage / 100) * duration;
+ seekTo(newTime);
+ };
+
+ const setPlayBackRateValue = (value: number) => {
+ if (playerRef.current) {
+ setPlayBackRate(value);
+ playerRef.current.playbackRate(value);
+ }
+ };
+
+ const convertTimeToDuration = (seconds: number) => {
+ return [Math.floor((seconds / 60) % 60), Math.floor(seconds % 60)]
+ .map((num) => num.toString().padStart(2, "0"))
+ .join(":");
+ };
+
+ const togglePictureInPicture = () => {
+ if (document.pictureInPictureElement) {
+ document.exitPictureInPicture();
+ } else if (document.pictureInPictureEnabled && playerRef.current) {
+ playerRef.current.requestPictureInPicture();
+ }
+ };
+
+ const bindEvents = (
+ eventList: PlayerEvents[],
+ eventEmitter: EventEmitter,
+ ) => {
+ if (playerRef.current !== null) {
+ eventList.forEach((customEvent) => {
+ playerRef.current?.on(customEvent, (event: Event) => {
+ if (props.debug) console.log("Player event ", customEvent, event);
+ switch (customEvent) {
+ case "loadeddata":
+ if (playerRef.current) {
+ setDuration(playerRef.current.duration() ?? 0);
+ seekTo(props.startAt || 0);
+ }
+ break;
+ case "canplay":
+ if (playerRef.current) {
+ setDuration(playerRef.current.duration() ?? 0);
+ }
+ break;
+ case "timeupdate":
+ if (playerRef.current) {
+ const currentTime = playerRef.current.currentTime();
+ const percent =
+ ((currentTime ?? 0) / (playerRef.current.duration() ?? 1)) *
+ 100;
+ setPercentagePlayed(percent);
+ setTime(currentTime ?? 0);
+ }
+ break;
+ case "play":
+ setPlaying(true);
+ break;
+ case "ended":
+ togglePlay();
+ break;
+ }
+ eventEmitter(customEvent, { event });
+ });
+ });
+ }
+ };
+
+ useEffect(() => {
+ return () => {
+ if (playerRef.current && playerRef.current.isDisposed()) {
+ playerRef.current.dispose();
+ playerRef.current = null;
+ }
+ };
+ }, []);
+
+ return {
+ playing,
+ volume,
+ videoMuted,
+ time,
+ duration,
+ percentagePlayed,
+ playBackRate,
+ events,
+ play,
+ pause,
+ togglePlay,
+ toggleMute,
+ setVolume: setVolumeValue,
+ seekTo,
+ seekToPercentage,
+ setPlayBackRate: setPlayBackRateValue,
+ convertTimeToDuration,
+ togglePictureInPicture,
+ bindEvents,
+ initializePlayer,
+ };
+}
diff --git a/packages/player-react/src/index.tsx b/packages/player-react/src/index.tsx
new file mode 100644
index 0000000..6743500
--- /dev/null
+++ b/packages/player-react/src/index.tsx
@@ -0,0 +1,30 @@
+import TimeCode from "./components/atoms/time-code";
+import VideoPlayer from "./components/videos/videodb-player";
+import SearchInsideMedia from "./components/search/search-inside-media";
+import useVideoDBPlayer from "./hooks/useVideoJSPlayer";
+import BigCenterButton from "./components/buttons/big-center-button";
+import ProgressBar from "./components/videos/progress-bar";
+import PlayPauseButton from "./components/buttons/play-pause-button";
+import VolumeControlButton from "./components/buttons/volume-control-button";
+import SearchResults from "./components/search/search-results";
+import SpeedControlButton from "./components/buttons/speed-control-button";
+import CaptionToggleButton from "./components/buttons/caption-button";
+import FullscreenToggleButton from "./components/buttons/full-screen-button";
+import "./styles.css";
+import "./videojs.css";
+
+export {
+ VideoPlayer,
+ useVideoDBPlayer,
+ TimeCode,
+ SearchInsideMedia,
+ BigCenterButton,
+ ProgressBar,
+ PlayPauseButton,
+ VolumeControlButton,
+ SearchResults,
+ SpeedControlButton,
+ CaptionToggleButton,
+ FullscreenToggleButton,
+};
+export default VideoPlayer;
diff --git a/packages/player-react/src/styles.css b/packages/player-react/src/styles.css
new file mode 100644
index 0000000..a5e104a
--- /dev/null
+++ b/packages/player-react/src/styles.css
@@ -0,0 +1,114 @@
+@import "./videojs.css";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.chapter {
+ position: relative;
+ background-color: rgba(255, 255, 255, 0.2);
+ height: 6px;
+ transition: all 0.2s ease-in-out;
+}
+
+.chaptersCont {
+ min-height: 10px;
+}
+
+.progress-bar .main-timeline .chapter.manualSlid {
+ background-color: rgb(251, 220, 150, 0.5);
+}
+
+.progress-bar .main-timeline .chapter.manualSlid.active {
+ background-color: #f8c450;
+}
+
+.progress-bar .main-timeline .chapter.active {
+ /* backdrop-filter: blur(16px); */
+ /* background: rgba(0, 0, 0, 0.24); */
+ height: 10px;
+}
+
+.chapter:hover {
+ height: 10px;
+}
+
+/* .progress-bar:hover .head {
+ opacity: 1;
+ } */
+
+.head:hover {
+ border-width: 2px;
+ width: 14px;
+ height: 14px;
+}
+
+/*
+ @media (any-hover: none) {
+ .head {
+ opacity: 1 !important;
+ }
+ } */
+
+@media (max-width: 641px) {
+ .chapter {
+ height: 4px;
+ }
+
+ .progress-bar .main-timeline .chapter.active {
+ height: 6px;
+ }
+
+ .chaptersCont {
+ min-height: 6px;
+ }
+}
+
+.summary-card {
+ /* height: 20vw;
+ max-height: 220px;
+ min-width: 280px; */
+
+ height: auto;
+ max-height: 220px;
+ width: auto;
+ max-width: 280px;
+}
+
+.popover-width {
+ width: 130px;
+}
+
+.three-line-ellipses {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ line-clamp: 3;
+ -webkit-line-clamp: 3;
+ -webkit-box-orient: vertical;
+}
+
+.title-blur {
+ background: rgba(20, 20, 20, 0.39);
+ backdrop-filter: blur(24px);
+}
+
+.title-blur {
+ text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.4);
+}
+
+.chapter-title-cont {
+ height: 62px;
+}
+
+.chapter-title-cont>p {
+ font-size: 11px;
+ line-height: 16px;
+}
+
+@media (max-width: 640px) {
+ .chapter-title-cont {
+ width: 130%;
+ transform: translateX(-12.5%);
+ }
+}
\ No newline at end of file
diff --git a/packages/player-react/src/videojs.css b/packages/player-react/src/videojs.css
new file mode 100644
index 0000000..98ffc06
--- /dev/null
+++ b/packages/player-react/src/videojs.css
@@ -0,0 +1,1908 @@
+@charset "UTF-8";
+
+.video-js .vjs-big-play-button .vjs-icon-placeholder:before,
+.video-js .vjs-modal-dialog,
+.vjs-button>.vjs-icon-placeholder:before,
+.vjs-modal-dialog .vjs-modal-dialog-content {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+}
+
+.video-js .vjs-big-play-button .vjs-icon-placeholder:before,
+.vjs-button>.vjs-icon-placeholder:before {
+ text-align: center;
+}
+
+@font-face {
+ font-family: VideoJS;
+ src: url(data:application/font-woff;charset=utf-8;base64,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) format('woff');
+ font-weight: 400;
+ font-style: normal;
+}
+
+.video-js .vjs-big-play-button .vjs-icon-placeholder:before,
+.video-js .vjs-play-control .vjs-icon-placeholder,
+.vjs-icon-play {
+ font-family: VideoJS;
+ font-weight: 400;
+ font-style: normal;
+}
+
+.video-js .vjs-big-play-button .vjs-icon-placeholder:before,
+.video-js .vjs-play-control .vjs-icon-placeholder:before,
+.vjs-icon-play:before {
+ content: '\f101';
+}
+
+.vjs-icon-play-circle {
+ font-family: VideoJS;
+ font-weight: 400;
+ font-style: normal;
+}
+
+.vjs-icon-play-circle:before {
+ content: '\f102';
+}
+
+.video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder,
+.vjs-icon-pause {
+ font-family: VideoJS;
+ font-weight: 400;
+ font-style: normal;
+}
+
+.video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder:before,
+.vjs-icon-pause:before {
+ content: '\f103';
+}
+
+.video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder,
+.vjs-icon-volume-mute {
+ font-family: VideoJS;
+ font-weight: 400;
+ font-style: normal;
+}
+
+.video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder:before,
+.vjs-icon-volume-mute:before {
+ content: '\f104';
+}
+
+.video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder,
+.vjs-icon-volume-low {
+ font-family: VideoJS;
+ font-weight: 400;
+ font-style: normal;
+}
+
+.video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder:before,
+.vjs-icon-volume-low:before {
+ content: '\f105';
+}
+
+.video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder,
+.vjs-icon-volume-mid {
+ font-family: VideoJS;
+ font-weight: 400;
+ font-style: normal;
+}
+
+.video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder:before,
+.vjs-icon-volume-mid:before {
+ content: '\f106';
+}
+
+.video-js .vjs-mute-control .vjs-icon-placeholder,
+.vjs-icon-volume-high {
+ font-family: VideoJS;
+ font-weight: 400;
+ font-style: normal;
+}
+
+.video-js .vjs-mute-control .vjs-icon-placeholder:before,
+.vjs-icon-volume-high:before {
+ content: '\f107';
+}
+
+.video-js .vjs-fullscreen-control .vjs-icon-placeholder,
+.vjs-icon-fullscreen-enter {
+ font-family: VideoJS;
+ font-weight: 400;
+ font-style: normal;
+}
+
+.video-js .vjs-fullscreen-control .vjs-icon-placeholder:before,
+.vjs-icon-fullscreen-enter:before {
+ content: '\f108';
+}
+
+.video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder,
+.vjs-icon-fullscreen-exit {
+ font-family: VideoJS;
+ font-weight: 400;
+ font-style: normal;
+}
+
+.video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder:before,
+.vjs-icon-fullscreen-exit:before {
+ content: '\f109';
+}
+
+.vjs-icon-square {
+ font-family: VideoJS;
+ font-weight: 400;
+ font-style: normal;
+}
+
+.vjs-icon-square:before {
+ content: '\f10a';
+}
+
+.vjs-icon-spinner {
+ font-family: VideoJS;
+ font-weight: 400;
+ font-style: normal;
+}
+
+.vjs-icon-spinner:before {
+ content: '\f10b';
+}
+
+.video-js .vjs-subs-caps-button .vjs-icon-placeholder,
+.video-js .vjs-subtitles-button .vjs-icon-placeholder,
+.video-js.video-js:lang(en-AU) .vjs-subs-caps-button .vjs-icon-placeholder,
+.video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-placeholder,
+.video-js.video-js:lang(en-IE) .vjs-subs-caps-button .vjs-icon-placeholder,
+.video-js.video-js:lang(en-NZ) .vjs-subs-caps-button .vjs-icon-placeholder,
+.vjs-icon-subtitles {
+ font-family: VideoJS;
+ font-weight: 400;
+ font-style: normal;
+}
+
+.video-js .vjs-subs-caps-button .vjs-icon-placeholder:before,
+.video-js .vjs-subtitles-button .vjs-icon-placeholder:before,
+.video-js.video-js:lang(en-AU) .vjs-subs-caps-button .vjs-icon-placeholder:before,
+.video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-placeholder:before,
+.video-js.video-js:lang(en-IE) .vjs-subs-caps-button .vjs-icon-placeholder:before,
+.video-js.video-js:lang(en-NZ) .vjs-subs-caps-button .vjs-icon-placeholder:before,
+.vjs-icon-subtitles:before {
+ content: '\f10c';
+}
+
+.video-js .vjs-captions-button .vjs-icon-placeholder,
+.video-js:lang(en) .vjs-subs-caps-button .vjs-icon-placeholder,
+.video-js:lang(fr-CA) .vjs-subs-caps-button .vjs-icon-placeholder,
+.vjs-icon-captions {
+ font-family: VideoJS;
+ font-weight: 400;
+ font-style: normal;
+}
+
+.video-js .vjs-captions-button .vjs-icon-placeholder:before,
+.video-js:lang(en) .vjs-subs-caps-button .vjs-icon-placeholder:before,
+.video-js:lang(fr-CA) .vjs-subs-caps-button .vjs-icon-placeholder:before,
+.vjs-icon-captions:before {
+ content: '\f10d';
+}
+
+.video-js .vjs-chapters-button .vjs-icon-placeholder,
+.vjs-icon-chapters {
+ font-family: VideoJS;
+ font-weight: 400;
+ font-style: normal;
+}
+
+.video-js .vjs-chapters-button .vjs-icon-placeholder:before,
+.vjs-icon-chapters:before {
+ content: '\f10e';
+}
+
+.vjs-icon-share {
+ font-family: VideoJS;
+ font-weight: 400;
+ font-style: normal;
+}
+
+.vjs-icon-share:before {
+ content: '\f10f';
+}
+
+.vjs-icon-cog {
+ font-family: VideoJS;
+ font-weight: 400;
+ font-style: normal;
+}
+
+.vjs-icon-cog:before {
+ content: '\f110';
+}
+
+.video-js .vjs-play-progress,
+.video-js .vjs-volume-level,
+.vjs-icon-circle,
+.vjs-seek-to-live-control .vjs-icon-placeholder {
+ font-family: VideoJS;
+ font-weight: 400;
+ font-style: normal;
+}
+
+.video-js .vjs-play-progress:before,
+.video-js .vjs-volume-level:before,
+.vjs-icon-circle:before,
+.vjs-seek-to-live-control .vjs-icon-placeholder:before {
+ content: '\f111';
+}
+
+.vjs-icon-circle-outline {
+ font-family: VideoJS;
+ font-weight: 400;
+ font-style: normal;
+}
+
+.vjs-icon-circle-outline:before {
+ content: '\f112';
+}
+
+.vjs-icon-circle-inner-circle {
+ font-family: VideoJS;
+ font-weight: 400;
+ font-style: normal;
+}
+
+.vjs-icon-circle-inner-circle:before {
+ content: '\f113';
+}
+
+.vjs-icon-hd {
+ font-family: VideoJS;
+ font-weight: 400;
+ font-style: normal;
+}
+
+.vjs-icon-hd:before {
+ content: '\f114';
+}
+
+.video-js .vjs-control.vjs-close-button .vjs-icon-placeholder,
+.vjs-icon-cancel {
+ font-family: VideoJS;
+ font-weight: 400;
+ font-style: normal;
+}
+
+.video-js .vjs-control.vjs-close-button .vjs-icon-placeholder:before,
+.vjs-icon-cancel:before {
+ content: '\f115';
+}
+
+.video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder,
+.vjs-icon-replay {
+ font-family: VideoJS;
+ font-weight: 400;
+ font-style: normal;
+}
+
+.video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder:before,
+.vjs-icon-replay:before {
+ content: '\f116';
+}
+
+.vjs-icon-facebook {
+ font-family: VideoJS;
+ font-weight: 400;
+ font-style: normal;
+}
+
+.vjs-icon-facebook:before {
+ content: '\f117';
+}
+
+.vjs-icon-gplus {
+ font-family: VideoJS;
+ font-weight: 400;
+ font-style: normal;
+}
+
+.vjs-icon-gplus:before {
+ content: '\f118';
+}
+
+.vjs-icon-linkedin {
+ font-family: VideoJS;
+ font-weight: 400;
+ font-style: normal;
+}
+
+.vjs-icon-linkedin:before {
+ content: '\f119';
+}
+
+.vjs-icon-twitter {
+ font-family: VideoJS;
+ font-weight: 400;
+ font-style: normal;
+}
+
+.vjs-icon-twitter:before {
+ content: '\f11a';
+}
+
+.vjs-icon-tumblr {
+ font-family: VideoJS;
+ font-weight: 400;
+ font-style: normal;
+}
+
+.vjs-icon-tumblr:before {
+ content: '\f11b';
+}
+
+.vjs-icon-pinterest {
+ font-family: VideoJS;
+ font-weight: 400;
+ font-style: normal;
+}
+
+.vjs-icon-pinterest:before {
+ content: '\f11c';
+}
+
+.video-js .vjs-descriptions-button .vjs-icon-placeholder,
+.vjs-icon-audio-description {
+ font-family: VideoJS;
+ font-weight: 400;
+ font-style: normal;
+}
+
+.video-js .vjs-descriptions-button .vjs-icon-placeholder:before,
+.vjs-icon-audio-description:before {
+ content: '\f11d';
+}
+
+.video-js .vjs-audio-button .vjs-icon-placeholder,
+.vjs-icon-audio {
+ font-family: VideoJS;
+ font-weight: 400;
+ font-style: normal;
+}
+
+.video-js .vjs-audio-button .vjs-icon-placeholder:before,
+.vjs-icon-audio:before {
+ content: '\f11e';
+}
+
+.vjs-icon-next-item {
+ font-family: VideoJS;
+ font-weight: 400;
+ font-style: normal;
+}
+
+.vjs-icon-next-item:before {
+ content: '\f11f';
+}
+
+.vjs-icon-previous-item {
+ font-family: VideoJS;
+ font-weight: 400;
+ font-style: normal;
+}
+
+.vjs-icon-previous-item:before {
+ content: '\f120';
+}
+
+.video-js .vjs-picture-in-picture-control .vjs-icon-placeholder,
+.vjs-icon-picture-in-picture-enter {
+ font-family: VideoJS;
+ font-weight: 400;
+ font-style: normal;
+}
+
+.video-js .vjs-picture-in-picture-control .vjs-icon-placeholder:before,
+.vjs-icon-picture-in-picture-enter:before {
+ content: '\f121';
+}
+
+.video-js.vjs-picture-in-picture .vjs-picture-in-picture-control .vjs-icon-placeholder,
+.vjs-icon-picture-in-picture-exit {
+ font-family: VideoJS;
+ font-weight: 400;
+ font-style: normal;
+}
+
+.video-js.vjs-picture-in-picture .vjs-picture-in-picture-control .vjs-icon-placeholder:before,
+.vjs-icon-picture-in-picture-exit:before {
+ content: '\f122';
+}
+
+.video-js {
+ display: block;
+ box-sizing: border-box;
+ color: #fff;
+ background-color: #000;
+ position: relative;
+ padding: 0;
+ font-size: 10px;
+ line-height: 1;
+ font-weight: 400;
+ font-style: normal;
+ font-family: Arial, Helvetica, sans-serif;
+ word-break: initial;
+}
+
+.video-js:-moz-full-screen {
+ position: absolute;
+}
+
+.video-js:-webkit-full-screen {
+ width: 100% !important;
+ height: 100% !important;
+}
+
+.video-js[tabindex='-1'] {
+ outline: 0;
+}
+
+.video-js *,
+.video-js :after,
+.video-js :before {
+ box-sizing: inherit;
+}
+
+.video-js ul {
+ font-family: inherit;
+ font-size: inherit;
+ line-height: inherit;
+ list-style-position: outside;
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+.video-js.vjs-1-1,
+.video-js.vjs-16-9,
+.video-js.vjs-4-3,
+.video-js.vjs-9-16,
+.video-js.vjs-fluid {
+ width: 100%;
+ max-width: 100%;
+ height: 0;
+}
+
+.video-js.vjs-16-9 {
+ padding-top: 56.25%;
+}
+
+.video-js.vjs-4-3 {
+ padding-top: 75%;
+}
+
+.video-js.vjs-9-16 {
+ padding-top: 177.7777777778%;
+}
+
+.video-js.vjs-1-1 {
+ padding-top: 100%;
+}
+
+.video-js.vjs-fill {
+ width: 100%;
+ height: 100%;
+}
+
+.video-js .vjs-tech {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+}
+
+body.vjs-full-window {
+ padding: 0;
+ margin: 0;
+ height: 100%;
+}
+
+.vjs-full-window .video-js.vjs-fullscreen {
+ position: fixed;
+ overflow: hidden;
+ z-index: 1000;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ right: 0;
+}
+
+.video-js.vjs-fullscreen:not(.vjs-ios-native-fs) {
+ width: 100% !important;
+ height: 100% !important;
+ padding-top: 0 !important;
+}
+
+.video-js.vjs-fullscreen.vjs-user-inactive {
+ cursor: none;
+}
+
+.vjs-hidden {
+ display: none !important;
+}
+
+.vjs-disabled {
+ opacity: 0.5;
+ cursor: default;
+}
+
+.video-js .vjs-offscreen {
+ height: 1px;
+ left: -9999px;
+ position: absolute;
+ top: 0;
+ width: 1px;
+}
+
+.vjs-lock-showing {
+ display: block !important;
+ opacity: 1 !important;
+ visibility: visible !important;
+}
+
+.vjs-no-js {
+ padding: 20px;
+ color: #fff;
+ background-color: #000;
+ font-size: 18px;
+ font-family: Arial, Helvetica, sans-serif;
+ text-align: center;
+ width: 300px;
+ height: 150px;
+ margin: 0 auto;
+}
+
+.vjs-no-js a,
+.vjs-no-js a:visited {
+ color: #66a8cc;
+}
+
+.video-js .vjs-big-play-button {
+ font-size: 3em;
+ line-height: 1.5em;
+ height: 1.63332em;
+ width: 3em;
+ display: block;
+ position: absolute;
+ top: 10px;
+ left: 10px;
+ padding: 0;
+ cursor: pointer;
+ opacity: 1;
+ border: 0.06666em solid #fff;
+ background-color: #2b333f;
+ background-color: rgba(43, 51, 63, 0.7);
+ border-radius: 0.3em;
+ transition: all 0.4s;
+}
+
+.vjs-big-play-centered .vjs-big-play-button {
+ top: 50%;
+ left: 50%;
+ margin-top: -0.81666em;
+ margin-left: -1.5em;
+}
+
+.video-js .vjs-big-play-button:focus,
+.video-js:hover .vjs-big-play-button {
+ border-color: #fff;
+ background-color: #73859f;
+ background-color: rgba(115, 133, 159, 0.5);
+ transition: all 0s;
+}
+
+.vjs-controls-disabled .vjs-big-play-button,
+.vjs-error .vjs-big-play-button,
+.vjs-has-started .vjs-big-play-button,
+.vjs-using-native-controls .vjs-big-play-button {
+ display: none;
+}
+
+.vjs-has-started.vjs-paused.vjs-show-big-play-button-on-pause .vjs-big-play-button {
+ display: block;
+}
+
+.video-js button {
+ background: 0 0;
+ border: none;
+ color: inherit;
+ display: inline-block;
+ font-size: inherit;
+ line-height: inherit;
+ text-transform: none;
+ text-decoration: none;
+ transition: none;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+}
+
+.vjs-control .vjs-button {
+ width: 100%;
+ height: 100%;
+}
+
+.video-js .vjs-control.vjs-close-button {
+ cursor: pointer;
+ height: 3em;
+ position: absolute;
+ right: 0;
+ top: 0.5em;
+ z-index: 2;
+}
+
+.video-js .vjs-modal-dialog {
+ background: rgba(0, 0, 0, 0.8);
+ background: linear-gradient(180deg,
+ rgba(0, 0, 0, 0.8),
+ rgba(255, 255, 255, 0));
+ overflow: auto;
+}
+
+.video-js .vjs-modal-dialog>* {
+ box-sizing: border-box;
+}
+
+.vjs-modal-dialog .vjs-modal-dialog-content {
+ font-size: 1.2em;
+ line-height: 1.5;
+ padding: 20px 24px;
+ z-index: 1;
+}
+
+.vjs-menu-button {
+ cursor: pointer;
+}
+
+.vjs-menu-button.vjs-disabled {
+ cursor: default;
+}
+
+.vjs-workinghover .vjs-menu-button.vjs-disabled:hover .vjs-menu {
+ display: none;
+}
+
+.vjs-menu .vjs-menu-content {
+ display: block;
+ padding: 0;
+ margin: 0;
+ font-family: Arial, Helvetica, sans-serif;
+ overflow: auto;
+}
+
+.vjs-menu .vjs-menu-content>* {
+ box-sizing: border-box;
+}
+
+.vjs-scrubbing .vjs-control.vjs-menu-button:hover .vjs-menu {
+ display: none;
+}
+
+.vjs-menu li {
+ list-style: none;
+ margin: 0;
+ padding: 0.2em 0;
+ line-height: 1.4em;
+ font-size: 1.2em;
+ text-align: center;
+ text-transform: lowercase;
+}
+
+.js-focus-visible .vjs-menu li.vjs-menu-item:hover,
+.vjs-menu li.vjs-menu-item:focus,
+.vjs-menu li.vjs-menu-item:hover {
+ background-color: #73859f;
+ background-color: rgba(115, 133, 159, 0.5);
+}
+
+.js-focus-visible .vjs-menu li.vjs-selected:hover,
+.vjs-menu li.vjs-selected,
+.vjs-menu li.vjs-selected:focus,
+.vjs-menu li.vjs-selected:hover {
+ background-color: #fff;
+ color: #2b333f;
+}
+
+.js-focus-visible .vjs-menu :not(.vjs-selected):focus:not(.focus-visible),
+.video-js .vjs-menu :not(.vjs-selected):focus:not(:focus-visible) {
+ background: 0 0;
+}
+
+.vjs-menu li.vjs-menu-title {
+ text-align: center;
+ text-transform: uppercase;
+ font-size: 1em;
+ line-height: 2em;
+ padding: 0;
+ margin: 0 0 0.3em 0;
+ font-weight: 700;
+ cursor: default;
+}
+
+.vjs-menu-button-popup .vjs-menu {
+ display: none;
+ position: absolute;
+ bottom: 0;
+ width: 10em;
+ left: -3em;
+ height: 0;
+ margin-bottom: 1.5em;
+ border-top-color: rgba(43, 51, 63, 0.7);
+}
+
+.vjs-menu-button-popup .vjs-menu .vjs-menu-content {
+ background-color: #2b333f;
+ background-color: rgba(43, 51, 63, 0.7);
+ position: absolute;
+ width: 100%;
+ bottom: 1.5em;
+ max-height: 15em;
+}
+
+.vjs-layout-tiny .vjs-menu-button-popup .vjs-menu .vjs-menu-content,
+.vjs-layout-x-small .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
+ max-height: 5em;
+}
+
+.vjs-layout-small .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
+ max-height: 10em;
+}
+
+.vjs-layout-medium .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
+ max-height: 14em;
+}
+
+.vjs-layout-huge .vjs-menu-button-popup .vjs-menu .vjs-menu-content,
+.vjs-layout-large .vjs-menu-button-popup .vjs-menu .vjs-menu-content,
+.vjs-layout-x-large .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
+ max-height: 25em;
+}
+
+.vjs-menu-button-popup .vjs-menu.vjs-lock-showing,
+.vjs-workinghover .vjs-menu-button-popup.vjs-hover .vjs-menu {
+ display: block;
+}
+
+.video-js .vjs-menu-button-inline {
+ transition: all 0.4s;
+ overflow: hidden;
+}
+
+.video-js .vjs-menu-button-inline:before {
+ width: 2.222222222em;
+}
+
+.video-js .vjs-menu-button-inline.vjs-slider-active,
+.video-js .vjs-menu-button-inline:focus,
+.video-js .vjs-menu-button-inline:hover,
+.video-js.vjs-no-flex .vjs-menu-button-inline {
+ width: 12em;
+}
+
+.vjs-menu-button-inline .vjs-menu {
+ opacity: 0;
+ height: 100%;
+ width: auto;
+ position: absolute;
+ left: 4em;
+ top: 0;
+ padding: 0;
+ margin: 0;
+ transition: all 0.4s;
+}
+
+.vjs-menu-button-inline.vjs-slider-active .vjs-menu,
+.vjs-menu-button-inline:focus .vjs-menu,
+.vjs-menu-button-inline:hover .vjs-menu {
+ display: block;
+ opacity: 1;
+}
+
+.vjs-no-flex .vjs-menu-button-inline .vjs-menu {
+ display: block;
+ opacity: 1;
+ position: relative;
+ width: auto;
+}
+
+.vjs-no-flex .vjs-menu-button-inline.vjs-slider-active .vjs-menu,
+.vjs-no-flex .vjs-menu-button-inline:focus .vjs-menu,
+.vjs-no-flex .vjs-menu-button-inline:hover .vjs-menu {
+ width: auto;
+}
+
+.vjs-menu-button-inline .vjs-menu-content {
+ width: auto;
+ height: 100%;
+ margin: 0;
+ overflow: hidden;
+}
+
+.video-js .vjs-control-bar {
+ display: none;
+ width: 100%;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ height: 3em;
+ background-color: #2b333f;
+ background-color: rgba(43, 51, 63, 0.7);
+}
+
+.vjs-has-started .vjs-control-bar {
+ display: flex;
+ visibility: visible;
+ opacity: 1;
+ transition: visibility 0.1s, opacity 0.1s;
+}
+
+.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
+ visibility: visible;
+ opacity: 0;
+ transition: visibility 1s, opacity 1s;
+}
+
+.vjs-controls-disabled .vjs-control-bar,
+.vjs-error .vjs-control-bar,
+.vjs-using-native-controls .vjs-control-bar {
+ display: none !important;
+}
+
+.vjs-audio.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
+ opacity: 1;
+ visibility: visible;
+}
+
+.vjs-has-started.vjs-no-flex .vjs-control-bar {
+ display: table;
+}
+
+.video-js .vjs-control {
+ position: relative;
+ text-align: center;
+ margin: 0;
+ padding: 0;
+ height: 100%;
+ width: 4em;
+ flex: none;
+}
+
+.vjs-button>.vjs-icon-placeholder:before {
+ font-size: 1.8em;
+ line-height: 1.67;
+}
+
+.vjs-button>.vjs-icon-placeholder {
+ display: block;
+}
+
+.video-js .vjs-control:focus,
+.video-js .vjs-control:focus:before,
+.video-js .vjs-control:hover:before {
+ text-shadow: 0 0 1em #fff;
+}
+
+.video-js .vjs-control-text {
+ border: 0;
+ clip: rect(0 0 0 0);
+ height: 1px;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ width: 1px;
+}
+
+.vjs-no-flex .vjs-control {
+ display: table-cell;
+ vertical-align: middle;
+}
+
+.video-js .vjs-custom-control-spacer {
+ display: none;
+}
+
+.video-js .vjs-progress-control {
+ cursor: pointer;
+ flex: auto;
+ display: flex;
+ align-items: center;
+ min-width: 4em;
+ touch-action: none;
+}
+
+.video-js .vjs-progress-control.disabled {
+ cursor: default;
+}
+
+.vjs-live .vjs-progress-control {
+ display: none;
+}
+
+.vjs-liveui .vjs-progress-control {
+ display: flex;
+ align-items: center;
+}
+
+.vjs-no-flex .vjs-progress-control {
+ width: auto;
+}
+
+.video-js .vjs-progress-holder {
+ flex: auto;
+ transition: all 0.2s;
+ height: 0.3em;
+}
+
+.video-js .vjs-progress-control .vjs-progress-holder {
+ margin: 0 10px;
+}
+
+.video-js .vjs-progress-control:hover .vjs-progress-holder {
+ font-size: 1.6666666667em;
+}
+
+.video-js .vjs-progress-control:hover .vjs-progress-holder.disabled {
+ font-size: 1em;
+}
+
+.video-js .vjs-progress-holder .vjs-load-progress,
+.video-js .vjs-progress-holder .vjs-load-progress div,
+.video-js .vjs-progress-holder .vjs-play-progress {
+ position: absolute;
+ display: block;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ width: 0;
+}
+
+.video-js .vjs-play-progress {
+ background-color: #fff;
+}
+
+.video-js .vjs-play-progress:before {
+ font-size: 0.9em;
+ position: absolute;
+ right: -0.5em;
+ top: -0.3333333333em;
+ z-index: 1;
+}
+
+.video-js .vjs-load-progress {
+ background: rgba(115, 133, 159, 0.5);
+}
+
+.video-js .vjs-load-progress div {
+ background: rgba(115, 133, 159, 0.75);
+}
+
+.video-js .vjs-time-tooltip {
+ background-color: #fff;
+ background-color: rgba(255, 255, 255, 0.8);
+ border-radius: 0.3em;
+ color: #000;
+ float: right;
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 1em;
+ padding: 6px 8px 8px 8px;
+ pointer-events: none;
+ position: absolute;
+ top: -3.4em;
+ visibility: hidden;
+ z-index: 1;
+}
+
+.video-js .vjs-progress-holder:focus .vjs-time-tooltip {
+ display: none;
+}
+
+.video-js .vjs-progress-control:hover .vjs-progress-holder:focus .vjs-time-tooltip,
+.video-js .vjs-progress-control:hover .vjs-time-tooltip {
+ display: block;
+ font-size: 0.6em;
+ visibility: visible;
+}
+
+.video-js .vjs-progress-control.disabled:hover .vjs-time-tooltip {
+ font-size: 1em;
+}
+
+.video-js .vjs-progress-control .vjs-mouse-display {
+ display: none;
+ position: absolute;
+ width: 1px;
+ height: 100%;
+ background-color: #000;
+ z-index: 1;
+}
+
+.vjs-no-flex .vjs-progress-control .vjs-mouse-display {
+ z-index: 0;
+}
+
+.video-js .vjs-progress-control:hover .vjs-mouse-display {
+ display: block;
+}
+
+.video-js.vjs-user-inactive .vjs-progress-control .vjs-mouse-display {
+ visibility: hidden;
+ opacity: 0;
+ transition: visibility 1s, opacity 1s;
+}
+
+.video-js.vjs-user-inactive.vjs-no-flex .vjs-progress-control .vjs-mouse-display {
+ display: none;
+}
+
+.vjs-mouse-display .vjs-time-tooltip {
+ color: #fff;
+ background-color: #000;
+ background-color: rgba(0, 0, 0, 0.8);
+}
+
+.video-js .vjs-slider {
+ position: relative;
+ cursor: pointer;
+ padding: 0;
+ margin: 0 0.45em 0 0.45em;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ background-color: #73859f;
+ background-color: rgba(115, 133, 159, 0.5);
+}
+
+.video-js .vjs-slider.disabled {
+ cursor: default;
+}
+
+.video-js .vjs-slider:focus {
+ text-shadow: 0 0 1em #fff;
+ box-shadow: 0 0 1em #fff;
+}
+
+.video-js .vjs-mute-control {
+ cursor: pointer;
+ flex: none;
+}
+
+.video-js .vjs-volume-control {
+ cursor: pointer;
+ margin-right: 1em;
+ display: flex;
+}
+
+.video-js .vjs-volume-control.vjs-volume-horizontal {
+ width: 5em;
+}
+
+.video-js .vjs-volume-panel .vjs-volume-control {
+ visibility: visible;
+ opacity: 0;
+ width: 1px;
+ height: 1px;
+ margin-left: -1px;
+}
+
+.video-js .vjs-volume-panel {
+ transition: width 1s;
+}
+
+.video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active,
+.video-js .vjs-volume-panel .vjs-volume-control:active,
+.video-js .vjs-volume-panel.vjs-hover .vjs-mute-control~.vjs-volume-control,
+.video-js .vjs-volume-panel.vjs-hover .vjs-volume-control,
+.video-js .vjs-volume-panel:active .vjs-volume-control,
+.video-js .vjs-volume-panel:focus .vjs-volume-control {
+ visibility: visible;
+ opacity: 1;
+ position: relative;
+ transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s,
+ top 0s;
+}
+
+.video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal,
+.video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal,
+.video-js .vjs-volume-panel.vjs-hover .vjs-mute-control~.vjs-volume-control.vjs-volume-horizontal,
+.video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-horizontal,
+.video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal,
+.video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal {
+ width: 5em;
+ height: 3em;
+ margin-right: 0;
+}
+
+.video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-vertical,
+.video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-vertical,
+.video-js .vjs-volume-panel.vjs-hover .vjs-mute-control~.vjs-volume-control.vjs-volume-vertical,
+.video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-vertical,
+.video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-vertical,
+.video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-vertical {
+ left: -3.5em;
+ transition: left 0s;
+}
+
+.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover,
+.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,
+.video-js .vjs-volume-panel.vjs-volume-panel-horizontal:active {
+ width: 10em;
+ transition: width 0.1s;
+}
+
+.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-mute-toggle-only {
+ width: 4em;
+}
+
+.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical {
+ height: 8em;
+ width: 3em;
+ left: -3000em;
+ transition: visibility 1s, opacity 1s, height 1s 1s, width 1s 1s, left 1s 1s,
+ top 1s 1s;
+}
+
+.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal {
+ transition: visibility 1s, opacity 1s, height 1s 1s, width 1s, left 1s 1s,
+ top 1s 1s;
+}
+
+.video-js.vjs-no-flex .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal {
+ width: 5em;
+ height: 3em;
+ visibility: visible;
+ opacity: 1;
+ position: relative;
+ transition: none;
+}
+
+.video-js.vjs-no-flex .vjs-volume-control.vjs-volume-vertical,
+.video-js.vjs-no-flex .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical {
+ position: absolute;
+ bottom: 3em;
+ left: 0.5em;
+}
+
+.video-js .vjs-volume-panel {
+ display: flex;
+}
+
+.video-js .vjs-volume-bar {
+ margin: 1.35em 0.45em;
+}
+
+.vjs-volume-bar.vjs-slider-horizontal {
+ width: 5em;
+ height: 0.3em;
+}
+
+.vjs-volume-bar.vjs-slider-vertical {
+ width: 0.3em;
+ height: 5em;
+ margin: 1.35em auto;
+}
+
+.video-js .vjs-volume-level {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ background-color: #fff;
+}
+
+.video-js .vjs-volume-level:before {
+ position: absolute;
+ font-size: 0.9em;
+ z-index: 1;
+}
+
+.vjs-slider-vertical .vjs-volume-level {
+ width: 0.3em;
+}
+
+.vjs-slider-vertical .vjs-volume-level:before {
+ top: -0.5em;
+ left: -0.3em;
+ z-index: 1;
+}
+
+.vjs-slider-horizontal .vjs-volume-level {
+ height: 0.3em;
+}
+
+.vjs-slider-horizontal .vjs-volume-level:before {
+ top: -0.3em;
+ right: -0.5em;
+}
+
+.video-js .vjs-volume-panel.vjs-volume-panel-vertical {
+ width: 4em;
+}
+
+.vjs-volume-bar.vjs-slider-vertical .vjs-volume-level {
+ height: 100%;
+}
+
+.vjs-volume-bar.vjs-slider-horizontal .vjs-volume-level {
+ width: 100%;
+}
+
+.video-js .vjs-volume-vertical {
+ width: 3em;
+ height: 8em;
+ bottom: 8em;
+ background-color: #2b333f;
+ background-color: rgba(43, 51, 63, 0.7);
+}
+
+.video-js .vjs-volume-horizontal .vjs-menu {
+ left: -2em;
+}
+
+.video-js .vjs-volume-tooltip {
+ background-color: #fff;
+ background-color: rgba(255, 255, 255, 0.8);
+ border-radius: 0.3em;
+ color: #000;
+ float: right;
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 1em;
+ padding: 6px 8px 8px 8px;
+ pointer-events: none;
+ position: absolute;
+ top: -3.4em;
+ visibility: hidden;
+ z-index: 1;
+}
+
+.video-js .vjs-volume-control:hover .vjs-progress-holder:focus .vjs-volume-tooltip,
+.video-js .vjs-volume-control:hover .vjs-volume-tooltip {
+ display: block;
+ font-size: 1em;
+ visibility: visible;
+}
+
+.video-js .vjs-volume-vertical:hover .vjs-progress-holder:focus .vjs-volume-tooltip,
+.video-js .vjs-volume-vertical:hover .vjs-volume-tooltip {
+ left: 1em;
+ top: -12px;
+}
+
+.video-js .vjs-volume-control.disabled:hover .vjs-volume-tooltip {
+ font-size: 1em;
+}
+
+.video-js .vjs-volume-control .vjs-mouse-display {
+ display: none;
+ position: absolute;
+ width: 100%;
+ height: 1px;
+ background-color: #000;
+ z-index: 1;
+}
+
+.video-js .vjs-volume-horizontal .vjs-mouse-display {
+ width: 1px;
+ height: 100%;
+}
+
+.vjs-no-flex .vjs-volume-control .vjs-mouse-display {
+ z-index: 0;
+}
+
+.video-js .vjs-volume-control:hover .vjs-mouse-display {
+ display: block;
+}
+
+.video-js.vjs-user-inactive .vjs-volume-control .vjs-mouse-display {
+ visibility: hidden;
+ opacity: 0;
+ transition: visibility 1s, opacity 1s;
+}
+
+.video-js.vjs-user-inactive.vjs-no-flex .vjs-volume-control .vjs-mouse-display {
+ display: none;
+}
+
+.vjs-mouse-display .vjs-volume-tooltip {
+ color: #fff;
+ background-color: #000;
+ background-color: rgba(0, 0, 0, 0.8);
+}
+
+.vjs-poster {
+ display: inline-block;
+ vertical-align: middle;
+ background-repeat: no-repeat;
+ background-position: 50% 50%;
+ background-size: contain;
+ background-color: #000;
+ cursor: pointer;
+ margin: 0;
+ padding: 0;
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ height: 100%;
+}
+
+.vjs-has-started .vjs-poster {
+ display: none;
+}
+
+.vjs-audio.vjs-has-started .vjs-poster {
+ display: block;
+}
+
+.vjs-using-native-controls .vjs-poster {
+ display: none;
+}
+
+.video-js .vjs-live-control {
+ display: flex;
+ align-items: flex-start;
+ flex: auto;
+ font-size: 1em;
+ line-height: 3em;
+}
+
+.vjs-no-flex .vjs-live-control {
+ display: table-cell;
+ width: auto;
+ text-align: left;
+}
+
+.video-js.vjs-liveui .vjs-live-control,
+.video-js:not(.vjs-live) .vjs-live-control {
+ display: none;
+}
+
+.video-js .vjs-seek-to-live-control {
+ align-items: center;
+ cursor: pointer;
+ flex: none;
+ display: inline-flex;
+ height: 100%;
+ padding-left: 0.5em;
+ padding-right: 0.5em;
+ font-size: 1em;
+ line-height: 3em;
+ width: auto;
+ min-width: 4em;
+}
+
+.vjs-no-flex .vjs-seek-to-live-control {
+ display: table-cell;
+ width: auto;
+ text-align: left;
+}
+
+.video-js.vjs-live:not(.vjs-liveui) .vjs-seek-to-live-control,
+.video-js:not(.vjs-live) .vjs-seek-to-live-control {
+ display: none;
+}
+
+.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge {
+ cursor: auto;
+}
+
+.vjs-seek-to-live-control .vjs-icon-placeholder {
+ margin-right: 0.5em;
+ color: #888;
+}
+
+.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge .vjs-icon-placeholder {
+ color: red;
+}
+
+.video-js .vjs-time-control {
+ flex: none;
+ font-size: 1em;
+ line-height: 3em;
+ min-width: 2em;
+ width: auto;
+ padding-left: 1em;
+ padding-right: 1em;
+}
+
+.vjs-live .vjs-time-control {
+ display: none;
+}
+
+.video-js .vjs-current-time,
+.vjs-no-flex .vjs-current-time {
+ display: none;
+}
+
+.video-js .vjs-duration,
+.vjs-no-flex .vjs-duration {
+ display: none;
+}
+
+.vjs-time-divider {
+ display: none;
+ line-height: 3em;
+}
+
+.vjs-live .vjs-time-divider {
+ display: none;
+}
+
+.video-js .vjs-play-control {
+ cursor: pointer;
+}
+
+.video-js .vjs-play-control .vjs-icon-placeholder {
+ flex: none;
+}
+
+.vjs-text-track-display {
+ position: absolute;
+ bottom: 3em;
+ left: 0;
+ right: 0;
+ top: 0;
+ pointer-events: none;
+}
+
+.video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display {
+ bottom: 1em;
+}
+
+.video-js .vjs-text-track {
+ font-size: 1.4em;
+ text-align: center;
+ margin-bottom: 0.1em;
+}
+
+.vjs-subtitles {
+ color: #fff;
+}
+
+.vjs-captions {
+ color: #fc6;
+}
+
+.vjs-tt-cue {
+ display: block;
+}
+
+video::-webkit-media-text-track-display {
+ transform: translateY(-3em);
+}
+
+.video-js.vjs-user-inactive.vjs-playing video::-webkit-media-text-track-display {
+ transform: translateY(-1.5em);
+}
+
+.video-js .vjs-picture-in-picture-control {
+ cursor: pointer;
+ flex: none;
+}
+
+.video-js .vjs-fullscreen-control {
+ cursor: pointer;
+ flex: none;
+}
+
+.vjs-playback-rate .vjs-playback-rate-value,
+.vjs-playback-rate>.vjs-menu-button {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+}
+
+.vjs-playback-rate .vjs-playback-rate-value {
+ pointer-events: none;
+ font-size: 1.5em;
+ line-height: 2;
+ text-align: center;
+}
+
+.vjs-playback-rate .vjs-menu {
+ width: 4em;
+ left: 0;
+}
+
+.vjs-error .vjs-error-display .vjs-modal-dialog-content {
+ font-size: 1.4em;
+ text-align: center;
+}
+
+.vjs-error .vjs-error-display:before {
+ color: #fff;
+ content: 'X';
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 4em;
+ left: 0;
+ line-height: 1;
+ margin-top: -0.5em;
+ position: absolute;
+ text-shadow: 0.05em 0.05em 0.1em #000;
+ text-align: center;
+ top: 50%;
+ vertical-align: middle;
+ width: 100%;
+}
+
+.vjs-loading-spinner {
+ display: none;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ margin: -25px 0 0 -25px;
+ opacity: 0.85;
+ text-align: left;
+ border: 6px solid rgba(43, 51, 63, 0.7);
+ box-sizing: border-box;
+ background-clip: padding-box;
+ width: 50px;
+ height: 50px;
+ border-radius: 25px;
+ visibility: hidden;
+}
+
+.vjs-seeking .vjs-loading-spinner,
+.vjs-waiting .vjs-loading-spinner {
+ display: block;
+ -webkit-animation: vjs-spinner-show 0s linear 0.3s forwards;
+ animation: vjs-spinner-show 0s linear 0.3s forwards;
+}
+
+.vjs-loading-spinner:after,
+.vjs-loading-spinner:before {
+ content: '';
+ position: absolute;
+ margin: -6px;
+ box-sizing: inherit;
+ width: inherit;
+ height: inherit;
+ border-radius: inherit;
+ opacity: 1;
+ border: inherit;
+ border-color: transparent;
+ border-top-color: #fff;
+}
+
+.vjs-seeking .vjs-loading-spinner:after,
+.vjs-seeking .vjs-loading-spinner:before,
+.vjs-waiting .vjs-loading-spinner:after,
+.vjs-waiting .vjs-loading-spinner:before {
+ -webkit-animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite,
+ vjs-spinner-fade 1.1s linear infinite;
+ animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite,
+ vjs-spinner-fade 1.1s linear infinite;
+}
+
+.vjs-seeking .vjs-loading-spinner:before,
+.vjs-waiting .vjs-loading-spinner:before {
+ border-top-color: #fff;
+}
+
+.vjs-seeking .vjs-loading-spinner:after,
+.vjs-waiting .vjs-loading-spinner:after {
+ border-top-color: #fff;
+ -webkit-animation-delay: 0.44s;
+ animation-delay: 0.44s;
+}
+
+@keyframes vjs-spinner-show {
+ to {
+ visibility: visible;
+ }
+}
+
+@-webkit-keyframes vjs-spinner-show {
+ to {
+ visibility: visible;
+ }
+}
+
+@keyframes vjs-spinner-spin {
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+@-webkit-keyframes vjs-spinner-spin {
+ 100% {
+ -webkit-transform: rotate(360deg);
+ }
+}
+
+@keyframes vjs-spinner-fade {
+ 0% {
+ border-top-color: #73859f;
+ }
+
+ 20% {
+ border-top-color: #73859f;
+ }
+
+ 35% {
+ border-top-color: #fff;
+ }
+
+ 60% {
+ border-top-color: #73859f;
+ }
+
+ 100% {
+ border-top-color: #73859f;
+ }
+}
+
+@-webkit-keyframes vjs-spinner-fade {
+ 0% {
+ border-top-color: #73859f;
+ }
+
+ 20% {
+ border-top-color: #73859f;
+ }
+
+ 35% {
+ border-top-color: #fff;
+ }
+
+ 60% {
+ border-top-color: #73859f;
+ }
+
+ 100% {
+ border-top-color: #73859f;
+ }
+}
+
+.vjs-chapters-button .vjs-menu ul {
+ width: 24em;
+}
+
+.video-js .vjs-subs-caps-button+.vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder {
+ vertical-align: middle;
+ display: inline-block;
+ margin-bottom: -0.1em;
+}
+
+.video-js .vjs-subs-caps-button+.vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before {
+ font-family: VideoJS;
+ content: '๏';
+ font-size: 1.5em;
+ line-height: inherit;
+}
+
+.video-js .vjs-audio-button+.vjs-menu .vjs-main-desc-menu-item .vjs-menu-item-text .vjs-icon-placeholder {
+ vertical-align: middle;
+ display: inline-block;
+ margin-bottom: -0.1em;
+}
+
+.video-js .vjs-audio-button+.vjs-menu .vjs-main-desc-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before {
+ font-family: VideoJS;
+ content: ' ๏';
+ font-size: 1.5em;
+ line-height: inherit;
+}
+
+.video-js.vjs-layout-small .vjs-audio-button,
+.video-js.vjs-layout-small .vjs-captions-button,
+.video-js.vjs-layout-small .vjs-chapters-button,
+.video-js.vjs-layout-small .vjs-current-time,
+.video-js.vjs-layout-small .vjs-descriptions-button,
+.video-js.vjs-layout-small .vjs-duration,
+.video-js.vjs-layout-small .vjs-playback-rate,
+.video-js.vjs-layout-small .vjs-remaining-time,
+.video-js.vjs-layout-small .vjs-subtitles-button,
+.video-js.vjs-layout-small .vjs-time-divider,
+.video-js.vjs-layout-small .vjs-volume-control,
+.video-js.vjs-layout-tiny .vjs-audio-button,
+.video-js.vjs-layout-tiny .vjs-captions-button,
+.video-js.vjs-layout-tiny .vjs-chapters-button,
+.video-js.vjs-layout-tiny .vjs-current-time,
+.video-js.vjs-layout-tiny .vjs-descriptions-button,
+.video-js.vjs-layout-tiny .vjs-duration,
+.video-js.vjs-layout-tiny .vjs-playback-rate,
+.video-js.vjs-layout-tiny .vjs-remaining-time,
+.video-js.vjs-layout-tiny .vjs-subtitles-button,
+.video-js.vjs-layout-tiny .vjs-time-divider,
+.video-js.vjs-layout-tiny .vjs-volume-control,
+.video-js.vjs-layout-x-small .vjs-audio-button,
+.video-js.vjs-layout-x-small .vjs-captions-button,
+.video-js.vjs-layout-x-small .vjs-chapters-button,
+.video-js.vjs-layout-x-small .vjs-current-time,
+.video-js.vjs-layout-x-small .vjs-descriptions-button,
+.video-js.vjs-layout-x-small .vjs-duration,
+.video-js.vjs-layout-x-small .vjs-playback-rate,
+.video-js.vjs-layout-x-small .vjs-remaining-time,
+.video-js.vjs-layout-x-small .vjs-subtitles-button,
+.video-js.vjs-layout-x-small .vjs-time-divider,
+.video-js.vjs-layout-x-small .vjs-volume-control {
+ display: none !important;
+}
+
+.video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,
+.video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal:active,
+.video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal:hover,
+.video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,
+.video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal:active,
+.video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal:hover,
+.video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,
+.video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal:active,
+.video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal:hover {
+ width: auto;
+ width: initial;
+}
+
+.video-js.vjs-layout-tiny .vjs-subs-caps-button,
+.video-js.vjs-layout-x-small:not(.vjs-live) .vjs-subs-caps-button,
+.video-js.vjs-layout-x-small:not(.vjs-liveui) .vjs-subs-caps-button {
+ display: none;
+}
+
+.video-js.vjs-layout-tiny .vjs-custom-control-spacer,
+.video-js.vjs-layout-x-small.vjs-liveui .vjs-custom-control-spacer {
+ flex: auto;
+ display: block;
+}
+
+.video-js.vjs-layout-tiny.vjs-no-flex .vjs-custom-control-spacer,
+.video-js.vjs-layout-x-small.vjs-liveui.vjs-no-flex .vjs-custom-control-spacer {
+ width: auto;
+}
+
+.video-js.vjs-layout-tiny .vjs-progress-control,
+.video-js.vjs-layout-x-small.vjs-liveui .vjs-progress-control {
+ display: none;
+}
+
+.vjs-modal-dialog.vjs-text-track-settings {
+ background-color: #2b333f;
+ background-color: rgba(43, 51, 63, 0.75);
+ color: #fff;
+ height: 70%;
+}
+
+.vjs-text-track-settings .vjs-modal-dialog-content {
+ display: table;
+}
+
+.vjs-text-track-settings .vjs-track-settings-colors,
+.vjs-text-track-settings .vjs-track-settings-controls,
+.vjs-text-track-settings .vjs-track-settings-font {
+ display: table-cell;
+}
+
+.vjs-text-track-settings .vjs-track-settings-controls {
+ text-align: right;
+ vertical-align: bottom;
+}
+
+@supports (display: grid) {
+ .vjs-text-track-settings .vjs-modal-dialog-content {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ grid-template-rows: 1fr;
+ padding: 20px 24px 0 24px;
+ }
+
+ .vjs-track-settings-controls .vjs-default-button {
+ margin-bottom: 20px;
+ }
+
+ .vjs-text-track-settings .vjs-track-settings-controls {
+ grid-column: 1/-1;
+ }
+
+ .vjs-layout-small .vjs-text-track-settings .vjs-modal-dialog-content,
+ .vjs-layout-tiny .vjs-text-track-settings .vjs-modal-dialog-content,
+ .vjs-layout-x-small .vjs-text-track-settings .vjs-modal-dialog-content {
+ grid-template-columns: 1fr;
+ }
+}
+
+.vjs-track-setting>select {
+ margin-right: 1em;
+ margin-bottom: 0.5em;
+}
+
+.vjs-text-track-settings fieldset {
+ margin: 5px;
+ padding: 3px;
+ border: none;
+}
+
+.vjs-text-track-settings fieldset span {
+ display: inline-block;
+}
+
+.vjs-text-track-settings fieldset span>select {
+ max-width: 7.3em;
+}
+
+.vjs-text-track-settings legend {
+ color: #fff;
+ margin: 0 0 5px 0;
+}
+
+.vjs-text-track-settings .vjs-label {
+ position: absolute;
+ clip: rect(1px 1px 1px 1px);
+ clip: rect(1px, 1px, 1px, 1px);
+ display: block;
+ margin: 0 0 5px 0;
+ padding: 0;
+ border: 0;
+ height: 1px;
+ width: 1px;
+ overflow: hidden;
+}
+
+.vjs-track-settings-controls button:active,
+.vjs-track-settings-controls button:focus {
+ outline-style: solid;
+ outline-width: medium;
+ background-image: linear-gradient(0deg, #fff 88%, #73859f 100%);
+}
+
+.vjs-track-settings-controls button:hover {
+ color: rgba(43, 51, 63, 0.75);
+}
+
+.vjs-track-settings-controls button {
+ background-color: #fff;
+ background-image: linear-gradient(-180deg, #fff 88%, #73859f 100%);
+ color: #2b333f;
+ cursor: pointer;
+ border-radius: 2px;
+}
+
+.vjs-track-settings-controls .vjs-default-button {
+ margin-right: 1em;
+}
+
+@media print {
+ .video-js> :not(.vjs-tech):not(.vjs-poster) {
+ visibility: hidden;
+ }
+}
+
+@media (max-width: 638px) {
+ .video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display {
+ bottom: 1em;
+ }
+}
+
+.vjs-resize-manager {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ border: none;
+ z-index: -1000;
+}
+
+.js-focus-visible .video-js :focus:not(.focus-visible) {
+ outline: 0;
+}
+
+.video-js :focus:not(:focus-visible) {
+ outline: 0;
+}
\ No newline at end of file
diff --git a/packages/player-react/src/vite-env.d.ts b/packages/player-react/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/packages/player-react/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// ;
+export default CustomButton;
diff --git a/packages/player-react/types/components/atoms/with-popper/index.d.ts b/packages/player-react/types/components/atoms/with-popper/index.d.ts
new file mode 100644
index 0000000..3ba2818
--- /dev/null
+++ b/packages/player-react/types/components/atoms/with-popper/index.d.ts
@@ -0,0 +1,9 @@
+import React from "react";
+interface CustomPopperProps {
+ popperText?: string;
+ isPopperActive?: boolean;
+ className?: string;
+ children: React.ReactNode;
+}
+declare const CustomPopper: React.FC;
+export default CustomPopper;
diff --git a/packages/player-react/types/components/buttons/big-center-button/index.d.ts b/packages/player-react/types/components/buttons/big-center-button/index.d.ts
new file mode 100644
index 0000000..1888392
--- /dev/null
+++ b/packages/player-react/types/components/buttons/big-center-button/index.d.ts
@@ -0,0 +1,8 @@
+import React from "react";
+interface BigCenterButtonProps {
+ className?: string;
+ isActive?: boolean;
+ autoHide?: boolean;
+}
+declare const BigCenterButton: React.FC;
+export default BigCenterButton;
diff --git a/packages/player-react/types/components/buttons/caption-button/index.d.ts b/packages/player-react/types/components/buttons/caption-button/index.d.ts
new file mode 100644
index 0000000..c117fd1
--- /dev/null
+++ b/packages/player-react/types/components/buttons/caption-button/index.d.ts
@@ -0,0 +1,7 @@
+import { JSX } from "react";
+interface CaptionToggleButtonProps {
+ isActive?: boolean;
+ autoHide?: boolean;
+}
+export default function CaptionToggleButton({ isActive, autoHide, }: CaptionToggleButtonProps): JSX.Element;
+export {};
diff --git a/packages/player-react/types/components/buttons/full-screen-button/index.d.ts b/packages/player-react/types/components/buttons/full-screen-button/index.d.ts
new file mode 100644
index 0000000..1406686
--- /dev/null
+++ b/packages/player-react/types/components/buttons/full-screen-button/index.d.ts
@@ -0,0 +1,7 @@
+import { JSX } from "react";
+interface FullscreenToggleButtonProps {
+ isActive?: boolean;
+ autoHide?: boolean;
+}
+export default function FullscreenToggleButton({ isActive, autoHide, }: FullscreenToggleButtonProps): JSX.Element;
+export {};
diff --git a/packages/player-react/types/components/buttons/play-pause-button/index.d.ts b/packages/player-react/types/components/buttons/play-pause-button/index.d.ts
new file mode 100644
index 0000000..4056e79
--- /dev/null
+++ b/packages/player-react/types/components/buttons/play-pause-button/index.d.ts
@@ -0,0 +1,7 @@
+import { JSX } from "react";
+interface PlayPauseButtonProps {
+ isActive?: boolean;
+ autoHide?: boolean;
+}
+export default function PlayPauseButton({ isActive, autoHide, }: PlayPauseButtonProps): JSX.Element;
+export {};
diff --git a/packages/player-react/types/components/buttons/speed-control-button/index.d.ts b/packages/player-react/types/components/buttons/speed-control-button/index.d.ts
new file mode 100644
index 0000000..ee67a23
--- /dev/null
+++ b/packages/player-react/types/components/buttons/speed-control-button/index.d.ts
@@ -0,0 +1,8 @@
+import { JSX } from "react";
+interface PlaybackRateButtonProps {
+ isActive?: boolean;
+ autoHide?: boolean;
+ speedOptions?: number[];
+}
+export default function PlaybackRateButton({ isActive, autoHide, speedOptions, }: PlaybackRateButtonProps): JSX.Element;
+export {};
diff --git a/packages/player-react/types/components/buttons/volume-control-button/index.d.ts b/packages/player-react/types/components/buttons/volume-control-button/index.d.ts
new file mode 100644
index 0000000..c8503c5
--- /dev/null
+++ b/packages/player-react/types/components/buttons/volume-control-button/index.d.ts
@@ -0,0 +1,7 @@
+import { JSX } from "react";
+interface VolumeControlButtonProps {
+ isActive?: boolean;
+ autoHide?: boolean;
+}
+export default function VolumeControlButton({ isActive, autoHide, }: VolumeControlButtonProps): JSX.Element;
+export {};
diff --git a/packages/player-react/types/components/icons/arrow-left.d.ts b/packages/player-react/types/components/icons/arrow-left.d.ts
new file mode 100644
index 0000000..8d27702
--- /dev/null
+++ b/packages/player-react/types/components/icons/arrow-left.d.ts
@@ -0,0 +1,6 @@
+import { JSX } from "react";
+interface Props {
+ className?: string;
+}
+export default function LeftArrowIcon(props: Props): JSX.Element;
+export {};
diff --git a/packages/player-react/types/components/icons/arrow-right.d.ts b/packages/player-react/types/components/icons/arrow-right.d.ts
new file mode 100644
index 0000000..0f36019
--- /dev/null
+++ b/packages/player-react/types/components/icons/arrow-right.d.ts
@@ -0,0 +1,6 @@
+import { JSX } from "react";
+interface Props {
+ className?: string;
+}
+export default function RightArrowIcon(props: Props): JSX.Element;
+export {};
diff --git a/packages/player-react/types/components/icons/close.d.ts b/packages/player-react/types/components/icons/close.d.ts
new file mode 100644
index 0000000..61efc8d
--- /dev/null
+++ b/packages/player-react/types/components/icons/close.d.ts
@@ -0,0 +1,7 @@
+import { JSX } from "react";
+interface Props {
+ className?: string;
+ onClick: () => void;
+}
+export default function CloseCircleIcon({ className, onClick, }: Props): JSX.Element;
+export {};
diff --git a/packages/player-react/types/components/icons/full-screen-exit.d.ts b/packages/player-react/types/components/icons/full-screen-exit.d.ts
new file mode 100644
index 0000000..0bddbee
--- /dev/null
+++ b/packages/player-react/types/components/icons/full-screen-exit.d.ts
@@ -0,0 +1,6 @@
+import { JSX } from "react";
+type Props = {
+ className?: string;
+};
+export default function CloseCircleIcon({ className, }: Props): JSX.Element;
+export {};
diff --git a/packages/player-react/types/components/icons/full-screen.d.ts b/packages/player-react/types/components/icons/full-screen.d.ts
new file mode 100644
index 0000000..d55cc04
--- /dev/null
+++ b/packages/player-react/types/components/icons/full-screen.d.ts
@@ -0,0 +1,6 @@
+import { JSX } from "react";
+type Props = {
+ className?: string;
+};
+export default function FullScreenIcon({ className }: Props): JSX.Element;
+export {};
diff --git a/packages/player-react/types/components/icons/pause.d.ts b/packages/player-react/types/components/icons/pause.d.ts
new file mode 100644
index 0000000..66813f5
--- /dev/null
+++ b/packages/player-react/types/components/icons/pause.d.ts
@@ -0,0 +1,6 @@
+import { JSX } from "react";
+interface Props {
+ className?: string;
+}
+export default function PauseIcon({ className }: Props): JSX.Element;
+export {};
diff --git a/packages/player-react/types/components/icons/play.d.ts b/packages/player-react/types/components/icons/play.d.ts
new file mode 100644
index 0000000..104dafc
--- /dev/null
+++ b/packages/player-react/types/components/icons/play.d.ts
@@ -0,0 +1,6 @@
+import { JSX } from "react";
+interface Props {
+ className?: string;
+}
+export default function PlayIcon({ className }: Props): JSX.Element;
+export {};
diff --git a/packages/player-react/types/components/icons/search.d.ts b/packages/player-react/types/components/icons/search.d.ts
new file mode 100644
index 0000000..a8f0d50
--- /dev/null
+++ b/packages/player-react/types/components/icons/search.d.ts
@@ -0,0 +1,6 @@
+import { JSX } from "react";
+interface Props {
+ className?: string;
+}
+export default function SearchIcon({ className }: Props): JSX.Element;
+export {};
diff --git a/packages/player-react/types/components/icons/volume-mute.d.ts b/packages/player-react/types/components/icons/volume-mute.d.ts
new file mode 100644
index 0000000..eea2453
--- /dev/null
+++ b/packages/player-react/types/components/icons/volume-mute.d.ts
@@ -0,0 +1,6 @@
+import { JSX } from "react";
+interface Props {
+ className?: string;
+}
+export default function VolumeMuteIcon({ className }: Props): JSX.Element;
+export {};
diff --git a/packages/player-react/types/components/icons/volume.d.ts b/packages/player-react/types/components/icons/volume.d.ts
new file mode 100644
index 0000000..4f4a2ed
--- /dev/null
+++ b/packages/player-react/types/components/icons/volume.d.ts
@@ -0,0 +1,6 @@
+import { JSX } from "react";
+interface Props {
+ className?: string;
+}
+export default function VolumeIcon({ className }: Props): JSX.Element;
+export {};
diff --git a/packages/player-react/types/components/search/search-inside-media/index.d.ts b/packages/player-react/types/components/search/search-inside-media/index.d.ts
new file mode 100644
index 0000000..32fea89
--- /dev/null
+++ b/packages/player-react/types/components/search/search-inside-media/index.d.ts
@@ -0,0 +1,28 @@
+import { JSX } from "react";
+interface Suggestion {
+ text: string;
+}
+interface SearchResult {
+ hits: any[];
+}
+interface Props {
+ autoHide?: boolean;
+ isActive?: boolean;
+ isRaw?: boolean;
+ isAutoPilotLoading?: boolean;
+ searchContent: string;
+ searchResultsLoading?: boolean;
+ searchInputPlaceholder?: string;
+ wordsLoading?: boolean;
+ showSearchResults?: boolean;
+ searchSuggestions?: Suggestion[];
+ searchResults?: SearchResult;
+ updateParentIsFocused?: (focused: boolean) => void;
+ highlights?: any[];
+ isLight?: boolean;
+ onSlideClick?: () => void;
+ onSearchChange: (val: string) => void;
+ onSearchSubmit: (val: string) => void;
+}
+export default function SearchBar({ autoHide, isActive, isRaw, isAutoPilotLoading, searchContent, searchResultsLoading, searchInputPlaceholder, wordsLoading, showSearchResults, searchSuggestions, searchResults, updateParentIsFocused, highlights, isLight, onSlideClick, onSearchChange, onSearchSubmit, }: Props): JSX.Element;
+export {};
diff --git a/packages/player-react/types/components/search/search-result-slide/index.d.ts b/packages/player-react/types/components/search/search-result-slide/index.d.ts
new file mode 100644
index 0000000..0ba81a2
--- /dev/null
+++ b/packages/player-react/types/components/search/search-result-slide/index.d.ts
@@ -0,0 +1,17 @@
+import { FC } from "react";
+import "./styles.css";
+interface SearchResultItem {
+ id: string | number;
+ start: number;
+ end?: number;
+ text: string;
+ type: "relevant" | "exact" | string;
+}
+interface Props {
+ searchContent?: string;
+ searchResultItem: SearchResultItem;
+ searchResultItemIndex: number;
+ isLight?: boolean;
+}
+declare const SearchResultSlide: FC;
+export default SearchResultSlide;
diff --git a/packages/player-react/types/components/search/search-results/index.d.ts b/packages/player-react/types/components/search/search-results/index.d.ts
new file mode 100644
index 0000000..9e91961
--- /dev/null
+++ b/packages/player-react/types/components/search/search-results/index.d.ts
@@ -0,0 +1,27 @@
+import { FC } from "react";
+import "swiper/css";
+import "./styles.css";
+interface SearchResultHit {
+ id: string | number;
+ start: number;
+ end: number;
+ type: string;
+}
+interface SearchResults {
+ hits?: SearchResultHit[];
+}
+interface Highlight {
+ time: number;
+}
+interface Props {
+ bg?: string;
+ duration?: number;
+ searchResults?: SearchResults;
+ onSlideClick?: (value: string) => void;
+ highlights?: Highlight[];
+ theme?: string;
+ searchContent?: string;
+ isLight?: boolean;
+}
+declare const SearchResults: FC;
+export default SearchResults;
diff --git a/packages/player-react/types/components/videos/progress-bar/index.d.ts b/packages/player-react/types/components/videos/progress-bar/index.d.ts
new file mode 100644
index 0000000..1cc2123
--- /dev/null
+++ b/packages/player-react/types/components/videos/progress-bar/index.d.ts
@@ -0,0 +1,25 @@
+import { JSX } from "react";
+interface Chapter {
+ id?: string | number;
+ start: number;
+ length: number;
+ title?: string;
+ end?: number;
+}
+interface Props {
+ isActive?: boolean;
+ autoHide?: boolean;
+ streamUrl?: string;
+ chaptersList?: Chapter[];
+ persistentChapter?: boolean;
+ manualSlide?: number | null;
+ activeChapterProp?: string | null;
+ showChapters?: boolean;
+ previewPlayer?: string;
+ isChapterExpanded?: boolean;
+ setActiveChapter?: (chapterIndex: number | null) => void;
+ hideChapterSummary?: (isVisible: boolean) => void;
+ setPreviewVisibility?: (isVisible: boolean) => void;
+}
+export default function SearchBar({ isActive, autoHide, streamUrl, chaptersList, persistentChapter, manualSlide, activeChapterProp: activeChapterPropRaw, showChapters, isChapterExpanded, setActiveChapter, hideChapterSummary, setPreviewVisibility, }: Props): JSX.Element;
+export {};
diff --git a/packages/player-react/types/components/videos/videodb-player/index.d.ts b/packages/player-react/types/components/videos/videodb-player/index.d.ts
new file mode 100644
index 0000000..48e825c
--- /dev/null
+++ b/packages/player-react/types/components/videos/videodb-player/index.d.ts
@@ -0,0 +1,20 @@
+import React, { ReactNode } from "react";
+import { SubtitlesConfig } from "../../../context";
+interface VideoPlayerProps {
+ streamUrl: string;
+ thumbnailUrl?: string;
+ subtitlesConfig?: SubtitlesConfig;
+ startAt?: number;
+ autoPlay?: boolean;
+ autoHideDuration?: number;
+ defaultControls?: boolean;
+ defaultOverlay?: boolean;
+ defaultPlayBackRate?: number;
+ aspectRatio?: string;
+ debug?: boolean;
+ children?: ReactNode;
+ overlayContent?: ReactNode;
+ controlsContent?: ReactNode;
+}
+declare const VideoPlayer: React.FC;
+export default VideoPlayer;
diff --git a/packages/player-react/types/context.d.ts b/packages/player-react/types/context.d.ts
new file mode 100644
index 0000000..1e68be4
--- /dev/null
+++ b/packages/player-react/types/context.d.ts
@@ -0,0 +1,33 @@
+export type SubtitlesConfig = {
+ src: string;
+ kind?: string;
+ lang?: string;
+ label?: string;
+};
+export type VideoPlayerContextType = {
+ showElements: boolean;
+ playing: boolean;
+ volume: number;
+ videoMuted: boolean;
+ duration: number;
+ time: number;
+ percentagePlayed: number;
+ playBackRate: number;
+ showSubtitles: boolean;
+ subtitlesConfig: SubtitlesConfig;
+ isFullScreen: boolean;
+ play: () => void;
+ pause: () => void;
+ togglePlay: () => void;
+ toggleMute: () => void;
+ seekTo: (seconds: number) => void;
+ seekToPercentage: (percent: number) => void;
+ setPlayBackRate: (rate: number) => void;
+ setVolume: (volume: number) => void;
+ convertTimeToDuration: (time: number) => string;
+ toggleFullScreen: (value?: boolean) => void;
+ togglePictureInPicture: () => void;
+ toggleSubtitles: (value: boolean) => void;
+};
+export declare const VideoPlayerContext: import("react").Context;
+export declare const useVideoPlayerContext: () => VideoPlayerContextType;
diff --git a/packages/player-react/types/hooks/useVideoJSPlayer.d.ts b/packages/player-react/types/hooks/useVideoJSPlayer.d.ts
new file mode 100644
index 0000000..dec3ecb
--- /dev/null
+++ b/packages/player-react/types/hooks/useVideoJSPlayer.d.ts
@@ -0,0 +1,54 @@
+type PlayerProps = {
+ streamUrl: string;
+ autoPlay?: boolean;
+ muted?: boolean;
+ startAt?: number;
+ thumbnailUrl?: string;
+ defaultPlayBackRate?: number;
+ debug?: boolean;
+};
+type PlayerEvents =
+ | "play"
+ | "pause"
+ | "ended"
+ | "loadeddata"
+ | "waiting"
+ | "playing"
+ | "timeupdate"
+ | "canplay"
+ | "canplaythrough"
+ | "videoerrror"
+ | "toggleSubtitles"
+ | "fullScreenChange";
+type EventEmitter = (
+ event: PlayerEvents,
+ data: {
+ event: any;
+ },
+) => void;
+export declare function useVideoDBPlayer(
+ emit: EventEmitter,
+ props: PlayerProps,
+): {
+ playing: boolean;
+ volume: number;
+ videoMuted: boolean;
+ time: number;
+ duration: number;
+ percentagePlayed: number;
+ playBackRate: number;
+ events: PlayerEvents[];
+ play: () => void;
+ pause: () => void;
+ togglePlay: () => void;
+ toggleMute: () => void;
+ setVolume: (percentAsDecimal: number) => void;
+ seekTo: (timeValue: number) => void;
+ seekToPercentage: (percentage: number) => void;
+ setPlayBackRate: (value: number) => void;
+ convertTimeToDuration: (seconds: number) => string;
+ togglePictureInPicture: () => void;
+ bindEvents: (eventList: PlayerEvents[], eventEmitter: EventEmitter) => void;
+ initializePlayer: (playerElement: HTMLVideoElement | null) => void;
+};
+export {};
diff --git a/packages/player-react/types/index.d.ts b/packages/player-react/types/index.d.ts
new file mode 100644
index 0000000..0a43137
--- /dev/null
+++ b/packages/player-react/types/index.d.ts
@@ -0,0 +1,4 @@
+import VideoPlayer from "./components/VideoPlayer";
+import "./styles.css";
+import "./videojs.css";
+export { VideoPlayer };
diff --git a/packages/player-react/vite.config.ts b/packages/player-react/vite.config.ts
new file mode 100644
index 0000000..f82ba79
--- /dev/null
+++ b/packages/player-react/vite.config.ts
@@ -0,0 +1,62 @@
+///
+
+
+
+
VideoDB Player
+
+
+ AI First Video Player
+ View Demo ยป Report Bug
+ ยท
+ Request Feature
+
+
+
+
+
+# ๐บ VideoDB Player
+
+VideoDB Player is an AI-first video player that enhances how we interact with videos.
+
+### ๐ค AI-Powered Interactive Features
+
+- Intelligent search bar and navigation in the video using search results.
+- Automated chapter UI for easy consumpation and navigation.
+- Seamless integration with chat interfaces for interactive experiences.
+
+
+### ๐ Versatile and User-Friendly Experience
+
+- Cross platform support (Web, Android, iOS), features perfectly adjust on mobile devices.
+- Out-of-the-box speed controls allow users to customize their viewing experience.
+- [Designed](https://www.linkedin.com/posts/ashutoshtrivedi_spext-activity-7231616055834505216-UNsw) with both viewers and developers in mind, offering a sleek interface and easy integration.
+
+### ๐ Optimized for [VideoDB](https://videodb.io) Infra
+
+While it can work with any video source, VideoDB Player is specially optimized to leverage the full potential of VideoDB's advanced video infrastructure.
+
+- Enhanced compatibility with VideoDB's advanced video search feature.
+- *(upcoming)* [videodb-chat](https://github.com/video-db/videodb-chat) provides necessary Chat UI components specially designed for "Chat with Video" interfaces.
+
+
+
+
+
+
+
+
+```
+
+
+
+
+
+```
+
+
+
+
+
+```
+
+`.
+2. Add the `
+
+
+
+
+
+
+
+```
+
+> โน๏ธ Checkout [SearchInsideMedia interface](#searchinsidemedia) for more details on props and events
+
+
+
+
+
+```
+
+> โน๏ธ Checkout [VideoDBPlayer interface](#videodbplayer) for more details
+
+
+
+
+
+```
+
+ 
+
+
+