Add streams to 511mn layer

layers/511mn/layer.js

@@ -2,6 +2,8 @@ import VectorLayer from 'ol/layer/Vector';
 import {Vector as VectorSource} from 'ol/source.js';
 import GeoJSON from 'ol/format/GeoJSON.js';
 
+import Hls from 'hls.js';
+
 import {Style} from 'ol/style.js';
 import Icon from 'ol/style/Icon.js';
 
@@ -21,4 +23,35 @@ const vectorLayer = new VectorLayer({
     }),
 });
 
+vectorLayer.customPopup = function(feature) {
+    const view = feature.values_.originalData.views[0];
+    if (view.category.toLowerCase() == "video") {
+        return `<video style="max-width: 80vw; max-height: 80vh;" id="popupVideo" autoplay controls></video>`;
+    } else if (view.category.toLowerCase() == "image") {
+        return `<img style="max-width: 80vw; max-height: 80vh;" src="${view.url}">`;
+    } else {
+        throw new Exception(`unknown category ${view.category}`);
+    }
+};
+
+vectorLayer.customPopupCallback = function(feature) {
+    const view = feature.values_.originalData.views[0];
+    if (view.category.toLowerCase() == "video") {
+        const video = document.getElementById('popupVideo');
+
+        const videoID = view.url.split('/').pop();
+
+        const videoSrc = `https://video.dot.state.mn.us/public/${videoID}.stream/playlist.m3u8`;
+        if (Hls.isSupported()) {
+            var hls = new Hls();
+            hls.loadSource(videoSrc);
+            hls.attachMedia(video);
+        }
+        // iDevice support, untested (only works in Safari; required for iPhones)
+        else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+            video.src = videoSrc;
+        }
+    }
+}
+
 export default vectorLayer;