Add embed code to video page

[JulianKniephoff]

Closes #501.

Also includes some semi-related "fixes" to linting.

[github-actions]

🚀 This PR was deployed at https://pr503.tobira.opencast.org. The deployment will be updated whenever someone pushes onto this PR's branch.

[LukasKalbertodt]

I like this solution of using a button and modal. Works. The actual code seems to work fine too, without random stupid resolutions.

[LukasKalbertodt]

What's with this wild mix of " and `? With join calls? Why not make all a big template string?

[JulianKniephoff]

Because that string is shown, verbatim, in the UI. It's what people copy to where ever they need it to go. I don't want spaces and newlines in there.

[LukasKalbertodt]

Mh ok yes that makes sense. But I think we can do better in the code, no? I find it quite hard to read to be honest, the method calls and having all three kinds of stirng literals so close to one another is jarring.

One option I'd already prefer is:

`<iframe> `
+ `<allowfullscreen `
+ `<name="Player">`

Alternatively, I also wouldn't mind the big template string literal with .replace(/\n\s*/, ""). I think both improves readability. The missing " quote (see the other comment) is one indication that this is not too great to read.

[JulianKniephoff]

The missing " quote (see the other comment) is one indication that this is not too great to read.

Not quite. I saw my highlighting break, but thought it was an Emacs bug.

The other options all have other drawbacks, though. I literally went through all three of them. ;)

• Replacing whitespace still makes the style attribute awkward if you want to line-break it (which I want).
• The "concatenation method" in combination with our linting forces weird formatting and there is no way to configure the linting properly.

[LukasKalbertodt]

Two alternatives:

const embedCode = `<iframe `
    + `src="${CONFIG.opencast.presentationNode}/play/${id}" `
    + "allowfullscreen "
    + 'style="border: none; width: 100%; aspect-ratio: 16/9;" '
    + 'name="Player" '
    + 'scrolling="no" '
    + 'frameborder="0" '
    + 'marginheight="0px" '
    + 'marginwidth="0px" '
    + `></iframe>`;

const embedCode = `<iframe 
    src="${CONFIG.opencast.presentationNode}/play/${id}" 
    allowfullscreen 
    style="border: none; width: 100%; aspect-ratio: 16/9;" 
    name="Player" 
    scrolling="no" 
    frameborder="0" 
    marginheight="0px" 
    marginwidth="0px" 
></iframe>`.replace(/\n\s*/, " ");

I think both are a lot more readable than what we have here. But yes, they are both still not optimal. Rust's escaping newlines would help but oh well.

But I guess we won't find common ground here so I'll just merge it.