@ilo-org/react 0.10.6 → 0.12.0

package/src/components/Video/VideoPlayer.tsx

@@ -1,326 +1,71 @@
-import {
-  FC,
-  FocusEvent,
-  MouseEvent,
-  createRef,
-  useCallback,
-  useState,
-} from "react";
-/* temporary way of importing ReactPlayer due to a known issue with ReactPlayer.
- * Revert to standard method of importing once RP's dev has fixed.
- */
-import { default as RP } from "react-player/lazy";
-import { findDOMNode } from "react-dom";
-import { ReactPlayerProps } from "react-player/types/lib";
-const ReactPlayer = RP as unknown as FC<ReactPlayerProps>;
-import classNames from "classnames";
-import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { VideoPlayerProps } from "./VideoPlayer.props";
-import hoursMinutesSeconds from "../../utils/hoursMinutesSeconds";
-import screenfull from "screenfull";
-
-const VideoPlayer: FC<VideoPlayerProps> = ({
-  controls,
-  src,
-  poster,
-  youtube,
-  tracks,
-}) => {
-  const { prefix } = useGlobalSettings();
-  const baseClass = `${prefix}--legacyvideo`;
-
-  const playerClasses = classNames("", {
-    [`${baseClass}--player`]: true,
-    [`youtube`]: youtube,
-  });
-
-  const controlsClasses = classNames("", {
-    [`${baseClass}--controls`]: true,
-  });
-
-  /**
-   * State hooks for our player controls
-   */
-  const [duration, setDuration] = useState("0:00");
-  const [playedtime, setPlayedtime] = useState("0:00");
-  const [buffer, setBuffer] = useState(0);
-  const [playing, setPlaying] = useState(false);
-  const [playhead, setPlayhead] = useState(0);
-  const [volume, setVolume] = useState(0.8);
-  const [muted, setMute] = useState(false);
-  const [showposter, showPoster] = useState(true);
-  const [showvolume, showVolume] = useState(false);
-  const [seeking, setSeeking] = useState(false);
-
-  /**
-   * Ref for the video element
-   */
-  const videoElement = createRef();
-
-  /**
-   * Ref for the video container
-   */
-  const videoContainer = createRef();
-
-  const youtubeparams = {
-    controls: 0,
-    modestbranding: 1,
-  };
-
-  const playerconfig = {
-    file: {
-      tracks: tracks || [],
-    },
-    youtube: youtube ? { playerVars: youtubeparams } : {},
-  };
-
-  /**
-   * Fullscreen functionality
-   */
-  const toggleFullscreen = () => {
-    /* This is a known issue with ReactPlayer */
-    /* @ts-ignore */
-    screenfull.request(findDOMNode(videoContainer.current));
-  };
-
-  /**
-   * Play/pause functionality
-   */
-  const togglePlay = () => {
-    setPlaying(!playing);
-    showPoster(false);
-  };
-
-  /**
-   * Show volume slider
-   */
-  const showVolumeSlider = () => {
-    showVolume(true);
-  };
-
-  /**
-   * Hide volume slider
-   */
-  const hideVolumeSlider = () => {
-    setTimeout(() => {
-      showVolume(false);
-    }, 2000);
-  };
-
-  /**
-   * Mute/unmute
-   */
-  const toggleMute = () => {
-    setMute(!muted);
-    hideVolumeSlider();
-  };
-
-  /**
-   * Volume change
-   */
-  const handleVolumeChange = (event: any) => {
-    console.log("handleVolumeChange", event.target.value);
-    setVolume(event.target.value * 0.1);
-  };
-
-  /**
-   * Begin seek
-   */
-  const handleSeekMouseDown = () => {
-    setSeeking(true);
-  };
-
-  /**
-   * Seek
-   */
-  const handleSeekChange = (event: any) => {
-    setPlayhead(parseFloat(event.target.value));
-  };
-
-  /**
-   * End seek
-   */
-  const handleSeekMouseUp = (event: any) => {
-    setSeeking(false);
-    /* This is a known issue with ReactPlayer */
-    /* @ts-ignore */
-    videoElement.current.seekTo(parseFloat(event.target.value));
-  };
-
-  /**
-   * handle display of progress
-   */
-  const handleProgress = (state: any) => {
-    if (!seeking) {
-      setPlayhead(state.played);
-      setBuffer(state.loaded);
-      setPlayedtime(hoursMinutesSeconds(state.playedSeconds));
-    }
-  };
-
-  /**
-   * get the duration to display
-   */
-  const handleDuration = (duration: any) => {
-    setDuration(hoursMinutesSeconds(duration));
-  };
-
-  /**
-   * on video end
-   */
-  const handleEnded = () => {
-    setPlaying(false);
-    setSeeking(false);
-  };
-
-  const handlePlayHover = useCallback(
-    (
-      event: MouseEvent<HTMLButtonElement> | FocusEvent<HTMLButtonElement>,
-      state: boolean
-    ) => {
-      const element = event.currentTarget;
-      if (!element.classList.contains(`${controlsClasses}--play`)) {
-        return;
+import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import "videojs-youtube";
+import { VideoPlayerProps, VideoPlayerRef } from "./VideoPlayer.props";
+import videojs, { ILOVideo } from "video.js";
+
+const video = videojs as unknown as ILOVideo;
+
+const VideoPlayer = forwardRef<VideoPlayerRef, VideoPlayerProps>(
+  ({ src, poster, youtube }, ref) => {
+    const videoNode = useRef<HTMLVideoElement>(null);
+    const player = useRef<videojs.Player>();
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        get player() {
+          return player.current;
+        },
+      }),
+      [player]
+    );
+
+    useEffect(() => {
+      if (videoNode.current) {
+        player.current = video(videoNode.current, {
+          autoplay: false,
+          controls: true,
+          preload: "auto",
+          bigPlayButton: false,
+          poster: poster?.src,
+          controlBar: {
+            descriptionsButton: false,
+            playbackRateMenuButton: false,
+            chaptersButton: false,
+            audioTrackButton: false,
+            pictureInPictureToggle: false,
+            subsCapsButton: false,
+            seekToLive: false,
+            liveDisplay: false,
+          },
+          errorDisplay: false,
+          textTrackSettings: false,
+          resizeManager: false,
+          /**
+           * If youtube is true, it will default to the youtube video
+           */
+          sources: [
+            { type: youtube ? "video/youtube" : undefined, src: src as string },
+          ],
+          dataSetup: {
+            techOrder: ["youtube"],
+          },
+          liveTracker: false,
+        });
       }
-
-      const duration = element.previousSibling;
-      if (duration instanceof HTMLLabelElement) {
-        duration.classList.toggle(
-          `${controlsClasses}--duration--hovered`,
-          state
-        );
-      }
-    },
-    [controlsClasses]
-  );
-
-  return (
-    <div
-      className={`${baseClass}--container`}
-      ref={videoContainer as React.RefObject<HTMLDivElement>}
-    >
-      <ReactPlayer
-        className={playerClasses}
-        config={playerconfig as any}
-        loop={false}
-        muted={muted}
-        playing={playing}
-        ref={videoElement}
-        url={src as any}
-        width="100%"
-        height="100%"
-        progressInterval={30}
-        volume={volume}
-        onProgress={handleProgress}
-        onDuration={handleDuration}
-        onEnded={handleEnded}
-      />
-      <picture className={`${baseClass}--poster ${showposter ? "show" : ""}`}>
-        {poster?.url &&
-          poster.url
-            .sort(
-              (a: any, b: any) =>
-                parseFloat(a.breakpoint) - parseFloat(b.breakpoint)
-            )
-            .slice(1)
-            .reverse()
-            .map((item: any, index: any) => (
-              <source
-                srcSet={item.src}
-                media={`(min-width: ${item.breakpoint}px)`}
-                key={index}
-              />
-            ))}
-        <img src={poster?.url[0]?.src} alt={poster?.alt} />
-      </picture>
-      <div className={`${controlsClasses} ${showposter ? "notplayed" : ""}`}>
-        <label
-          className={`${controlsClasses}--duration ${showposter ? "show" : ""}`}
-        >
-          {duration}
-        </label>
-        <button
-          className={`${controlsClasses}--${!playing ? "play" : "pause"}`}
-          onClick={togglePlay}
-          onMouseOver={(e) => handlePlayHover(e, true)}
-          onFocus={(e) => handlePlayHover(e, true)}
-          onMouseOut={(e) => handlePlayHover(e, false)}
-          onBlur={(e) => handlePlayHover(e, false)}
-        >
-          <span>
-            {!playing ? controls && controls.play : controls && controls.pause}
-          </span>
-        </button>
-        <div
-          className={`${controlsClasses}--progress ${showposter ? "" : "show"}`}
-        >
-          <input
-            type="range"
-            min={0}
-            max={0.999999}
-            step="any"
-            value={playhead}
-            onMouseDown={handleSeekMouseDown}
-            onChange={handleSeekChange}
-            onMouseUp={handleSeekMouseUp}
-            className={`${controlsClasses}--progress-playhead`}
-          />
-          <progress
-            className={`${controlsClasses}--progress-current`}
-            max={1}
-            value={playhead}
-          />
-          <progress
-            className={`${controlsClasses}--progress-loaded`}
-            max={1}
-            value={buffer}
-          />
-          <div className={`${controlsClasses}--progress-played-container`}>
-            <label
-              className={`${controlsClasses}--progress-played`}
-              style={{ ["--playhead" as any]: `${playhead * 100}%` }}
-            >
-              {playedtime}
-            </label>
-          </div>
-        </div>
-        <div
-          className={`${controlsClasses}--volume ${showposter ? "" : "show"}`}
-          onMouseEnter={showVolumeSlider}
-          onMouseLeave={hideVolumeSlider}
-        >
-          <button
-            className={`${controlsClasses}--showvolume ${muted ? "muted" : ""}`}
-            onClick={toggleMute}
-          >
-            <span>{controls && controls.volume}</span>
-          </button>
-          <div className={`${controlsClasses}--setvolume-container`}>
-            <input
-              className={`${controlsClasses}--setvolume ${
-                showvolume ? "show" : ""
-              }`}
-              type="range"
-              step="0.5"
-              defaultValue={volume}
-              min="1"
-              max="10"
-              onChange={handleVolumeChange}
-              onMouseLeave={hideVolumeSlider}
-            />
-          </div>
-        </div>
-        <button
-          className={`${controlsClasses}--fullscreen ${
-            showposter ? "" : "show"
-          }`}
-          onClick={toggleFullscreen}
-        >
-          <span>{controls && controls.fullscreen}</span>
-        </button>
+      return () => {
+        if (player.current) {
+          player.current.dispose();
+        }
+      };
+    }, [poster?.src, src, youtube]);
+
+    return (
+      <div className="ilo--videoplayer">
+        <video ref={videoNode} className="ilo--video--element" />
       </div>
-    </div>
-  );
-};
+    );
+  }
+);
 
 export default VideoPlayer;

package/src/components/index.ts

@@ -41,5 +41,6 @@ export { TableOfContents } from "./TableOfContents";
 export { Footer } from "./Footer";
 export { LocalNav } from "./LocalNav";
 export { Navigation } from "./Navigation";
-export { Card, CardGroup } from "./Card";
+export { Card, CardGroup } from "./Cards";
 export { Breadcrumb } from "./Breadcrumb";
+export { Tabs } from "./Tabs";

package/src/declarations.d.ts

@@ -1,3 +1,5 @@
+import videojs from "video.js";
+
 declare module "*.svg" {
   const content: string;
   export default content;
@@ -12,3 +14,23 @@ declare module "*.jpg" {
   const content: string;
   export default content;
 }
+
+declare module "video.js" {
+  interface VideoJsPlayerOptionsAugmentation extends videojs.PlayerOptions {
+    liveTracker: boolean;
+    textTrackSettings: boolean;
+    errorDisplay: boolean;
+    resizeManager: boolean;
+    dataSetup: {
+      techOrder: string[];
+    };
+  }
+
+  type ILOVideo = (
+    id: string | HTMLVideoElement,
+    options: VideoJsPlayerOptionsAugmentation,
+    ready?: () => void
+  ) => videojs.Player;
+}
+
+declare module "videojs-youtube" {}

package/src/types/index.ts

@@ -53,14 +53,14 @@ export type SocialTypes =
   | "tiktok"
   | "flickr";
 export type CardColor = "turquoise" | "green" | "yellow" | "blue";
-export type CardSize = "wide" | "standard" | "narrow";
-export type CardCornerType = "cornercut" | "corner";
+export type CardSize = "wide" | "standard" | "narrow" | "fluid";
+export type CardCornerType = boolean;
 export type CardAlignment = "left" | "right";
 export type CardTypes =
   | "stat"
   | "multilink"
-  | "graphic"
-  | "graphicpromo"
+  | "text"
+  | "promo"
   | "feature"
   | "detail"
   | "factlist"

package/lib/cjs/AccordionCtx-fe08ff45.js

@@ -1,9 +0,0 @@
-'use strict';
-
-var require$$0 = require('react');
-
-const AccordionContext = require$$0.createContext({});
-const AccordionItemContext = require$$0.createContext({});
-
-exports.AccordionContext = AccordionContext;
-exports.AccordionItemContext = AccordionItemContext;