TP-27638| player fixes - width reduction, timer on each row | Herik (#370)

* TP-27638| timer in waveform list. css adjustments for global player | Herik * TP-27638| timer in waveform list. css adjustments for global player | Herik * TP-27638| timer in waveform list. css adjustments for global player | Herik * TP-27638| timer in waveform list. css adjustments for global player | Herik
2023-05-19 13:52:34 +05:30
parent 6b03e9587e
commit f1755bf828
7 changed files with 164 additions and 58 deletions
--- a/mocks/v2/interactions/index.json
+++ b/mocks/v2/interactions/index.json
@@ -68,7 +68,7 @@
                "tag": "RINGING_NO_RESPONSE",
                "status": "FAILED",
                "callerStatus": "ANSWER",
-                "recordingUrl": "https://cpaas-api-167-2.slashrtc.in/record/navi/a649960b-e6a9-4978-80d8-d79425183493.mp3",
+
                "receiverStatus": "CANCEL",
                "durationInSeconds": "0"
            },
--- a/src/components/GlobalPlayer/Player.module.scss
+++ b/src/components/GlobalPlayer/Player.module.scss
@@ -1,8 +1,34 @@
@import '../../assets/styles/animations';

-$waveWidth: 240px;
+$waveWidth: 200px;
+$borderRadius: 16px;
+
+.effect6 {
+  position: relative;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
+
+  &:before,
+  &:after {
+    content: '';
+    position: absolute;
+    z-index: -1;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
+    top: 50%;
+    bottom: 0;
+    left: 10px;
+    right: 10px;
+    border-radius: 100px / 10px;
+  }
+
+  &:after {
+    right: 10px;
+    left: auto;
+    transform: skew(8deg) rotate(3deg);
+  }
+}

 .player {
+  @extend .effect6;
  animation: slideInDown 300ms;
  display: flex;
  justify-content: left;
@@ -10,7 +36,7 @@ $waveWidth: 240px;
  background-color: #000;
  border-radius: 16px;
  height: 48px;
-  width: 380px;
+  width: 300px;
  box-sizing: border-box;
  // overflow: hidden;
  position: relative;
@@ -24,10 +50,10 @@ $waveWidth: 240px;

    color: #fff;
    // border: 1px solid red;
-    width: 45px;
+    width: 50px;
    height: 100%;
    box-sizing: border-box;
-    border-radius: 16px 0 0 16px;
+    border-radius: $borderRadius 0 0 $borderRadius;
    overflow: hidden;

    > span {
@@ -98,7 +124,7 @@ $waveWidth: 240px;
    // flex-direction: column;
    width: 95px;
    background-color: #333;
-    border-radius: 0 16px 16px 0;
+    border-radius: 0 $borderRadius $borderRadius 0;
    cursor: default;

    height: 100%;
@@ -109,13 +135,11 @@ $waveWidth: 240px;
    }

    .current {
-      font-size: 14px;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
    }

    .duration {
-      font-size: 12px;
      // font-weight: 500;
      color: rgba(255, 255, 255, 0.8);
      // color: rgba(255, 255, 255, 0.8);
@@ -127,7 +151,7 @@ $waveWidth: 240px;
    position: absolute;
    // bottom: -20px;
    bottom: 0;
-    left: 44px;
+    left: 30px;
    width: calc($waveWidth + 2px);
    transition: bottom 300ms, opacity 300ms;
    opacity: 0.2;
@@ -169,6 +193,7 @@ $waveWidth: 240px;

        &.caseLink {
          width: 60px;
+          padding-left: 4px;
          text-align: center;
          border-left: 1px solid gray;
          border-radius: 0;
--- a/src/components/GlobalPlayer/Player.tsx
+++ b/src/components/GlobalPlayer/Player.tsx
@@ -12,16 +12,17 @@ import {
  IGlobalPlayer,
  closePlayer,
  playPause,
+  setSecondsElapsedOfGlobalPlayer,
  setCursor,
  setCursorPointer
 } from 'src/reducers/commonSlice';
 import { Link } from 'react-router-dom';

 function dragElement(elmnt: any) {
-  let pos1 = 0,
-    pos2 = 0,
-    pos3 = 0,
-    pos4 = 0;
+  let x1 = 0,
+    y1 = 0,
+    x2 = 0,
+    y2 = 0;
  if (document.getElementById(elmnt.id + 'header')) {
    /* if present, the header is where you move the DIV from:*/
    document.getElementById(elmnt.id + 'header').onmousedown = dragMouseDown;
@@ -34,8 +35,8 @@ function dragElement(elmnt: any) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
-    pos3 = e.clientX;
-    pos4 = e.clientY;
+    x2 = e.clientX;
+    y2 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
@@ -45,13 +46,20 @@ function dragElement(elmnt: any) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
-    pos1 = pos3 - e.clientX;
-    pos2 = pos4 - e.clientY;
-    pos3 = e.clientX;
-    pos4 = e.clientY;
+    x1 = x2 - e.clientX;
+    y1 = y2 - e.clientY;
+    x2 = e.clientX;
+    y2 = e.clientY;
+
+    const elHeight = 58;
+    const elWidth = 300;
+
    // set the element's new position:
-    elmnt.style.top = elmnt.offsetTop - pos2 + 'px';
-    elmnt.style.left = elmnt.offsetLeft - pos1 + 'px';
+    const top = elmnt.offsetTop - y1;
+    const left = elmnt.offsetLeft - x1;
+
+    elmnt.style.top = top + 'px';
+    elmnt.style.left = left + 'px';
  }

  function closeDragElement() {
@@ -61,23 +69,19 @@ function dragElement(elmnt: any) {
  }
 }

-const secondsToTimestamp = (seconds: number) => {
+export const secondsToTimestamp = (seconds: number) => {
  seconds = Math.floor(seconds);
-  let h = Math.floor(seconds / 3600);
-  let m = Math.floor((seconds - h * 3600) / 60);
-  let s = seconds - h * 3600 - m * 60;
+  const h: any = Math.floor(seconds / 3600);
+  let m: any = Math.floor((seconds - h * 3600) / 60);
+  let s: any = seconds - h * 3600 - m * 60;

-  h = h < 10 ? h : h;
-  m = m < 10 ? (h > 0 ? '0' : '' + m) : m;
+  m = m < 10 ? (h > 0 ? '0' : '') + m : m;
  s = s < 10 ? '0' + s : s;

  return `${h > 0 ? `${h}:` : ''}${m}:${s}`;
-  // return `0${h}:0${m}:${s}`;
 };

-// const url = 'https://cdn.pixabay.com/audio/2023/03/06/audio_7f109c41bc.mp3';
-
-const playBackRates = [0.5, 1, 1.5];
+const playBackRates = [0.8, 1, 1.15];

 const id = '__globalAudopPlayer__';

@@ -152,6 +156,8 @@ export const GlobalPlayer = () => {

        CurrentPlayingInstance.seekTo(position);

+        dispatch(setSecondsElapsedOfGlobalPlayer(n));
+
        // Allow all events to be emitted again
        CurrentPlayingInstance.setDisabledEventEmissions([]);
      }
--- a/src/components/Waveform/Waveform.module.scss
+++ b/src/components/Waveform/Waveform.module.scss
@@ -1,7 +1,37 @@
+@import '../../assets/styles/animations';
+
 .wavesWrapper {
  display: flex;
  justify-content: center;
  align-items: center;
+  flex-direction: column;
+  margin: 8px 0;
+  background-color: #fff;
+  border-radius: 8px;
+
+  overflow: hidden;
+  position: relative;
+  border: 1px solid #e8e8e8;
+
+  .secondsElapsed {
+    animation: fadeIn 300ms;
+    width: 100%;
+    font-size: 10px;
+    margin: 0;
+    line-height: 1;
+    padding: 4px;
+    padding-left: 16px;
+    padding-top: 4px;
+    text-align: center;
+
+    background-color: #f6f6f6;
+  }
+
+  .secondRow {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;

    .playPause {
      width: 20px;
@@ -9,7 +39,6 @@
      align-items: center;
      justify-content: center;
      height: 40px;
-    border-right: 1px solid #eee;
      cursor: pointer;
      transition: background-color 300ms;

@@ -32,3 +61,4 @@
      max-width: 100%;
    }
  }
+}
--- a/src/components/Waveform/Waveform.tsx
+++ b/src/components/Waveform/Waveform.tsx
@@ -5,7 +5,11 @@ import styles from './Waveform.module.scss';
 import { useDispatch, useSelector } from 'react-redux';
 import { RootState } from 'src/store';
 import { IGlobalPlayer, setCursor } from 'src/reducers/commonSlice';
-import { getGlobalPlayerInstance, setCurrentPlayerInstance } from '../GlobalPlayer/Player';
+import {
+  getGlobalPlayerInstance,
+  secondsToTimestamp,
+  setCurrentPlayerInstance
+} from '../GlobalPlayer/Player';
 import Play from 'src/assets/icons/Play';
 import Pause from 'src/assets/icons/Pause';

@@ -18,12 +22,18 @@ const ID_PREFIX = '__waveform__list__item__';

 export const Waveform = ({ url }: IWaveform) => {
  const waveForm = useRef<any>();
+  const [ready, setReady] = useState(false);
  const id = useRef<string>(`${ID_PREFIX}waveform_${++count}`);
  const globalPlayerUrl = useSelector((state: RootState) => state?.common?.globalPlayer?.url);
  const globalCursor = useSelector((state: RootState) => state?.common?.globalPlayer?.cursor || 0);
+  const secondsElapsedOfGlobalPlayer = useSelector(
+    (state: RootState) => state?.common?.globalPlayer?.secondsElapsedOfGlobalPlayer || 0
+  );
+  const [secondsElapsed, setSecondsElapsed] = useState(secondsElapsedOfGlobalPlayer);
  const globalPlaying = useSelector(
    (state: RootState) => state?.common?.globalPlayer?.status === 'play'
  );
+
  const dispatch = useDispatch();
  const syncWithGlobalPlayer = (cursor?: number) => {
    setCurrentPlayerInstance(waveForm?.current);
@@ -33,11 +43,27 @@ export const Waveform = ({ url }: IWaveform) => {
  };

  const addEvents = (waveformInstance: any) => {
+    waveformInstance.on('ready', (cursor: number) => {
+      setReady(true);
+    });
+
    waveformInstance.on('seek', (cursor: number) => {
      syncWithGlobalPlayer(cursor);
    });
+
+    // waveformInstance.on('audioprocess', (n: number) => {
+    //   throttleFunction((n: number) => {
+    //     setSecondsElapsed(n);
+    //   }, 400)(n);
+    // });
  };

+  useEffect(() => {
+    if (amIPlaying()) {
+      setSecondsElapsed(secondsElapsedOfGlobalPlayer);
+    }
+  }, [secondsElapsedOfGlobalPlayer]);
+
  useEffect(() => {
    if (!waveForm?.current) {
      try {
@@ -93,10 +119,24 @@ export const Waveform = ({ url }: IWaveform) => {

  return (
    <div className={styles.wavesWrapper}>
+      {
+        <div className={styles.secondsElapsed} style={{ visibility: ready ? 'visible' : 'none' }}>
+          <span style={{ fontWeight: amIPlaying() ? 'bold' : '' }} className={styles.current}>
+            {secondsToTimestamp(secondsElapsed)}
+          </span>{' '}
+          /{' '}
+          <span className={styles.duration}>
+            {secondsToTimestamp(waveForm?.current?.getDuration())}
+          </span>
+        </div>
+      }
+
+      <div className={styles.secondRow}>
        <span onClick={handlePlayPause} className={styles.playPause}>
          {!amIPlaying() ? <Play /> : <Pause />}
        </span>
        <div className={styles.waves} id={id.current}></div>
      </div>
+    </div>
  );
 };
--- a/src/index.scss
+++ b/src/index.scss
@@ -104,7 +104,6 @@ code {
  border-radius: 8px;
  overflow: hidden;
  // background-color: #f1f3f4;
-  background-color: #fff;
  // margin: 4px;
  &.playing {
    border: 1px solid #efefef;
--- a/src/reducers/commonSlice.ts
+++ b/src/reducers/commonSlice.ts
@@ -65,6 +65,7 @@ export interface IGlobalPlayer {
  loading: boolean;
  history?: Array<IGlobalPlayer>;
  currentPlayerContainerId: string;
+  secondsElapsedOfGlobalPlayer: number;
 }

 export interface CommonState {
@@ -148,6 +149,10 @@ export const commonSlice = createSlice({
      state.globalPlayer.visible = true;
      state.globalPlayer.cursor = cursor;
    },
+    setSecondsElapsedOfGlobalPlayer(state, action) {
+      if (!state.globalPlayer) return;
+      state.globalPlayer.secondsElapsedOfGlobalPlayer = action.payload;
+    },
    playPause(state, action) {
      if (!state.globalPlayer) return;
      state.globalPlayer.visible = true;
@@ -202,6 +207,7 @@ export const {
  setCursorPointer,
  playPause,
  closePlayer,
+  setSecondsElapsedOfGlobalPlayer,
  // setCaptchaVisibility,
  setTimer,
  setCaptchaVerified,