@ilo-org/react 0.0.1

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,139 @@
+import { FC, useState, useRef } from "react";
+import classNames from "classnames";
+import useGlobalSettings from "../../hooks/useGlobalSettings";
+import { TooltipProps } from "./Tooltip.props";
+import ReactDOM from "react-dom";
+
+const Tooltip: FC<TooltipProps> = ({
+  className,
+  children,
+  icon,
+  label,
+  theme,
+}) => {
+  const { prefix } = useGlobalSettings();
+  const baseClass = `${prefix}--tooltip`;
+  const [isVisible, setIsVisible] = useState<boolean>(false);
+  const [position, setPosition] = useState<{ x: number; y: number }>({
+    x: 0,
+    y: 0,
+  });
+  const [arrowPlacement, setArrowPlacement] = useState<string>("center");
+  const [arrowAlignment, setArrowAlignment] = useState<string>("left");
+
+  const tooltipRef = useRef(null);
+
+  const tooltipClasses = classNames(className, {
+    [baseClass]: true,
+    [`${baseClass}--${theme}`]: theme,
+    [`${baseClass}--alignment-${arrowAlignment}`]: arrowAlignment,
+    [`${baseClass}--visible`]: isVisible,
+  });
+
+  const tooltipArrowClasses = classNames(className, {
+    [`${baseClass}--arrow`]: true,
+    [`${baseClass}--arrow--placement-${arrowPlacement}`]: arrowPlacement,
+  });
+
+  const handleOnMouseOver = (e: any) => {
+    // get hovered element reference
+    const target = e.currentTarget;
+
+    if (target != null) {
+      const rect = target.getBoundingClientRect();
+      setIsVisible(true);
+      postMouseOver(rect);
+    }
+  };
+
+  const postMouseOver = (hoverRect: any) => {
+    // position the tooltip after showing it
+    let placement = "center";
+    let alignment = "left";
+
+    const ttNode = ReactDOM.findDOMNode(tooltipRef.current) as Element;
+    if (ttNode != null) {
+      let x = 0,
+        y = 0;
+
+      const docWidth = document.documentElement.clientWidth,
+        docHeight = document.documentElement.clientHeight;
+
+      const rx = hoverRect.x + hoverRect.width, // most right x
+        lx = hoverRect.x, // most left x
+        ty = hoverRect.y, // most top y
+        by = hoverRect.y + hoverRect.height; // most bottom y
+
+      // tool tip rectange
+      const ttRect = ttNode.getBoundingClientRect();
+
+      const bRight =
+        rx + ttRect.width <= window.scrollX + docWidth &&
+        ty + ttRect.height <= window.scrollY + docHeight;
+      const bLeft =
+        lx - ttRect.width >= 0 &&
+        ty + ttRect.height <= window.scrollY + docHeight;
+      const bAbove = ty - ttRect.height >= 0;
+      const bBellow = by + ttRect.height <= window.scrollY + docHeight;
+
+      // the tooltip doesn't fit to the left
+      if (bRight) {
+        x = hoverRect.width + 16;
+        y = icon ? -8 : 0;
+        placement = "negative";
+        alignment = "right";
+      } else if (bBellow) {
+        x = icon ? -8 : 0;
+        y = hoverRect.height + 16;
+
+        placement = "center";
+        alignment = "bottom";
+      } else if (bLeft) {
+        x = -ttRect.width - 16;
+        y = icon ? -8 : 0;
+
+        placement = "negative";
+        alignment = "left";
+      } else if (bAbove) {
+        x = icon ? -8 : 0;
+        y = -ttRect.height - 16;
+
+        placement = "center";
+        alignment = "top";
+      }
+
+      setPosition({ x: x, y: y });
+      setArrowPlacement(placement);
+      setArrowAlignment(alignment);
+    }
+  };
+
+  const handleOnMouseOut = () => {
+    setIsVisible(false);
+  };
+
+  const style = {
+    // left: ((position.x + window.scrollX) + 'px'),
+    // top: ((position.y + window.scrollY) + 'px')
+    left: position.x + "px",
+    top: position.y + "px",
+  };
+
+  return (
+    <div
+      className={`${baseClass}--wrapper ${icon && "has-icon"}`}
+      onMouseOver={handleOnMouseOver}
+      onFocus={handleOnMouseOver}
+      onMouseOut={handleOnMouseOut}
+      onBlur={handleOnMouseOut}
+    >
+      {!icon && <>{children}</>}
+      <span className={tooltipClasses} style={style} ref={tooltipRef}>
+        <span className={tooltipArrowClasses} role="presentation"></span>
+        {label}
+      </span>
+    </div>
+  );
+};
+
+export default Tooltip;

package/src/components/Tooltip/index.ts

@@ -0,0 +1 @@
+export { default as Tooltip } from "./Tooltip";

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

@@ -0,0 +1,81 @@
+import { VideoProps } from "./Video.props";
+
+const videofile: VideoProps = {
+  alt: "My alt text",
+  className: "image",
+  caption: "my video caption",
+  url: [
+    {
+      breakpoint: 0,
+      src: "https://placekitten.com/g/400/300",
+    },
+    {
+      breakpoint: 800,
+      src: "https://placekitten.com/g/800/600",
+    },
+    {
+      breakpoint: 1200,
+      src: "https://placekitten.com/g/1200/900",
+    },
+    {
+      breakpoint: 1440,
+      src: "https://placekitten.com/g/1600/1200",
+    },
+  ],
+  video: {
+    controls: {
+      fullscreen: "Fullscreen",
+      play: "Play",
+      pause: "Pause",
+      volume: "Volume",
+    },
+    src: "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4",
+    tracks: null,
+    youtube: false,
+  },
+};
+
+const videoyt: VideoProps = {
+  alt: "My alt text",
+  caption: "my video caption",
+  className: "image",
+  url: [
+    {
+      breakpoint: 0,
+      src: "https://placekitten.com/400/300",
+    },
+    {
+      breakpoint: 800,
+      src: "https://placekitten.com/800/600",
+    },
+    {
+      breakpoint: 1200,
+      src: "https://placekitten.com/1200/900",
+    },
+    {
+      breakpoint: 1440,
+      src: "https://placekitten.com/1600/1200",
+    },
+  ],
+  video: {
+    controls: {
+      fullscreen: "Fullscreen",
+      play: "Play",
+      pause: "Pause",
+      volume: "Volume",
+    },
+    src: "https://youtu.be/ombTwldE3Kw",
+    tracks: null,
+    youtube: true,
+  },
+};
+
+/**
+ * Sample prop definitions for Video's enumerable properties (imported in stories and tests).
+ */
+const videoArgs = {
+  videofile,
+  videoyt,
+};
+
+export default videoArgs;

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

@@ -0,0 +1,82 @@
+interface ImageUrl {
+  /**
+   * Specify the breakpoint at which this image src should be used
+   */
+  breakpoint?: number;
+
+  /**
+   * Specify the url of this breakpoint's image src
+   */
+  src?: 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>;
+}
+
+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?: Required<Array<TracksConfig>> | null;
+
+  /**
+   * if YouTube, set to true
+   */
+  youtube?: boolean;
+}
+
+export interface VideoProps {
+  /**
+   * Specify the alt for the image
+   */
+  alt?: Required<string>;
+
+  /**
+   * Specify the caption for the image/video
+   */
+  caption?: string;
+
+  /**
+   * Specify an optional className to be added to your Media.
+   */
+  className?: string;
+
+  /**
+   * Specify the image src for the image
+   */
+  url?: Required<ImgageUrl>;
+
+  /**
+   * Specify whether there is a video being shown
+   */
+  video?: Required<Video>;
+}

package/src/components/Video/Video.tsx

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

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

@@ -0,0 +1,80 @@
+export 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 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 {
+  /**
+   * Specify an optional className to be added to your Media.
+   */
+  className?: string;
+
+  /**
+   * 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>;
+
+  /**
+   *  poster image for video
+   */
+  poster?: Required<Array>;
+
+  /**
+   * 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
+   */
+  youtube?: boolean;
+}

package/src/components/Video/VideoPlayer.tsx

@@ -0,0 +1,285 @@
+import { FC, createRef, 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}--video`;
+
+  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();
+
+  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(videoElement.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);
+  };
+
+  return (
+    <div className={`${baseClass}--container`}>
+      <ReactPlayer
+        className={playerClasses}
+        config={playerconfig as any}
+        loop={false}
+        muted={muted}
+        playing={playing}
+        ref={videoElement}
+        url={src as any}
+        width="100%"
+        height="100%"
+        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}
+        >
+          <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>
+      </div>
+    </div>
+  );
+};
+
+export default VideoPlayer;

package/src/components/Video/index.ts

@@ -0,0 +1 @@
+export { default as Video } from "./Video";