Issue #10 - Web component

[santipuppoQualabs]

PR to add the player as a Web Component as per Issue #10.

I haven't done web components before, all feedback is appreciated!

The main focus of the PR are the following files:

• lib/video-moq/index.ts: Containing all code related to the custom component.
• lib/video-moq/examples/*.html: Containing two simple examples of how to use the custom component.
• lib/video-moq/video-moq.css: Contains css for the web component based off the original tailwind css.
• Some minor changes or renames on lib/playback/index.ts and web/src/components/watch.tsx

Work done in this PR:

As of the video-moq.ts, the code is quite simple, but a bit verbose.

• The constructor creates the main structure for the player, adding the canvas and the controls div with some default values. It then selects some buttons to keep track of, and binds event listeners to variables for easy adding and removing.
• The connectedCallback is in charge of attribute processing for now, but I intend to move this to its own private function so it can also be called from attributeChangedCallback (not yet implemented). It also is in charge of adding the event listeners to the different controls (only if attribute controls is present).
  As of now we support src, fingerprint, controls, namespace, width, height, aspect-ratio attributes.
  This function also initializes the player.
• Also added as an optional alternative to have either namespace or fingerprint as query parameters in the src attribute.
• disconnectedCallback is in charge of cleanup of the stuff done in connectedCallback. i.e. removing listeners and closing the player.
• setPlayer is an auxiliary function to set up info associated to a successful connect. i.e. setting the pause/play mute/unmute icons and loading the tracklist based on the player state.
• Then we have auxiliary functions to toggleShowControls, togglePlayPause, toggleMute, toggleShowTracks, switchTrack and parseDimension.
• I also added a fail() function to display an error message. Right now it works as in the watch.tsx example. It looks like this.
  
• In order to not depend on tailwind, I added a css style sheet at video-moq.css. This was done by copying the css from devtools on the watch.tsx example. I tried to maintain the names of the classes in case using tailwind here is ok, but for some stuff I wasn't getting to work I did make some changes. Mainly: bg-{color}/number -> bg-{color}-{number}.
• Added some functions and attributes following the HTMLMediaElement, and <video> tag apis. play(), pause(), src, muted, controls
• In lib/playback/index.ts: Added play(), pause(), togglePlayPause() functions and muted, videoTrackName attributes. (Renamed old play() into togglePlayPause() and fixed references).
• Finally, in the second to last line we register the component as customElements.define("video-moq", VideoMoq);

Future work:

• Support all attributes mentioned in the issue: autoplay, muted, poster.
  • For autoplay and muted we will need to use events since we have to wait for subscriptions to be done for the player to function correctly.
• Implement attributeChangedCallback.
  • Initially thought to follow an example similar to this media-elements example, reloading the element on each attribute change (for relevant attributes). Does not seem worth it just yet since this is called for each attribute before the connectedCallback. We can come back to this if we find a relevant use case.
• Evaluate if we want to use tailwind or custom css. Right now we have custom css following tailwind nomenclature (as best as I could). This could also be an opportunity to somehow make the player design extensible. Not sure how this is done with the standard video tag (ex. https://player.style)
• Figure out if we can bundle the CSS stylesheet together with the module using rollup.
  • I'll have to check the work done in Decouple the Player from the Web Application #13
• Modifications for the api to be used as in this advanced usage example.
  
  • I will add this to a new Issue so that we can better design the api. Right now it can be used like so (see lib/video-moq/examples/advanced.html):

<div id="video-moq" style="width: 640px"></div>
...
<script type="module" src="/src/video-moq.ts"></script>

<script type="module">
import VideoMoq from "/src/video-moq.ts";

var video = document.getElementById("video-moq");
var videoSrc = "https://localhost:4443?namespace=bbb&fingerprint=https://localhost:4443/fingerprint";

var player = new VideoMoq();
player.src = videoSrc;
player.trackNum = 0;
player.controls = true;

video.appendChild(player); // load is triggered by web component lifecycle
// After that you will get full control to player change tracks, volume, etc.

setTimeout(() => {
    console.log("Pausing after 2 secs");
    player.pause();
}, 2000);
</script>