@react-scrollytelling/video 0.3.0 → 0.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-scrollytelling/video",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "> TODO: description",
   "author": "@hsunpei",
   "license": "MIT",
@@ -8,8 +8,8 @@
     "access": "public"
   },
   "homepage": "https://github.com/hsunpei/react-scrollytelling#readme",
-  "main": "dist/index.cjs",
-  "module": "dist/index.mjs",
+  "type": "module",
+  "main": "dist/index.mjs",
   "types": "dist/index.d.mts",
   "sideEffects": false,
   "files": [
@@ -17,14 +17,8 @@
   ],
   "exports": {
     ".": {
-      "import": {
-        "types": "./dist/index.d.mts",
-        "default": "./dist/index.mjs"
-      },
-      "require": {
-        "types": "./dist/index.d.cts",
-        "default": "./dist/index.cjs"
-      }
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs"
     }
   },
   "repository": {

package/dist/index.cjs

@@ -1,215 +0,0 @@
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-//#region \0rolldown/runtime.js
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-	if (from && typeof from === "object" || typeof from === "function") {
-		for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
-			key = keys[i];
-			if (!__hasOwnProp.call(to, key) && key !== except) {
-				__defProp(to, key, {
-					get: ((k) => from[k]).bind(null, key),
-					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-				});
-			}
-		}
-	}
-	return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-	value: mod,
-	enumerable: true
-}) : target, mod));
-
-//#endregion
-let react_compiler_runtime = require("react/compiler-runtime");
-let react = require("react");
-react = __toESM(react);
-let _react_scrollytelling_core = require("@react-scrollytelling/core");
-let react_jsx_runtime = require("react/jsx-runtime");
-
-//#region src/components/Video.tsx
-const Video = (t0) => {
-	const $ = (0, react_compiler_runtime.c)(11);
-	const { src, srcWebm, width, height, thumbnail, ratio: t1, className, loadingOverlay } = t0;
-	const ratio = t1 === void 0 ? 0 : t1;
-	const videoRef = (0, react.useRef)(null);
-	let t2;
-	let t3;
-	if ($[0] !== ratio) {
-		t2 = () => {
-			if (!videoRef.current) return;
-			videoRef.current.setRatio(ratio);
-		};
-		t3 = [ratio];
-		$[0] = ratio;
-		$[1] = t2;
-		$[2] = t3;
-	} else {
-		t2 = $[1];
-		t3 = $[2];
-	}
-	(0, react.useEffect)(t2, t3);
-	let t4;
-	if ($[3] !== className || $[4] !== height || $[5] !== loadingOverlay || $[6] !== src || $[7] !== srcWebm || $[8] !== thumbnail || $[9] !== width) {
-		t4 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VideoWithImperativeHandle, {
-			ref: videoRef,
-			width,
-			height,
-			src,
-			srcWebm,
-			className,
-			thumbnail,
-			loadingOverlay
-		});
-		$[3] = className;
-		$[4] = height;
-		$[5] = loadingOverlay;
-		$[6] = src;
-		$[7] = srcWebm;
-		$[8] = thumbnail;
-		$[9] = width;
-		$[10] = t4;
-	} else t4 = $[10];
-	return t4;
-};
-const VideoWithImperativeHandle = /* @__PURE__ */ react.default.memo(/* @__PURE__ */ react.default.forwardRef((t0, ref) => {
-	const $ = (0, react_compiler_runtime.c)(25);
-	const { src, srcWebm, width, height, thumbnail, className, loadingOverlay } = t0;
-	const videoRef = (0, react.useRef)(null);
-	const [isLoading, setIsLoading] = (0, react.useState)(true);
-	let t1;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = (ratio) => {
-			const videoElement = videoRef.current;
-			if (!videoElement) return;
-			const duration = videoElement.duration;
-			if (!isNaN(duration)) requestAnimationFrame(() => {
-				videoElement.currentTime = Math.round(ratio * duration * 100) / 100;
-			});
-		};
-		$[0] = t1;
-	} else t1 = $[0];
-	const setVideoRatioThrottled = (0, _react_scrollytelling_core.useRafThrottle)(t1);
-	let t2;
-	let t3;
-	if ($[1] !== setVideoRatioThrottled) {
-		t2 = () => ({ setRatio: setVideoRatioThrottled });
-		t3 = [setVideoRatioThrottled];
-		$[1] = setVideoRatioThrottled;
-		$[2] = t2;
-		$[3] = t3;
-	} else {
-		t2 = $[2];
-		t3 = $[3];
-	}
-	(0, react.useImperativeHandle)(ref, t2, t3);
-	let t4;
-	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = () => {
-			setIsLoading(true);
-		};
-		$[4] = t4;
-	} else t4 = $[4];
-	const handleWaiting = t4;
-	let t5;
-	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-		t5 = () => {
-			setIsLoading(false);
-		};
-		$[5] = t5;
-	} else t5 = $[5];
-	const handleCanPlay = t5;
-	let t6;
-	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
-		t6 = {
-			position: "relative",
-			width: "100%",
-			height: "100%"
-		};
-		$[6] = t6;
-	} else t6 = $[6];
-	let t7;
-	if ($[7] !== srcWebm || $[8] !== thumbnail) {
-		t7 = srcWebm && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("source", {
-			src: thumbnail ? srcWebm : `${srcWebm}#t=0.1`,
-			type: "video/webm"
-		});
-		$[7] = srcWebm;
-		$[8] = thumbnail;
-		$[9] = t7;
-	} else t7 = $[9];
-	const t8 = thumbnail ? src : `${src}#t=0.1`;
-	let t9;
-	if ($[10] !== t8) {
-		t9 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("source", {
-			src: t8,
-			type: "video/mp4"
-		});
-		$[10] = t8;
-		$[11] = t9;
-	} else t9 = $[11];
-	let t10;
-	if ($[12] !== className || $[13] !== height || $[14] !== t7 || $[15] !== t9 || $[16] !== thumbnail || $[17] !== width) {
-		t10 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("video", {
-			ref: videoRef,
-			width,
-			height,
-			className,
-			muted: true,
-			disablePictureInPicture: true,
-			disableRemotePlayback: true,
-			playsInline: true,
-			controls: false,
-			preload: "auto",
-			onWaiting: handleWaiting,
-			onCanPlay: handleCanPlay,
-			poster: thumbnail,
-			children: [t7, t9]
-		});
-		$[12] = className;
-		$[13] = height;
-		$[14] = t7;
-		$[15] = t9;
-		$[16] = thumbnail;
-		$[17] = width;
-		$[18] = t10;
-	} else t10 = $[18];
-	let t11;
-	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
-		t11 = {
-			position: "absolute",
-			inset: 0
-		};
-		$[19] = t11;
-	} else t11 = $[19];
-	const t12 = isLoading && loadingOverlay;
-	let t13;
-	if ($[20] !== t12) {
-		t13 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			style: t11,
-			children: t12
-		});
-		$[20] = t12;
-		$[21] = t13;
-	} else t13 = $[21];
-	let t14;
-	if ($[22] !== t10 || $[23] !== t13) {
-		t14 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			style: t6,
-			children: [t10, t13]
-		});
-		$[22] = t10;
-		$[23] = t13;
-		$[24] = t14;
-	} else t14 = $[24];
-	return t14;
-}));
-
-//#endregion
-exports.Video = Video;
-exports.VideoWithImperativeHandle = VideoWithImperativeHandle;

package/dist/index.d.cts

@@ -1,38 +0,0 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-import React from "react";
-
-//#region src/components/Video.d.ts
-interface VideoProps {
-  /** Source of the mp4 video */
-  src: string;
-  /** Source of the webm video */
-  srcWebm?: string;
-  /**
-   * Thumbnail URL of the video.
-   * If not specified, it will use the first frame of the video as the thumbnail.
-   */
-  thumbnail?: string;
-  className?: string;
-  width: number;
-  height: number;
-  ratio?: number;
-  /** Overlay content to show when the video is loading */
-  loadingOverlay?: React.ReactNode;
-}
-declare const Video: ({
-  src,
-  srcWebm,
-  width,
-  height,
-  thumbnail,
-  ratio,
-  className,
-  loadingOverlay
-}: VideoProps) => react_jsx_runtime0.JSX.Element;
-interface VideoRef {
-  setRatio: (ratio: number) => void;
-}
-declare const VideoWithImperativeHandle: React.NamedExoticComponent<VideoProps & React.RefAttributes<VideoRef>>;
-//#endregion
-export { Video, VideoProps, VideoRef, VideoWithImperativeHandle };
-//# sourceMappingURL=index.d.cts.map

package/dist/index.d.cts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.cts","names":[],"sources":["../src/components/Video.tsx"],"mappings":";;;;UAUiB,UAAA;;EAEf,GAAA;EAFe;EAKf,OAAA;;;;;EAMA,SAAA;EAEA,SAAA;EACA,KAAA;EACA,MAAA;EACA,KAAA;EAGA;EAAA,cAAA,GAAiB,KAAA,CAAM,SAAA;AAAA;AAAA,cAGZ,KAAA;EAAK,GAAA;EAAA,OAAA;EAAA,KAAA;EAAA,MAAA;EAAA,SAAA;EAAA,KAAA;EAAA,SAAA;EAAA;AAAA,GASf,UAAA,KAAU,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,UAyBI,QAAA;EACf,QAAA,GAAW,KAAA;AAAA;AAAA,cAGA,yBAAA,EAAyB,KAAA,CAAA,oBAAA,CAAA,UAAA,GAAA,KAAA,CAAA,aAAA,CAAA,QAAA"}