From 8ec4b11505e96378652f8cc8573925f86cd92df5 Mon Sep 17 00:00:00 2001
From: Tommy Tsui <tomitsui123@gmail.com>
Date: Fri, 19 Jan 2024 17:00:44 +0800
Subject: [PATCH] =?UTF-8?q?bug=EF=BC=9A=E9=80=89=E6=8B=A9community?=
 =?UTF-8?q?=E4=B8=AD=E7=9A=84vedio=EF=BC=8C=E7=82=B9=E5=87=BBDownload?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E6=8A=A5=E9=94=99=20#147=20(#159)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor: create DownloadType

* refactor: implement Downloadtype to the code

* bug: 选择community中的vedio，点击Download按钮报错 #147

https://github.com/xiaolai/everyone-can-use-english/issues/147
New behaviour:
1. Disable the other button while either of the button is clicked.
2. Show loading icon only to the clicked button

---------

Co-authored-by: Tommy Tsui <tommy.tsui@yedpay.com.hk>
---
 .../components/videos/ted-talks-segment.tsx   | 22 ++++++++++++++-----
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/enjoy/src/renderer/components/videos/ted-talks-segment.tsx b/enjoy/src/renderer/components/videos/ted-talks-segment.tsx
index 186877b5..604f2d2a 100644
--- a/enjoy/src/renderer/components/videos/ted-talks-segment.tsx
+++ b/enjoy/src/renderer/components/videos/ted-talks-segment.tsx
@@ -1,3 +1,5 @@
+/** @format */
+
 import { useState, useEffect, useContext } from "react";
 import { AppSettingsProviderContext } from "@renderer/context";
 import {
@@ -16,24 +18,30 @@ import { useNavigate } from "react-router-dom";
 import { LoaderIcon } from "lucide-react";
 import { secondsToTimestamp } from "@renderer/lib/utils";
 
+enum DownloadType {
+  audio = "audio",
+  video = "video",
+}
 export const TedTalksSegment = () => {
   const navigate = useNavigate();
   const { EnjoyApp } = useContext(AppSettingsProviderContext);
   const [talks, setTalks] = useState<TedTalkType[]>([]);
   const [selectedTalk, setSelectedTalk] = useState<TedTalkType | null>(null);
   const [submitting, setSubmitting] = useState(false);
+  const [submittingType, setSubmittingType] = useState<DownloadType | null>();
   const [downloadUrl, setDownloadUrl] = useState<{
     audio: string;
     video: string;
   }>();
 
-  const addToLibrary = (type: "audio" | "video") => {
+  const addToLibrary = (type: DownloadType) => {
     if (!downloadUrl) return;
     if (!selectedTalk) return;
 
     let url = downloadUrl.audio;
-    if (type === "video") url = downloadUrl.video;
+    if (type === DownloadType.video) url = downloadUrl.video;
     setSubmitting(true);
+    setSubmittingType(type);
 
     EnjoyApp.videos
       .create(url, {
@@ -49,6 +57,7 @@ export const TedTalksSegment = () => {
       })
       .finally(() => {
         setSubmitting(false);
+        setSubmittingType(null);
       });
   };
 
@@ -169,10 +178,11 @@ export const TedTalksSegment = () => {
               </Button>
               {downloadUrl.audio && (
                 <Button
-                  onClick={() => addToLibrary("audio")}
+                  onClick={() => addToLibrary(DownloadType.audio)}
                   disabled={submitting}
                 >
-                  {submitting && (
+                  {submittingType === DownloadType.audio && (
+
                     <LoaderIcon className="w-4 h-4 animate-spin mr-2" />
                   )}
                   {t("downloadAudio")}
@@ -180,10 +190,10 @@ export const TedTalksSegment = () => {
               )}
               {downloadUrl.video && (
                 <Button
-                  onClick={() => addToLibrary("video")}
+                  onClick={() => addToLibrary(DownloadType.video)}
                   disabled={submitting}
                 >
-                  {submitting && (
+                  {submittingType === DownloadType.video && (
                     <LoaderIcon className="w-4 h-4 animate-spin mr-2" />
                   )}
                   {t("downloadVideo")}