velour/app/views/videos/show.html.erb

<% 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>