Improve youtube UX

auto-scroll to current transcript, change language and jump to current time
WorldBrain · Jul 23, 2024 · a76788a · a76788a
1 parent 6151801
commit a76788a
Show file tree

Hide file tree

Showing 6 changed files with 347 additions and 22 deletions.
diff --git a/external/@worldbrain/memex-common b/external/@worldbrain/memex-common
diff --git a/src/content-scripts/content_script/global.ts b/src/content-scripts/content_script/global.ts
@@ -126,7 +126,10 @@ import * as anchoring from '@worldbrain/memex-common/lib/annotations'
 import type { TaskState } from 'ui-logic-core/lib/types'
 import debounce from 'lodash/debounce'
 import { updateNudgesCounter } from 'src/util/nudges-utils'
-import { fetchYoutubeTranscript } from 'src/util/fetch-youtube-transcript'
+import {
+    fetchAvailableTranscriptLanguages,
+    fetchYoutubeTranscript,
+} from 'src/util/fetch-youtube-transcript'
 
 // Content Scripts are separate bundles of javascript code that can be loaded
 // on demand by the browser, as needed. This main function manages the initialisation
@@ -999,8 +1002,12 @@ export async function main(
     }
 
     const transcriptFunctions = {
-        fetchTranscript: async (videoId: string) => {
-            return (await fetchYoutubeTranscript(videoId, true))?.transcriptText
+        fetchTranscript: async (videoId: string, language: string) => {
+            return (await fetchYoutubeTranscript(videoId, language, true))
+                ?.transcriptText
+        },
+        fetchAvailableTranscriptLanguages: async (videoId: string) => {
+            return await fetchAvailableTranscriptLanguages(videoId)
         },
     }
 

diff --git a/src/dashboard-refactor/styled-components.tsx b/src/dashboard-refactor/styled-components.tsx
@@ -83,7 +83,7 @@ export const Icon = (props: IconProps) => {
     )
 }
 
-export const LoadingContainer = ({ children }) => {
+export const LoadingContainer = ({ children, height = '100%' }) => {
     const Container = styled.div`
         width: 100%;
         display: flex;
@@ -93,7 +93,7 @@ export const LoadingContainer = ({ children }) => {
         grid-gap: 20px;
         color: ${(props) => props.theme.colors.greyScale6};
         font-size: 20px;
-        height: 100%;
+        height: ${height ?? '100%'};
     `
     return <Container>{children}</Container>
 }

diff --git a/src/page-analysis/background/analyse-page.ts b/src/page-analysis/background/analyse-page.ts
@@ -74,7 +74,7 @@ const analysePage: PageAnalyzer = async (options) => {
     }
 
     if (videoId) {
-        let transcriptJSON = await fetchYoutubeTranscript(videoId)
+        let transcriptJSON = await fetchYoutubeTranscript(videoId, 'en')
 
         if (transcriptJSON != null) {
             content.fullText =