Skip to content

Instantly share code, notes, and snippets.

@VinayChaurasiyaA

VinayChaurasiyaA/lyrics.js

Last active September 3, 2024 18:47
Show Gist options
  • Save VinayChaurasiyaA/130ca6d91f88a2d59a28e8be9d4f14fb to your computer and use it in GitHub Desktop.
Save VinayChaurasiyaA/130ca6d91f88a2d59a28e8be9d4f14fb to your computer and use it in GitHub Desktop.
Download ZIP
Raw
lyrics.js
let apiKey = null;
injectLyrics: function (lyrics) {
let lyricsWrapper = BetterLyrics.DOM.createLyricsWrapper();
BetterLyrics.DOM.addFooter();
try {
lyricsWrapper.innerHTML = "";
const lyricsContainer = document.createElement("div");
lyricsContainer.className = BetterLyrics.Constants.LYRICS_CLASS;
lyricsWrapper.appendChild(lyricsContainer);
BetterLyrics.DOM.flushLoader();
lyricsWrapper.removeAttribute("is-empty");
} catch (_err) {
BetterLyrics.Utils.log(BetterLyrics.Constants.LYRICS_WRAPPER_NOT_VISIBLE_LOG);
}
BetterLyrics.Translation.onTranslationEnabled(items => {
BetterLyrics.Utils.log(BetterLyrics.Constants.TRANSLATION_ENABLED_LOG, items.translationLanguage);
});
const allZero = lyrics.every(item => item.startTimeMs === "0");
lyrics.forEach(item => {
let line = document.createElement("div");
line.dataset.time = item.startTimeMs / 1000;
line.style = "--blyrics-duration: " + item.durationMs / 1000 + "s;";
const words = item.words.split(" ");
if (!allZero) {
line.setAttribute("data-scrolled", false);
line.setAttribute(
"onClick",
`const player = document.getElementById("movie_player"); player.seekTo(${
item.startTimeMs / 1000
}, true);player.playVideo();`
);
} else {
line.classList.add(BetterLyrics.Constants.CURRENT_LYRICS_CLASS);
}
words.forEach((word, index) => {
let span = document.createElement("span");
span.style.transitionDelay = `${index * 0.05}s`;
span.style.animationDelay = `${index * 0.05}s`;
span.textContent = words.length <= 1 ? word : word + " ";
line.appendChild(span);
});
BetterLyrics.Translation.getApi(apiValue => {
if(apiValue.apiValue === undefined || apiValue.apiValue === ""){
console.log('No API Key found');
return;
}
if(apiKey === null){
console.log('Retrieved API Value:', apiValue.apiValue);
apiKey = apiValue.apiValue;
}
else {
console.log('API Key already exists:', apiKey);
return; // Exit early if API key already exists
}
// return apiValue.apiValue;
});
// CONFUSED here
BetterLyrics.Translation.onTranslationEnabled(items => {
if(apiKey == null || apiKey == undefined || apiKey == ""){
let translatedLine = document.createElement("span");
translatedLine.classList.add(BetterLyrics.Constants.TRANSLATED_LYRICS_CLASS);
let source_language = BetterLyrics.App.lang ?? "en";
let target_language = items.translationLanguage || "en";
if (source_language !== target_language) {
if (item.words.trim() !== "♪" && item.words.trim() !== "") {
BetterLyrics.Translation.translateText(item.words, target_language).then(result => {
if (result) {
if (result.originalLanguage !== target_language) {
translatedLine.textContent = "\n" + result.translatedText;
line.appendChild(translatedLine);
}
} else {
translatedLine.textContent = "\n" + "—";
line.appendChild(translatedLine);
}
});
}
}
}
else {
// CONFUSE here too
let source_language = BetterLyrics.App.lang ?? "en";
let target_language = items.translationLanguage || "en";
if (source_language !== target_language) {
BetterLyrics.Translation.translateTextUsingGPT(lyrics, target_language, apiKey).then(translatedLyrics => {
if (translatedLyrics) {
translatedLyrics.forEach((translatedLineObj, index) => {
let translatedLine = document.createElement("span");
translatedLine.classList.add(BetterLyrics.Constants.TRANSLATED_LYRICS_CLASS);
if (translatedLineObj.words.trim() !== "♪" && translatedLineObj.words.trim() !== "") {
translatedLine.textContent = "\n" + translatedLineObj.words;
// Find the corresponding line element and append the translated text
line.appendChild(translatedLine);
} else {
translatedLine.textContent = "\n" + "—";
line.appendChild(translatedLine);
}
});
} else {
// Handle translation failure
console.error("Translation failed.");
}
}).catch(error => {
console.error("Translation error:", error);
});
}
}
});
try {
document.getElementsByClassName(BetterLyrics.Constants.LYRICS_CLASS)[0].appendChild(line);
} catch (_err) {
BetterLyrics.Utils.log(BetterLyrics.Constants.LYRICS_WRAPPER_NOT_VISIBLE_LOG);
}
});
if (!allZero) {
BetterLyrics.Lyrics.setupLyricsCheckInterval();
} else {
BetterLyrics.Utils.log(BetterLyrics.Constants.SYNC_DISABLED_LOG);
}
},
Raw
mainChanges.js
if(apiKey !== null && apiKey !== undefined && apiKey !== ""){
BetterLyrics.Translation.onTranslationEnabled(items => {
target_language = items.translationLanguage || "en";
});
let source_language = BetterLyrics.App.lang ?? "en";
if (source_language !== target_language) {
BetterLyrics.Translation.translateTextUsingGPT(lyrics, target_language, apiKey).then(translatedLyrics => {
if (translatedLyrics) {
translatedLyrics.forEach((translatedLineObj) => {
let translatedLine = document.createElement("span");
translatedLine.classList.add(BetterLyrics.Constants.TRANSLATED_LYRICS_CLASS);
if (translatedLineObj.words.trim() !== "♪" && translatedLineObj.words.trim() !== "") {
translatedLine.textContent = "\n" + translatedLineObj.words;
// Find the corresponding line element and append the translated text
line.appendChild(translatedLine);
} else {
translatedLine.textContent = "\n" + "—";
line.appendChild(translatedLine);
}
});
} else {
// Handle translation failure
console.error("Translation failed.");
}
}).catch(error => {
console.error("Translation error:", error);
});
}
}
lyrics.forEach(item => {
let line = document.createElement("div");
line.dataset.time = item.startTimeMs / 1000;
line.style = "--blyrics-duration: " + item.durationMs / 1000 + "s;";
const words = item.words.split(" ");
if (!allZero) {
line.setAttribute("data-scrolled", false);
line.setAttribute(
"onClick",
`const player = document.getElementById("movie_player"); player.seekTo(${
item.startTimeMs / 1000
}, true);player.playVideo();`
);
} else {
line.classList.add(BetterLyrics.Constants.CURRENT_LYRICS_CLASS);
}
words.forEach((word, index) => {
let span = document.createElement("span");
span.style.transitionDelay = `${index * 0.05}s`;
span.style.animationDelay = `${index * 0.05}s`;
span.textContent = words.length <= 1 ? word : word + " ";
line.appendChild(span);
});
if(apiKey === null || apiKey === undefined || apiKey === ""){
BetterLyrics.Translation.onTranslationEnabled(items => {
let translatedLine = document.createElement("span");
translatedLine.classList.add(BetterLyrics.Constants.TRANSLATED_LYRICS_CLASS);
let source_language = BetterLyrics.App.lang ?? "en";
let target_language = items.translationLanguage || "en";
if (source_language !== target_language) {
if (item.words.trim() !== "♪" && item.words.trim() !== "") {
BetterLyrics.Translation.translateText(item.words, target_language).then(result => {
if (result) {
if (result.originalLanguage !== target_language) {
translatedLine.textContent = "\n" + result.translatedText;
line.appendChild(translatedLine);
}
} else {
translatedLine.textContent = "\n" + "—";
line.appendChild(translatedLine);
}
});
}
}
});
}
try {
document.getElementsByClassName(BetterLyrics.Constants.LYRICS_CLASS)[0].appendChild(line);
} catch (_err) {
BetterLyrics.Utils.log(BetterLyrics.Constants.LYRICS_WRAPPER_NOT_VISIBLE_LOG);
}
});
Raw
translatingThroughGpt.js
translateTextUsingGPT: async function (lyrics, targetLanguage, apiKey) {
const url = 'https://api.openai.com/v1/chat/completions';
// Extract all 'words' from the lyrics object and join them with newlines
const lyricsText = lyrics.map(line => line.words).join('\n');
try {
const response = await fetch(url, {
method: 'POST',
headers: {
'Authorization': `Bearer ${apiKey}`,
'Content-Type': 'application/json'
},
body: JSON.stringify({
model: 'gpt-4',
messages: [
{
role: 'user',
content: `Translate the following lyrics into ${targetLanguage}, maintaining the structure and keeping each line separate with a newline character (\\n) after every line:\n\n${lyricsText}`
}
]
})
});
const data = await response.json();
const translatedText = data.choices[0].message.content.trim();
// Split the translated text by newlines to handle each translated line
const translatedLines = translatedText.split('\n');
// Map the translated lines back to the original lyrics format
const translatedLyrics = lyrics.map((line, index) => ({
...line,
words: translatedLines[index] || line.words // Fallback to original words if translation is missing
}));
return translatedLyrics;
} catch (error) {
BetterLyrics.Utils.log(BetterLyrics.Constants.TRANSLATION_ERROR_LOG, error);
return null;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment