Can you add keyboard shortcuts for showing/hiding original / english subtitles?

Hi, I would find it very very useful to have a keyboard shortcut to show/hide the main subtitle (original/the one chose in netflix - the upper line), and then another shortcut to show/hide the english subs (the bottom line - english one).

I normally watch everything without subs to practice listening not reading, but if i struggle with parts id like to be able to quickly turn the subs on, after checking what it a given sentence means i quickly hide them - with a shortcut.

But if just listening is too difficult for a given show for me, i watch with only original subtitles (with english hidden, so i donā€™t cheat), and only when i struggle with some parts i quickly show the english translation for a bit, then hide it. - Kind off like the current option to blur out the bottom line, but instead of bluring hiding it completely - btw. since the last update the [e] shortcut to unblur them stopped working.

Thanks,
Bart

5 Likes

Hey, yup, Iā€™ll do this very soonā€¦ right now Iā€™m looking into a youtube subs loading bug, and another issueā€¦ then I was going to continue with transliterations code (including pinyin)ā€¦ but maybe Iā€™ll do this first, as itā€™s quite quick (2-4hrs) and satisfying. :slightly_smiling_face:

2 Likes

Yaaay! Exciting, thanks so much David!

1 Like

Ok, done, LLN and LLY code going live now (might need to wait till tomorrow for cache to updateā€¦ I changed that to 3hrs so will be faster in the future).

ā€˜Hide translationsā€™ works like the old setting, and now thereā€™s ā€˜Hide bothā€™ (gonna need to figure out some better labels).

Subtitles:
image

Hit ā€˜eā€™ once or hover on primary subs:

image

Hit ā€˜eā€™ again or hover on translation(s):

image

Let me know if it meets your needs, I can modify further. :slight_smile:

4 Likes

With this setup, itā€™s not possible to unblur only translation (and not primary subs), but Iā€™m not sure thatā€™s an important use case. Dunno, try it and see. :slight_smile:

1 Like

Oh my god, this is amazing! Will test it out and report back once it updates. Thank you David!

2 Likes

Chrome web store hasnā€™t updated yet, reinstalled the extension and the version is still
4.0.0, ill check again later.

2 Likes

We can most of the code now without going through webstore (thankfullyā€¦), you wonā€™t see the version bump from 4.0.0. New function will just appear and start to work. :slight_smile:

1 Like

Ok, the extension has updated now, the new feture is available, it works! Thanks a lot!

Hmmmā€¦ what i had in mind was adding a shortcut that will turn the subtitles (the upper ones) on/off permantently, and also another shortcut one that will show/hide the translation (the bottom line) permanently, not just show the current line with [e] or with mouseover as currently.

So lets say:
If i press the shortcut for the top subtitle, from now on it will always be on, if i press it again it will always be off.
If i press the shortcut for the bottom (translation) subtitle, from now on it will always be on, if i press it again it will always be off.

And ideally with them being off by default at the start, so i donā€™t have to turn them off at the start of every show, as its annoying like reselecting the audio/subs lang every time, as my netflix resets it for me back to original (im currently learning russian, but there are very few native russian shows on there, so i watch the western ones with dubbing, which i find much better/easier/clearer for beginners than if russian was the original).

So how it works for me in practice is: i watch a show all in russian, with all the subs off constantly, when i come across an important and a tricky bit which i donā€™t get, i put the subs on for a few minutes, not just one line, keep them on till the important part finishes, then i turn the subs off and keep them off.

If hiding them completely is not possible, maybe we could increase the blur/make it more transparent, as its a bit distracting to have long lines there.

I wrote a js snippet to show/hide the subs permanently. But i was able to do it only for the whole / both subtitles at once. I failed to have one just for the top subtitle and the bottom subtitle each.

------- css --------------
#lln-subs-content {display: none; } /* to have them off initially */

------- js --------------

var mySubCounter = 0;


function doc_keyUp(e) {
    if ( e.keyCode == 84) {  // T  
        bsToggleSubs();
    }
}
document.addEventListener('keyup', doc_keyUp, false);



function bsToggleSubs(){
	if ( mySubCounter == 1){
		document.getElementById("lln-subs-content").style.display = "none";
		// for my UI // document.getElementById('myTogSub').innerHTML = "Sub: HIDE";
		mySubCounter = 0;
		
	} else {
		document.getElementById("lln-subs-content").style.display = "block";
		// for my UI // document.getElementById('myTogSub').innerHTML = "Sub: SHOW";
		mySubCounter = 1;
	}
}

And I tried the same for the (bottom) translation subtitle on these html elements but they all seam to be removed/readded every new subtitle so they donā€™t hold my display status :confused:

#lln-translations
.lln-whole-title-translation-wrap
.lln-whole-title-translation
.translationText

1 Like

Hey, this should work for now:

let getFontSizeGradient = function(minFontSize, maxFontSize, minWrapWidth, maxWrapWidth) {
let $subsWrap = $('.lln-subs-wrap');
if ($subsWrap.length) {
    let wrapWidth = $subsWrap.width();
    let size = (wrapWidth - minWrapWidth) * (maxFontSize - minFontSize) / (maxWrapWidth - minWrapWidth) + minFontSize;
    size = Math.min(Math.max(minFontSize, size), maxFontSize);
    return size;
} else {
    return 18; // never used
}
};

document.addEventListener('keyup', function doc_keyUp(e) {
if ( e.keyCode == 84) {  // T  
    let elem_main_subs = document.getElementById("lln-subs-content");

    if (elem_main_subs.style.display === "" ) {
        elem_main_subs.style.display = "none";
    } else {
        elem_main_subs.style.display = "";
        let fontSize = getFontSizeGradient(20, 47, 600, 1920);
        $('.lln-subs-wrap').css({'font-size': fontSize + 'px'});
    }
}
}, false);

Try it for a week or so, then we can look at the problem again. I could add this with the ā€˜cā€™ key, just, Iā€™m concerned about making too many options for the user.

edit: bugfix :slight_smile:

1 Like

Regarding default lang, Iā€™ll think.

1 Like

Hey, your code seams to work as well as mine, thanks! Not sure how to have the subs hidden to start off, with yours though.

1 Like

Ah, sorry, I misread what you wrote. Yes, the innerHTML of div with id ā€˜lln-subs-contentā€™ is replaced every times the subs change. Ok, Iā€™ll think.

1 Like

Hahaha, i think weā€™re having some communication issues here!:sweat_smile:

To make it clear, both my and your codes work perfectly, they hide/show both subtitles at the same time!

What i was looking to do is to split it into two parts:

  1. One that would hide/show only the TOP sub
  2. One that would hide/show only to BOTTOM sub

Also important to have them both hidden to start off.

1 Like

Hey, so Iā€™m now firing a jQuery event at the end of the function that ā€˜drawsā€™ the bottom panel, you listen for it and modify the subs and translations as you like.

I can also add a mechanism to store a ā€˜userā€™ scipt and execute it on startup, let me think that through a little.

1 Like

I added the keyboard shortcut but I donā€™t know whether this is the reason or not, after that the error m7111-5059 occurred and I couldnā€™t fix that. What should I do?

Sorry, would you be able to show an example of how to listen for that ā€˜drawā€™ event please?

Sorry, can you think of any reason why this is not doing anything?

$(document).bind('lln_bottomPanelDrawComplete', function(e){
   alert("works");
});

Hi David, is it possible for you to add an option that allows me to press the ā€œeā€ key to display the translation and hide it again when I press ā€œeā€ for the second time? Currently, the available option requires me to press ā€œeā€ for every sentence, which is not very convenient. Thank you.

Iā€™m not sure what the development state for adding this functionality is since I noticed it in the TODO list under DONE but it apparently hasnā€™t been added yet.

Anyways, I also wanted this functionality so I created a tampermonkey script to toggle the translations using the T key.

Credit to David_wilikinson and Blearner for their code. I have never written any javascript before so feel free to modify/use as you wish.