From 2457300de28d836884789aa51e90071044490e6c Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Wed, 22 Sep 2021 10:26:48 -0700
Subject: [PATCH] Optimize gapless playback

- Remove unused seekable attribute
- Remove seek/duration rounding calculation
---
 src/__tests__/App.test.tsx       |  1 -
 src/components/player/Player.tsx | 26 +++++---------------------
 src/redux/playerSlice.ts         |  9 +--------
 3 files changed, 6 insertions(+), 30 deletions(-)

diff --git a/src/__tests__/App.test.tsx b/src/__tests__/App.test.tsx
index 0df93f2..fb498db 100644
--- a/src/__tests__/App.test.tsx
+++ b/src/__tests__/App.test.tsx
@@ -61,7 +61,6 @@ const playQueueState: PlayQueue = {
 const playerState: Player = {
   status: 'PAUSED',
   currentSeek: 0,
-  currentSeekable: 0,
 };
 
 const miscState: General = {
diff --git a/src/components/player/Player.tsx b/src/components/player/Player.tsx
index d474f4b..4e26731 100644
--- a/src/components/player/Player.tsx
+++ b/src/components/player/Player.tsx
@@ -35,24 +35,14 @@ const gaplessListenHandler = (
   dispatch: any,
   pollingInterval: number
 ) => {
-  const seek =
-    Math.round(currentPlayerRef.current.audioEl.current.currentTime * 100) /
-    100;
-  const duration =
-    Math.round(currentPlayerRef.current.audioEl.current.duration * 100) / 100;
-
-  const seekable =
-    currentPlayerRef.current.audioEl.current.seekable.length >= 1
-      ? currentPlayerRef.current.audioEl.current.seekable.end(
-          currentPlayerRef.current.audioEl.current.seekable.length - 1
-        )
-      : 0;
+  const seek = currentPlayerRef.current?.audioEl.current?.currentTime || 0;
+
+  const duration = currentPlayerRef.current?.audioEl.current?.duration;
 
   if (playQueue.currentPlayer === currentPlayer) {
     dispatch(
       setCurrentSeek({
         seek,
-        seekable,
       })
     );
   }
@@ -60,7 +50,7 @@ const gaplessListenHandler = (
   // Add a bit of leeway for the second track to start since the
   // seek value doesn't always reach the duration
   const durationPadding =
-    pollingInterval <= 10 ? 0.13 : pollingInterval <= 20 ? 0.14 : 0.15;
+    pollingInterval <= 10 ? 0.12 : pollingInterval <= 20 ? 0.13 : 0.15;
   if (seek + durationPadding >= duration) {
     nextPlayerRef.current.audioEl.current.play();
   }
@@ -80,12 +70,6 @@ const listenHandler = (
 ) => {
   const currentSeek =
     currentPlayerRef.current?.audioEl.current?.currentTime || 0;
-  const seekable =
-    currentPlayerRef.current.audioEl.current.seekable.length >= 1
-      ? currentPlayerRef.current.audioEl.current.seekable.end(
-          currentPlayerRef.current.audioEl.current.seekable.length - 1
-        )
-      : 0;
   const duration = currentPlayerRef.current?.audioEl.current?.duration;
   const fadeAtTime = duration - fadeDuration;
 
@@ -222,7 +206,7 @@ const listenHandler = (
     }
   }
   if (playQueue.currentPlayer === player) {
-    dispatch(setCurrentSeek({ seek: currentSeek, seekable }));
+    dispatch(setCurrentSeek({ seek: currentSeek }));
   }
 };
 
diff --git a/src/redux/playerSlice.ts b/src/redux/playerSlice.ts
index 1b6de88..996ca6d 100644
--- a/src/redux/playerSlice.ts
+++ b/src/redux/playerSlice.ts
@@ -3,13 +3,11 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 export interface Player {
   status: string;
   currentSeek: number;
-  currentSeekable: number;
 }
 
 const initialState: Player = {
   status: 'PAUSED',
   currentSeek: 0,
-  currentSeekable: 0,
 };
 
 const playerSlice = createSlice({
@@ -18,19 +16,14 @@ const playerSlice = createSlice({
   reducers: {
     resetPlayer: (state) => {
       state.currentSeek = 0;
-      state.currentSeekable = 0;
     },
 
     setStatus: (state, action: PayloadAction<string>) => {
       state.status = action.payload;
     },
 
-    setCurrentSeek: (
-      state,
-      action: PayloadAction<{ seek: number; seekable: number }>
-    ) => {
+    setCurrentSeek: (state, action: PayloadAction<{ seek: number }>) => {
       state.currentSeek = action.payload.seek;
-      state.currentSeekable = action.payload.seekable;
     },
   },
 });