add preview ai/source side by side

static/js/infoView.p_for_power.js

@@ -289,6 +289,17 @@ pandora.ui.infoView = function(data, isMixed) {
             .appendTo($text);
     }
 
+    if (data.type?.join('').includes('ai:')) {
+        $('<div>').addClass('ai-preview').appendTo($text);
+    }
+    if (data.type?.includes('original')) {
+
+        $('<a>').attr({
+            href: 'https://power-video.rmozone.com/#ox/' + data.id,
+            target: '_blank'
+        }).html('Open in AI Power Video').appendTo($text);
+    }
+
 
     // Duration, Aspect Ratio --------------------------------------------------
     if (!isMultiple) {
@@ -648,6 +659,7 @@ pandora.ui.infoView = function(data, isMixed) {
         };
         $element.appendTo($text);
         pandora.api.find(request, function(response) {
+            let original;
             response.data.items.forEach(item => {
                 if (item.id != data.id) {
                     var type = item.type ? item.type[0] : 'Unknown'
@@ -657,10 +669,44 @@ pandora.ui.infoView = function(data, isMixed) {
                     $element.append(
                         ` <a href="/${item.id}/info">${type}</a>`
                     )
+		    if (type == 'original') {
+			    original = item.id
+		    }
                 }
             })
             $element.append(`[<a href="/grid/title/title=${pandora.escapeQueryValue(title)}">all</a>]`)
             pandora.createLinks($element)
+	    if (data.type?.join('').includes('ai:') && original) {
+		    const preview = $text[0].querySelector('.ai-preview')
+		    const src_ai = '480p.mp4'
+		    const src = `/${original}/480p.mp4`
+		    preview.innerHTML = `
+			    <video src="${src}" controls loop></video>
+			    <video src="${src_ai}" loop></video>
+			    <style>
+			    	.ai-preview video {
+					width: 33%;
+				}
+			    </style>
+		    `
+		    preview.querySelectorAll('video').forEach(video => {
+			video.addEventListener('play', event => {
+				preview.querySelectorAll('video').forEach(v => {
+					if (v != video) {
+						v.currentTime = video.currentTime
+						v.play()
+					}
+				})
+			})
+			video.addEventListener('pause', event => {
+				preview.querySelectorAll('video').forEach(v => {
+					if (v != video) {
+						v.pause()
+					}
+				})
+			})
+		    })
+	    }
         })
     }