Add playpause on audio player thumbnail

Author: jasonm23

src/components/downloaded/audio-player.tsx

@@ -4,6 +4,8 @@ import { CustomAudioPlayer } from '@/components/ocodo-ui/custom-audio-component'
 import { useEffect, type FC } from 'react';
 import { UvxYtdlpIcon } from '@/components/branding/uvxytdlp-icon';
 import { useAudioPlayerContext } from '@/contexts/audio-player-context-provider';
+import { PauseIcon, PlayIcon } from 'lucide-react';
+import { thinIconStyle } from '@/lib/icon-style';
 
 interface AudioPlayerProps {
   fileName: string;
@@ -13,9 +15,9 @@ const fileToTitle = (fileName: string): string => fileName.replace(/\.[^/.]+$/,
 
 export const AudioPlayer: FC<AudioPlayerProps> = ({ fileName }) => {
   const title = fileToTitle(fileName)
-  const ext = fileName.replace(`${title}.`,'')
+  const ext = fileName.replace(`${title}.`, '')
   const { apiBase } = useApiBase()
-  const { setSrc } = useAudioPlayerContext()
+  const { setSrc, toggleAudioPlayPause, isPlaying } = useAudioPlayerContext()
 
   useEffect(() => {
     if (apiBase && fileName) {
@@ -26,19 +28,41 @@ export const AudioPlayer: FC<AudioPlayerProps> = ({ fileName }) => {
 
   return (
     <div className={`select-none grid grid-cols-1 md:grid-cols-[auto_1fr] gap-4 p-4
-                     justify-center items-center sm:border sm:rounded-xl`}>
-      <div className='flex flex-row items-center justify-center'>
-        <Img
-          className="h-[15em] bg-background/20 rounded-xl object-cover"
-          src={`${apiBase}/thumbnail/${fileName}`}
-          unloader={<UvxYtdlpIcon
-            size={301}
-            colors={["#6004", "#0604", "#0064"]}
-            strokeWidth={6}
-            totalDuration={10000}
-            fadeDuration={3000}
-          />}
-        />
+                     justify-center items-center sm:border sm:rounded-x relative`}>
+      <div
+        onClick={() => toggleAudioPlayPause()}
+        className='group flex flex-row items-center justify-center'
+      >
+        <div
+          className={`absolute cursor-pointer opacity-10
+                       group-hover:opacity-100
+                       transition-opacity duration-500
+                       rounded-full bg-background/30
+                       w-20 h-20 mb-[22px]
+                       flex flex-row items-center justify-center`}>
+          {isPlaying
+            ? <PauseIcon
+              style={{ stroke: '#fff', ...thinIconStyle }}
+              className="w-12 h-12 ml-[3px]" />
+            : <PlayIcon
+              style={{ stroke: '#fff', ...thinIconStyle }}
+              className="w-12 h-12 ml-[3px]" />
+          }
+        </div>
+        <div className='flex flex-row items-center justify-center'>
+          <Img
+            className="h-[15em] bg-background/20 rounded-xl object-cover"
+            src={`${apiBase}/thumbnail/${fileName}`}
+            unloader={<UvxYtdlpIcon
+              size={301}
+              colors={["#6004", "#0604", "#0064"]}
+              strokeWidth={6}
+              totalDuration={10000}
+              fadeDuration={3000}
+            />}
+          />
+        </div>
+
       </div>
       {/* Col 2 */}
       <div className="grid grid-rows-[1fr_auto] h-full gap-4">

src/components/downloaded/downloaded-file.tsx

@@ -26,7 +26,7 @@ export const DowloadedFile: React.FC<DowloadedFileProps> = (props) => {
   const { apiBase } = useApiBase()
   const { viewType } = useDownloaded()
 
-  const Image = () => (
+  const image = () => (
     <div
       className="flex flex-col justify-center items-center relative gap-1 bg-black rounded-t-xl group"
       onClick={() => handlePlay(file.name)}>
@@ -58,7 +58,7 @@ export const DowloadedFile: React.FC<DowloadedFileProps> = (props) => {
     </div>
   )
 
-  const PlayButton = () => (
+  const playButton = () => (
     <div className={roundButtonClasses}
       onClick={() => handlePlay(file.name)} >
       <PlayIcon
@@ -68,7 +68,7 @@ export const DowloadedFile: React.FC<DowloadedFileProps> = (props) => {
     </div>
   )
 
-  const DownloadButton = () => (
+  const downloadButton = () => (
     <div className={roundButtonClasses}
       onClick={() => handleDownload(file.name)} >
       <DownloadIcon
@@ -78,7 +78,7 @@ export const DowloadedFile: React.FC<DowloadedFileProps> = (props) => {
     </div>
   )
 
-  const DeleteButton = () => (
+  const deleteButton = () => (
     <LongPressButton
       onLongPress={() => handleDelete(file.name)}
       longPressDuration={1000}
@@ -103,16 +103,16 @@ export const DowloadedFile: React.FC<DowloadedFileProps> = (props) => {
 
   return (
     <div className={isList ? listClasses : gridClasses}>
-      {isGrid && <Image />}
+      {isGrid && image()}
       <div
         className={isList ? listNameClasses : gridNameClasses}>
         {file.name}
       </div>
       <div
         className={isList ? listButtonClasses : gridButtonClasses}>
-        <PlayButton />
-        <DownloadButton />
-        <DeleteButton />
+        {playButton()}
+        {downloadButton()}
+        {deleteButton()}
       </div>
     </div>
   )