fix: update the youtube redirect

components/Sentence.tsx

@@ -1,24 +1,35 @@
 import { extractSentence } from "~/utils/extractSentence";
 import { extractTimestamp } from "~/utils/extractTimestamp";
 
-export default function Sentence({
-  bvId,
+export default function videoIdSentence({
+  videoId,
+  videoUrl,
   sentence,
 }: {
-  bvId: string;
+  videoId: string;
+  videoUrl: string;
   sentence: string;
 }) {
-  const baseUrl = `https://www.bilibili.com/video/${bvId}`;
+  // https://youtube.com/watch?v=DHhOgWPKIKU&t=15s
+  // https://youtu.be/DHhOgWPKIKU?t=246
+  // https://www.bilibili.com/video/BV1fX4y1Q7Ux/?t=10
+
+  const isBiliBili = videoUrl.includes("bilibili.com");
+  // todo: if videoUrl is short-url (not bilibili.com or youtube.com)
+  const baseUrl = isBiliBili
+    ? `https://www.bilibili.com/video/${videoId}/?t=`
+    : `https://youtube.com/watch?v=${videoId}&t=`;
 
   const matchResult = extractSentence(sentence);
   if (matchResult) {
-    const seconds = matchResult[1];
+    // simplify the seconds with number, todo: 0.003 is not able
+    const seconds = matchResult[1].split(":")[0];
     const { formattedContent, timestamp } = extractTimestamp(matchResult);
 
     return (
       <li className="mb-2 list-disc">
         <a
-          href={`${encodeURI(`${baseUrl}/?t=${seconds}`)}`}
+          href={`${encodeURI(baseUrl + seconds)}`}
           target="_blank"
           rel="noopener noreferrer"
           className="z-10 text-sky-400 hover:text-sky-600"

components/SummaryResult.tsx

@@ -11,12 +11,12 @@ if (typeof window !== "undefined") {
 }
 
 export function SummaryResult({
-  curVideo,
-  currentBvId,
+  currentVideoUrl,
+  currentVideoId,
   summary,
 }: {
-  curVideo: string;
-  currentBvId: string;
+  currentVideoUrl: string;
+  currentVideoId: string;
   summary: string;
 }) {
   const { toast } = useToast();
@@ -39,12 +39,12 @@ export function SummaryResult({
     <div className="mb-8 px-4">
       <h3 className="m-8 mx-auto max-w-3xl border-t-2 border-dashed pt-8 text-center text-2xl font-bold sm:text-4xl">
         <a
-          href={curVideo}
+          href={currentVideoUrl}
           className="hover:text-pink-600 hover:underline"
           target="_blank"
           rel="noreferrer"
         >
-          {`【📝 总结：${currentBvId}】`}
+          {`【📝 总结：${currentVideoId}】`}
         </a>
       </h3>
       <div
@@ -54,12 +54,16 @@ export function SummaryResult({
         {summaryArray.map((sentence, index) => (
           <div key={index}>
             {sentence.length > 0 && (
-              <Sentence bvId={currentBvId} sentence={sentence} />
+              <Sentence
+                videoId={currentVideoId}
+                videoUrl={currentVideoUrl}
+                sentence={sentence}
+              />
             )}
           </div>
         ))}
       </div>
-      <ActionsAfterResult curVideo={curVideo} onCopy={handleCopy} />
+      <ActionsAfterResult curVideo={currentVideoUrl} onCopy={handleCopy} />
     </div>
   );
 }

pages/[...slug].tsx

@@ -28,7 +28,7 @@ export const Home: NextPage = () => {
   const [currentVideoUrl, setCurrentVideoUrl] = useState<string>("");
   const [shouldShowTimestamp, setShouldShowTimestamp] =
     useLocalStorage<boolean>("should-show-timestamp", false);
-  const [currentBvId, setCurrentVideoId] = useState<string>("");
+  const [currentVideoId, setCurrentVideoId] = useState<string>("");
   const [userKey, setUserKey, remove] =
     useLocalStorage<string>("user-openai-apikey");
   const { loading, summary, resetSummary, summarize } = useSummarize();
@@ -118,7 +118,8 @@ export const Home: NextPage = () => {
     setShouldShowTimestamp(checked);
     analytics
       .track(`ShowTimestamp Clicked`, {
-        bvId: currentBvId,
+        videoId: currentVideoId,
+        // todo: add video service
         shouldShowTimestamp: checked,
       })
       .then((res) => console.log("tracked!", res))
@@ -149,8 +150,8 @@ export const Home: NextPage = () => {
       {summary && (
         <SummaryResult
           summary={summary}
-          curVideo={currentVideoUrl}
-          currentBvId={currentBvId}
+          currentVideoUrl={currentVideoUrl}
+          currentVideoId={currentVideoId}
         />
       )}
     </div>

utils/extractTimestamp.ts

@@ -1,6 +1,6 @@
 export function extractTimestamp(matchResult: RegExpMatchArray) {
   let timestamp: string | undefined;
-  const seconds = Number(matchResult[1].replace(':', '.'));
+  const seconds = Number(matchResult[1].replace(":", "."));
   const hours = Math.floor(seconds / 3600);
   const remainingSeconds = Math.floor(seconds % 3600);
   const minutes = Math.floor(remainingSeconds / 60);
@@ -16,14 +16,14 @@ export function extractTimestamp(matchResult: RegExpMatchArray) {
   const content = matchResult[2];
   let formattedContent = content;
   try {
-    formattedContent = (content && /^[:：秒]/.test(content))
-      ? content.substring(1)
-      : content;
-    formattedContent = (formattedContent && !/^ /.test(formattedContent))
-      ? ' ' + formattedContent
-      : formattedContent;
-  }catch(e){
-    console.log('handle text after time error', e);
+    formattedContent =
+      content && /^[:：秒]/.test(content) ? content.substring(1) : content;
+    formattedContent =
+      formattedContent && !/^ /.test(formattedContent)
+        ? " " + formattedContent
+        : formattedContent;
+  } catch (e) {
+    console.log("handle text after time error", e);
   }
   // console.log("========matchResult========", {matchResult, timestamp, formattedContent});
   return { timestamp, formattedContent };