funuicss 2.7.14 → 2.7.16

package/ui/carousel/Carousel.d.ts

@@ -4,6 +4,7 @@ interface CarouselProps {
     gap?: number;
     funcss?: string;
     children: ReactNode;
+    showDashes?: boolean;
 }
 declare const Carousel: React.FC<CarouselProps>;
 export default Carousel;

package/ui/carousel/Carousel.js

@@ -43,10 +43,10 @@ var Circle_1 = __importDefault(require("../specials/Circle"));
 var RowFlex_1 = __importDefault(require("../specials/RowFlex"));
 var Functions_1 = require("../../utils/Functions");
 var Carousel = function (_a) {
-    var _b = _a.scrollNumber, scrollNumber = _b === void 0 ? 320 : _b, _c = _a.gap, gap = _c === void 0 ? 0.5 : _c, _d = _a.funcss, funcss = _d === void 0 ? '' : _d, children = _a.children;
+    var _b = _a.scrollNumber, scrollNumber = _b === void 0 ? 320 : _b, _c = _a.gap, gap = _c === void 0 ? 0.5 : _c, _d = _a.funcss, funcss = _d === void 0 ? '' : _d, _e = _a.showDashes, showDashes = _e === void 0 ? true : _e, children = _a.children;
     var scrollRef = (0, react_1.useRef)(null);
-    var _e = (0, react_1.useState)('start'), scrollPosition = _e[0], setScrollPosition = _e[1];
-    var _f = (0, react_1.useState)(false), isPhone = _f[0], setIsPhone = _f[1];
+    var _f = (0, react_1.useState)('start'), scrollPosition = _f[0], setScrollPosition = _f[1];
+    var _g = (0, react_1.useState)(false), isPhone = _g[0], setIsPhone = _g[1];
     (0, react_1.useEffect)(function () {
         if ((0, Functions_1.isTouchDevice)()) {
             setIsPhone(true);
@@ -105,7 +105,7 @@ var Carousel = function (_a) {
             !isPhone && (react_1.default.createElement("div", null,
                 react_1.default.createElement(Circle_1.default, { onClick: function () { return scroll('right'); } },
                     react_1.default.createElement(pi_1.PiCaretRight, { size: 24 }))))),
-        react_1.default.createElement("div", { className: "center padding-top-10" },
+        showDashes && (react_1.default.createElement("div", { className: "center padding-top-10" },
             react_1.default.createElement(RowFlex_1.default, { gap: 0.5, justify: "center" }, ['start', 'middle', 'end'].map(function (pos) { return (react_1.default.createElement("div", { className: 'pointer ', key: pos, onClick: function () {
                     var _a, _b;
                     if (pos === 'start') {
@@ -127,6 +127,6 @@ var Carousel = function (_a) {
                     borderRadius: '50%',
                     transform: scrollPosition === pos ? 'scale(1.3)' : 'scale(0.9)',
                     transition: 'transform 0.3s ease, background 0.3s ease',
-                } })); })))));
+                } })); }))))));
 };
 exports.default = Carousel;

package/ui/carousel/Carousel.tsx

@@ -10,12 +10,14 @@ interface CarouselProps {
   gap?: number;
   funcss?: string;
   children: ReactNode;
+  showDashes?: boolean;
 }
 
 const Carousel: React.FC<CarouselProps> = ({
   scrollNumber = 320,
   gap = 0.5,
   funcss = '',
+  showDashes = true,
   children,
 }) => {
   const scrollRef = useRef<HTMLDivElement | null>(null);
@@ -105,36 +107,40 @@ const Carousel: React.FC<CarouselProps> = ({
       </RowFlex>
 
       {/* Dashes below the carousel */}
-      <div className="center padding-top-10">
-        <RowFlex gap={0.5} justify="center">
-          {['start', 'middle', 'end'].map((pos) => (
-            <div
-            className={'pointer '}
-              key={pos}
-              onClick={() => {
-                if(pos === 'start') {
-                 scroll('left')
-                } else if(pos === 'middle') {
-                  scrollRef.current?.scrollTo({
-                    left: scrollRef.current?.scrollWidth / 2,
-                    behavior: 'smooth',
-                  });
-                } else if(pos === 'end') {
-                  scroll('right')
-                }
-              }}
-              style={{
-                width: '10px',
-                height: '10px',
-                background: scrollPosition === pos ? 'var(--primary)' : 'var(--borderColor)',
-                borderRadius: '50%',
-                transform: scrollPosition === pos ? 'scale(1.3)' : 'scale(0.9)',
-                transition: 'transform 0.3s ease, background 0.3s ease',
-              }}
-            />
-          ))}
-        </RowFlex>
-      </div>
+      {
+        showDashes && (
+          <div className="center padding-top-10">
+          <RowFlex gap={0.5} justify="center">
+            {['start', 'middle', 'end'].map((pos) => (
+              <div
+              className={'pointer '}
+                key={pos}
+                onClick={() => {
+                  if(pos === 'start') {
+                   scroll('left')
+                  } else if(pos === 'middle') {
+                    scrollRef.current?.scrollTo({
+                      left: scrollRef.current?.scrollWidth / 2,
+                      behavior: 'smooth',
+                    });
+                  } else if(pos === 'end') {
+                    scroll('right')
+                  }
+                }}
+                style={{
+                  width: '10px',
+                  height: '10px',
+                  background: scrollPosition === pos ? 'var(--primary)' : 'var(--borderColor)',
+                  borderRadius: '50%',
+                  transform: scrollPosition === pos ? 'scale(1.3)' : 'scale(0.9)',
+                  transition: 'transform 0.3s ease, background 0.3s ease',
+                }}
+              />
+            ))}
+          </RowFlex>
+        </div> 
+        )
+      }
     </div>
   );
 };

package/ui/flex/Flex.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 interface FlexProps {
-    as?: keyof JSX.IntrinsicElements;
     className?: string;
     funcss?: string;
     id?: string;
@@ -15,15 +14,11 @@ interface FlexProps {
     gapX?: number;
     gapY?: number;
     gapUnit?: 'rem' | 'px' | 'em';
-    grow?: number;
-    shrink?: number;
-    basis?: string;
-    flex?: string;
     responsiveSmall?: boolean;
     responsiveMedium?: boolean;
     responsiveLarge?: boolean;
     fullWidth?: boolean;
     fullHeight?: boolean;
 }
-export default function Flex({ as: Component, className, funcss, id, children, style, direction, wrap, justify, alignItems, alignContent, gap, gapX, gapY, gapUnit, grow, shrink, basis, flex, responsiveSmall, responsiveMedium, responsiveLarge, fullWidth, fullHeight, ...rest }: FlexProps): React.JSX.Element;
+export default function Flex({ className, funcss, id, children, style, direction, wrap, justify, alignItems, alignContent, gap, gapX, gapY, gapUnit, responsiveSmall, responsiveMedium, responsiveLarge, fullWidth, fullHeight, ...rest }: FlexProps): React.JSX.Element;
 export {};

package/ui/flex/Flex.js

@@ -29,19 +29,25 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Flex;
 var react_1 = __importDefault(require("react"));
 function Flex(_a) {
-    var _b = _a.as, Component = _b === void 0 ? 'div' : _b, className = _a.className, funcss = _a.funcss, id = _a.id, children = _a.children, _c = _a.style, style = _c === void 0 ? {} : _c, 
+    var className = _a.className, funcss = _a.funcss, id = _a.id, children = _a.children, _b = _a.style, style = _b === void 0 ? {} : _b, 
     // Flex container
-    _d = _a.direction, 
+    _c = _a.direction, 
     // Flex container
-    direction = _d === void 0 ? 'row' : _d, _e = _a.wrap, wrap = _e === void 0 ? 'wrap' : _e, justify = _a.justify, alignItems = _a.alignItems, alignContent = _a.alignContent, 
+    direction = _c === void 0 ? 'row' : _c, _d = _a.wrap, wrap = _d === void 0 ? 'wrap' : _d, justify = _a.justify, alignItems = _a.alignItems, alignContent = _a.alignContent, 
     // Gap
-    gap = _a.gap, gapX = _a.gapX, gapY = _a.gapY, _f = _a.gapUnit, gapUnit = _f === void 0 ? 'rem' : _f, 
-    // Flex item
-    grow = _a.grow, shrink = _a.shrink, basis = _a.basis, flex = _a.flex, 
+    gap = _a.gap, gapX = _a.gapX, gapY = _a.gapY, _e = _a.gapUnit, gapUnit = _e === void 0 ? 'rem' : _e, 
     // Responsive
     responsiveSmall = _a.responsiveSmall, responsiveMedium = _a.responsiveMedium, responsiveLarge = _a.responsiveLarge, 
     // Size
-    fullWidth = _a.fullWidth, fullHeight = _a.fullHeight, rest = __rest(_a, ["as", "className", "funcss", "id", "children", "style", "direction", "wrap", "justify", "alignItems", "alignContent", "gap", "gapX", "gapY", "gapUnit", "grow", "shrink", "basis", "flex", "responsiveSmall", "responsiveMedium", "responsiveLarge", "fullWidth", "fullHeight"]);
-    var responsiveClasses = "\n    ".concat(responsiveSmall ? 'responsiveSmall' : '', "\n    ").concat(responsiveMedium ? 'responsiveMedium' : '', "\n    ").concat(responsiveLarge ? 'responsiveLarge' : '', "\n  ").trim();
-    return (react_1.default.createElement(Component, __assign({ id: id, className: "\n        ".concat(className || '', "\n        ").concat(funcss || '', "\n        ").concat(responsiveClasses, "\n      ").trim(), style: __assign({ display: 'flex', flexDirection: direction, flexWrap: wrap, justifyContent: justify, alignItems: alignItems, alignContent: alignContent, gap: gap ? "".concat(gap).concat(gapUnit) : undefined, columnGap: gapX ? "".concat(gapX).concat(gapUnit) : undefined, rowGap: gapY ? "".concat(gapY).concat(gapUnit) : undefined, flexGrow: grow, flexShrink: shrink, flexBasis: basis, flex: flex, width: fullWidth ? '100%' : undefined, height: fullHeight ? '100%' : undefined }, style) }, rest), children));
+    fullWidth = _a.fullWidth, fullHeight = _a.fullHeight, rest = __rest(_a, ["className", "funcss", "id", "children", "style", "direction", "wrap", "justify", "alignItems", "alignContent", "gap", "gapX", "gapY", "gapUnit", "responsiveSmall", "responsiveMedium", "responsiveLarge", "fullWidth", "fullHeight"]);
+    var combinedClassName = [
+        className,
+        funcss,
+        responsiveSmall && 'responsiveSmall',
+        responsiveMedium && 'responsiveMedium',
+        responsiveLarge && 'responsiveLarge',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (react_1.default.createElement("div", __assign({ id: id, className: combinedClassName, style: __assign({ display: 'flex', flexDirection: direction, flexWrap: wrap, justifyContent: justify, alignItems: alignItems, alignContent: alignContent, gap: gap !== undefined ? "".concat(gap).concat(gapUnit) : undefined, columnGap: gapX !== undefined ? "".concat(gapX).concat(gapUnit) : undefined, rowGap: gapY !== undefined ? "".concat(gapY).concat(gapUnit) : undefined, width: fullWidth ? '100%' : undefined, height: fullHeight ? '100%' : undefined }, style) }, rest), children));
 }

package/ui/flex/Flex.tsx

@@ -2,7 +2,6 @@
 import React from 'react';
 
 interface FlexProps {
-  as?: keyof JSX.IntrinsicElements; // Render as any tag (e.g. section, ul)
   className?: string;
   funcss?: string;
   id?: string;
@@ -22,12 +21,6 @@ interface FlexProps {
   gapY?: number;
   gapUnit?: 'rem' | 'px' | 'em';
 
-  // Flex item behavior
-  grow?: number;
-  shrink?: number;
-  basis?: string;
-  flex?: string;
-
   // Responsive helpers
   responsiveSmall?: boolean;
   responsiveMedium?: boolean;
@@ -39,7 +32,6 @@ interface FlexProps {
 }
 
 export default function Flex({
-  as: Component = 'div',
   className,
   funcss,
   id,
@@ -59,12 +51,6 @@ export default function Flex({
   gapY,
   gapUnit = 'rem',
 
-  // Flex item
-  grow,
-  shrink,
-  basis,
-  flex,
-
   // Responsive
   responsiveSmall,
   responsiveMedium,
@@ -75,20 +61,20 @@ export default function Flex({
   fullHeight,
   ...rest
 }: FlexProps) {
-  const responsiveClasses = `
-    ${responsiveSmall ? 'responsiveSmall' : ''}
-    ${responsiveMedium ? 'responsiveMedium' : ''}
-    ${responsiveLarge ? 'responsiveLarge' : ''}
-  `.trim();
+  const combinedClassName = [
+    className,
+    funcss,
+    responsiveSmall && 'responsiveSmall',
+    responsiveMedium && 'responsiveMedium',
+    responsiveLarge && 'responsiveLarge',
+  ]
+    .filter(Boolean)
+    .join(' ');
 
   return (
-    <Component
+    <div
       id={id}
-      className={`
-        ${className || ''}
-        ${funcss || ''}
-        ${responsiveClasses}
-      `.trim()}
+      className={combinedClassName}
       style={{
         display: 'flex',
         flexDirection: direction,
@@ -96,13 +82,9 @@ export default function Flex({
         justifyContent: justify,
         alignItems: alignItems,
         alignContent: alignContent,
-        gap: gap ? `${gap}${gapUnit}` : undefined,
-        columnGap: gapX ? `${gapX}${gapUnit}` : undefined,
-        rowGap: gapY ? `${gapY}${gapUnit}` : undefined,
-        flexGrow: grow,
-        flexShrink: shrink,
-        flexBasis: basis,
-        flex: flex,
+        gap: gap !== undefined ? `${gap}${gapUnit}` : undefined,
+        columnGap: gapX !== undefined ? `${gapX}${gapUnit}` : undefined,
+        rowGap: gapY !== undefined ? `${gapY}${gapUnit}` : undefined,
         width: fullWidth ? '100%' : undefined,
         height: fullHeight ? '100%' : undefined,
         ...style,
@@ -110,6 +92,6 @@ export default function Flex({
       {...rest}
     >
       {children}
-    </Component>
+    </div>
   );
 }

package/ui/flex/FlexItem.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+interface FlexItemProps {
+    className?: string;
+    funcss?: string;
+    id?: string;
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+    flex?: string;
+    grow?: number;
+    shrink?: number;
+    basis?: string;
+    alignSelf?: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
+    fullWidth?: boolean;
+    fullHeight?: boolean;
+}
+export default function FlexItem({ className, funcss, id, children, style, flex, grow, shrink, basis, alignSelf, fullWidth, fullHeight, ...rest }: FlexItemProps): React.JSX.Element;
+export {};

package/ui/flex/FlexItem.js

@@ -0,0 +1,39 @@
+"use strict";
+'use client';
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = FlexItem;
+var react_1 = __importDefault(require("react"));
+function FlexItem(_a) {
+    var className = _a.className, funcss = _a.funcss, id = _a.id, children = _a.children, _b = _a.style, style = _b === void 0 ? {} : _b, 
+    // Flex item
+    flex = _a.flex, grow = _a.grow, shrink = _a.shrink, basis = _a.basis, alignSelf = _a.alignSelf, 
+    // Size
+    fullWidth = _a.fullWidth, fullHeight = _a.fullHeight, rest = __rest(_a, ["className", "funcss", "id", "children", "style", "flex", "grow", "shrink", "basis", "alignSelf", "fullWidth", "fullHeight"]);
+    var combinedClassName = [className, funcss].filter(Boolean).join(' ');
+    return (react_1.default.createElement("div", __assign({ id: id, className: combinedClassName, style: __assign({ flex: flex, flexGrow: flex ? undefined : grow, flexShrink: flex ? undefined : shrink, flexBasis: flex ? undefined : basis, alignSelf: alignSelf, width: fullWidth ? '100%' : undefined, height: fullHeight ? '100%' : undefined }, style) }, rest), children));
+}

package/ui/flex/FlexItem.tsx

@@ -0,0 +1,64 @@
+'use client';
+import React from 'react';
+
+interface FlexItemProps {
+  className?: string;
+  funcss?: string;
+  id?: string;
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+
+  // Flex item behaviors
+  flex?: string;
+  grow?: number;
+  shrink?: number;
+  basis?: string;
+  alignSelf?: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
+
+  // Size helpers
+  fullWidth?: boolean;
+  fullHeight?: boolean;
+}
+
+export default function FlexItem({
+  className,
+  funcss,
+  id,
+  children,
+  style = {},
+
+  // Flex item
+  flex,
+  grow,
+  shrink,
+  basis,
+  alignSelf,
+
+  // Size
+  fullWidth,
+  fullHeight,
+
+  ...rest
+}: FlexItemProps) {
+  const combinedClassName = [className, funcss].filter(Boolean).join(' ');
+
+  return (
+    <div
+      id={id}
+      className={combinedClassName}
+      style={{
+        flex,
+        flexGrow: flex ? undefined : grow,
+        flexShrink: flex ? undefined : shrink,
+        flexBasis: flex ? undefined : basis,
+        alignSelf,
+        width: fullWidth ? '100%' : undefined,
+        height: fullHeight ? '100%' : undefined,
+        ...style,
+      }}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+}

package/ui/video/Video.d.ts

@@ -4,8 +4,9 @@ interface VideoProps {
     poster?: string;
     onDuration?: (duration: number) => void;
     isPause?: boolean;
+    spacebarPlay?: boolean;
     className?: string;
     autoPlay?: boolean;
 }
-export default function Video({ src, poster, onDuration, isPause, className, autoPlay, ...rest }: VideoProps): React.JSX.Element;
+export default function Video({ src, poster, onDuration, isPause, className, autoPlay, spacebarPlay, ...rest }: VideoProps): React.JSX.Element;
 export {};

package/ui/video/Video.js

@@ -71,18 +71,18 @@ var Tip_1 = __importDefault(require("../tooltip/Tip"));
 var videoFunctions_1 = require("./videoFunctions");
 var videoShortcuts_1 = require("./videoShortcuts");
 function Video(_a) {
-    var src = _a.src, poster = _a.poster, onDuration = _a.onDuration, isPause = _a.isPause, className = _a.className, autoPlay = _a.autoPlay, rest = __rest(_a, ["src", "poster", "onDuration", "isPause", "className", "autoPlay"]);
+    var src = _a.src, poster = _a.poster, onDuration = _a.onDuration, isPause = _a.isPause, className = _a.className, autoPlay = _a.autoPlay, _b = _a.spacebarPlay, spacebarPlay = _b === void 0 ? true : _b, rest = __rest(_a, ["src", "poster", "onDuration", "isPause", "className", "autoPlay", "spacebarPlay"]);
     var videoRef = (0, react_1.useRef)(null);
     var containerRef = (0, react_1.useRef)(null);
     var animationFrameRef = (0, react_1.useRef)(null);
-    var _b = (0, react_1.useState)(false), isPlaying = _b[0], setIsPlaying = _b[1];
-    var _c = (0, react_1.useState)(0), currentTime = _c[0], setCurrentTime = _c[1];
-    var _d = (0, react_1.useState)(0), duration = _d[0], setDuration = _d[1];
-    var _e = (0, react_1.useState)(1), volume = _e[0], setVolume = _e[1];
-    var _f = (0, react_1.useState)(false), isFullScreen = _f[0], setIsFullScreen = _f[1];
-    var _g = (0, react_1.useState)(false), showVolume = _g[0], setShowVolume = _g[1];
-    var _h = (0, react_1.useState)(true), isMouseMoving = _h[0], setIsMouseMoving = _h[1];
-    var _j = (0, react_1.useState)(false), hasStarted = _j[0], setHasStarted = _j[1];
+    var _c = (0, react_1.useState)(false), isPlaying = _c[0], setIsPlaying = _c[1];
+    var _d = (0, react_1.useState)(0), currentTime = _d[0], setCurrentTime = _d[1];
+    var _e = (0, react_1.useState)(0), duration = _e[0], setDuration = _e[1];
+    var _f = (0, react_1.useState)(1), volume = _f[0], setVolume = _f[1];
+    var _g = (0, react_1.useState)(false), isFullScreen = _g[0], setIsFullScreen = _g[1];
+    var _h = (0, react_1.useState)(false), showVolume = _h[0], setShowVolume = _h[1];
+    var _j = (0, react_1.useState)(true), isMouseMoving = _j[0], setIsMouseMoving = _j[1];
+    var _k = (0, react_1.useState)(false), hasStarted = _k[0], setHasStarted = _k[1];
     var handleVideoEnd = function () {
         setIsPlaying(false);
         setCurrentTime(duration); // optional
@@ -117,7 +117,7 @@ function Video(_a) {
         }
     };
     (0, react_1.useEffect)(function () {
-        var handleKey = function (e) { return (0, videoShortcuts_1.handleKeyDown)(e, isPlaying, playVideo, pauseVideo); };
+        var handleKey = function (e) { return (0, videoShortcuts_1.handleKeyDown)(e, isPlaying, playVideo, pauseVideo, spacebarPlay); };
         document.addEventListener('keydown', handleKey);
         return function () { return document.removeEventListener('keydown', handleKey); };
     }, [isPlaying]);

package/ui/video/Video.tsx

@@ -25,11 +25,12 @@ interface VideoProps {
   poster?: string;
   onDuration?: (duration: number) => void;
   isPause?: boolean;
+  spacebarPlay?: boolean;
   className?: string;
   autoPlay?: boolean;
 }
 
-export default function Video({ src, poster, onDuration, isPause, className, autoPlay , ...rest }: VideoProps) {
+export default function Video({ src, poster, onDuration, isPause, className, autoPlay , spacebarPlay = true, ...rest }: VideoProps) {
   const videoRef = useRef<HTMLVideoElement | null>(null);
   const containerRef = useRef<HTMLDivElement | null>(null);
   const animationFrameRef = useRef<number | null>(null);
@@ -87,7 +88,7 @@ const pauseVideo = () => {
 
 
   useEffect(() => {
-    const handleKey = (e: KeyboardEvent) => handleKeyDown(e, isPlaying, playVideo, pauseVideo);
+    const handleKey = (e: KeyboardEvent) => handleKeyDown(e, isPlaying, playVideo, pauseVideo, spacebarPlay);
     document.addEventListener('keydown', handleKey);
     return () => document.removeEventListener('keydown', handleKey);
   }, [isPlaying]);

package/ui/video/videoShortcuts.d.ts

@@ -1 +1 @@
-export declare const handleKeyDown: (e: KeyboardEvent, isPlaying: boolean, playVideo: () => void, pauseVideo: () => void) => void;
+export declare const handleKeyDown: (e: KeyboardEvent, isPlaying: boolean, playVideo: () => void, pauseVideo: () => void, spacebarPlay?: boolean) => void;

package/ui/video/videoShortcuts.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.handleKeyDown = void 0;
 // videoShortcuts.ts
-var handleKeyDown = function (e, isPlaying, playVideo, pauseVideo) {
-    if (e.key === ' ') {
+var handleKeyDown = function (e, isPlaying, playVideo, pauseVideo, spacebarPlay) {
+    if (e.key === ' ' && spacebarPlay) {
         e.preventDefault();
         isPlaying ? pauseVideo() : playVideo();
     }

package/ui/video/videoShortcuts.ts

@@ -3,9 +3,10 @@ export const handleKeyDown = (
   e: KeyboardEvent,
   isPlaying: boolean,
   playVideo: () => void,
-  pauseVideo: () => void
+  pauseVideo: () => void ,
+  spacebarPlay?: boolean
 ) => {
-  if (e.key === ' ') {
+  if (e.key === ' ' && spacebarPlay) {
     e.preventDefault();
     isPlaying ? pauseVideo() : playVideo();
   }