Merge pull request #4 from chezhe/master

bump 0.5.0

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)

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",

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 = ""

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "package": {
     "productName": "aleph",
-    "version": "0.4.0"
+    "version": "0.5.0"
   },
   "build": {
     "distDir": "../build",

src/components/AddFeed.tsx

@@ -86,6 +86,7 @@ export default function AddFeed({
                   type: 'feed/update',
                   payload: newFeed,
                 })
+                onClose()
               } else {
                 try {
                   setIsAdding(true)

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"

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"
@@ -111,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)',
                       }}
                     >

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 {

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[]) => {