Translate quality badges and quality names

[philipgiuliani]

Sumary of proposed changes

This is my second approach to #878.
I have extended i18n to allow nested translations with the dot notation. So you can call i18n.t('qualityName.720', this.config). And with this change I added the ability to translate the badge and the quality name.

Result:

… another way to solve this issue would be to add a label to the <source> elements. That would be the same approach as captions is currently using. But this seems like a complicated change to me.

[friday]

Smart! I like it. 👍

How about making the array reduce a method in utils.js like getIn or getDeep?
It could actually be used internally in Plyr to avoid code like x && x.y && x.y.z, since it's pretty much a simplified variant of lodash's get https://lodash.com/docs#get which is used for this purpose.

Regardless of the application of it, I would make sure it returns undefined (not {}) when it doesn't match though, and also use more readable variable names (like obj and key). Since i isn't an iterator, it's actually a misnomer.

Like I said last time, Sam's the maintainer and has the final word.

[philipgiuliani]

Thanks for the feedback.

I will move it to the utils.js file and change the variable names of course.

It actually returns undefined when there is no match. Because object["unknownKey"] will return undefined. The || {} is to prevent it from crashing when the key does not exist.

[friday]

I changed the base branch to develop (which is the branch for submitting PR's), but since you branched off from master it contains some of Sam's commits now. You should be able to fix this by rebasing from develop git rebase develop and pushing with force or "force with lease."

[philipgiuliani]

Thank's for the review. For some reason the ESLint tweak commit remained in my branch, but I guess this is not a problem.

[friday]

It actually returns undefined when there is no match. Because object["unknownKey"] will return undefined. The || {} is to prevent it from crashing when the key does not exist.

That's the problem though. And very easy to fix:

function getDeep1(path, object) {
    return path.split('.').reduce((obj, key) => obj[key] || {}, object);
}

function getDeep2(path, object) {
    return path.split('.').reduce((obj, key) => (obj && obj[key]), object);
}

console.log('Test 1', getDeep1('a.b.c', {a: {b: {c: 'd'}}})); // 'd'
console.log('Test 2', getDeep2('a.b.c', {a: {b: {c: 'd'}}})); // also 'd'
console.log('Test 3', getDeep1('a.b.c', {})); // {}
console.log('Test 4', getDeep2('a.b.c', {})); // undefined

[friday]

You can remove commits, combine etc with an interactive rebase (ex git rebase -i HEAD~9), but do read up on the topic if you haven't used this before. I'm not sure it's a problem per se. It depends on Sam's merging strategy.

[friday]

Haha.. my bad! I caught this and edited right after posting it, but you were faster.

[philipgiuliani]

@sampotts What do you think about this changes?

[sampotts]

It looks good. Just a very minor change to please my OCD! 😂

[sampotts]

Small one but could we call the variable label and maybe the property for i18n as qualityLabel?

[philipgiuliani]

Sure! I've renamed the variable 😄

[sampotts]

Thanks mate! Awesome solution btw. I'll deploy a new version shortly. I just need to work on a small UI bug I've noticed.