feat: polish ux & bump 0.4.0

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "aleph"
-version = "0.3.0"
+version = "0.4.0"
 description = "A Tauri App"
 authors = ["chezhe"]
 license = ""

src-tauri/tauri.conf.json

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

src/components/AddFeed.tsx

@@ -4,7 +4,7 @@ import { useState } from 'react'
 import { useAppDispatch } from '../store/hooks'
 import { Feed, FeedType } from '../types'
 import { fetchFeed } from '../utils/network'
-import { createFeed } from '../utils/storage'
+import { createFeed, removeFeed } from '../utils/storage'
 
 export default function AddFeed({
   onClose,
@@ -72,27 +72,28 @@ export default function AddFeed({
             disabled={isAdding}
             style={{ borderRadius: 0 }}
             onClick={async () => {
-              try {
-                setIsAdding(true)
-                const _feed = {
-                  name,
-                  url,
-                  type,
+              const _feed = {
+                name,
+                url,
+                type,
+              }
+              if (feed) {
+                const newFeed = {
+                  ..._feed,
+                  id: feed.id,
                 }
-                if (feed) {
-                  const newFeed = {
-                    ..._feed,
-                    id: feed.id,
-                  }
-                  dispatch({
-                    type: 'feed/update',
-                    payload: newFeed,
-                  })
-                } else {
+                dispatch({
+                  type: 'feed/update',
+                  payload: newFeed,
+                })
+              } else {
+                try {
+                  setIsAdding(true)
                   const newFeed = await createFeed(_feed)
 
                   const episodes = await fetchFeed(newFeed)
                   if (episodes.length === 0) {
+                    removeFeed(newFeed)
                     throw new Error('No episodes found')
                   }
                   dispatch({
@@ -104,12 +105,13 @@ export default function AddFeed({
                     payload: episodes,
                   })
                   setActiveFeed(newFeed)
+
+                  setIsAdding(false)
+                  onClose()
+                } catch (error: any) {
+                  setIsAdding(false)
+                  sendNotification(error?.message)
                 }
-                setIsAdding(false)
-                onClose()
-              } catch (error: any) {
-                setIsAdding(false)
-                sendNotification(error?.message)
               }
             }}
           />

src/components/EpisodeList.tsx

@@ -61,7 +61,6 @@ export default function EpisodeList({
   useEffect(() => {
     const callback = (e: KeyboardEvent) => {
       const index = _eposides.findIndex((t) => t.link === activeItem?.link)
-      console.log(index)
       if (activeItem) {
         if (index >= 0) {
           if (e.code === 'ArrowRight' && index < _eposides.length - 1) {
@@ -172,12 +171,6 @@ export default function EpisodeList({
                       <Text size="xsmall" color="dark-6">
                         {dayjs(item.pubDate).format('YYYY-MM-DD HH:mm')}
                       </Text>
-                      <Markdown
-                        className="markdown-digest"
-                        components={{ a: MarkAnchor }}
-                      >
-                        {digest}
-                      </Markdown>
                     </Box>
                   )
                 })}

src/components/Layout.tsx

@@ -3,9 +3,8 @@ import { useEffect, useState } from 'react'
 import { useAppDispatch, useAppSelector } from '../store/hooks'
 import { Episode, Feed } from '../types'
 import { fetchFeed } from '../utils/network'
-import { allEpisodes, allFeeds, connect } from '../utils/storage'
+import { allEpisodes, allFeeds, clearStorage, connect } from '../utils/storage'
 import EpisodeList from './EpisodeList'
-import Playing from './Playing'
 import PodPlayer from './PodPlayer'
 import Reader from './Reader'
 import Sidebar from './Sidebar'
@@ -23,6 +22,7 @@ export default function Layout({ children }: { children?: React.ReactNode }) {
   useEffect(() => {
     connect().then(() => {})
     setTimeout(() => {
+      // clearStorage()
       allFeeds()
         .then((feeds: Feed[]) => {
           dispatch({
@@ -80,15 +80,17 @@ export default function Layout({ children }: { children?: React.ReactNode }) {
               dispatch({ type: 'episode/read', payload: item })
             }}
           />
-          <Reader activeItem={activeItem} />
-
-          <PodPlayer activeItem={activeItem} setPlayingEp={setPlayingEp} />
-
-          <Playing
+          <Reader
             activeItem={activeItem}
             playingEp={playingEp}
             setPlayingEp={setPlayingEp}
           />
+
+          <PodPlayer
+            playingEp={playingEp}
+            setPlayingEp={setPlayingEp}
+            setActiveItem={setActiveItem}
+          />
         </Box>
       </Main>
     </Grommet>

src/components/PodPlayer.tsx

@@ -1,16 +1,19 @@
-import { Box, Image } from 'grommet'
+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 PodPlayer({
-  activeItem,
+  playingEp,
   setPlayingEp,
+  setActiveItem,
 }: {
-  activeItem: Episode | undefined
+  playingEp: Episode | undefined
   setPlayingEp: (ep: Episode | undefined) => void
+  setActiveItem: (ep: Episode | undefined) => void
 }) {
-  if (!activeItem || !activeItem.podurl) {
+  if (!playingEp) {
     return null
   }
 
@@ -25,15 +28,31 @@ export default function PodPlayer({
       background="light-5"
       width="calc(100vw - 500px)"
     >
-      <Image src={stripURL(activeItem?.cover || '')} height="80px" alt="" />
+      <Image src={stripURL(playingEp?.cover || '')} height="80px" alt="" />
       <ReactAudioPlayer
-        src={stripURL(activeItem.podurl)}
+        src={stripURL(playingEp.podurl)}
+        autoPlay
         controls
         style={{ width: '100%' }}
         onPlay={() => {
-          setPlayingEp(activeItem)
+          // setPlayingEp(playingEp)
         }}
       />
+      <Box width="100px" gap="xsmall">
+        <Button
+          size="small"
+          label="Close"
+          style={{ borderRadius: 0 }}
+          onClick={() => setPlayingEp(undefined)}
+        />
+
+        <Button
+          size="small"
+          label="EP"
+          style={{ borderRadius: 0 }}
+          onClick={() => setActiveItem(playingEp)}
+        />
+      </Box>
     </Box>
   )
 }

src/components/Reader.tsx

@@ -12,9 +12,10 @@ import { Episode } from '../types'
 import TurndownService from 'turndown'
 import dayjs from 'dayjs'
 import NoContent from '../assets/no-content.png'
-import { Compass, Star } from 'grommet-icons'
+import { CirclePlay, Compass, Star } from 'grommet-icons'
 import { useAppDispatch } from '../store/hooks'
 import { useState } from 'react'
+import { stripURL } from '../utils/format'
 
 const turndownService = new TurndownService()
 
@@ -30,8 +31,12 @@ function MarkAnchor(props: any) {
 
 export default function Reader({
   activeItem,
+  playingEp,
+  setPlayingEp,
 }: {
   activeItem: Episode | undefined
+  playingEp: Episode | undefined
+  setPlayingEp: (ep: Episode | undefined) => void
 }) {
   const dispatch = useAppDispatch()
   const [isStarred, setIsStarred] = useState(activeItem?.starred ?? false)
@@ -96,6 +101,41 @@ export default function Reader({
             <Text size="small" color="dark-6" margin={{ vertical: 'small' }}>
               {dayjs(activeItem?.pubDate).format('YYYY-MM-DD HH:mm')}
             </Text>
+            <Box pad={{ bottom: 'medium' }}>
+              {activeItem?.podurl && (
+                <Button
+                  icon={
+                    <Box
+                      width="200px"
+                      height="200px"
+                      align="center"
+                      justify="center"
+                      style={{
+                        WebkitBackdropFilter: 'blur(10px)',
+                        backdropFilter: 'blur(10px)',
+                        backgroundColor: 'rgba(255, 255, 255, 0.5)',
+                      }}
+                    >
+                      <CirclePlay size="100px" />
+                    </Box>
+                  }
+                  style={{
+                    width: 200,
+                    height: 200,
+                    padding: 0,
+                    backgroundImage: `url(${stripURL(
+                      activeItem?.cover || ''
+                    )})`,
+                    backgroundSize: 'cover',
+                  }}
+                  onClick={() => {
+                    if (!playingEp || playingEp.link !== activeItem.link) {
+                      setPlayingEp(activeItem)
+                    }
+                  }}
+                />
+              )}
+            </Box>
             <Markdown
               className="markdown-reader"
               components={{ a: MarkAnchor }}

src/utils/network.ts

@@ -30,6 +30,7 @@ export async function fetchFeed(feed: Feed): Promise<Feed[]> {
       )
     })
     .catch((err) => {
+      console.log(err)
       return []
     })
 }
@@ -52,16 +53,20 @@ export function formatEpisode(item: any, feed: Feed) {
       cover: newItem['itunes:image']['@_href'],
     }
   }
-  const guid =
-    typeof newItem.guid === 'string' ? newItem.guid : newItem.guid['#text']
+  let guid = ''
+  if (newItem.guid) {
+    guid =
+      typeof newItem.guid === 'string' ? newItem.guid : newItem.guid['#text']
+  }
+
   newItem = {
     link: newItem.link || guid,
     author: newItem.author || newItem['itunes:author'] || '',
     pubDate: newItem.pubDate || '',
     cover: newItem.cover || '',
     podurl: newItem.enclosure?.url || '',
     title: newItem.title || '',
-    description: newItem.description || newItem['content:encoded'] || '',
+    description: newItem['content:encoded'] || newItem.description || '',
     guid: guid || '',
     feedid: feed.id,
     readed: false,

src/utils/storage.ts

@@ -112,12 +112,20 @@ export async function starEpisode(
   }
   return episode
 }
+
 export async function removeFeed(feed: Feed) {
   try {
     await db?.execute('DELETE FROM feeds WHERE id = $1', [feed.id])
     await db?.execute(
-      'DELETE FROM episodes WHERE feedid = $1 and starred = true',
-      [feed.id]
+      'DELETE FROM episodes WHERE feedid = $1 AND starred = $2',
+      [feed.id, false]
     )
   } catch (error) {}
 }
+
+export async function clearStorage() {
+  try {
+    await db?.execute('DELETE FROM feeds')
+    await db?.execute('DELETE FROM episodes')
+  } catch (error) {}
+}