forked from VueTubeApp/VueTube
-
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
8 changed files
with
220 additions
and
17 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,73 @@ | ||
| <template> | ||
| <v-btn fab text small disabled> | ||
| <v-icon>mdi-closed-caption-outline</v-icon> | ||
| </v-btn> | ||
|
|
||
| <div> | ||
| <v-bottom-sheet | ||
| v-model="sheet" | ||
| :attach="$parent.$refs.vidcontainer" | ||
| style="z-index: 777777" | ||
| scrollable | ||
| > | ||
| <template #activator="{ on, attrs }"> | ||
| <v-btn | ||
| fab | ||
| text | ||
| small | ||
| color="white" | ||
| v-bind="attrs" | ||
| v-on="on" | ||
| > | ||
| <v-icon>mdi-closed-caption-outline</v-icon> | ||
| </v-btn> | ||
| </template> | ||
| <v-card class="background"> | ||
| <v-subheader | ||
| v-touch="{ | ||
| down: () => (sheet = false), | ||
| }" | ||
| > | ||
| Captions for current video | ||
| <v-spacer /> | ||
| <v-btn fab text small @click="sheet = false"> | ||
| <v-icon>mdi-close</v-icon> | ||
| </v-btn> | ||
| </v-subheader> | ||
| <v-divider /> | ||
| <v-card-text | ||
| style="max-height: 50vh; flex-direction: column !important" | ||
| class="pa-0 d-flex flex-column-reverse" | ||
| > | ||
| <v-list-item-group | ||
| v-for="src in captions" | ||
| :key="src" | ||
| > | ||
| <v-list-item | ||
| @click="(sheet = false), $emit('captionsHandler', src)"> | ||
| <v-list-item-content> | ||
| <v-list-item-title > | ||
| {{src.name.runs[0].text}} | ||
| </v-list-item-title> | ||
| </v-list-item-content> | ||
| </v-list-item> | ||
|
|
||
| <v-divider /> | ||
| </v-list-item-group> | ||
|
|
||
| </v-card-text> | ||
| </v-card> | ||
| </v-bottom-sheet> | ||
| </div> | ||
| </template> | ||
| <script> | ||
| export default { | ||
| props: { | ||
| captions: { | ||
| type: Array, | ||
| default: [], | ||
| }, | ||
| }, | ||
| emits: ["captionsHandler"], | ||
| data: () => ({ | ||
| sheet: false, | ||
| }), | ||
| } | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -51,12 +51,70 @@ function setHttp(link) { | |
|
|
||
| // Replace inputted html with tweemoji | ||
| function parseEmoji(body) { | ||
| if (twemoji) | ||
| return twemoji.parse(body, { | ||
| folder: "svg", | ||
| ext: ".svg", | ||
| base: 'https://cdn.jsdelivr.net/gh/twitter/[email protected]/assets/' | ||
| }); | ||
| try { | ||
|
|
||
| if (twemoji) | ||
| return twemoji.parse(body, { | ||
| folder: "svg", | ||
| ext: ".svg", | ||
| base: 'https://cdn.jsdelivr.net/gh/twitter/[email protected]/assets/' | ||
| }); | ||
| }catch (e) { | ||
|
|
||
| } | ||
| } | ||
|
|
||
| // Function to convert seconds to VTT timestamp format | ||
| function secondsToVTTTime(seconds) { | ||
| const hours = Math.floor(seconds / 3600); | ||
| const minutes = Math.floor((seconds % 3600) / 60); | ||
| const secs = Math.floor(seconds % 60); | ||
| const milliseconds = Math.round((seconds % 1) * 1000); | ||
|
|
||
| return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}.${String(milliseconds).padStart(3, '0')}`; | ||
| } | ||
| function decodeHtmlEntities(str) { | ||
| const parser = new DOMParser(); | ||
| const doc = parser.parseFromString(`<!doctype html><body>${str}`, 'text/html'); | ||
| return doc.body.textContent || ''; | ||
| } | ||
|
|
||
| // Function to parse transcript and convert to VTT | ||
| function convertTranscriptToVTT(transcript) { | ||
| // transcript =JSON.parse(JSON.stringify(transcript)).data; | ||
| console.warn(transcript); | ||
| // Extract <text> elements from the transcript | ||
| const textElements = transcript.match(/<text start="([\d.]+)" dur="([\d.]+)">([^<]+)<\/text>/g); | ||
|
|
||
| console.warn(textElements); | ||
| // Initialize VTT output with header | ||
| let vttOutput = 'WEBVTT\n\n'; | ||
| for (let i = 0; i < textElements.length; i++) { | ||
| let textElement = textElements[i]; | ||
| const startMatch = textElement.match(/start="([\d.]+)"/); | ||
| const durMatch = textElement.match(/dur="([\d.]+)"/); | ||
| const contentMatch = textElement.match(/>([^<]+)<\/text>/); | ||
|
|
||
| if (startMatch && durMatch && contentMatch) { | ||
| const start = parseFloat(startMatch[1]); | ||
| const duration = parseFloat(durMatch[1]); | ||
| const content = decodeHtmlEntities(contentMatch[1].replace(/\+/g, ' ')); // Decode HTML entities | ||
|
|
||
| let end; | ||
| if (i+1 >= textElements.length) { | ||
| end = start + duration; | ||
| } | ||
| else { | ||
| end = textElements[i+1].match(/start="([\d.]+)"/)[1]; | ||
| } | ||
| const startTime = secondsToVTTTime(start); | ||
| const endTime = secondsToVTTTime(end); | ||
|
|
||
| vttOutput += `${startTime} --> ${endTime}\n\n\n`; // margin bottom huh | ||
| vttOutput += `${startTime} --> ${endTime}\n${content}\n\n`; | ||
| } | ||
| } | ||
| return vttOutput.trim(); | ||
| } | ||
|
|
||
| function linkParser(url) { | ||
|
|
@@ -93,4 +151,5 @@ module.exports = { | |
| delay, | ||
| parseEmoji, | ||
| humanFileSize, | ||
| convertTranscriptToVTT | ||
| }; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters