Much base work started
This commit is contained in:
76
app/views/videos/index.html.erb
Normal file
76
app/views/videos/index.html.erb
Normal file
@@ -0,0 +1,76 @@
|
||||
<% content_for :title, "Videos" %>
|
||||
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h1 class="text-3xl font-bold text-gray-900">Video Library</h1>
|
||||
<div class="flex gap-2">
|
||||
<% if @storage_locations.any? %>
|
||||
<select class="rounded-md border-gray-300 border px-3 py-2 text-sm" id="storage-filter">
|
||||
<option value="">All Sources</option>
|
||||
<% @storage_locations.each do |location| %>
|
||||
<option value="<%= location.id %>"><%= location.display_name %></option>
|
||||
<% end %>
|
||||
</select>
|
||||
<% end %>
|
||||
<%= link_to "New Storage Location", new_admin_storage_location_path, class: "bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium" %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<% if @videos.any? %>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
||||
<% @videos.each do |video| %>
|
||||
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
|
||||
<div class="aspect-video bg-gray-200 relative">
|
||||
<%# Placeholder for thumbnails - Phase 1C will add actual thumbnails %>
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<svg class="w-12 h-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0120 8.618m6.418 2.276L11 14.914M4.418 4.418a2 2 0 00-2.828 0l-4.418 4.418a2 2 0 002.828 0l4.418-4.418a2 2 0 012.828 0l4.418 4.418a2 2 0 012.828 0l4.418-4.418z" />
|
||||
</svg>
|
||||
</div>
|
||||
<%# Badge for source type %>
|
||||
<div class="absolute top-2 left-2 bg-gray-800 text-white text-xs px-2 py-1 rounded">
|
||||
<%= video.storage_location.name %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4">
|
||||
<h3 class="font-semibold text-gray-900 truncate mb-2">
|
||||
<%= link_to video.display_title, video_path(video), class: "hover:text-blue-600" %>
|
||||
</h3>
|
||||
|
||||
<div class="text-sm text-gray-500 space-y-1">
|
||||
<div>Duration: <%= video.formatted_duration %></div>
|
||||
<div>Size: <%= video.formatted_file_size %></div>
|
||||
<% if video.resolution_label.present? %>
|
||||
<div>Resolution: <%= video.resolution_label %></div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<div class="mt-3 flex justify-between items-center">
|
||||
<div class="text-xs text-gray-400">
|
||||
<% if video.processing_errors.present? %>
|
||||
<span class="text-red-500">Failed</span>
|
||||
<% elsif video.processed? %>
|
||||
<span class="text-green-500">Processed</span>
|
||||
<% else %>
|
||||
<span class="text-yellow-500">Processing</span>
|
||||
<% end %>
|
||||
</div>
|
||||
<%= link_to "Watch", video_path(video), class: "bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded text-xs" %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<!-- Pagination with Pagy -->
|
||||
<%== pagy_nav(@pagy) %>
|
||||
<% else %>
|
||||
<div class="text-center py-12">
|
||||
<svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M3 8h4m10 0h4M9 16h6" />
|
||||
</svg>
|
||||
<h3 class="mt-2 text-sm font-semibold text-gray-900">No videos found</h3>
|
||||
<p class="mt-1 text-sm text-gray-500">Get started by adding a storage location and scanning for videos.</p>
|
||||
<%= link_to "Add Storage Location", new_admin_storage_location_path, class: "mt-4 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium" %>
|
||||
</div>
|
||||
<% end %>
|
||||
106
app/views/videos/show.html.erb
Normal file
106
app/views/videos/show.html.erb
Normal file
@@ -0,0 +1,106 @@
|
||||
<% content_for :title, @video.display_title %>
|
||||
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="bg-white rounded-lg shadow-md overflow-hidden">
|
||||
<div class="aspect-video bg-gray-200 relative">
|
||||
<%# Placeholder for video player - Phase 1B will add Video.js %>
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<svg class="w-16 h-16 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 0 0-5.656 0M9 10h.01M15 5.5c0 0 0-4.95-5.39 0-7.28 0-7.28 0A4 4 0 0 1 5.5 8.78a4 4 0 0 1 0 7.28 0 7.28a4 4 0 0 1-7.28 0c0 0-4.95 4.95-5.39 0-7.28 0A4 4 0 0 1 15.5 5.5c0 0 0 0 7.28 0 7.28a4 4 0 0 0 0-7.28 0" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6">
|
||||
<div class="mb-4">
|
||||
<h1 class="text-2xl font-bold text-gray-900"><%= @video.display_title %></h1>
|
||||
<% if @video.work.present? %>
|
||||
<p class="text-gray-600"><%= link_to @video.work.display_title, work_path(@video.work), class: "hover:text-blue-600" %></p>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4 mb-6">
|
||||
<div>
|
||||
<h3 class="text-sm font-semibold text-gray-900 mb-2">Video Information</h3>
|
||||
<dl class="space-y-2">
|
||||
<div class="flex justify-between">
|
||||
<dt class="text-sm font-medium text-gray-500">Duration:</dt>
|
||||
<dd class="text-sm text-gray-900"><%= @video.formatted_duration %></dd>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<dt class="text-sm font-medium text-gray-500">File Size:</dt>
|
||||
<dd class="text-sm text-gray-900"><%= @video.formatted_file_size %></dd>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<dt class="text-sm font-medium text-gray-500">Resolution:</dt>
|
||||
<dd class="text-sm text-gray-900"><%= @video.resolution_label || "Unknown" %></dd>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<dt class="text-sm font-medium text-gray-500">Format:</dt>
|
||||
<dd class="text-sm text-gray-900"><%= @video.format || "Unknown" %></dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-sm font-semibold text-gray-900 mb-2">Storage Information</h3>
|
||||
<dl class="space-y-2">
|
||||
<div class="flex justify-between">
|
||||
<dt class="text-sm font-medium text-gray-500">Storage Location:</dt>
|
||||
<dd class="text-sm text-gray-900"><%= @video.storage_location.name %></dd>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<dt class="text-sm font-medium text-gray-500">Source Type:</dt>
|
||||
<dd class="text-sm text-gray-900"><%= @video.source_type.humanize %></dd>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<dt class="text-sm font-medium text-gray-500">File Path:</dt>
|
||||
<dd class="text-sm text-gray-900 truncate"><%= @video.file_path %></dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<% if @video.video_metadata.present? %>
|
||||
<div class="mb-6">
|
||||
<h3 class="text-sm font-semibold text-gray-900 mb-2">Technical Details</h3>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-2">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-sm font-medium text-gray-500">Video Codec:</span>
|
||||
<span class="text-sm text-gray-900"><%= @video.video_codec || "N/A" %></span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-sm font-medium text-gray-500">Audio Codec:</span>
|
||||
<span class="text-sm text-gray-900"><%= @video.audio_codec || "N/A" %></span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-sm font-medium text-gray-500">Frame Rate:</span>
|
||||
<span class="text-sm text-gray-900"><%= @video.frame_rate || "N/A" %> fps</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-sm font-medium text-gray-500">Bit Rate:</span>
|
||||
<span class="text-sm text-gray-900"><%= @video.bit_rate ? "#{(@video.bit_rate / 1000).round(1)} kb/s" : "N/A" %></span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-sm font-medium text-500">Dimensions:</span>
|
||||
<span class="text-sm text-gray-900">
|
||||
<%= @video.width || "N/A" %> × <%= @video.height || "N/A" %>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<div class="flex gap-3">
|
||||
<%= link_to "Back to Videos", videos_path, class: "bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-md text-sm font-medium" %>
|
||||
<% if @video.streamable? %>
|
||||
<%= link_to "Watch Video", watch_video_path(@video), class: "bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium" %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user