Videos tab: inline player with list/player split layout

Replaces the simple table with a two-column layout — scrollable video
list on the left, HTML5 player on the right. Clicking a list item loads
and plays the video in-page. Full-page link and title shown below player.
Thumbnails display in the list when available (post-ffmpeg).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

1 files changed, 60 insertions, 23 deletions

diff --git a/gallery_views/galleriffic/fisheye_galleriffic_inc_2.tpl b/gallery_views/galleriffic/fisheye_galleriffic_inc_2.tpl
index a13630f..1de1e1c 100644
--- a/gallery_views/galleriffic/fisheye_galleriffic_inc_2.tpl
+++ b/gallery_views/galleriffic/fisheye_galleriffic_inc_2.tpl
@@ -191,30 +191,67 @@ jQuery(document).ready(function($) {
 {/jstab}
 {if $hasVideos}
 {jstab title="Videos"}
-<table class="data">
-	<caption>{tr}Videos{/tr}</caption>
-	<tr>
-		<th style="width:1%"></th>
-		<th>{tr}Title{/tr}</th>
-		<th style="width:15%">{tr}Actions{/tr}</th>
-	</tr>
-	{foreach from=$gContent->mItems item=galItem}
-		{if is_a($galItem, '\Bitweaver\Fisheye\FisheyeImage') && $galItem->mInfo.mime_type|substr:0:6 == 'video/'}
-		<tr>
-			<td>{if $galItem->mInfo.thumbnail_url.small}<img src="{$galItem->mInfo.thumbnail_url.small}" alt="{$galItem->mInfo.title|escape}" />{/if}</td>
-			<td><a href="{$galItem->getDisplayUrl()|escape}">{$galItem->getTitle()|escape}</a></td>
-			<td class="actionicon">
-				{if $gBitUser->hasPermission('p_treasury_view_item')}
-					<a href="{$galItem->getDisplayUrl()|escape}">{booticon iname="fa-folder-open" iexplain="View"}</a>
+<div class="row">
+	<div class="col-sm-4" id="fisheye-video-list" style="overflow-y:auto;max-height:500px;border-right:1px solid #ddd;">
+		{foreach from=$gContent->mItems item=galItem}
+			{if is_a($galItem, '\Bitweaver\Fisheye\FisheyeImage') && $galItem->mInfo.mime_type|substr:0:6 == 'video/'}
+			<div class="fisheye-video-item"
+			     data-src="{$galItem->mInfo.download_url|escape}"
+			     data-type="{$galItem->mInfo.mime_type|escape}"
+			     data-title="{$galItem->mInfo.title|escape}"
+			     data-url="{$galItem->getDisplayUrl()|escape}"
+			     style="cursor:pointer;padding:8px;border-bottom:1px solid #eee;">
+				{if $galItem->mInfo.thumbnail_url.small}
+					<img src="{$galItem->mInfo.thumbnail_url.small}" style="float:left;margin-right:8px;max-width:80px;" alt="" />
+				{else}
+					{booticon iname="fa-film" isize="medium" iexplain="Video"}
 				{/if}
-				{if $gBitUser->hasPermission('p_treasury_download_item') && $galItem->mInfo.download_url}
-					<a href="{$galItem->mInfo.download_url|escape}">{biticon ipackage="icons" iname="emblem-downloads" iexplain="Download"}</a>
-				{/if}
-			</td>
-		</tr>
-		{/if}
-	{/foreach}
-</table>
+				<span>{$galItem->mInfo.title|escape}</span>
+				<div style="clear:both;"></div>
+			</div>
+			{/if}
+		{/foreach}
+	</div>
+	<div class="col-sm-8">
+		<p class="norecords" id="fisheye-video-prompt">{tr}Select a video from the list to play.{/tr}</p>
+		<video id="fisheye-video-player" controls preload="metadata" style="width:100%;max-height:500px;display:none;">
+			<source id="fisheye-video-src" src="" type="video/mp4" />
+			<p>{tr}Your browser does not support HTML5 video.{/tr}</p>
+		</video>
+		<div id="fisheye-video-meta" style="display:none;margin-top:8px;">
+			<h4 id="fisheye-video-title"></h4>
+			<a id="fisheye-video-link" href="">{tr}Full page{/tr}</a>
+		</div>
+	</div>
+</div>
+<script>
+{literal}
+(function() {
+	function fisheyePlayVideo(el) {
+		var player  = document.getElementById('fisheye-video-player');
+		var srcEl   = document.getElementById('fisheye-video-src');
+		srcEl.src   = el.getAttribute('data-src');
+		srcEl.type  = el.getAttribute('data-type');
+		player.load();
+		player.play();
+		player.style.display = '';
+		document.getElementById('fisheye-video-prompt').style.display = 'none';
+		document.getElementById('fisheye-video-title').textContent = el.getAttribute('data-title');
+		document.getElementById('fisheye-video-link').href = el.getAttribute('data-url');
+		document.getElementById('fisheye-video-meta').style.display = '';
+		document.querySelectorAll('.fisheye-video-item').forEach(function(item) {
+			item.style.background = '';
+		});
+		el.style.background = '#e8f4fe';
+	}
+	document.addEventListener('DOMContentLoaded', function() {
+		document.querySelectorAll('.fisheye-video-item').forEach(function(el) {
+			el.addEventListener('click', function() { fisheyePlayVideo(this); });
+		});
+	});
+}());
+{/literal}
+</script>
 {/jstab}
 {/if}
 {/jstabs}