hls: bugfix, stability and resilience improvements in the webpage

- STABILITY: await MEDIA_ATTACHED event before performing "loadSource" on HLS
- STABILITY: await MANIFEST_PARSED event before performing "play" on video element
- RESILIENCE: on "MEDIA_ERROR" event perform "recoverMediaError" on HLS

internal/core/hls_index.html

@@ -33,18 +33,22 @@ const create = (video) => {
 		});
 
 		hls.on(Hls.Events.ERROR, (evt, data) => {
-			if (data.fatal) {
+			if (data.type === Hls.ErrorTypes.MEDIA_ERROR)
+				hls.recoverMediaError();
+			else if (data.fatal) {
 				hls.destroy();
-
-				setTimeout(create, 2000);
+				setTimeout(() => create(video), 2000);
 			}
 		});
 
-		hls.loadSource('index.m3u8' + window.location.search);
+		hls.on(Hls.Events.MEDIA_ATTACHED, () => {
+			hls.loadSource('index.m3u8' + window.location.search);
+		});
+		hls.on(Hls.Events.MANIFEST_PARSED, () => {
+			video.play();
+		});
 		hls.attachMedia(video);
 
-		video.play();
-
 	} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
 		// since it's not possible to detect timeout errors in iOS,
 		// wait for the playlist to be available before starting the stream