@nikelroot/video-player 0.1.7 → 0.1.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.cjs +21 -1
  2. package/dist/index.js +21 -1
  3. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -548,6 +548,19 @@ var VideoPlayerControls = (props) => {
548
548
  } = props;
549
549
  const [, isMobile] = useWindowWidth();
550
550
  if (variant === "none") return null;
551
+ if (variant === "tiny") {
552
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VideoPlayerControlStyles, { $tiny: true, $isMobile: isMobile, onClick: stopControlClick, $showControl: showControl, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "video-player-control-row", children: [
553
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "full" }),
554
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SeekSlider, { playAction, duration, currentTime, seekSetTime })
555
+ ] }) });
556
+ }
557
+ if (variant === "fullscreen-only") {
558
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VideoPlayerControlStyles, { $isMobile: isMobile, onClick: stopControlClick, $showControl: showControl, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "video-player-control-row", children: [
559
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "full" }),
560
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ControlButton, { icon: muted ? "mute" : "sound", label: muted ? "Unmute" : "Mute", onClick: () => onMutedChange(!muted) }),
561
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ControlButton, { disabled: !fullscreenAllowed, icon: "fullscreen", label: "Fullscreen", onClick: fullScreenAction })
562
+ ] }) });
563
+ }
551
564
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VideoPlayerControlStyles, { $isMobile: isMobile, onClick: stopControlClick, $showControl: showControl, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "video-player-control-row", children: [
552
565
  playing ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ControlButton, { icon: "pause", label: "Pause", onClick: pauseAction }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ControlButton, { icon: "play", label: "Play", onClick: playAction }),
553
566
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ControlButton, { icon: "back", label: "Back 15 seconds", onClick: () => seekPrevAction() }),
@@ -1425,12 +1438,19 @@ var VideoPlayerBase = (props, ref) => {
1425
1438
  destroy();
1426
1439
  };
1427
1440
  }, [destroy]);
1441
+ const lastActiveState = (0, import_react3.useRef)(active);
1442
+ (0, import_react3.useEffect)(() => {
1443
+ if (active !== lastActiveState.current) {
1444
+ playAction();
1445
+ lastActiveState.current = active;
1446
+ }
1447
+ }, [active]);
1428
1448
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
1429
1449
  VideoPlayerStyles,
1430
1450
  {
1431
1451
  ref: containerRef,
1432
1452
  onMouseMove: mouseMoveHandler,
1433
- className: "VideoPlayer",
1453
+ className: isFullscreen ? "VideoPlayer VideoPlayer--fullscreen" : "VideoPlayer",
1434
1454
  type,
1435
1455
  $isMobile: isMobile,
1436
1456
  $mobileType: mobileType,
package/dist/index.js CHANGED
@@ -519,6 +519,19 @@ var VideoPlayerControls = (props) => {
519
519
  } = props;
520
520
  const [, isMobile] = useWindowWidth();
521
521
  if (variant === "none") return null;
522
+ if (variant === "tiny") {
523
+ return /* @__PURE__ */ jsx(VideoPlayerControlStyles, { $tiny: true, $isMobile: isMobile, onClick: stopControlClick, $showControl: showControl, children: /* @__PURE__ */ jsxs("div", { className: "video-player-control-row", children: [
524
+ /* @__PURE__ */ jsx("div", { className: "full" }),
525
+ /* @__PURE__ */ jsx(SeekSlider, { playAction, duration, currentTime, seekSetTime })
526
+ ] }) });
527
+ }
528
+ if (variant === "fullscreen-only") {
529
+ return /* @__PURE__ */ jsx(VideoPlayerControlStyles, { $isMobile: isMobile, onClick: stopControlClick, $showControl: showControl, children: /* @__PURE__ */ jsxs("div", { className: "video-player-control-row", children: [
530
+ /* @__PURE__ */ jsx("div", { className: "full" }),
531
+ /* @__PURE__ */ jsx(ControlButton, { icon: muted ? "mute" : "sound", label: muted ? "Unmute" : "Mute", onClick: () => onMutedChange(!muted) }),
532
+ /* @__PURE__ */ jsx(ControlButton, { disabled: !fullscreenAllowed, icon: "fullscreen", label: "Fullscreen", onClick: fullScreenAction })
533
+ ] }) });
534
+ }
522
535
  return /* @__PURE__ */ jsx(VideoPlayerControlStyles, { $isMobile: isMobile, onClick: stopControlClick, $showControl: showControl, children: /* @__PURE__ */ jsxs("div", { className: "video-player-control-row", children: [
523
536
  playing ? /* @__PURE__ */ jsx(ControlButton, { icon: "pause", label: "Pause", onClick: pauseAction }) : /* @__PURE__ */ jsx(ControlButton, { icon: "play", label: "Play", onClick: playAction }),
524
537
  /* @__PURE__ */ jsx(ControlButton, { icon: "back", label: "Back 15 seconds", onClick: () => seekPrevAction() }),
@@ -1396,12 +1409,19 @@ var VideoPlayerBase = (props, ref) => {
1396
1409
  destroy();
1397
1410
  };
1398
1411
  }, [destroy]);
1412
+ const lastActiveState = useRef2(active);
1413
+ useEffect(() => {
1414
+ if (active !== lastActiveState.current) {
1415
+ playAction();
1416
+ lastActiveState.current = active;
1417
+ }
1418
+ }, [active]);
1399
1419
  return /* @__PURE__ */ jsxs2(
1400
1420
  VideoPlayerStyles,
1401
1421
  {
1402
1422
  ref: containerRef,
1403
1423
  onMouseMove: mouseMoveHandler,
1404
- className: "VideoPlayer",
1424
+ className: isFullscreen ? "VideoPlayer VideoPlayer--fullscreen" : "VideoPlayer",
1405
1425
  type,
1406
1426
  $isMobile: isMobile,
1407
1427
  $mobileType: mobileType,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nikelroot/video-player",
3
- "version": "0.1.7",
3
+ "version": "0.1.9",
4
4
  "description": "Standalone React video player with HLS support.",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",