@rxdrag/website-lib-core 0.0.110 → 0.0.112

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rxdrag/website-lib-core",
-  "version": "0.0.110",
+  "version": "0.0.112",
   "type": "module",
   "exports": {
     ".": "./index.ts"

package/src/react/components/ReactVideoPlayer.tsx

@@ -19,6 +19,8 @@ export type VideoPlayerClassNames = {
   playButtonOuter?: string;
   playButtonInner?: string;
   playIcon?: string;
+  loadingOverlay?: string;
+  loadingContent?: string;
   overlay?: string;
   overlayTitle?: string;
   ctaButton?: string;
@@ -32,6 +34,7 @@ export const ReactVideoPlayer = forwardRef<
     media: Media;
     posterUrl?: string;
     eagerLoad?: boolean;
+    showOverlayAfterStarted?: boolean;
     classNames?: VideoPlayerClassNames;
     callToAction?: string;
     onToggleSelect?: (id: ID) => void;
@@ -44,6 +47,7 @@ export const ReactVideoPlayer = forwardRef<
     onToggleSelect,
     posterUrl,
     eagerLoad,
+    showOverlayAfterStarted = true,
     classNames,
     callToAction,
     designMode,
@@ -57,6 +61,7 @@ export const ReactVideoPlayer = forwardRef<
   const sourceReadyRef = useRef(false);
   const [isLoading, setIsLoading] = useState(false);
   const isEndedRef = useRef(false);
+  const [hasStarted, setHasStarted] = useState(false);
 
   const ensureSourceReady = useCallback(() => {
     const video = videoRef.current;
@@ -163,6 +168,7 @@ export const ReactVideoPlayer = forwardRef<
       setIsEnded(false);
       isEndedRef.current = false;
       setIsLoading(false);
+      setHasStarted(true);
     };
     const onPause = () => setIsPlaying(false);
     const onEnded = () => {
@@ -223,7 +229,8 @@ export const ReactVideoPlayer = forwardRef<
           "w-full h-full rounded-lg object-cover",
           classNames?.video
         )}
-        controls={!designMode}
+        playsInline
+        controls={!designMode && hasStarted}
       >
         {!media.storageType && media.file?.original && (eagerLoad || isSourceReady) ? (
           <source src={media.file.original} />
@@ -231,7 +238,10 @@ export const ReactVideoPlayer = forwardRef<
         Your browser does not support video playback.
       </video>
 
-      {!isPlaying && !isEnded && !isLoading && (
+      {!isPlaying &&
+        !isEnded &&
+        !isLoading &&
+        (!hasStarted || showOverlayAfterStarted) && (
         <button
           type="button"
           onClick={handlePlayClick}
@@ -276,11 +286,16 @@ export const ReactVideoPlayer = forwardRef<
         <div
           className={clsx(
             "absolute inset-0 flex items-center justify-center w-full h-full rounded-lg z-10 bg-black/20",
-            classNames?.playButton
+            classNames?.loadingOverlay
           )}
           onClick={(e) => e.stopPropagation()}
         >
-          <div className="flex items-center gap-3 rounded-full bg-black/50 px-4 py-2 text-white">
+          <div
+            className={clsx(
+              "flex items-center gap-3 rounded-full bg-black/50 px-4 py-2 text-white",
+              classNames?.loadingContent
+            )}
+          >
             <div className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
             <span className="text-sm">Loading...</span>
           </div>