Parallel-news · nanofuxion · Oct 16, 2022
diff --git a/src/App.js b/src/App.js
@@ -3,6 +3,7 @@ import NavBar from "./component/navbar.jsx";
 import Podcast from "./component/podcast.jsx";
 import Index from "./component/index.jsx";
 import PodcastRss from "./component/podcast_rss.jsx";
+import Resume from "./component/Resume.jsx";
 
 export default function App() {
   return (
@@ -20,6 +21,7 @@ export default function App() {
           path="/podcasts/:podcastId/rss"
           render={({ match }) => <PodcastRss match={match} />}
         />
+        <Resume />
       </Router>
     </div>
   );

diff --git a/src/component/Resume.jsx b/src/component/Resume.jsx
@@ -0,0 +1,90 @@
+import React, { useState, useEffect } from 'react';
+import { withRouter } from 'react-router-dom'
+// import PodcastHtml from './podcast_html.jsx'
+// import { MESON_ENDPOINT } from '../utils/arweave.js'
+// import { useTranslation } from 'react-i18next'
+// import { fetchPodcasts, sortPodcasts } from '../utils/podcast.js'
+// import { Dropdown } from '../component/podcast_utils.jsx'
+import ArConnectLoader from './arconnect_loader'
+import { isDarkMode } from '../utils/theme'
+import { themeChange } from "theme-change";
+import { useTranslation } from 'react-i18next'
+import { Disclosure } from '@headlessui/react'
+import { TranslateIcon } from '@heroicons/react/outline'
+import { MenuIcon, XIcon } from "@heroicons/react/outline";
+import Swal from 'sweetalert2';
+
+export default withRouter(function Resume(props) {
+
+    const [darkMode, setDarkMode] = useState(isDarkMode())
+    const [cover, setCover] = useState("");
+    const [dName, setDName] = useState("");
+    const [history, setHistory] = useState("");
+    const [time, setTime] = useState(0);
+    const [visible, setVisible] = useState(false)
+
+
+    useEffect(() => {
+        themeChange(false);
+        // 👆 false parameter is required for react project
+    }, []);
+
+
+
+    // const { t, i18n } = useTranslation();
+
+    // const changeLanguage = (lng) => {
+    //     i18n.changeLanguage(lng);
+    // };
+
+    //   const [loading, setLoading] = useState(false)
+    // const history = useHistory();
+    React.useEffect(() => {
+        if (typeof window.localStorage.getItem('lastPlayed') === "string" &&
+            typeof JSON.parse(window.localStorage.getItem('lastPlayed')) === "object"
+        ) {
+            const castDetails = JSON.parse(window.localStorage.getItem("lastPlayed"));
+            // Swal.fire({
+            //     // title: 'Continue where you left off.',
+            //     html: castDetails.hasOwnProperty("currentTime") ? `<p class="font-bold w-full md:w-auto text-center">Continue where you left off?</p>
+            //         <p class="text-sm w-full md:w-auto text-center mt-10 mb-4">Would you like to resume listening to  <p class="text-sm font-bold">${castDetails.e.episodeName}</p> at <p class="text-sm font-bold">${castDetails.currentTime}</p></p>`:
+            //         `<p class="font-bold w-full md:w-auto text-center">Continue where you left off?</p>
+            //         <p class="text-sm w-full md:w-auto text-center mt-10 mb-4">Would you like to resume listening to  <p class="text-sm font-bold">${castDetails.e.episodeName}</p></p>`,
+            //     showCancelButton: true,
+            //     customClass: {
+            //         validationMessage: 'font-mono',
+            //         cancelButton: 'font-mono',
+            //         confirmButton: 'border-prim2 font-mono',
+            //     },
+            //   }).then((result) => {
+            //     if(result.isConfirmed === true){
+            //         console.log(castDetails.location.pathname)
+            //         props.history.push(castDetails.location.pathname + "?continue=true");
+            //     }
+            //   })
+            if (castDetails.hasOwnProperty("podcast")) {
+                setCover(`https://pz-prepnb.meson.network/${castDetails.podcast.cover}`);
+                setDName(castDetails.podcastName);
+                setHistory(castDetails.location.pathname + "?continue=true")
+                if (castDetails.hasOwnProperty("currentTime")) {
+                    setTime(castDetails.currentTime)
+                }
+                setVisible(true);
+            }
+        }
+    }, [])
+
+    return (
+        visible ? <div className="bg-white rounded-xl">
+
+            {(props.location.pathname.includes("/podcasts/") === false) ? <div className="card pt-4 bg-white rounded- flex flex-col place-content-center flex-wrap fixed bottom-0 w-28 mb-4" onClick={() => props.history.push(history)}>
+                <img className="object-cover pointer-events-none group-hover:opacity-75 mx-2 mb-2 rounded-md h-20 w-20" alt={`${dName} cover`} src={cover} />
+                <a className="flex-1 mx-2 w-20 text-black" href="/">
+                    <span>{time <= 0 ? "Revisit?" : "Continue?"}</span>
+                </a>
+
+            </div> : <></>}
+        </div>: <></>
+    )
+})
+
diff --git a/src/component/arconnect_loader.jsx b/src/component/arconnect_loader.jsx
@@ -62,9 +62,9 @@ export default function Header() {
 
   const getAddr = () => window.arweaveWallet.getActiveAddress()
 
-  const shortenAddress = (addr) => {
+  const shortenAddress = (addr, len = 4) => {
     if (addr) {
-      return addr.substring(0, 4) + '...' + addr.substring(addr.length - 4)
+      return addr.substring(0, len) + '...' + addr.substring(addr.length - len)
     }
     return addr
   }
@@ -110,7 +110,7 @@ export default function Header() {
   }
 
   return (
-    <>
+    <div className="flex -ml-4">
       {(walletConnected && (
         <>
           <UploadShow />
@@ -119,11 +119,10 @@ export default function Header() {
             onClick={arconnectDisconnect}
           >
             <span>
-              {ansData?.currentLabel ? `${ansData?.currentLabel}.ar` : shortenAddress(address)}
+              {ansData?.currentLabel ? `${(ansData?.currentLabel.length > 8) ? shortenAddress(ansData?.currentLabel, 2) : ansData?.currentLabel}.ar` : shortenAddress(address)}
             </span>
             {(ansData?.avatar === "") ?
               <div className="mx-auto rounded-full h-6 w-6 ml-2 btn-secondary border-[1px]" style={{ backgroundColor: ansData?.address_color }}></div> :
-              // <img className="mx-auto bg-black rounded-full" src={`https://arweave.net/${props.userInfo.avatar}`} />}
               <div className="mx-auto rounded-full h-6 w-6 overflow-hidden ml-2 btn-secondary border-[1px]">
                 <img src={`https://arweave.net/${ansData?.avatar}`} alt="Profile" width="100%" height="100%" />
               </div>}
@@ -138,7 +137,7 @@ export default function Header() {
             🦔 {t("connector.login")}
           </div>
         )}
-    </>
+    </div>
   )
 
 }
diff --git a/src/component/index.jsx b/src/component/index.jsx
@@ -1,4 +1,4 @@
-import { React, useState, useEffect } from 'react'
+import React,{  useState, useEffect } from 'react'
 import PodcastHtml from './podcast_html.jsx'
 import { MESON_ENDPOINT } from '../utils/arweave.js'
 import { useTranslation } from 'react-i18next'

diff --git a/src/component/podcast.jsx b/src/component/podcast.jsx
@@ -9,6 +9,8 @@ import { MESON_ENDPOINT } from '../utils/arweave.js'
 import { isDarkMode } from '../utils/theme.js'
 import { fetchPodcasts } from '../utils/podcast.js';
 import { useTranslation } from 'react-i18next';
+import useUnload from '../utils/useUnload.js';
+import { useLocation, useHistory } from 'react-router-dom';
 
 export default function Podcast(props) {
   const [loading, setLoading] = useState(true)
@@ -180,8 +182,8 @@ export default function Podcast(props) {
     })
   }
 
-  const showPlayer = (podcast, e) => {
-    const player = new Shikwasa({
+  const showPlayer = (podcast, e, startAt = 0) => {
+    const player = window.PlayerState = new Shikwasa({
       container: () => document.querySelector('.podcast-player'),
       themeColor: 'gray',
       theme: `${isDarkMode() ? 'dark' : 'light'}`,
@@ -191,13 +193,59 @@ export default function Podcast(props) {
         artist: podcast.podcastName,
         cover: `${MESON_ENDPOINT}/${podcast.cover}`,
         src: `${MESON_ENDPOINT}/${e.contentTx}`,
+        startAt: startAt
       },
       download: true
     })
-    player.play()
+    // 
+    player.play().then(()=>{
+      if (startAt !== 0) {
+        player.seek(startAt);
+        console.log(startAt);
+      }
+      if(window.localStorage){
+        window.localStorage.setItem("lastPlayed", JSON.stringify({e, podcast}));
+      }
+    })
+
     window.scrollTo(0, document.body.scrollHeight)
   }
 
+
+  //save current time of video playback.
+  const location = useLocation();
+  const history = useHistory();
+  useUnload((e) => {
+      e.preventDefault();
+      const currentTime = window.PlayerState.currentTime;
+      if(location.pathname.includes('/podcasts/'))
+        try {
+          const episodeData = JSON.parse(window.localStorage.getItem('lastPlayed'));
+          window.localStorage.setItem("lastPlayed", JSON.stringify({
+            ...episodeData,
+            currentTime: currentTime,
+            location: location,
+          }));
+        } catch (error) {
+
+        }
+      // const exit = window.confirm('Are you sure you want to leave?');
+      // if (exit) window.close();
+  })
+
+  useEffect(() => {
+    if(location.search.includes("continue=true")){
+      if(typeof window.localStorage.getItem('lastPlayed') === "string" &&
+      typeof JSON.parse(window.localStorage.getItem('lastPlayed')) === "object"
+      ){
+        const castDetails = JSON.parse(window.localStorage.getItem("lastPlayed"))
+        showPlayer(castDetails.podcast, castDetails.e, castDetails.currentTime)
+      }
+      window.localStorage.removeItem('lastPlayed');
+      history.push(location.pathname)
+    }
+  }, [location, history])
+
   useEffect(() => {
     async function fetchData() {
       setLoading(true)
@@ -224,7 +272,7 @@ export default function Podcast(props) {
       </div>
       <div>{podcastEpisodes}</div>
       {!loading && (thePodcast.owner === addr || thePodcast.superAdmins.includes(addr)) && <button className='btn' onClick={() => checkEpisodeForm(thePodcast)}>{t("add new episode")}</button>}
-      < div className="podcast-player sticky bottom-0 w-screen" />
+      < div className="podcast-player fixed bottom-0 w-screen" />
     </div>
 
   )

diff --git a/src/utils/useUnload.js b/src/utils/useUnload.js
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const useUnload = fn => {
+    const cb = React.useRef(fn);
+
+    React.useEffect(() => {
+      const onUnload = cb.current;
+      window.addEventListener('beforeunload', onUnload);
+      return () => {
+        window.removeEventListener('beforeunload', onUnload);
+      };
+    }, [cb]);
+  };
+  export default useUnload;