@quintype/arrow 3.54.1-debug-full-bleed.4 → 3.54.1-version-upgrade.1

package/src/components/Atoms/AudioPlayer/PlayerBase.js

@@ -0,0 +1,150 @@
+import React, { useEffect, useRef, useState } from "react";
+import {
+  PlayIcon,
+  PauseIcon,
+  ForwardIcon,
+  BackwardIcon,
+  ClosePlayerIcon,
+  ReplayPlayerIcon,
+  SpeedSelector
+} from "./PlayerControls";
+import { ProgressBar } from "./ProgressBar";
+import PropTypes from "prop-types";
+import "./audio.m.css";
+
+export function AudioPlayerBase({
+  audioUrl = "",
+  setListenMode,
+  listenButtonTitle = "",
+  playBackSpeedTitle = "",
+  enableDarkMode
+}) {
+  const audioRef = useRef(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [playbackRate, setPlaybackRate] = useState("1.0");
+  const [progress, setProgress] = useState(0);
+  const [rePlay, setReplay] = useState(false);
+
+  const handlePlayPause = () => {
+    if (isPlaying) audioRef.current.pause();
+    else {
+      audioRef.current.play();
+      setReplay(false);
+    }
+    setIsPlaying(!isPlaying);
+  };
+
+  const handleBackward = () => {
+    const audio = audioRef.current;
+    audio.currentTime = Math.max(0, audio.currentTime - 10);
+    setReplay(false);
+  };
+
+  const handleForward = () => {
+    const audio = audioRef.current;
+    audio.currentTime = Math.min(audio.duration, audio.currentTime + 10);
+    if (audio.currentTime >= audio.duration) {
+      setReplay(true);
+      setIsPlaying(false);
+    }
+  };
+
+  const handleSpeedChange = (speed) => {
+    setPlaybackRate(speed);
+    audioRef.current.playbackRate = speed;
+  };
+
+  const handleTimeUpdate = () => {
+    const audio = audioRef.current;
+    setProgress((audio.currentTime / audio.duration) * 100);
+  };
+
+  const handleSeek = (e) => {
+    const audio = audioRef.current;
+    if (audio) {
+      const newTime = (e.target.value / 100) * audio.duration;
+      audio.currentTime = newTime;
+      if (audio.currentTime === audio.duration) setReplay(true);
+      else if (audio.currentTime < audio.duration) setReplay(false);
+    }
+    setProgress(e.target.value);
+  };
+
+  const handleReplay = () => {
+    const audio = audioRef.current;
+    if (audio) {
+      audio.currentTime = 0;
+      setProgress(0);
+      setIsPlaying(true);
+      audio.play();
+      setReplay(false);
+    }
+  };
+
+  useEffect(() => {
+    if (audioRef && audioRef.current) {
+      setIsPlaying(true);
+      audioRef.current.play();
+    }
+  }, []);
+
+  const playerTrackStyle = enableDarkMode ? "player-track-dark" : "player-track";
+
+  return (
+    <div styleName="player-container" data-test-id="audio-player">
+      <audio
+        ref={audioRef}
+        src={audioUrl}
+        onTimeUpdate={handleTimeUpdate}
+        onEnded={() => {
+          setIsPlaying(false);
+          setReplay(true);
+        }}
+      />
+      <div styleName="player-controls">
+        <PlayerTitle listenButtonTitle={listenButtonTitle} />
+        <div styleName="playback-controls">
+          <div styleName="backward-forward-controls">
+            <BackwardIcon handleBackward={handleBackward} isDarkMode={enableDarkMode} />
+            <ForwardIcon handleForward={handleForward} isDarkMode={enableDarkMode} />
+          </div>
+          <SpeedSelector
+            playbackRate={playbackRate}
+            handleSpeedChange={handleSpeedChange}
+            playBackSpeedTitle={playBackSpeedTitle}
+            isDarkMode={enableDarkMode}
+          />
+        </div>
+      </div>
+      <div styleName={playerTrackStyle}>
+        {isPlaying ? (
+          <PauseIcon handlePlayPause={handlePlayPause} isDarkMode={enableDarkMode} />
+        ) : (
+          <PlayIcon handlePlayPause={handlePlayPause} isDarkMode={enableDarkMode} />
+        )}
+        <ProgressBar progress={progress} handleSeek={handleSeek} isDarkMode={enableDarkMode} />
+        {rePlay ? (
+          <ReplayPlayerIcon isDarkMode={enableDarkMode} callBack={handleReplay} />
+        ) : (
+          <ClosePlayerIcon callBack={setListenMode} isDarkMode={enableDarkMode} />
+        )}
+      </div>
+    </div>
+  );
+}
+
+function PlayerTitle({ listenButtonTitle = "" }) {
+  return <div styleName="player-title">{listenButtonTitle || "Listen to this article"}</div>;
+}
+
+AudioPlayerBase.propTypes = {
+  audioUrl: PropTypes.string,
+  setListenMode: PropTypes.func,
+  listenButtonTitle: PropTypes.string,
+  playBackSpeedTitle: PropTypes.string,
+  enableDarkMode: PropTypes.bool
+};
+
+PlayerTitle.propTypes = {
+  listenButtonTitle: PropTypes.string
+};

package/src/components/Atoms/AudioPlayer/PlayerControls.js

@@ -0,0 +1,155 @@
+import React, { useState } from "react";
+import { ForwardSvgIcon } from "../../Svgs/TTS-Icons/ForwordIconSvg";
+import { BackwardSvgIcon } from "../../Svgs/TTS-Icons/BackwardIconSvg";
+import { CloseIcon } from "../../Svgs/TTS-Icons/ClosePlayerIconSvg";
+import { PlaySvgIcon } from "../../Svgs/TTS-Icons/PlayIconSvg";
+import { PauseSvgIcon } from "../../Svgs/TTS-Icons/PauseIconSvg";
+import { ReplaySvgIcon } from "../../Svgs/TTS-Icons/ReplayIcon";
+import { useSelector } from "react-redux";
+import get from "lodash.get";
+import PropTypes from "prop-types";
+import "./audio.m.css";
+
+export function SpeedSelector({ playbackRate, handleSpeedChange, playBackSpeedTitle = "", isDarkMode }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const speedSelectorStyleName = isDarkMode ? "playback-speed-container-dark" : "playback-speed-container";
+  return (
+    <div styleName={`hover-pointer ${speedSelectorStyleName}`} onClick={() => setIsOpen(!isOpen)} data-test-id="audio-player-speed">
+      <div>{playbackRate}x</div>
+      {isOpen && (
+        <div styleName="playback-speed-select">
+          <CustomSelect
+            playBackSpeedTxt={playBackSpeedTitle}
+            handleSpeedChange={handleSpeedChange}
+            playbackRate={playbackRate}
+            isDarkMode={isDarkMode}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function CustomSelect({ playBackSpeedTxt, handleSpeedChange, playbackRate, isDarkMode }) {
+  const speeds = ["0.25", "0.50", "0.75", "1.0", "1.25", "1.50", "1.75", "2.0"];
+  const selectedIndex = speeds.findIndex((speed) => playbackRate == parseFloat(speed));
+  const popupBg = isDarkMode ? "popup-dark" : "popup";
+  const { primaryColor = "", darkPrimaryColor = "" } = useSelector((state) =>
+    get(state, ["qt", "config", "pagebuilder-config", "general"], {})
+  );
+  const selectedSpeedColor = isDarkMode ? darkPrimaryColor : primaryColor;
+
+  return (
+    <div styleName={popupBg} data-test-id="audio-speed-popup">
+      <div styleName="popup-title-container">
+        <div styleName="popup-title">{playBackSpeedTxt || "Playback Speed"}</div>
+        <ClosePlayerIcon isDarkMode={isDarkMode} />
+      </div>
+      <div styleName="separator"></div>
+      <ul styleName="speed-list">
+        {speeds.map((speed, index) => (
+          <li
+            onClick={() => handleSpeedChange(speeds[index])}
+            styleName={isDarkMode ? "speed-list-item-dark" : "speed-list-item"}
+            style={{ color: selectedIndex === index ? selectedSpeedColor : "" }}
+            key={"item" + index}>
+            {" "}
+            {speed}{" "}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export function BackwardIcon({ handleBackward, isDarkMode }) {
+  return (
+    <div onClick={handleBackward} styleName="backward-icon hover-pointer" data-test-id="audio-backward">
+      <BackwardSvgIcon isDarkMode={isDarkMode} />
+    </div>
+  );
+}
+
+export function ForwardIcon({ handleForward, isDarkMode }) {
+  return (
+    <div onClick={handleForward} styleName="forward-icon hover-pointer" data-test-id="audio-forward">
+      <ForwardSvgIcon isDarkMode={isDarkMode} />
+    </div>
+  );
+}
+
+export function PlayIcon({ handlePlayPause, isDarkMode }) {
+  return (
+    <div onClick={handlePlayPause} styleName="hover-pointer play-icon" data-test-id="audio-play">
+      <PlaySvgIcon isDarkMode={isDarkMode} />
+    </div>
+  );
+}
+
+export function PauseIcon({ handlePlayPause, isDarkMode }) {
+  return (
+    <div onClick={handlePlayPause} styleName="hover-pointer pause-icon" data-test-id="audio-pause">
+      <PauseSvgIcon isDarkMode={isDarkMode} />
+    </div>
+  );
+}
+
+export function ClosePlayerIcon({ callBack = (value) => null, isDarkMode }) {
+  return (
+    <div onClick={() => callBack(false)} styleName="close-icon hover-pointer" data-test-id="audio-close">
+      <CloseIcon isDarkMode={isDarkMode} />
+    </div>
+  );
+}
+
+export function ReplayPlayerIcon({ callBack = (value) => null, isDarkMode }) {
+  return (
+    <div onClick={() => callBack(false)} styleName="close-icon hover-pointer" data-test-id="audio-replay">
+      <ReplaySvgIcon isDarkMode={isDarkMode} />
+    </div>
+  );
+}
+
+SpeedSelector.propTypes = {
+  playbackRate: PropTypes.number,
+  handleSpeedChange: PropTypes.func,
+  playBackSpeedTitle: PropTypes.string,
+  isDarkMode: PropTypes.bool
+};
+
+CustomSelect.propTypes = {
+  playbackRate: PropTypes.number,
+  handleSpeedChange: PropTypes.func,
+  playBackSpeedTxt: PropTypes.string,
+  isDarkMode: PropTypes.bool
+};
+
+BackwardIcon.propTypes = {
+  handleBackward: PropTypes.func,
+  isDarkMode: PropTypes.bool
+};
+
+ForwardIcon.propTypes = {
+  handleForward: PropTypes.func,
+  isDarkMode: PropTypes.bool
+};
+
+PlayIcon.propTypes = {
+  handlePlayPause: PropTypes.func,
+  isDarkMode: PropTypes.bool
+};
+
+PauseIcon.propTypes = {
+  handlePlayPause: PropTypes.func,
+  isDarkMode: PropTypes.bool
+};
+
+ClosePlayerIcon.propTypes = {
+  callBack: PropTypes.func,
+  isDarkMode: PropTypes.bool
+};
+
+ReplayPlayerIcon.propTypes = {
+  callBack: PropTypes.func,
+  isDarkMode: PropTypes.bool
+};

package/src/components/Atoms/AudioPlayer/ProgressBar.js

@@ -0,0 +1,24 @@
+import React, { useRef, useLayoutEffect } from "react";
+import "./progressbar.m.css";
+
+export function ProgressBar({ progress, handleSeek, isDarkMode }) {
+  const sliderRef = useRef();
+
+  useLayoutEffect(() => {
+    const sliderEl = sliderRef.current;
+    const sliderValue = sliderEl?.value;
+    if (sliderValue) {
+      sliderEl.style.background = isDarkMode
+        ? `linear-gradient(to right, #ccc ${sliderValue}%, #000000 ${sliderValue}%)`
+        : `linear-gradient(to right, #000000 ${sliderValue}%, #ccc ${sliderValue}%)`;
+    }
+  }, [progress]);
+
+  const progressBarStyle = isDarkMode ? "progress-bar-dark" : "progress-bar";
+
+  return (
+    <div styleName={progressBarStyle}>
+      <input ref={sliderRef} type="range" min="0" max="100" value={progress} onChange={handleSeek} />
+    </div>
+  );
+}

package/src/components/Atoms/AudioPlayer/audio.m.css

@@ -0,0 +1,201 @@
+.audio-prompt-dark,
+.audio-prompt {
+  display: flex;
+  width: fit-content;
+  height: var(--arrow-spacing-40);
+  padding: var(--arrow-spacing-xs) 14px;
+  justify-content: space-evenly;
+  align-items: center;
+  border-radius: var(--arrow-spacing-40);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  margin-top: var(--arrow-spacing-xs);
+  margin-bottom: var(--arrow-spacing-m);
+}
+
+.audio-prompt-dark {
+  background-color: rgba(255, 255, 255, 0.02);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.hover-pointer {
+  cursor: pointer;
+}
+
+.audio-prompt-title {
+  font-weight: var(--arrow-fw-semi-bold);
+  font-size: var(--arrow-fs-tiny);
+  font-family: var(--arrow-typeface-secondary);
+  margin-left: var(--arrow-spacing-xxs);
+}
+
+.dark {
+  color: var(--arrow-c-mono1);
+}
+
+.light {
+  color: var(--arrow-c-invert-mono1);
+}
+
+.audio-container {
+  width: var(--arrow-fw-500);
+  height: var(--arrow-fw-500);
+}
+
+.player-controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--arrow-fs-xs);
+  margin-top: var(--arrow-fs-big);
+}
+
+.playback-controls {
+  display: flex;
+  align-items: center;
+}
+
+.backward-forward-controls {
+  display: flex;
+  margin-right: var(--arrow-spacing-l);
+}
+
+.close-icon {
+  margin-right: var(--arrow-spacing-s);
+}
+
+.close-icon,
+.play-icon,
+.pause-icon {
+  flex-shrink: 0;
+  display: flex;
+}
+
+.pause-icon,
+.play-icon {
+  margin-left: var(--arrow-spacing-s);
+}
+
+.player-track-dark,
+.player-track {
+  display: flex;
+  align-items: center;
+  border-radius: var(--arrow-spacing-xxs);
+  height: 56px;
+  border: 0.8px solid rgba(0, 0, 0, 0.08);
+  background-color: #ffffff12;
+}
+
+.player-track-dark {
+  background-color: rgba(255, 255, 255, 0.16);
+}
+
+.player-title {
+  color: "#000000";
+  font-size: var(--arrow-fs-xs);
+  font-weight: var(--arrow-fw-semi-bold);
+  font-family: var(--arrow-typeface-secondary);
+}
+
+.playback-speed-container-dark,
+.playback-speed-container {
+  width: 38px;
+  height: 22px;
+  background-color: #ebebeb;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: var(--arrow-spacing-xxxs);
+  position: relative;
+  font-size: small;
+  border-radius: var(--arrow-spacing-xxs);
+}
+
+.playback-speed-container-dark {
+  background-color: rgba(209, 209, 209, 0.2);
+}
+
+.playback-speed-select {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 2;
+}
+
+.popup-dark,
+.popup {
+  background: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  padding: var(--arrow-spacing-20);
+  border-radius: var(--arrow-spacing-xs);
+  box-shadow: 0px var(--arrow-spacing-xxs) var(--arrow-spacing-l) 0px rgba(0, 0, 0, 0.08);
+  text-align: center;
+  width: 360px;
+  height: 390px;
+
+  @media (max-width: 768px) {
+    width: 84%;
+  }
+}
+
+.popup-dark {
+  background: rgba(0, 0, 0, 0.8);
+}
+
+.popup-title-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.popup-title {
+  font-weight: var(--arrow-fw-bold);
+  text-align: left;
+  font-size: var(--arrow-fs-xs);
+}
+
+.separator {
+  height: 1px;
+  background: rgba(0, 0, 0, 0.14);
+  margin: 10px 0;
+}
+
+.speed-list {
+  text-align: left;
+  list-style-type: none;
+}
+
+.speed-list-item-dark,
+.speed-list-item {
+  padding: var(--arrow-spacing-xs) 0;
+  margin-bottom: var(--arrow-spacing-xs);
+}
+
+.speed-list-item:hover {
+  color: rgba(0, 0, 0, 0.5);
+}
+
+.speed-list-item-dark:hover {
+  color: rgba(255, 255, 255, 0.2);
+}
+
+.player-container {
+  max-width: 100%;
+  margin-bottom: var(--arrow-spacing-m);
+}
+
+.forward-icon {
+  width: var(--arrow-spacing-xl);
+  height: var(--arrow-spacing-xl);
+}
+
+.backward-icon {
+  width: var(--arrow-spacing-xl);
+  height: var(--arrow-spacing-xl);
+  margin-right: 18px;
+}

package/src/components/Atoms/AudioPlayer/index.js

@@ -0,0 +1,59 @@
+import React, { useState } from "react";
+import { AudioSpeakerIcon } from "../../Svgs/TTS-Icons/AudioSpeakerIcon";
+import { AudioPlayerBase } from "./PlayerBase";
+import "./audio.m.css";
+import PropTypes from "prop-types";
+import { useStateValue } from "../../SharedContext";
+import { getTextColor } from "../../../utils/utils";
+
+export function AudioPlayer({ audioUrl = "", enableDarkMode = false, listenButtonTitle, playBackSpeedTitle }) {
+  const [listenMode, setListenMode] = useState(false);
+  const config = useStateValue() || {};
+
+  return (
+    <>
+      {listenMode ? (
+        <AudioPlayerBase
+          setListenMode={setListenMode}
+          audioUrl={audioUrl}
+          listenButtonTitle={listenButtonTitle}
+          playBackSpeedTitle={playBackSpeedTitle}
+          enableDarkMode={enableDarkMode}
+        />
+      ) : (
+        <TtsCTAText
+          setListenMode={setListenMode}
+          listenButtonTitle={listenButtonTitle}
+          enableDarkMode={enableDarkMode}
+          config={config}
+        />
+      )}
+    </>
+  );
+}
+
+function TtsCTAText({ setListenMode, listenButtonTitle, enableDarkMode, config }) {
+  const styleName = enableDarkMode ? "audio-prompt-dark" : "audio-prompt";
+  const textColor = getTextColor(config.theme);
+
+  return (
+    <div styleName={`${styleName} hover-pointer`} data-test-id="audio-prompt" onClick={() => setListenMode(true)}>
+      <AudioSpeakerIcon isDarkMode={enableDarkMode} />
+      <span styleName={`audio-prompt-title ${textColor}`}>{listenButtonTitle || "Listen to this article"}</span>
+    </div>
+  );
+}
+
+AudioPlayer.propTypes = {
+  audioUrl: PropTypes.string,
+  enableDarkMode: PropTypes.bool,
+  listenButtonTitle: PropTypes.string,
+  playBackSpeedTitle: PropTypes.string
+};
+
+TtsCTAText.propTypes = {
+  setListenMode: PropTypes.func,
+  listenButtonTitle: PropTypes.string,
+  enableDarkMode: PropTypes.bool,
+  config: PropTypes.object
+};

package/src/components/Atoms/AudioPlayer/progressbar.m.css

@@ -0,0 +1,48 @@
+.progress-bar-dark,
+.progress-bar {
+  flex-grow: 1;
+  background-color: "#DBDBDB";
+  display: flex;
+  margin: 0 var(--arrow-spacing-xs);
+  input[type="range"] {
+    -webkit-appearance: none;
+    appearance: none;
+    padding: 0;
+    width: 98%;
+    cursor: pointer;
+    outline: none;
+    border-radius: 16px;
+    height: 6px;
+    background: #ccc;
+  }
+
+  input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    height: 15px;
+    width: 15px;
+    background-color: #000000;
+    border-radius: 50%;
+    border: none;
+    transition: 0.2s ease-in-out;
+  }
+
+  input[type="range"]::-moz-range-thumb {
+    height: 15px;
+    width: 15px;
+    background-color: #000000;
+    border-radius: 50%;
+    border: none;
+    transition: 0.2s ease-in-out;
+  }
+}
+
+.progress-bar-dark {
+  input[type="range"]::-webkit-slider-thumb {
+    background-color: white;
+  }
+
+  input[type="range"]::-moz-range-thumb {
+    background-color: white;
+  }
+}

package/src/components/Atoms/Author/README.md

@@ -0,0 +1,19 @@
+# Author
+
+Displays the author for the story card based on the first author from the Story API reponse.
+
+## Usage
+
+```jsx
+<Author story={story} />
+```
+
+```jsx
+<Author story={story} hideAuthorImage />
+```
+
+```jsx
+<Author story={story} prefix="By" />
+```
+
+<!-- PROPS -->