add class to handle mse and video loading

;

@@ -0,0 +1,66 @@
+var player = document.getElementById('vid1');
+
+class PlaylistLoader {
+	constructor() {
+		this.playlist_src = '/list/' + window.location.pathname.slice(6);
+		this.last_segment = null;
+		this.refresh_interval = null;
+		this.new_segments = [];
+		this.fetch_playlist();
+	}
+
+	async fetch_playlist() {
+		const response = await fetch(this.playlist_src);
+		this.parse_playlist(await response.text());
+		setTimeout(this.fetch_playlist.bind(this), this.refresh_interval * 1000);
+	}
+
+	parse_playlist(playlist_content) {
+		let lines = playlist_content.split('\n');
+		let segments = [];
+		let segment_block_flag = this.last_segment === null ? false : true;
+		for (let i = 0; i < lines.length; i++) {
+			if (lines[i].startsWith("#")) {
+				if (lines[i].startsWith("EXT-X-TARGETDURATION", 1)) {
+					this.refresh_interval = parseFloat(lines[i].split(':')[1]);
+				}
+			} else {
+				if (segment_block_flag || lines[i] == '') {
+					if (lines[i] == this.last_segment) {
+						segment_block_flag = false;
+					}
+				} else {
+					segments.push(lines[i]);
+				}
+			}
+		}
+		this.new_segments.concat(segments);
+		this.last_segment = segments.at(-1);
+	}
+}
+
+class VideoLoader {
+	constructor() {
+		this.stream_key = window.location.pathname.slice(6);
+		this.playlist_loader = new PlaylistLoader();
+		this.player = document.getElementById('vid1');
+		this.media_source = new MediaSource();
+		this.prepare_buffer();
+	}
+	
+	async prepare_buffer() {
+		let init_frag = await this.fetch_video('/vid/' + this.stream_key + '/init.mp4');
+		fetch_mime(init_frag);
+	}
+
+	async fetch_video(uri) {
+		const response = await fetch(uri);
+		return response.arrayBuffer();
+	}
+}
+
+function fetch_mime(mp4_array_buffer) {
+	console.log(Uint32Array(mp4_array_buffer.slice(0, 4)));
+}
+
+let test = new VideoLoader();

hls-player.js

@@ -34,9 +34,32 @@ class PlaylistLoader {
 				}
 			}
 		}
-		this.new_segments = segments;
+		this.new_segments.concat(segments);
 		this.last_segment = segments.at(-1);
 	}
 }
 
-let test = new PlaylistLoader();
+class VideoLoader {
+	constructor() {
+		this.stream_key = window.location.pathname.slice(6);
+		this.playlist_loader = new PlaylistLoader();
+		this.player = document.getElementById('vid1');
+		this.media_source = new MediaSource();
+		this.prepare_buffer();
+	}
+	
+	async prepare_buffer() {
+		let init_frag = await this.fetch_video('/vid/' + this.stream_key + '/init.mp4');
+		fetch_mime(init_frag);
+	}
+
+	async fetch_video(uri) {
+		const response = await fetch(uri);
+		fetch_mime(new Uin8Array(response.arrayBuffer()));
+	}
+}
+
+function fetch_mime(mp4_byte_buffer) {
+}
+
+let test = new VideoLoader();