From ce05ac8251e044397b63029763d976af3722887b Mon Sep 17 00:00:00 2001
From: chezhe <chezhe@hey.com>
Date: Tue, 22 Mar 2022 12:18:01 +0800
Subject: [PATCH 1/4] chore: fix bugs

---
 src-tauri/Cargo.lock       |  2 +-
 src/components/AddFeed.tsx |  1 +
 src/components/Reader.tsx  |  9 ++++++++-
 src/index.css              | 11 +++++++++++
 src/utils/format.ts        |  2 ++
 src/utils/network.ts       | 12 +++++++++++-
 6 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index 317abdf..26d82e5 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -36,7 +36,7 @@ dependencies = [
 
 [[package]]
 name = "aleph"
-version = "0.3.0"
+version = "0.4.0"
 dependencies = [
  "serde",
  "serde_json",
diff --git a/src/components/AddFeed.tsx b/src/components/AddFeed.tsx
index 4125e0c..4438c28 100644
--- a/src/components/AddFeed.tsx
+++ b/src/components/AddFeed.tsx
@@ -86,6 +86,7 @@ export default function AddFeed({
                   type: 'feed/update',
                   payload: newFeed,
                 })
+                onClose()
               } else {
                 try {
                   setIsAdding(true)
diff --git a/src/components/Reader.tsx b/src/components/Reader.tsx
index f120277..0dd8edf 100644
--- a/src/components/Reader.tsx
+++ b/src/components/Reader.tsx
@@ -14,7 +14,7 @@ import dayjs from 'dayjs'
 import NoContent from '../assets/no-content.png'
 import { CirclePlay, Compass, Star } from 'grommet-icons'
 import { useAppDispatch } from '../store/hooks'
-import { useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { stripURL } from '../utils/format'
 
 const turndownService = new TurndownService()
@@ -39,7 +39,13 @@ export default function Reader({
   setPlayingEp: (ep: Episode | undefined) => void
 }) {
   const dispatch = useAppDispatch()
+  const readerContainer = useRef(null)
   const [isStarred, setIsStarred] = useState(activeItem?.starred ?? false)
+  useEffect(() => {
+    if (readerContainer && readerContainer.current) {
+      ;(readerContainer.current as any).scrollTo(0, 0)
+    }
+  }, [activeItem])
 
   if (!activeItem) {
     return (
@@ -69,6 +75,7 @@ export default function Reader({
             height="100vh"
             background={isDark ? 'dark-2' : '#f3f1eb'}
             style={{ overflowY: 'scroll', position: 'relative' }}
+            ref={readerContainer}
           >
             <Box
               direction="row"
diff --git a/src/index.css b/src/index.css
index 5e6b10c..00b1ce5 100644
--- a/src/index.css
+++ b/src/index.css
@@ -59,8 +59,19 @@ h3,
 h4,
 h5,
 h6,
+code,
+pre,
 .markdown-reader p {
   max-width: unset !important;
+  word-break: break-all !important;
+  white-space: pre-wrap !important;
+}
+
+.markdown-reader pre,
+.markdown-reader blockquote {
+  background-color: antiquewhite;
+  padding: 10px;
+  margin: 0;
 }
 
 .markdown-reader img {
diff --git a/src/utils/format.ts b/src/utils/format.ts
index 7752119..f37c6c2 100644
--- a/src/utils/format.ts
+++ b/src/utils/format.ts
@@ -1,6 +1,8 @@
 import parse from 'url-parse'
 import { Episode } from '../types'
 
+export const isPodcastEnclosure = () => {}
+
 export const isPodcast = (item: Episode) => item.podurl
 
 export const isContained = (item: Episode, starreds: Episode[]) => {
diff --git a/src/utils/network.ts b/src/utils/network.ts
index 58ac3c6..e6b1421 100644
--- a/src/utils/network.ts
+++ b/src/utils/network.ts
@@ -59,12 +59,22 @@ export function formatEpisode(item: any, feed: Feed) {
       typeof newItem.guid === 'string' ? newItem.guid : newItem.guid['#text']
   }
 
+  let podurl = ''
+  console.log(newItem)
+  if (
+    newItem.enclosure &&
+    newItem.enclosure.type &&
+    newItem.enclosure.type.startsWith('audio/')
+  ) {
+    podurl = newItem.enclosure.url || ''
+  }
+
   newItem = {
     link: newItem.link || guid,
     author: newItem.author || newItem['itunes:author'] || '',
     pubDate: newItem.pubDate || '',
     cover: newItem.cover || '',
-    podurl: newItem.enclosure?.url || '',
+    podurl,
     title: newItem.title || '',
     description: newItem['content:encoded'] || newItem.description || '',
     guid: guid || '',

From 6acd8e60c097031996410cfa163d8c99f3d6f182 Mon Sep 17 00:00:00 2001
From: chezhe <chezhe@hey.com>
Date: Tue, 22 Mar 2022 15:02:59 +0800
Subject: [PATCH 2/4] fix: xml parse

---
 src/components/Reader.tsx |  4 ++--
 src/utils/network.ts      | 32 ++++++++++++++++++++++++--------
 2 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/components/Reader.tsx b/src/components/Reader.tsx
index 0dd8edf..a274431 100644
--- a/src/components/Reader.tsx
+++ b/src/components/Reader.tsx
@@ -118,8 +118,8 @@ export default function Reader({
                       align="center"
                       justify="center"
                       style={{
-                        WebkitBackdropFilter: 'blur(10px)',
-                        backdropFilter: 'blur(10px)',
+                        WebkitBackdropFilter: 'blur(3px)',
+                        backdropFilter: 'blur(3px)',
                         backgroundColor: 'rgba(255, 255, 255, 0.5)',
                       }}
                     >
diff --git a/src/utils/network.ts b/src/utils/network.ts
index e6b1421..7dadfd6 100644
--- a/src/utils/network.ts
+++ b/src/utils/network.ts
@@ -24,9 +24,13 @@ export async function fetchFeed(feed: Feed): Promise<Feed[]> {
         ignoreAttributes: false,
       })
       const jObj = parser.parse(data as string)
+      const extra = {
+        image: jObj.rss?.channel?.image,
+      }
       return (
-        jObj.rss?.channel?.item.map((item: any) => formatEpisode(item, feed)) ||
-        []
+        jObj.rss?.channel?.item.map((item: any) =>
+          formatEpisode(item, feed, extra)
+        ) || []
       )
     })
     .catch((err) => {
@@ -35,7 +39,13 @@ export async function fetchFeed(feed: Feed): Promise<Feed[]> {
     })
 }
 
-export function formatEpisode(item: any, feed: Feed) {
+export function formatEpisode(
+  item: any,
+  feed: Feed,
+  extra: {
+    image: any
+  }
+) {
   let newItem = item
   if (item.enclosure) {
     newItem = {
@@ -47,10 +57,10 @@ export function formatEpisode(item: any, feed: Feed) {
       },
     }
   }
-  if (newItem['itunes:image']) {
+  if (!newItem.image) {
     newItem = {
       ...newItem,
-      cover: newItem['itunes:image']['@_href'],
+      image: newItem['itunes:image'] || extra.image,
     }
   }
   let guid = ''
@@ -60,7 +70,6 @@ export function formatEpisode(item: any, feed: Feed) {
   }
 
   let podurl = ''
-  console.log(newItem)
   if (
     newItem.enclosure &&
     newItem.enclosure.type &&
@@ -69,11 +78,18 @@ export function formatEpisode(item: any, feed: Feed) {
     podurl = newItem.enclosure.url || ''
   }
 
+  let cover = newItem.cover
+  if (!cover && newItem.image) {
+    cover = newItem.image.url || newItem.image['@_href'] || ''
+  }
+
+  const link = `${newItem.link}?${guid}`
+
   newItem = {
-    link: newItem.link || guid,
+    link,
     author: newItem.author || newItem['itunes:author'] || '',
     pubDate: newItem.pubDate || '',
-    cover: newItem.cover || '',
+    cover,
     podurl,
     title: newItem.title || '',
     description: newItem['content:encoded'] || newItem.description || '',

From c54f768ee669829fd1a3dbac66da6b3a4d7676e0 Mon Sep 17 00:00:00 2001
From: chezhe <chezhe@hey.com>
Date: Tue, 22 Mar 2022 17:06:56 +0800
Subject: [PATCH 3/4] Update README.md

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 1af8129..fe30649 100644
--- a/README.md
+++ b/README.md
@@ -4,6 +4,6 @@
 
 # Aleph
 
-Aleph (or Aleph or א or 阿莱夫, ˈɑːlɛf) is a RSS reader & podcast client built for the desktop.
+Aleph (or א or 阿莱夫, ˈɑːlɛf) is an RSS reader & podcast client built for the desktop.
 
-![Example](https://pbs.twimg.com/media/FOX6Lt8VUAUv9vl?format=jpg&name=medium)
+![Example](https://aleph.chezhe.dev/screenshot.png)

From 833137f7ac415e3279548e770d6aa9e6efea9033 Mon Sep 17 00:00:00 2001
From: chezhe <chezhe@hey.com>
Date: Tue, 29 Mar 2022 12:44:59 +0800
Subject: [PATCH 4/4] bump: 0.5.0 & polish audio player

---
 package.json                 |   3 +-
 src-tauri/Cargo.toml         |   2 +-
 src-tauri/tauri.conf.json    |   2 +-
 src/components/Playing.tsx   |  58 ---------------
 src/components/PodPlayer.tsx | 140 ++++++++++++++++++++++++++++++++---
 yarn.lock                    |  21 ++----
 6 files changed, 137 insertions(+), 89 deletions(-)
 delete mode 100644 src/components/Playing.tsx

diff --git a/package.json b/package.json
index 16ee8f1..24d3422 100644
--- a/package.json
+++ b/package.json
@@ -12,15 +12,14 @@
     "@types/node": "^16.7.13",
     "@types/react": "^17.0.20",
     "@types/react-dom": "^17.0.9",
-    "axios": "^0.26.1",
     "dayjs": "^1.11.0",
     "fast-xml-parser": "^4.0.7",
     "grommet": "^2.21.0",
     "grommet-icons": "^4.7.0",
     "lodash": "^4.17.21",
     "react": "^17.0.2",
-    "react-audio-player": "^0.17.0",
     "react-dom": "^17.0.2",
+    "react-loading": "^2.0.3",
     "react-redux": "^7.2.6",
     "react-scripts": "5.0.0",
     "styled-components": "^5.3.3",
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index 7e5d8c9..5dbcb25 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "aleph"
-version = "0.4.0"
+version = "0.5.0"
 description = "A Tauri App"
 authors = ["chezhe"]
 license = ""
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 54cb993..90e2a10 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -1,7 +1,7 @@
 {
   "package": {
     "productName": "aleph",
-    "version": "0.4.0"
+    "version": "0.5.0"
   },
   "build": {
     "distDir": "../build",
diff --git a/src/components/Playing.tsx b/src/components/Playing.tsx
deleted file mode 100644
index db9ec0e..0000000
--- a/src/components/Playing.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { Box, Button, Image } from 'grommet'
-import { Close } from 'grommet-icons'
-import ReactAudioPlayer from 'react-audio-player'
-import { Episode } from '../types'
-import { stripURL } from '../utils/format'
-
-export default function Playing({
-  activeItem,
-  playingEp,
-  setPlayingEp,
-}: {
-  activeItem: Episode | undefined
-  playingEp: Episode | undefined
-  setPlayingEp: (ep: Episode | undefined) => void
-}) {
-  if (
-    !playingEp ||
-    (playingEp && activeItem && activeItem?.podurl === playingEp?.podurl)
-  ) {
-    return null
-  }
-  return (
-    <Box
-      direction="column"
-      style={{ position: 'fixed', bottom: 100, right: 0 }}
-      width="80px"
-    >
-      <Box
-        direction="row"
-        justify="end"
-        style={{ position: 'relative', top: 60, right: 20 }}
-      >
-        <Button
-          icon={<Close size="small" />}
-          onClick={() => setPlayingEp(undefined)}
-          size="small"
-          primary
-        />
-      </Box>
-      <Image
-        src={stripURL(playingEp?.cover || '')}
-        width="80px"
-        height="80px"
-        alt={playingEp?.title}
-      />
-
-      <ReactAudioPlayer
-        src={stripURL(playingEp!.podurl)}
-        controls
-        autoPlay
-        style={{ width: '100%', visibility: 'hidden' }}
-        onPlay={() => {
-          setPlayingEp(playingEp)
-        }}
-      />
-    </Box>
-  )
-}
diff --git a/src/components/PodPlayer.tsx b/src/components/PodPlayer.tsx
index 4386da4..dcee4c7 100644
--- a/src/components/PodPlayer.tsx
+++ b/src/components/PodPlayer.tsx
@@ -1,7 +1,69 @@
-import { Box, Button, Image } from 'grommet'
-import ReactAudioPlayer from 'react-audio-player'
+import { Box, Button, RangeInput, Text } from 'grommet'
+import { Pause, Play } from 'grommet-icons'
+import { useEffect, useState } from 'react'
 import { Episode } from '../types'
 import { stripURL } from '../utils/format'
+import Loading from 'react-loading'
+
+const formatMinutes = (seconds: number) => {
+  const _seconds = Math.floor(seconds)
+  const minutes = Math.floor(_seconds / 60)
+  const secondsLeft = _seconds % 60
+  return `${minutes}:${secondsLeft < 10 ? '0' : ''}${secondsLeft}`
+}
+
+const useAudio = (url?: string) => {
+  const [audio, setAudio] = useState<HTMLAudioElement | null>(null)
+  const [playing, setPlaying] = useState(false)
+  const [ready, setReady] = useState(false)
+  const [currentTime, setCurrentTime] = useState(0)
+  const [duration, setDuration] = useState(0)
+
+  useEffect(() => {
+    let tick: NodeJS.Timer
+    if (url) {
+      if (audio) {
+        setReady(false)
+        audio?.pause()
+        setAudio(null)
+      }
+      const _audio = new Audio(url)
+      if (_audio) {
+        _audio.addEventListener('canplaythrough', (event) => {
+          setDuration(_audio.duration)
+          setReady(true)
+          _audio.play()
+          setPlaying(true)
+        })
+
+        _audio.addEventListener('timeupdate', (event) => {
+          setCurrentTime(_audio.currentTime)
+        })
+        setAudio(_audio)
+      }
+    }
+
+    return () => {
+      audio?.pause()
+      setAudio(null)
+      tick && clearInterval(tick)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [url])
+
+  useEffect(() => {
+    if (audio) {
+      if (playing) {
+        audio.play()
+      } else {
+        audio.pause()
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [playing])
+
+  return { audio, playing, currentTime, duration, setPlaying, ready }
+}
 
 export default function PodPlayer({
   playingEp,
@@ -12,31 +74,85 @@ export default function PodPlayer({
   setPlayingEp: (ep: Episode | undefined) => void
   setActiveItem: (ep: Episode | undefined) => void
 }) {
-  if (!playingEp) {
+  const { audio, duration, currentTime, playing, setPlaying, ready } = useAudio(
+    playingEp?.podurl
+  )
+
+  if (!playingEp || !audio) {
     return null
   }
 
+  if (!ready) {
+    return (
+      <Box
+        direction="row"
+        align="center"
+        justify="center"
+        pad={{ right: 'small' }}
+        gap="2px"
+        height="80px"
+        style={{ position: 'fixed', bottom: 0, right: 0 }}
+        background="light-5"
+        width="calc(100vw - 500px)"
+      >
+        <Loading type="bars" color="#008cd5" />
+      </Box>
+    )
+  }
+
   return (
     <Box
       direction="row"
       align="center"
       justify="between"
       pad={{ right: 'small' }}
-      gap="small"
+      gap="2px"
       style={{ position: 'fixed', bottom: 0, right: 0 }}
       background="light-5"
       width="calc(100vw - 500px)"
     >
-      <Image src={stripURL(playingEp?.cover || '')} height="80px" alt="" />
-      <ReactAudioPlayer
-        src={stripURL(playingEp.podurl)}
-        autoPlay
-        controls
-        style={{ width: '100%' }}
-        onPlay={() => {
-          // setPlayingEp(playingEp)
+      <Button
+        style={{
+          background: `url(${stripURL(playingEp?.cover || '')})`,
+          width: 80,
+          height: 80,
+          backgroundSize: 'cover',
+          borderRadius: 0,
+          border: 0,
+          padding: 0,
         }}
+        icon={
+          <Box
+            fill
+            background="rgba(255,255,255,0.3)"
+            align="center"
+            justify="center"
+            onClick={() => setPlaying(!playing)}
+          >
+            <Box
+              background="rgba(0,0,0,0.7)"
+              pad="small"
+              style={{ borderRadius: '50%' }}
+            >
+              {!playing ? <Play /> : <Pause />}
+            </Box>
+          </Box>
+        }
       />
+      <Box direction="column" gap="2px">
+        <RangeInput
+          max={duration}
+          value={currentTime}
+          onChange={(e) => {
+            audio!.currentTime = Number(e.target.value)
+          }}
+          style={{ minWidth: 400 }}
+        />
+        <Box direction="row" align="center" justify="between">
+          <Text size="small">{formatMinutes(currentTime)}</Text>
+          <Text size="small">{formatMinutes(duration)}</Text>
+        </Box>
+      </Box>
       <Box width="100px" gap="xsmall">
         <Button
           size="small"
diff --git a/yarn.lock b/yarn.lock
index d7f9d87..c9823b4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2608,13 +2608,6 @@ axe-core@^4.3.5:
   resolved "https://registry.npmjs.org/axe-core/-/axe-core-4.4.1.tgz#7dbdc25989298f9ad006645cd396782443757413"
   integrity sha512-gd1kmb21kwNuWr6BQz8fv6GNECPBnUasepcoLbekws23NVBLODdsClRZ+bQ8+9Uomf3Sm3+Vwn0oYG9NvwnJCw==
 
-axios@^0.26.1:
-  version "0.26.1"
-  resolved "https://registry.npmjs.org/axios/-/axios-0.26.1.tgz#1ede41c51fcf51bbbd6fd43669caaa4f0495aaa9"
-  integrity sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==
-  dependencies:
-    follow-redirects "^1.14.8"
-
 axobject-query@^2.2.0:
   version "2.2.0"
   resolved "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
@@ -4444,7 +4437,7 @@ flatted@^3.1.0:
   resolved "https://registry.npmjs.org/flatted/-/flatted-3.2.5.tgz#76c8584f4fc843db64702a6bd04ab7a8bd666da3"
   integrity sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==
 
-follow-redirects@^1.0.0, follow-redirects@^1.14.8:
+follow-redirects@^1.0.0:
   version "1.14.9"
   resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz#dd4ea157de7bfaf9ea9b3fbd85aa16951f78d8d7"
   integrity sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==
@@ -7238,13 +7231,6 @@ react-app-polyfill@^3.0.0:
     regenerator-runtime "^0.13.9"
     whatwg-fetch "^3.6.2"
 
-react-audio-player@^0.17.0:
-  version "0.17.0"
-  resolved "https://registry.npmjs.org/react-audio-player/-/react-audio-player-0.17.0.tgz#4be7b1952512801f36ba0865a9c98f7b108f991e"
-  integrity sha512-aCZgusPxA9HK7rLZcTdhTbBH9l6do9vn3NorgoDZRxRxJlOy9uZWzPaKjd7QdcuP2vXpxGA/61JMnnOEY7NXeA==
-  dependencies:
-    prop-types "^15.7.2"
-
 react-dev-utils@^12.0.0:
   version "12.0.0"
   resolved "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.0.tgz#4eab12cdb95692a077616770b5988f0adf806526"
@@ -7299,6 +7285,11 @@ react-is@^17.0.1, react-is@^17.0.2:
   resolved "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
+react-loading@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.npmjs.org/react-loading/-/react-loading-2.0.3.tgz#e8138fb0c3e4674e481b320802ac7048ae14ffb9"
+  integrity sha512-Vdqy79zq+bpeWJqC+xjltUjuGApyoItPgL0vgVfcJHhqwU7bAMKzysfGW/ADu6i0z0JiOCRJjo+IkFNkRNbA3A==
+
 react-redux@^7.2.6:
   version "7.2.6"
   resolved "https://registry.npmjs.org/react-redux/-/react-redux-7.2.6.tgz#49633a24fe552b5f9caf58feb8a138936ddfe9aa"