@rxdrag/website-lib-core 0.0.110 → 0.0.111

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rxdrag/website-lib-core",
-  "version": "0.0.110",
+  "version": "0.0.111",
   "type": "module",
   "exports": {
     ".": "./index.ts"
@@ -25,8 +25,8 @@
     "eslint": "^7.32.0",
     "typescript": "^5",
     "@rxdrag/eslint-config-custom": "0.2.12",
-    "@rxdrag/slate-preview": "1.2.63",
-    "@rxdrag/tsconfig": "0.2.0"
+    "@rxdrag/tsconfig": "0.2.0",
+    "@rxdrag/slate-preview": "1.2.63"
   },
   "dependencies": {
     "@iconify/utils": "^3.0.2",

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;
@@ -57,6 +59,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 +166,7 @@ export const ReactVideoPlayer = forwardRef<
       setIsEnded(false);
       isEndedRef.current = false;
       setIsLoading(false);
+      setHasStarted(true);
     };
     const onPause = () => setIsPlaying(false);
     const onEnded = () => {
@@ -223,7 +227,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} />
@@ -276,11 +281,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>