@eluvio/elv-player-js 1.0.140 → 2.0.0

package/lib/ui/TicketForm.jsx

@@ -0,0 +1,147 @@
+import TicketFormStyles from "../static/stylesheets/ticket-form.module.scss";
+
+import React, {useEffect, useState} from "react";
+import {Spinner} from "./Components.jsx";
+
+const TicketForm = ({parameters, dimensions, onComplete}) => {
+  let { tenantId, ntpId, ticketCode, ticketSubject } = (parameters.clientOptions || {});
+
+  // If tenant ID or NTP ID not specified, code cannot be redeemed
+  const invalid = !tenantId || !ntpId;
+
+  const [code, setCode] = useState(ticketCode || "");
+  const [initialCodeSubmitting, setInitialCodeSubmitting] = useState(!!ticketCode);
+  const [submitting, setSubmitting] = useState(false);
+  const [errorMessage, setErrorMessage] = useState(!invalid ? "" : "Error: Tenant ID or NTP ID not specified");
+  const [client, setClient] = useState(undefined);
+
+  const RedeemCode = async ({client, code}) => {
+    if(!code || !client) { return; }
+
+    setErrorMessage("");
+    setSubmitting(true);
+
+    try {
+      let subject = ticketSubject;
+      if(code.includes(":")) {
+        subject = code.split(":")[0];
+        code = code.split(":")[1];
+      }
+
+      await client.RedeemCode({
+        tenantId,
+        ntpId,
+        code: code.trim(),
+        email: subject
+      });
+
+      onComplete(client);
+    } catch(error) {
+      // eslint-disable-next-line no-console
+      console.log(error);
+
+      setErrorMessage("Invalid Code");
+      setInitialCodeSubmitting(false);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  useEffect(() => {
+    // Ticket redemption always uses new client
+    import("@eluvio/elv-client-js")
+      .then(async ({ElvClient}) => {
+        const client = await ElvClient.FromConfigurationUrl({
+          configUrl: parameters.clientOptions.network
+        });
+
+        setClient(client);
+
+        if(ticketCode) {
+          RedeemCode({client, code: ticketCode});
+        }
+      });
+
+
+  }, []);
+
+  if(initialCodeSubmitting) {
+    return (
+      <div
+        role="complementary"
+        tabIndex={-1}
+        style={{
+          backgroundColor: parameters.playerOptions.backgroundColor || "transparent",
+          "--portal-width": `${dimensions.width}px`,
+          "--portal-height": `${dimensions.height}px`
+        }}
+        className={[TicketFormStyles["ticket-form-container"], TicketFormStyles[`size-${dimensions.size}`], TicketFormStyles[`orientation-${dimensions.orientation}`]].join(" ")}
+      >
+        <div className={TicketFormStyles["ticket-form-overlay"]}>
+          <Spinner className={TicketFormStyles["spinner"]} />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      role="complementary"
+      tabIndex={-1}
+      style={{
+        backgroundColor: parameters.playerOptions.backgroundColor || "transparent",
+        "--portal-width": `${dimensions.width}px`,
+        "--portal-height": `${dimensions.height}px`
+      }}
+      className={[TicketFormStyles["ticket-form-container"], TicketFormStyles[`size-${dimensions.size}`], TicketFormStyles[`orientation-${dimensions.orientation}`]].join(" ")}
+    >
+      <div className={TicketFormStyles["ticket-form-overlay"]}>
+        <form
+          onSubmit={event => {
+            event.preventDefault();
+            RedeemCode({client, code});
+          }}
+          className={TicketFormStyles["ticket-form"]}
+        >
+          <div className={TicketFormStyles["text"]}>
+            <h2 className={TicketFormStyles["title"]}>
+              { parameters.clientOptions.ticketTitle || "This content requires a code to view" }
+            </h2>
+            <p className={TicketFormStyles["description"]}>
+              { parameters.clientOptions.ticketDescription || "Please enter your code below" }
+            </p>
+          </div>
+          <div className={TicketFormStyles["inputs"]}>
+            <input
+              disabled={invalid}
+              autoFocus
+              type="text"
+              placeholder="Ticket Code"
+              value={code}
+              aria-label="Ticket Code"
+              aria-invalid={!!errorMessage && !invalid}
+              aria-errormessage={errorMessage}
+              onKeyDown={event => event.key === "Enter" && RedeemCode({client, code})}
+              onChange={event => {
+                setErrorMessage("");
+                setCode(event.target.value);
+              }}
+              className={TicketFormStyles["input"]}
+            />
+            <button
+              type="submit"
+              aria-label="Submit Code"
+              disabled={!code || !client || invalid}
+              className={TicketFormStyles["submit"]}
+            >
+              { submitting ? <Spinner light /> : "Submit" }
+            </button>
+          </div>
+          <div className={TicketFormStyles["error-message"]}>{ errorMessage } </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default TicketForm;

package/lib/ui/WebControls.jsx

@@ -0,0 +1,290 @@
+import ControlStyles from "../static/stylesheets/controls-web.module.scss";
+
+// eslint-disable-next-line no-unused-vars
+import React, {useEffect, useState} from "react";
+import * as Icons from "../static/icons/Icons.js";
+import {ObserveVideo, ObserveVideoTime} from "./Observers.js";
+import "focus-visible";
+import {ImageUrl, PlayerClick, Time} from "./Common.js";
+import EluvioPlayerParameters from "../player/PlayerParameters.js";
+
+import EluvioLogo from "../static/images/Logo.png";
+import {CollectionMenu, SeekBar, SettingsMenu, VolumeControls} from "./Components.jsx";
+
+export const IconButton = ({icon, ...props}) => {
+  return (
+    <button {...props} className={`${ControlStyles["icon-button"]} ${props.className || ""}`} dangerouslySetInnerHTML={{__html: icon}} />
+  );
+};
+
+const TimeIndicator = ({player, videoState}) => {
+  const [currentTime, setCurrentTime] = useState(player.video.currentTime);
+
+  useEffect(() => {
+    const disposeVideoTimeObserver = ObserveVideoTime({video: player.video, setCurrentTime, rate: 10});
+
+    return () => disposeVideoTimeObserver && disposeVideoTimeObserver();
+  }, []);
+
+  if(player.isLive) {
+    return (
+      <div className={ControlStyles["live-indicator"]}>
+        Live
+      </div>
+    );
+  }
+
+  return (
+    <div className={ControlStyles["time"]}>
+      { Time(currentTime, videoState.duration) } / { Time(videoState.duration, videoState.duration) }
+    </div>
+  );
+};
+
+const CollectionControls = ({player}) => {
+  const collectionInfo = player.controls.GetCollectionInfo();
+
+  if(!collectionInfo || collectionInfo.mediaLength === 0 || !collectionInfo.isPlaylist) { return null; }
+
+  const previousMedia = collectionInfo.content[collectionInfo.mediaIndex - 1];
+  const nextMedia = collectionInfo.content[collectionInfo.mediaIndex + 1];
+
+  const playerReady = player.controls.IsReady();
+  return (
+      <>
+        {
+          !previousMedia ? null :
+            <div
+              key={`media-previous-${collectionInfo.mediaIndex}`}
+              className={`${ControlStyles["collection-button-container"]} ${!playerReady ? ControlStyles["collection-button-container--loading"] : ""}`}
+            >
+              <IconButton aria-label={`Play Previous: ${previousMedia.title}`} disabled={!playerReady} icon={Icons.PreviousTrackIcon} onClick={() => player.controls.CollectionPlayPrevious()} />
+              <div className={ControlStyles["collection-button-text"]}>{ previousMedia.title }</div>
+            </div>
+        }
+        {
+          !nextMedia ? null :
+            <div
+              key={`media-next-${collectionInfo.mediaIndex}`}
+              className={`${ControlStyles["collection-button-container"]} ${!playerReady ? ControlStyles["collection-button-container--loading"] : ""}`}
+            >
+              <IconButton aria-label={`Play Next: ${nextMedia.title}`} disabled={!playerReady} icon={Icons.NextTrackIcon} onClick={() => player.controls.CollectionPlayNext()} />
+              <div className={ControlStyles["collection-button-text"]}>{ nextMedia.title }</div>
+            </div>
+        }
+      </>
+  );
+};
+
+const MenuButton = ({label, icon, player, setMenuActive, MenuComponent}) => {
+  const [show, setShow] = useState(false);
+
+  return (
+    <div className={ControlStyles["menu-control-container"]}>
+      <IconButton
+        aria-label={show ? `Hide ${label} Menu` : label}
+        aria-haspopup
+        icon={icon}
+        onClick={() => {
+          setMenuActive(!show);
+          setShow(!show);
+        }}
+        className={show ? ControlStyles["icon-button-active"] : ""}
+      />
+      {
+        !show ? null :
+          <MenuComponent
+            player={player}
+            Hide={() => {
+              setShow(false);
+              setMenuActive(false);
+            }}
+          />
+      }
+    </div>
+  );
+};
+
+const ContentInfo = ({player}) => {
+  const [imageUrl, setImageUrl] = useState(undefined);
+
+  const { title, subtitle, description, image, headers } = (player.controls.GetContentInfo() || {});
+
+  useEffect(() => {
+    setImageUrl(undefined);
+
+    if(!image) { return; }
+
+    ImageUrl({player, pathOrUrl: image, width: 200})
+      .then(imageUrl => setImageUrl(imageUrl));
+  }, [image]);
+
+  if(
+    !title ||
+    (player.playerOptions.title === EluvioPlayerParameters.title.FULLSCREEN_ONLY && !player.controls.IsFullscreen()) ||
+    player.playerOptions.title === EluvioPlayerParameters.title.OFF
+  ) {
+    return null;
+  }
+
+  return (
+    <div className={ControlStyles["info-container"]}>
+      {
+        !imageUrl ? null :
+          <div className={ControlStyles["info-image-container"]}>
+            <img src={imageUrl} alt="Image" className={ControlStyles["info-image"]} />
+          </div>
+      }
+      <div className={ControlStyles["info-text"]}>
+        {
+          headers.length === 0 ? null :
+            <div className={ControlStyles["info-headers"]}>
+              {headers.map((text, index) =>
+                <div key={`header-${index}`} className={ControlStyles["info-header"]}>
+                  { text }
+                </div>
+              )}
+            </div>
+        }
+        { !title ? null : <div className={ControlStyles["info-title"]}>{title}</div> }
+        { !subtitle ? null : <div className={ControlStyles["info-subtitle"]}>{subtitle}</div> }
+        { !description ? null : <div className={ControlStyles["info-description"]}>{description}</div> }
+      </div>
+    </div>
+  );
+};
+
+const WebControls = ({player, playbackStarted, canPlay, recentlyInteracted, setRecentUserAction, className=""}) => {
+  const [videoState, setVideoState] = useState(undefined);
+  const [playerClickHandler, setPlayerClickHandler] = useState(undefined);
+  const [activeMenus, setActiveMenus] = useState(0);
+
+  useEffect(() => {
+    setPlayerClickHandler(PlayerClick({player, setRecentUserAction}));
+
+    const disposeVideoObserver = ObserveVideo({target: player.target, video: player.video, setVideoState});
+
+    return () => disposeVideoObserver && disposeVideoObserver();
+  }, []);
+
+  if(!videoState) { return null; }
+
+  const collectionInfo = player.controls.GetCollectionInfo();
+  const menuActive = activeMenus > 0;
+  const setMenuActive = active => setActiveMenus(active ? activeMenus + 1 : Math.max(0, activeMenus - 1));
+
+  // Title autohide is not dependent on controls settings
+  const showUI = recentlyInteracted || !playbackStarted || menuActive;
+  const hideControls = !showUI && player.playerOptions.controls === EluvioPlayerParameters.controls.AUTO_HIDE;
+
+  player.__SetControlsVisibility(!hideControls);
+
+  return (
+    <div
+      onClick={playerClickHandler}
+      className={[
+        className,
+        ControlStyles["container"],
+        showUI ? "" : ControlStyles["autohide"],
+        player.playerOptions.controls !== EluvioPlayerParameters.controls.DEFAULT ? "" : ControlStyles["container--default-controls"],
+        menuActive ? "menu-active" : ""
+      ].join(" ")}
+    >
+      <ContentInfo key={`content-info-${collectionInfo && collectionInfo.mediaIndex}`} player={player} />
+      {
+        // Main bottom control bar
+        [
+          EluvioPlayerParameters.controls.DEFAULT,
+          EluvioPlayerParameters.controls.OFF,
+          EluvioPlayerParameters.controls.OFF_WITH_VOLUME_TOGGLE
+        ].includes(player.playerOptions.controls) ? null :
+          <>
+            <IconButton
+              aria-label="Play"
+              tabIndex={playbackStarted ? -1 : 0}
+              icon={Icons.CenterPlayCircleIcon}
+              onClick={() => {
+                player.controls.Play();
+                // Take focus off of this button because it should no longer be selectable after playback starts
+                player.target.firstChild.focus();
+              }}
+              className={`${ControlStyles["center-play-button"]} ${canPlay && !playbackStarted ? "" : ControlStyles["center-play-button--hidden"]}`}
+            />
+            <div className={`${ControlStyles["bottom-controls-container"]} ${hideControls ? ControlStyles["bottom-controls-container--autohide"] : ""}`}>
+              <div className={ControlStyles["bottom-controls-gradient"]} />
+              <SeekBar player={player} videoState={videoState} setRecentUserAction={setRecentUserAction} className={ControlStyles["seek"]} />
+              <div className={ControlStyles["controls"]}>
+                <IconButton
+                  aria-label={videoState.playing ? "Pause" : "Play"}
+                  icon={videoState.playing ? Icons.PauseCircleIcon : Icons.PlayCircleIcon}
+                  onClick={() => player.controls.TogglePlay()}
+                  className={ControlStyles["play-pause-button"]}
+                />
+                <CollectionControls player={player} />
+                <VolumeControls player={player} videoState={videoState} />
+                <TimeIndicator player={player} videoState={videoState}/>
+
+                <div className={ControlStyles["spacer"]}/>
+
+                {
+                  !collectionInfo ? null :
+                    <MenuButton
+                      label="Collection Menu"
+                      icon={Icons.CollectionIcon}
+                      player={player}
+                      setMenuActive={setMenuActive}
+                      MenuComponent={CollectionMenu}
+                    />
+                }
+                {
+                  !player.controls.IsRotatable() ? null :
+                    <IconButton
+                      aria-label="Rotate Video"
+                      icon={Icons.RotateIcon}
+                      onClick={() => player.controls.SetAllowRotation(!player.controls.AllowRotation())}
+                    />
+                }
+                {
+                  !player.controls.GetOptions().hasAnyOptions ? null :
+                    <MenuButton
+                      label="Settings Menu"
+                      icon={Icons.SettingsIcon}
+                      player={player}
+                      setMenuActive={setMenuActive}
+                      MenuComponent={SettingsMenu}
+                    />
+                }
+                <IconButton
+                  aria-label={videoState.fullscreen ? "Exit Fullscreen" : "Fullscreen"}
+                  icon={videoState.fullscreen ? Icons.ExitFullscreenIcon : Icons.FullscreenIcon}
+                  onClick={() => player.controls.ToggleFullscreen()}
+                />
+              </div>
+            </div>
+          </>
+      }
+      {
+        // Floating volume control for 'off with volume toggle' setting
+        player.playerOptions.controls !== EluvioPlayerParameters.controls.OFF_WITH_VOLUME_TOGGLE ? null :
+          <div className={ControlStyles["floating-volume-toggle"]}>
+            <IconButton
+              key="mute-button"
+              aria-label={videoState.muted ? "Unmute" : "Mute"}
+              icon={videoState.muted || videoState.volume === 0 ? Icons.MutedIcon : Icons.VolumeHighIcon}
+              onClick={() => player.controls.ToggleMuted()}
+              className={ControlStyles["volume-button"]}
+            />
+          </div>
+      }
+      {
+        // Watermark
+        player.playerOptions.watermark === EluvioPlayerParameters.watermark.OFF ? null :
+          <div className={ControlStyles["watermark"]}>
+            <img src={EluvioLogo} alt="Eluvio" />
+          </div>
+      }
+    </div>
+  );
+};
+
+export default WebControls;

package/package.json

@@ -1,25 +1,26 @@
 {
   "name": "@eluvio/elv-player-js",
-  "version": "1.0.140",
-  "description": "![Eluvio Logo](src/static/images/Logo.png \"Eluvio Logo\")",
-  "main": "src/index.js",
+  "version": "2.0.0",
+  "description": "![Eluvio Logo](lib/static/images/Logo.png \"Eluvio Logo\")",
+  "main": "lib/index.js",
   "license": "MIT",
   "homepage": "https://github.com/eluv-io/elv-player-js",
   "scripts": {
+    "prepublishOnly": "npm run build",
     "bump-version": "npm --git-tag-version --no-commit-hooks version patch",
-    "serve": "TEST_PAGE=true webpack-dev-server --hot --port 8089 --host=0.0.0.0",
-    "serve-example": "EXAMPLE_PAGE=true webpack-dev-server --hot --port 8089 --host=0.0.0.0",
-    "build": "BUILD_LIBRARY=true node ./node_modules/webpack-cli/bin/cli.js --mode=production --devtool false",
-    "build-test": "TEST_PAGE=true node ./node_modules/webpack-cli/bin/cli.js --mode=production --devtool false",
-    "build-example": "EXAMPLE_PAGE=true node ./node_modules/webpack-cli/bin/cli.js --mode=production --devtool false",
-    "build-analyze": "ANALYZE_BUNDLE=true node ./node_modules/webpack-cli/bin/cli.js --mode=production --devtool false",
-    "build-icons": "node src/BuildIcons.js",
-    "lint": "npm run fix-scss ; npm run lint-scss ; npm run fix-js",
+    "serve": "vite --host 0.0.0.0 --port 8089",
+    "serve-https": "SERVE_HTTPS=true vite --host 0.0.0.0 --port 8089",
+    "build": "npm run build-icons ; vite build",
+    "build-analyze": "vite-bundle-visualizer",
+    "build-docs": "./node_modules/.bin/jsdoc --configure ./.jsdoc.json --readme README.md",
+    "preview": "vite preview",
+    "build-icons": "node lib/ui/BuildIcons.cjs",
+    "lint": "npm run fix-scss ; npm run fix-js",
     "lint-show": "npm run lint-scss ; npm run lint-js",
-    "lint-js": "eslint \"src/**/*.js\"",
-    "lint-scss": "./node_modules/sass-lint/bin/sass-lint.js -c .scss-lint.yml -v -q",
+    "lint-js": "eslint \"lib/**/*.js\"",
+    "lint-scss": "npx stylelint \"lib/**/*.css\" \"lib/**/*.module.scss\"",
     "fix-js": "npm run lint-js -- --fix",
-    "fix-scss": "./node_modules/sass-lint-auto-fix/dist/index.js"
+    "fix-scss": "npx stylelint --fix \"lib/**/*.css\" \"lib/**/*.module.scss\""
   },
   "pre-commit": {
     "run": [
@@ -28,54 +29,41 @@
   },
   "files": [
     "/dist",
-    "/src",
+    "/lib",
     "LICENSE",
     "README.md",
     "package.json",
-    "package-lock.json",
-    "webpack.config.js"
+    "package-lock.json"
   ],
   "dependencies": {
     "@eluvio/elv-client-js": "^4.0.76",
     "dashjs": "~4.7.0",
     "focus-visible": "^5.2.0",
     "hls.js": "~1.4.12",
-    "lodash": "^4.17.21",
     "mux-embed": "^4.30.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "resize-observer-polyfill": "^1.5.1",
     "url-join": "^4.0.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.0",
-    "@babel/preset-env": "^7.22.20",
-    "@babel/preset-react": "^7.22.15",
-    "@babel/runtime": "^7.23.1",
+    "@vitejs/plugin-basic-ssl": "^1.1.0",
+    "@vitejs/plugin-react-swc": "^3.5.0",
     "autoprefixer": "^10.4.16",
-    "babel-cli": "^6.26.0",
-    "babel-core": "^7.0.0-bridge.0",
-    "babel-eslint": "^10.0.1",
-    "babel-loader": "^9.1.3",
-    "css-loader": "^6.8.1",
-    "eslint": "^5.16.0",
-    "eslint-plugin-react": "^7.12.4",
-    "html-webpack-plugin": "^5.5.3",
-    "postcss-loader": "^7.3.3",
-    "regenerator-runtime": "^0.12.1",
-    "sass": "^1.69.2",
-    "sass-lint": "^1.13.1",
-    "sass-lint-auto-fix": "^0.21.0",
-    "sass-loader": "^13.3.2",
-    "stream-browserify": "^3.0.0",
-    "style-loader": "^3.3.3",
-    "svg-inline-loader": "^0.8.0",
-    "svg-inline-react": "^3.1.0",
-    "url": "^0.11.3",
-    "uuid": "^7.0.2",
-    "webpack": "^5.88.2",
-    "webpack-bundle-analyzer": "^4.9.1",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1",
-    "yaml-loader": "^0.8.0"
+    "babel-eslint": "^10.1.0",
+    "eslint": "^8.56.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "jsdoc": "^4.0.0",
+    "stylelint": "^16.2.0",
+    "stylelint-config-standard": "^36.0.0",
+    "stylelint-order": "^6.0.4",
+    "stylelint-scss": "^6.1.0",
+    "taffydb": "^2.7.3",
+    "vite": "^5.0.11",
+    "vite-bundle-visualizer": "^1.0.0",
+    "vite-plugin-svgr": "^4.2.0"
   },
   "directories": {
     "test": "test"