@ilo-org/react 0.10.5 → 0.11.0

package/src/components/Video/Video.args.ts

@@ -1,45 +1,39 @@
 import { VideoProps } from "./Video.props";
 
 const videofile: VideoProps = {
-  alt: "The ILO logo on a blue background",
   className: "image",
   caption:
     "The ILO brings together governments, employers and workers to set labour standards and promote decent work.",
   poster: {
-    url: [{ src: "/media-file-poster.jpg" }],
-    alt: "",
+    src: "/media-file-poster.jpg",
+    alt: "The ILO logo on a blue background",
   },
-  video: {
-    controls: {
-      fullscreen: "Fullscreen",
-      play: "Play",
-      pause: "Pause",
-      volume: "Volume",
-    },
-    src: "/video-example.mp4",
-    youtube: false,
+  controls: {
+    fullscreen: "Fullscreen",
+    play: "Play",
+    pause: "Pause",
+    volume: "Volume",
   },
+  src: "/video-example.mp4",
+  youtube: false,
 };
 
 const videoyt: VideoProps = {
-  alt: "An smiling woman with gray hair holds a bowl full of corn in front of her home.",
   caption:
     "Indigenous entrepreneur Celestina Ábalos runs a tourism business in the UNESCO World Heritage site of Quebrada de Humahuaca in northern Argentina. ©ILO/Ivar Velasquez",
   className: "image",
   poster: {
-    url: [{ src: "/youtube-video-poster.avif" }],
-    alt: "",
+    src: "/youtube-video-poster.avif",
+    alt: "An smiling woman with gray hair holds a bowl full of corn in front of her home.",
   },
-  video: {
-    controls: {
-      fullscreen: "Fullscreen",
-      play: "Play",
-      pause: "Pause",
-      volume: "Volume",
-    },
-    src: "https://youtu.be/X72_A4_6zjU",
-    youtube: true,
+  controls: {
+    fullscreen: "Fullscreen",
+    play: "Play",
+    pause: "Pause",
+    volume: "Volume",
   },
+  src: "https://youtu.be/X72_A4_6zjU",
+  youtube: true,
 };
 
 /**

package/src/components/Video/Video.props.ts

@@ -1,59 +1,22 @@
-import { TracksConfig } from "./VideoPlayer.props";
+import { VideoPlayerControls } from "./VideoPlayer.props";
 
 export interface Poster {
-  url: { src: string }[];
+  src: string;
   alt: string;
 }
 
-interface VideoPlayerControls {
-  /**
-   * Specify the label for the fullscreen button
-   */
-  fullscreen?: Required<string>;
-
-  /**
-   * Specify the label for the  play button
-   */
-  play?: Required<string>;
-
-  /**
-   * Specify the label for the pause button
-   */
-  pause?: Required<string>;
-
-  /**
-   * Specify the label for the volume button
-   */
-  volume?: Required<string>;
-}
+export interface VideoProps {
+  src: string;
 
-interface Video {
   /**
    * Specify the strings to be used as labels for the video controls
    */
-  controls?: Required<VideoPlayerControls | false>;
-
-  /**
-   * if self-hosted, specify the url of this video
-   */
-  src?: string | null;
-
-  /**
-   * if there are closed-caption tracks,
-   */
-  tracks?: TracksConfig[];
+  controls?: VideoPlayerControls;
 
   /**
    * if YouTube, set to true
    */
   youtube?: boolean;
-}
-
-export interface VideoProps {
-  /**
-   * Specify the alt for the image
-   */
-  alt: string;
 
   /**
    * Specify the caption for the image/video
@@ -69,9 +32,4 @@ export interface VideoProps {
    * Specify the image src for the image
    */
   poster?: Poster;
-
-  /**
-   * Specify whether there is a video being shown
-   */
-  video: Video;
 }

package/src/components/Video/Video.tsx

@@ -1,29 +1,34 @@
-import { FC } from "react";
+import { forwardRef } from "react";
 import classNames from "classnames";
 import useGlobalSettings from "../../hooks/useGlobalSettings";
 import { VideoProps } from "./Video.props";
 import VideoPlayer from "./VideoPlayer";
+import { VideoPlayerRef } from "./VideoPlayer.props";
 
-const Video: FC<VideoProps> = ({ className, caption, poster, video }) => {
-  const { prefix } = useGlobalSettings();
-  const baseClass = `${prefix}--legacyvideo`;
+const Video = forwardRef<VideoPlayerRef, VideoProps>(
+  ({ className, caption, ...video }, ref) => {
+    const { prefix } = useGlobalSettings();
+    const baseClass = `${prefix}--video`;
 
-  const videoClasses = classNames(className, {
-    [baseClass]: true,
-  });
+    const videoClasses = classNames(className, {
+      [baseClass]: true,
+    });
 
-  const captionClasses = classNames("", {
-    [`${baseClass}--caption`]: true,
-  });
+    const captionClasses = classNames("", {
+      [`${baseClass}--caption`]: true,
+    });
 
-  return (
-    <figure className={videoClasses}>
-      <div className={`${videoClasses}--wrapper`}>
-        {video && <VideoPlayer {...video} poster={poster} />}
-      </div>
-      {caption && <figcaption className={captionClasses}>{caption}</figcaption>}
-    </figure>
-  );
-};
+    return (
+      <figure className={videoClasses}>
+        <div className={`${videoClasses}--wrapper`}>
+          {video && <VideoPlayer {...video} ref={ref} />}
+        </div>
+        {caption && (
+          <figcaption className={captionClasses}>{caption}</figcaption>
+        )}
+      </figure>
+    );
+  }
+);
 
 export default Video;

package/src/components/Video/VideoPlayer.props.ts

@@ -1,5 +1,9 @@
 import { Poster } from "./Video.props";
+import videojs from "video.js";
 
+export interface VideoPlayerRef {
+  player: videojs.Player | undefined;
+}
 export interface VideoPlayerControls {
   /**
    * Specify the label for the fullscreen button
@@ -22,29 +26,9 @@ export interface VideoPlayerControls {
   volume: string;
 }
 
-export interface TracksConfig {
-  /**
-   * is this the default track?
-   */
-  default?: boolean;
-
-  /**
-   * What kind of track is it?
-   */
-  kind?: string;
-
-  /**
-   * url for the track
-   */
-  src?: string;
-
-  /**
-   * language of the track
-   */
-  srcLang?: string;
-}
-
 export interface VideoPlayerProps {
+  src: string;
+
   /**
    * Specify an optional className to be added to your Media.
    */
@@ -53,28 +37,13 @@ export interface VideoPlayerProps {
   /**
    * Specify the strings to be used as labels for the video controls
    */
-  controls?: Required<VideoPlayerControls | false>;
-
-  /**
-   * Specify whether a video is to be shown
-   */
-  hasvideo?: Required<boolean>;
+  controls?: VideoPlayerControls;
 
   /**
    *  poster image for video
    */
   poster?: Poster;
 
-  /**
-   * if self-hosted, specify the url of this video
-   */
-  src?: string | null;
-
-  /**
-   * if there are closed-caption tracks,
-   */
-  tracks?: Required<Array<TracksConfig>> | null;
-
   /**
    * if YouTube, set to true
    */

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

@@ -43,3 +43,4 @@ export { LocalNav } from "./LocalNav";
 export { Navigation } from "./Navigation";
 export { Card, CardGroup } from "./Card";
 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" {}