taggart

Simple golang tagging filesystem webapp
Log | Files | Refs

thumbnails.js (2802B)

      1 function showTab(tabName) {
      2     // Hide all content
      3     document.getElementById('content-missing').style.display = 'none';
      4     document.getElementById('content-all').style.display = 'none';
      5 
      6     // Remove active styling from all tabs
      7     document.getElementById('tab-missing').style.borderBottomColor = 'transparent';
      8     document.getElementById('tab-missing').style.fontWeight = 'normal';
      9     document.getElementById('tab-all').style.borderBottomColor = 'transparent';
     10     document.getElementById('tab-all').style.fontWeight = 'normal';
     11 
     12     // Show selected content and style tab
     13     document.getElementById('content-' + tabName).style.display = 'block';
     14     document.getElementById('tab-' + tabName).style.borderBottomColor = '#007bff';
     15     document.getElementById('tab-' + tabName).style.fontWeight = 'bold';
     16 }
     17 
     18 // Auto-hide success messages
     19 function autoHideSuccess() {
     20     const successDivs = document.querySelectorAll('.auto-hide-success');
     21     successDivs.forEach(div => {
     22         setTimeout(() => {
     23             div.style.transition = 'opacity 0.5s';
     24             div.style.opacity = '0';
     25             setTimeout(() => div.remove(), 500);
     26         }, 5000);
     27     });
     28 }
     29 
     30 // Call auto-hide
     31 autoHideSuccess();
     32 
     33 // Add video preview on hover
     34 document.querySelectorAll('video').forEach(video => {
     35     video.addEventListener('mouseenter', function() {
     36         this.play();
     37     });
     38     video.addEventListener('mouseleave', function() {
     39         this.pause();
     40         this.currentTime = 0;
     41     });
     42 });
     43 
     44 // Add timestamp helper
     45 document.querySelectorAll('input[name="timestamp"]').forEach(input => {
     46     const video = input.closest('div[style*="border"]').querySelector('video');
     47     if (video) {
     48         input.addEventListener('focus', function() {
     49             video.play();
     50         });
     51 
     52         // Click on video to set current time as timestamp
     53         video.addEventListener('click', function(e) {
     54             e.preventDefault();
     55             const currentTime = this.currentTime;
     56             const hours = Math.floor(currentTime / 3600);
     57             const minutes = Math.floor((currentTime % 3600) / 60);
     58             const seconds = Math.floor(currentTime % 60);
     59             const formatted = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
     60             const timestampInput = this.closest('div[style*="border"]').querySelector('input[name="timestamp"]');
     61             if (timestampInput) {
     62                 timestampInput.value = formatted;
     63                 // Flash the input to show it updated
     64                 timestampInput.style.backgroundColor = '#ffffcc';
     65                 setTimeout(() => {
     66                     timestampInput.style.backgroundColor = '';
     67                 }, 500);
     68             }
     69             this.pause();
     70         });
     71     }
     72 });