@bbl-digital/snorre 3.1.59 → 3.1.60

package/esm/core/MediaCarousel/index.js

@@ -10,6 +10,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const MediaCarousel = ({
   media,
+  autoPlay = false,
   objectFit = 'contain',
   height = '100%',
   className,
@@ -25,7 +26,9 @@ const MediaCarousel = ({
     return /*#__PURE__*/_jsx(ImageWrapper, {
       height: height,
       children: isVideo ? /*#__PURE__*/_jsx(Video, {
-        src: mediaItem.src
+        src: mediaItem.src,
+        autoPlay: autoPlay,
+        intersectionObserver: true
       }) : /*#__PURE__*/_jsx(Image, {
         src: mediaItem.src,
         alt: "produktbilde",
@@ -44,7 +47,7 @@ const MediaCarousel = ({
       swiping: hasMultipleImages,
       dragging: hasMultipleImages,
       wrapAround: true,
-      cellSpacing: 10,
+      cellSpacing: 15,
       renderCenterRightControls: ({
         nextSlide
       }) => hasMultipleImages && /*#__PURE__*/_jsx(ControlButton, {

package/esm/core/Video/Video.stories.js

@@ -8,24 +8,26 @@ export default {
 export const Default = {
   render: () => /*#__PURE__*/_jsx(Video, {
     src: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",
-    poster: "https://flxt.tmsimg.com/assets/p10163210_v_h9_aa.jpg"
+    height: "100%"
   })
 };
 export const VideoWithSrc = {
   render: () => /*#__PURE__*/_jsx(Video, {
-    src: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
+    src: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",
+    height: "500px"
   })
 };
 export const VideoWithPoster = {
   render: () => /*#__PURE__*/_jsx(Video, {
     src: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",
-    poster: "https://flxt.tmsimg.com/assets/p10163210_v_h9_aa.jpg"
+    poster: "https://flxt.tmsimg.com/assets/p10163210_v_h9_aa.jpg",
+    height: "500px"
   })
 };
-export const VideoWithWidthAndHeight = {
-  render: () => /*#__PURE__*/_jsx(Video, {
+export const VideoWithWidthAndHeight = () => {
+  return /*#__PURE__*/_jsx(Video, {
     src: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",
-    height: "300px",
-    width: "auto"
-  })
+    poster: "https://flxt.tmsimg.com/assets/p10163210_v_h9_aa.jpg",
+    height: "500px"
+  });
 };

package/esm/core/Video/index.js

@@ -1,28 +1,87 @@
 /** @jsxImportSource @emotion/react */
-import React from 'react';
-import styles from './styles';
+import { useEffect, useRef, useState } from 'react';
+import ReactPlayer from 'react-player';
+import { PlayerContainer } from './styles';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 const Video = ({
   src,
+  intersectionObserver = false,
   controls = true,
-  playsInline = true,
-  preload = 'auto',
   poster,
+  config = {
+    file: {
+      attributes: {
+        controlsList: 'nodownload noplaybackrate'
+      }
+    }
+  },
+  playing = false,
+  autoPlay = false,
   height = 'auto',
   width = '100%',
   css,
+  onPause,
+  onPlay,
   ...restProps
 }) => {
+  const containerRef = useRef(null);
+
+  /** Determines if the video controls have been physically interacted with  */
+  const [playPressed, setPlayPressed] = useState(false);
+  /** The play state of the player */
+  const [isPlaying, setIsPlaying] = useState(playing);
   const videoSrc = src || undefined;
   const posterSrc = poster || undefined;
-  return _jsx("video", {
-    src: videoSrc,
-    controls: controls,
-    playsInline: playsInline,
-    preload: preload,
-    poster: posterSrc,
-    css: () => [height && styles.height(height), width && styles.width(width), css && css],
-    ...restProps
+  const intersectionObsOptions = {
+    root: null,
+    rootMargin: '0px',
+    threshold: 0.5
+  };
+  const intersectionCallback = entries => {
+    const [entry] = entries;
+    // If the video is in the viewport and autoPlay is true or the user has physically pressed play, start playing
+    if (entry.isIntersecting && (autoPlay || playPressed)) {
+      setIsPlaying(true);
+    } else {
+      setIsPlaying(false);
+    }
+  };
+  useEffect(() => {
+    if (!intersectionObserver || !window.IntersectionObserver) return;
+    const observer = new IntersectionObserver(intersectionCallback, intersectionObsOptions);
+    const currentRef = containerRef.current;
+    if (currentRef) {
+      observer.observe(currentRef);
+    }
+    return () => {
+      if (currentRef) observer.unobserve(currentRef);
+    };
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [containerRef.current, intersectionObsOptions, intersectionObserver]);
+  const handlePlay = () => {
+    setPlayPressed(true);
+    onPlay && onPlay();
+  };
+  const handlePause = () => {
+    setPlayPressed(false);
+    onPause && onPause();
+  };
+  return _jsx(PlayerContainer, {
+    ref: containerRef,
+    children: _jsx(ReactPlayer, {
+      url: videoSrc,
+      controls: controls,
+      playing: isPlaying,
+      light: posterSrc ?? false,
+      width: width,
+      height: height,
+      config: config,
+      onPlay: handlePlay,
+      onPause: handlePause,
+      css: () => [css && css],
+      ...restProps
+    })
   });
 };
 export default Video;

package/esm/core/Video/styles.js

@@ -1,7 +1,16 @@
-import { css } from '@emotion/react';
-const styles = {
-  height: height => /*#__PURE__*/css("height:", height, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:height;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL1ZpZGVvL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHaUMiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL3BhY2thZ2VzL2NvcmUvVmlkZW8vc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5cbmNvbnN0IHN0eWxlcyA9IHtcbiAgaGVpZ2h0OiAoaGVpZ2h0OiBzdHJpbmcpID0+IGNzc2BcbiAgICBoZWlnaHQ6ICR7aGVpZ2h0fTtcbiAgYCxcbiAgd2lkdGg6ICh3aWR0aDogc3RyaW5nKSA9PiBjc3NgXG4gICAgd2lkdGg6ICR7d2lkdGh9O1xuICBgLFxufVxuXG5leHBvcnQgZGVmYXVsdCBzdHlsZXNcbmV4cG9ydCB7IHN0eWxlcyB9XG4iXX0= */"),
-  width: width => /*#__PURE__*/css("width:", width, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:width;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL1ZpZGVvL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNK0IiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL3BhY2thZ2VzL2NvcmUvVmlkZW8vc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5cbmNvbnN0IHN0eWxlcyA9IHtcbiAgaGVpZ2h0OiAoaGVpZ2h0OiBzdHJpbmcpID0+IGNzc2BcbiAgICBoZWlnaHQ6ICR7aGVpZ2h0fTtcbiAgYCxcbiAgd2lkdGg6ICh3aWR0aDogc3RyaW5nKSA9PiBjc3NgXG4gICAgd2lkdGg6ICR7d2lkdGh9O1xuICBgLFxufVxuXG5leHBvcnQgZGVmYXVsdCBzdHlsZXNcbmV4cG9ydCB7IHN0eWxlcyB9XG4iXX0= */")
-};
-export default styles;
-export { styles };
+import _styled from "@emotion/styled/base";
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+export const PlayerContainer = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
+  target: "eryog930"
+} : {
+  target: "eryog930",
+  label: "PlayerContainer"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1saf8wx",
+  styles: "display:flex;align-items:center;justify-content:center;width:100%;height:auto"
+} : {
+  name: "1saf8wx",
+  styles: "display:flex;align-items:center;justify-content:center;width:100%;height:auto",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL1ZpZGVvL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFeUMiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL3BhY2thZ2VzL2NvcmUvVmlkZW8vc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmV4cG9ydCBjb25zdCBQbGF5ZXJDb250YWluZXIgPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogYXV0bztcbmBcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});

package/lib/core/MediaCarousel/index.d.ts

@@ -8,6 +8,8 @@ declare type CarouselMedia = {
 declare type Props = {
     /** The media */
     media: CarouselMedia[];
+    /** Sets autoplay for media that is playable */
+    autoPlay?: boolean;
     /** If the carousel should have a shadow */
     withShadow?: boolean;
     /** The height of the carousel */
@@ -19,7 +21,7 @@ declare type Props = {
     /** The object fit of the image */
     objectFit?: 'fill' | 'contain' | 'cover' | 'non' | 'scale-down' | 'initial' | 'inherit';
 };
-declare const MediaCarousel: ({ media, objectFit, height, className, radius, withShadow, }: Props) => React.JSX.Element;
+declare const MediaCarousel: ({ media, autoPlay, objectFit, height, className, radius, withShadow, }: Props) => React.JSX.Element;
 export type { CarouselMedia };
 export default MediaCarousel;
 //# sourceMappingURL=index.d.ts.map

package/lib/core/MediaCarousel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/MediaCarousel/index.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,aAAK,aAAa,GAAG;IACnB,mBAAmB;IACnB,GAAG,EAAE,MAAM,CAAA;IACX,iGAAiG;IACjG,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,aAAK,KAAK,GAAG;IACX,gBAAgB;IAChB,KAAK,EAAE,aAAa,EAAE,CAAA;IACtB,2CAA2C;IAC3C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,iCAAiC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,kCAAkC;IAClC,SAAS,CAAC,EACN,MAAM,GACN,SAAS,GACT,OAAO,GACP,KAAK,GACL,YAAY,GACZ,SAAS,GACT,SAAS,CAAA;CACd,CAAA;AAED,QAAA,MAAM,aAAa,iEAOhB,KAAK,sBAiEP,CAAA;AACD,YAAY,EAAE,aAAa,EAAE,CAAA;AAC7B,eAAe,aAAa,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/MediaCarousel/index.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,aAAK,aAAa,GAAG;IACnB,mBAAmB;IACnB,GAAG,EAAE,MAAM,CAAA;IACX,iGAAiG;IACjG,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,aAAK,KAAK,GAAG;IACX,gBAAgB;IAChB,KAAK,EAAE,aAAa,EAAE,CAAA;IACtB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2CAA2C;IAC3C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,iCAAiC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,kCAAkC;IAClC,SAAS,CAAC,EACN,MAAM,GACN,SAAS,GACT,OAAO,GACP,KAAK,GACL,YAAY,GACZ,SAAS,GACT,SAAS,CAAA;CACd,CAAA;AAED,QAAA,MAAM,aAAa,2EAQhB,KAAK,sBAkEP,CAAA;AACD,YAAY,EAAE,aAAa,EAAE,CAAA;AAC7B,eAAe,aAAa,CAAA"}

package/lib/core/MediaCarousel/index.js

@@ -10,6 +10,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const MediaCarousel = ({
   media,
+  autoPlay = false,
   objectFit = 'contain',
   height = '100%',
   className,
@@ -25,7 +26,9 @@ const MediaCarousel = ({
     return /*#__PURE__*/_jsx(ImageWrapper, {
       height: height,
       children: isVideo ? /*#__PURE__*/_jsx(Video, {
-        src: mediaItem.src
+        src: mediaItem.src,
+        autoPlay: autoPlay,
+        intersectionObserver: true
       }) : /*#__PURE__*/_jsx(Image, {
         src: mediaItem.src,
         alt: "produktbilde",
@@ -44,7 +47,7 @@ const MediaCarousel = ({
       swiping: hasMultipleImages,
       dragging: hasMultipleImages,
       wrapAround: true,
-      cellSpacing: 10,
+      cellSpacing: 15,
       renderCenterRightControls: ({
         nextSlide
       }) => hasMultipleImages && /*#__PURE__*/_jsx(ControlButton, {

package/lib/core/Video/Video.stories.d.ts

@@ -10,7 +10,5 @@ export declare const VideoWithSrc: {
 export declare const VideoWithPoster: {
     render: () => React.JSX.Element;
 };
-export declare const VideoWithWidthAndHeight: {
-    render: () => React.JSX.Element;
-};
+export declare const VideoWithWidthAndHeight: () => React.JSX.Element;
 //# sourceMappingURL=Video.stories.d.ts.map

package/lib/core/Video/Video.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Video.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Video/Video.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;;AAGzB,wBAGS;AAET,eAAO,MAAM,OAAO;;CAOnB,CAAA;AAED,eAAO,MAAM,YAAY;;CAIxB,CAAA;AAED,eAAO,MAAM,eAAe;;CAO3B,CAAA;AAED,eAAO,MAAM,uBAAuB;;CAQnC,CAAA"}
+{"version":3,"file":"Video.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Video/Video.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;;AAGzB,wBAGS;AAET,eAAO,MAAM,OAAO;;CAOnB,CAAA;AAED,eAAO,MAAM,YAAY;;CAOxB,CAAA;AAED,eAAO,MAAM,eAAe;;CAQ3B,CAAA;AAED,eAAO,MAAM,uBAAuB,yBAQnC,CAAA"}

package/lib/core/Video/Video.stories.js

@@ -8,24 +8,26 @@ export default {
 export const Default = {
   render: () => /*#__PURE__*/_jsx(Video, {
     src: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",
-    poster: "https://flxt.tmsimg.com/assets/p10163210_v_h9_aa.jpg"
+    height: "100%"
   })
 };
 export const VideoWithSrc = {
   render: () => /*#__PURE__*/_jsx(Video, {
-    src: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
+    src: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",
+    height: "500px"
   })
 };
 export const VideoWithPoster = {
   render: () => /*#__PURE__*/_jsx(Video, {
     src: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",
-    poster: "https://flxt.tmsimg.com/assets/p10163210_v_h9_aa.jpg"
+    poster: "https://flxt.tmsimg.com/assets/p10163210_v_h9_aa.jpg",
+    height: "500px"
   })
 };
-export const VideoWithWidthAndHeight = {
-  render: () => /*#__PURE__*/_jsx(Video, {
+export const VideoWithWidthAndHeight = () => {
+  return /*#__PURE__*/_jsx(Video, {
     src: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",
-    height: "300px",
-    width: "auto"
-  })
+    poster: "https://flxt.tmsimg.com/assets/p10163210_v_h9_aa.jpg",
+    height: "500px"
+  });
 };

package/lib/core/Video/index.d.ts

@@ -1,23 +1,31 @@
-/** @jsxImportSource @emotion/react */
-import React from 'react';
+/// <reference types="react" />
 import { SerializedStyles } from '@emotion/react';
-interface IProps extends React.VideoHTMLAttributes<HTMLVideoElement> {
+import { Config } from 'react-player';
+interface IProps {
     /** The source */
     src?: string;
     /** Controls defaults to true */
     controls?: boolean;
-    /** Indicating that the video is to be played inline, within the videos playback area */
-    playsInline?: boolean;
-    /** Intends to provide a hint to the browser about what the author thinks will lead to the best user experience regarding what content is loaded before the video is played. */
-    preload?: 'auto' | 'metadata' | 'none';
+    /** Specify to let an Intersection Observer to auto stop or auto start the player when in the viewport */
+    intersectionObserver?: boolean;
+    /** Override config of the player */
+    config?: Config;
+    /** Set play state */
+    playing?: boolean;
+    /** Plays automatically when loaded */
+    autoPlay?: boolean;
     /** An URL for an image to be shown while the video is downloading */
     poster?: string;
     /** Video height, e.g. 100px */
     height?: string;
-    /** Video with, e.g. 100% */
+    /** Video width, e.g. 100% */
     width?: string;
     /** CSS override */
     css?: SerializedStyles;
+    /** Pause callback */
+    onPause?: () => void;
+    /** Play callback */
+    onPlay?: () => void;
 }
 declare const Video: React.FC<IProps>;
 export default Video;

package/lib/core/Video/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Video/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAGjD,UAAU,MAAO,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IAClE,iBAAiB;IACjB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,wFAAwF;IACxF,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,+KAA+K;IAC/K,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,MAAM,CAAA;IACtC,qEAAqE;IACrE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,+BAA+B;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mBAAmB;IACnB,GAAG,CAAC,EAAE,gBAAgB,CAAA;CACvB;AAED,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CA6B3B,CAAA;AAED,eAAe,KAAK,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Video/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AACjD,OAAoB,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AAGlD,UAAU,MAAM;IACd,iBAAiB;IACjB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,yGAAyG;IACzG,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,oCAAoC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,qBAAqB;IACrB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,qEAAqE;IACrE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,+BAA+B;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mBAAmB;IACnB,GAAG,CAAC,EAAE,gBAAgB,CAAA;IACtB,qBAAqB;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,oBAAoB;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;CACpB;AAED,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CA6F3B,CAAA;AAED,eAAe,KAAK,CAAA"}

package/lib/core/Video/index.js

@@ -1,28 +1,87 @@
 /** @jsxImportSource @emotion/react */
-import React from 'react';
-import styles from './styles';
+import { useEffect, useRef, useState } from 'react';
+import ReactPlayer from 'react-player';
+import { PlayerContainer } from './styles';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 const Video = ({
   src,
+  intersectionObserver = false,
   controls = true,
-  playsInline = true,
-  preload = 'auto',
   poster,
+  config = {
+    file: {
+      attributes: {
+        controlsList: 'nodownload noplaybackrate'
+      }
+    }
+  },
+  playing = false,
+  autoPlay = false,
   height = 'auto',
   width = '100%',
   css,
+  onPause,
+  onPlay,
   ...restProps
 }) => {
+  const containerRef = useRef(null);
+
+  /** Determines if the video controls have been physically interacted with  */
+  const [playPressed, setPlayPressed] = useState(false);
+  /** The play state of the player */
+  const [isPlaying, setIsPlaying] = useState(playing);
   const videoSrc = src || undefined;
   const posterSrc = poster || undefined;
-  return _jsx("video", {
-    src: videoSrc,
-    controls: controls,
-    playsInline: playsInline,
-    preload: preload,
-    poster: posterSrc,
-    css: () => [height && styles.height(height), width && styles.width(width), css && css],
-    ...restProps
+  const intersectionObsOptions = {
+    root: null,
+    rootMargin: '0px',
+    threshold: 0.5
+  };
+  const intersectionCallback = entries => {
+    const [entry] = entries;
+    // If the video is in the viewport and autoPlay is true or the user has physically pressed play, start playing
+    if (entry.isIntersecting && (autoPlay || playPressed)) {
+      setIsPlaying(true);
+    } else {
+      setIsPlaying(false);
+    }
+  };
+  useEffect(() => {
+    if (!intersectionObserver || !window.IntersectionObserver) return;
+    const observer = new IntersectionObserver(intersectionCallback, intersectionObsOptions);
+    const currentRef = containerRef.current;
+    if (currentRef) {
+      observer.observe(currentRef);
+    }
+    return () => {
+      if (currentRef) observer.unobserve(currentRef);
+    };
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [containerRef.current, intersectionObsOptions, intersectionObserver]);
+  const handlePlay = () => {
+    setPlayPressed(true);
+    onPlay && onPlay();
+  };
+  const handlePause = () => {
+    setPlayPressed(false);
+    onPause && onPause();
+  };
+  return _jsx(PlayerContainer, {
+    ref: containerRef,
+    children: _jsx(ReactPlayer, {
+      url: videoSrc,
+      controls: controls,
+      playing: isPlaying,
+      light: posterSrc ?? false,
+      width: width,
+      height: height,
+      config: config,
+      onPlay: handlePlay,
+      onPause: handlePause,
+      css: () => [css && css],
+      ...restProps
+    })
   });
 };
 export default Video;

package/lib/core/Video/styles.d.ts

@@ -1,7 +1,6 @@
-declare const styles: {
-    height: (height: string) => import("@emotion/react").SerializedStyles;
-    width: (width: string) => import("@emotion/react").SerializedStyles;
-};
-export default styles;
-export { styles };
+/// <reference types="react" />
+export declare const PlayerContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 //# sourceMappingURL=styles.d.ts.map

package/lib/core/Video/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Video/styles.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,MAAM;qBACO,MAAM;mBAGR,MAAM;CAGtB,CAAA;AAED,eAAe,MAAM,CAAA;AACrB,OAAO,EAAE,MAAM,EAAE,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Video/styles.ts"],"names":[],"mappings":";AAEA,eAAO,MAAM,eAAe;;;yGAM3B,CAAA"}

package/lib/core/Video/styles.js

@@ -1,7 +1,16 @@
-import { css } from '@emotion/react';
-const styles = {
-  height: height => /*#__PURE__*/css("height:", height, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:height;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL1ZpZGVvL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHaUMiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL3BhY2thZ2VzL2NvcmUvVmlkZW8vc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5cbmNvbnN0IHN0eWxlcyA9IHtcbiAgaGVpZ2h0OiAoaGVpZ2h0OiBzdHJpbmcpID0+IGNzc2BcbiAgICBoZWlnaHQ6ICR7aGVpZ2h0fTtcbiAgYCxcbiAgd2lkdGg6ICh3aWR0aDogc3RyaW5nKSA9PiBjc3NgXG4gICAgd2lkdGg6ICR7d2lkdGh9O1xuICBgLFxufVxuXG5leHBvcnQgZGVmYXVsdCBzdHlsZXNcbmV4cG9ydCB7IHN0eWxlcyB9XG4iXX0= */"),
-  width: width => /*#__PURE__*/css("width:", width, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:width;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL1ZpZGVvL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNK0IiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL3BhY2thZ2VzL2NvcmUvVmlkZW8vc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5cbmNvbnN0IHN0eWxlcyA9IHtcbiAgaGVpZ2h0OiAoaGVpZ2h0OiBzdHJpbmcpID0+IGNzc2BcbiAgICBoZWlnaHQ6ICR7aGVpZ2h0fTtcbiAgYCxcbiAgd2lkdGg6ICh3aWR0aDogc3RyaW5nKSA9PiBjc3NgXG4gICAgd2lkdGg6ICR7d2lkdGh9O1xuICBgLFxufVxuXG5leHBvcnQgZGVmYXVsdCBzdHlsZXNcbmV4cG9ydCB7IHN0eWxlcyB9XG4iXX0= */")
-};
-export default styles;
-export { styles };
+import _styled from "@emotion/styled/base";
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+export const PlayerContainer = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
+  target: "eryog930"
+} : {
+  target: "eryog930",
+  label: "PlayerContainer"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1saf8wx",
+  styles: "display:flex;align-items:center;justify-content:center;width:100%;height:auto"
+} : {
+  name: "1saf8wx",
+  styles: "display:flex;align-items:center;justify-content:center;width:100%;height:auto",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL1ZpZGVvL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFeUMiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL3BhY2thZ2VzL2NvcmUvVmlkZW8vc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmV4cG9ydCBjb25zdCBQbGF5ZXJDb250YWluZXIgPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogYXV0bztcbmBcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbl-digital/snorre",
-  "version": "3.1.59",
+  "version": "3.1.60",
   "description": "Design library for BBL Digital",
   "license": "MIT",
   "main": "./lib/index.js",
@@ -31,6 +31,7 @@
     "react-beautiful-dnd": "^13.1.0",
     "react-day-picker": "^8.3.4",
     "react-images-uploading": "^3.1.7",
+    "react-player": "^2.12.0",
     "react-stately": "^3.21.0",
     "react-test-renderer": "^18.2.0",
     "recharts": "2.1.16"