@rxdrag/website-lib-core 0.0.93 → 0.0.94

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rxdrag/website-lib-core",
-  "version": "0.0.93",
+  "version": "0.0.94",
   "type": "module",
   "exports": {
     ".": "./index.ts"
@@ -24,8 +24,8 @@
     "@types/react-dom": "^19.1.0",
     "eslint": "^7.32.0",
     "typescript": "^5",
-    "@rxdrag/eslint-config-custom": "0.2.12",
     "@rxdrag/slate-preview": "1.2.61",
+    "@rxdrag/eslint-config-custom": "0.2.12",
     "@rxdrag/tsconfig": "0.2.0"
   },
   "dependencies": {

package/src/react/components/ReactVideoPlayer.tsx

@@ -1,4 +1,10 @@
-import React, { useCallback, useEffect, useRef, useState, forwardRef } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  forwardRef,
+} from "react";
 import Hls from "hls.js";
 import type { Media } from "@rxdrag/rxcms-models";
 import { ReactModalTrigger } from "./ReactModalTrigger";
@@ -19,15 +25,18 @@ export type VideoPlayerClassNames = {
   overlayReplayButton?: string;
 };
 
-export const ReactVideoPlayer = forwardRef<HTMLDivElement, {
-  endTitle?: string;
-  media: Media;
-  posterUrl?: string;
-  classNames?: VideoPlayerClassNames;
-  callToAction?: string;
-  onToggleSelect?: (id: ID) => void;
-  designMode?: boolean;
-}>((props, ref) => {
+export const ReactVideoPlayer = forwardRef<
+  HTMLDivElement,
+  {
+    endTitle?: string;
+    media: Media;
+    posterUrl?: string;
+    classNames?: VideoPlayerClassNames;
+    callToAction?: string;
+    onToggleSelect?: (id: ID) => void;
+    designMode?: boolean;
+  }
+>((props, ref) => {
   const {
     endTitle,
     media,
@@ -142,7 +151,10 @@ export const ReactVideoPlayer = forwardRef<HTMLDivElement, {
   return (
     <div
       ref={ref}
-      className={clsx("relative w-full aspect-video rounded-2xl", classNames?.container)}
+      className={clsx(
+        "relative w-full aspect-video rounded-2xl",
+        classNames?.container
+      )}
       onClick={handleContainerClick}
       {...rest}
     >
@@ -151,7 +163,10 @@ export const ReactVideoPlayer = forwardRef<HTMLDivElement, {
         onClick={(e) => !designMode && e.stopPropagation()}
         preload="metadata"
         poster={posterUrl ?? media.file?.thumbnail}
-        className={clsx("w-full h-full rounded-lg object-cover", classNames?.video)}
+        className={clsx(
+          "w-full h-full rounded-lg object-cover",
+          classNames?.video
+        )}
         controls={!designMode}
       >
         {!media.storageType && media.file?.original ? (
@@ -171,20 +186,23 @@ export const ReactVideoPlayer = forwardRef<HTMLDivElement, {
         >
           <div
             className={clsx(
-              "flex items-center justify-center size-[80px] lg:size-[130px] bg-white/15 rounded-full backdrop-blur-sm hover:shadow-md transition-all duration-300 hover:scale-110 group",
+              "flex items-center justify-center w-[80px] h-[80px] lg:w-[130px] lg:h-[130px] bg-white/15 rounded-full backdrop-blur-sm hover:shadow-md transition-all duration-300 hover:scale-110 group",
               classNames?.playButtonOuter
             )}
           >
             <div
               className={clsx(
-                "size-[50px] lg:size-[90px] bg-white relative overflow-hidden rounded-full",
+                "w-[50px] h-[50px] lg:w-[90px] lg:h-[90px] bg-white relative overflow-hidden rounded-full",
                 classNames?.playButtonInner
               )}
             >
               <div className="absolute inset-0 cross-gradient box-shadow-1">
                 <div className="w-full h-full flex items-center justify-center">
                   <svg
-                    className={clsx("size-5 lg:size-8 text-gray-700", classNames?.playIcon)}
+                    className={clsx(
+                      "size-5 lg:size-8 text-gray-700",
+                      classNames?.playIcon
+                    )}
                     viewBox="0 0 30 32"
                     fill="currentColor"
                     xmlns="http://www.w3.org/2000/svg"