thumbnails.html (6180B)
1 {{template "_header" .}} 2 <h1>Thumbnail Management</h1> 3 4 {{if .Data.Error}} 5 <div style="background-color: #f8d7da; color: #721c24; padding: 10px; border: 1px solid #f5c6cb; border-radius: 4px; margin-bottom: 20px;"> 6 <strong>Error:</strong> {{.Data.Error}} 7 </div> 8 {{end}} 9 10 {{if .Data.Success}} 11 <div style="background-color: #d4edda; color: #155724; padding: 10px; border: 1px solid #c3e6cb; border-radius: 4px; margin-bottom: 20px;"> 12 <strong>Success:</strong> {{.Data.Success}} 13 </div> 14 {{end}} 15 16 <!-- Tab Navigation --> 17 <div style="margin-bottom: 20px; border-bottom: 2px solid #ddd;"> 18 <button onclick="showTab('missing')" id="tab-missing" style="padding: 10px 20px; border: none; background: none; cursor: pointer; border-bottom: 3px solid #007bff; font-weight: bold;"> 19 Missing ({{len .Data.MissingThumbnails}}) 20 </button> 21 <button onclick="showTab('all')" id="tab-all" style="padding: 10px 20px; border: none; background: none; cursor: pointer; border-bottom: 3px solid transparent;"> 22 All Videos ({{len .Data.AllVideos}}) 23 </button> 24 </div> 25 26 <!-- Missing Thumbnails Tab --> 27 <div id="content-missing" style="margin-bottom: 30px;"> 28 <h2>Missing Thumbnails ({{len .Data.MissingThumbnails}})</h2> 29 30 {{if .Data.MissingThumbnails}} 31 <form method="post" action="/thumbnails/generate" style="margin-bottom: 20px;"> 32 <input type="hidden" name="action" value="generate_all"> 33 <button type="submit" onclick="return confirm('Generate thumbnails for all {{len .Data.MissingThumbnails}} videos? This may take a while.');" style="background-color: #28a745; color: white; padding: 10px 20px; border: none; border-radius: 4px; font-size: 16px; cursor: pointer;"> 34 Generate All Missing Thumbnails 35 </button> 36 <small style="color: #666; margin-left: 10px;">Uses timestamp 00:00:05 for all videos</small> 37 </form> 38 39 <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px;"> 40 {{range .Data.MissingThumbnails}} 41 <div style="border: 1px solid #ddd; padding: 15px; border-radius: 5px; background-color: #f8f9fa;"> 42 <h3 style="margin-top: 0; font-size: 14px; word-break: break-word;"> 43 <a href="/file/{{.ID}}" target="_blank">{{.Filename}}</a> 44 </h3> 45 <p style="color: #666; font-size: 12px; margin: 5px 0;">ID: {{.ID}}</p> 46 47 <video width="100%" style="max-height: 200px; background: #000; margin: 10px 0; cursor: pointer;" title="Click to capture frame"> 48 <source src="/uploads/{{.EscapedFilename}}"> 49 </video> 50 51 <form method="post" action="/thumbnails/generate" style="margin-top: 10px;"> 52 <input type="hidden" name="action" value="generate_single"> 53 <input type="hidden" name="file_id" value="{{.ID}}"> 54 55 <div style="display: flex; gap: 5px; align-items: center; margin-bottom: 10px;"> 56 <label style="font-size: 13px; white-space: nowrap;">Timestamp:</label> 57 <input type="text" name="timestamp" value="00:00:05" placeholder="00:00:05" 58 style="flex: 1; padding: 5px; font-size: 13px; font-family: monospace;"> 59 </div> 60 61 <button type="submit" style="background-color: #007bff; color: white; padding: 6px 12px; border: none; border-radius: 3px; font-size: 13px; cursor: pointer; width: 100%;"> 62 Generate Thumbnail 63 </button> 64 </form> 65 </div> 66 {{end}} 67 </div> 68 {{else}} 69 <div style="padding: 20px; background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; border-radius: 4px;"> 70 <strong>✓ All videos have thumbnails!</strong> 71 </div> 72 {{end}} 73 </div> 74 75 <!-- All Videos Tab --> 76 <div id="content-all" style="margin-bottom: 30px; display: none;"> 77 <h2>Regenerate Thumbnail</h2> 78 79 <div style="margin-bottom: 20px; padding: 10px; background-color: #e7f3ff; border: 1px solid #b3d9ff; border-radius: 4px;"> 80 <strong>Tip:</strong> Enter a file ID to regenerate its thumbnail with a custom timestamp. You can find file IDs in the URL when viewing a file (e.g., /file/312). 81 </div> 82 83 <form method="post" action="/thumbnails/generate" style="max-width: 500px; padding: 20px; background-color: #f8f9fa; border: 1px solid #ddd; border-radius: 5px;"> 84 <input type="hidden" name="action" value="generate_single"> 85 86 <div style="margin-bottom: 20px;"> 87 <label for="file_id" style="display: block; font-weight: bold; margin-bottom: 5px;">File ID:</label> 88 <input type="text" id="file_id" name="file_id" required 89 style="width: 100%; padding: 8px; font-size: 14px; font-family: monospace;" 90 placeholder="e.g., 312"> 91 <small style="color: #666;">Enter the ID of the video file</small> 92 </div> 93 94 <div style="margin-bottom: 20px;"> 95 <label for="timestamp" style="display: block; font-weight: bold; margin-bottom: 5px;">Timestamp:</label> 96 <input type="text" id="timestamp" name="timestamp" value="00:00:05" required 97 style="width: 100%; padding: 8px; font-size: 14px; font-family: monospace;" 98 placeholder="00:00:05"> 99 <small style="color: #666;">Format: HH:MM:SS (e.g., 00:00:05 for 5 seconds)</small> 100 </div> 101 102 <button type="submit" style="background-color: #007bff; color: white; padding: 10px 20px; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; width: 100%;"> 103 Generate/Regenerate Thumbnail 104 </button> 105 </form> 106 107 {{if .Data.Success}} 108 <div class="auto-hide-success" style="margin-top: 20px; padding: 15px; background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; border-radius: 4px;"> 109 <strong>✓ Success!</strong> {{.Data.Success}} 110 </div> 111 {{end}} 112 </div> 113 114 <script src="/static/thumbnails.js" defer></script> 115 116 {{template "_footer"}}