gonzopi

git clone https://git.tarina.org/gonzopi
Log | Files | Refs | README | LICENSE

edit.html (13580B)

      1 $def with (films, film, scenes, str, filmfolder, counttakes, countshots, countscenes, shots, scene, takes, shot, take, checkvideo,randhash, if_exist, createthumb,basedir,time,get_video_length, db, real_filmfolder)
      2 $ video = ''
      3 
      4 <script>
      5 $$(document).on('keydown', function (event) {
      6     console.log('error', event.which);
      7     if (event.which == 37) {
      8         event.preventDefault();
      9         $$('#LEFT').trigger('click');
     10     } else if (event.which == 39) {
     11         event.preventDefault();
     12         $$('#RIGHT').trigger('click');
     13     } else if (event.which == 38) {
     14         event.preventDefault();
     15         $$('#UP').trigger('click');
     16     } else if (event.which == 40) {
     17         event.preventDefault();
     18         $$('#DOWN').trigger('click');
     19     } else if (event.which == 33) {
     20         event.preventDefault();
     21         $$('#RECORD').trigger('click');
     22     } else if (event.which == 32) {
     23         event.preventDefault();
     24         $$('#RECORD').trigger('click');
     25     } else if (event.which == 34) {
     26         $$('#RETAKE').trigger('click');
     27     } else if (event.which == 9) {
     28         event.preventDefault();
     29         $$('#VIEW').trigger('click');
     30     } else if (event.which == 46) {
     31         $$('#DELETE').trigger('click');
     32         event.preventDefault();
     33     } else if (event.which == 13) {
     34         $$('#MIDDLE').trigger('click');
     35         event.preventDefault();
     36     } else if (event.which == 77) {
     37         $$('#MOVE').trigger('click');
     38     } else if (event.which == 67) {
     39         $$('#COPY').trigger('click');
     40     } else if (event.which == 80) {
     41         $$('#PASTE').trigger('click');
     42     } else if (event.which == 68) {
     43         $$('#DUB').trigger('click');
     44     }
     45 });
     46 </script>
     47 
     48 <style>
     49 body {
     50   margin: 0; /* Remove default body margin */
     51 }
     52 .image-container {
     53   display: flex; /* Flexbox for layout */
     54   flex-wrap: wrap; /* Wrap to next row */
     55   gap: 0px; /* Space between items */
     56   padding-bottom: 300px;
     57 }
     58 .draggable {
     59   max-width: 100px; /* Adjust size as needed */
     60   height: auto; /* Maintain aspect ratio */
     61   cursor: move; /* Indicate draggable */
     62   user-select: none; /* Prevent text selection */
     63   border: 0px solid #ccc; /* Optional: visual feedback */
     64 }
     65 .draggable.dragging {
     66   opacity: 0.5; /* Visual feedback during drag */
     67 }
     68 button {
     69     all: unset; /* Resets all inherited properties */
     70     display: inline-block; /* Ensures the button behaves like a block element */
     71     cursor: pointer; /* Changes the cursor to a pointer on hover */
     72     display: flex;
     73     /* Add any additional styles you want here */
     74 }
     75 .responsive-div {
     76     display: none; /* Hide by default */
     77     text-align: center;
     78 }
     79 @media (max-width: 700px) {
     80     .responsive-div {
     81         display: block; /* Show when screen width is 500px or less */
     82     }
     83 }
     84 
     85 
     86 </style>
     87 
     88 
     89 <br>
     90 <a href="/c/">camera control</a>
     91 <div class="responsive-div">
     92 <div class="controller">
     93 <a id="VIEW">VIEW</a> <a id="UP">UP</a> <a id="RECORD">RECORD</a><br>
     94 <a id="LEFT">LEFT</a> <a id="MIDDLE">MIDDLE</a> <a id="RIGHT">RIGHT</a><br>
     95 <a id="DELETE">DELETE</a> <a id="DOWN">DOWN</a> <a id="RETAKE">RETAKE</a><br>
     96 <a id="MOVE">MOVE</a> <a id="COPY">COPY</a> <a id="PASTE">PASTE</a> <a id="DUB">DUB</a> <br>
     97 </div>
     98 <div id="menu2" style="margin:0 auto; width:99%" ></div>
     99 <div id="menu" style="margin:0 auto; width:99%">
    100 </div>
    101 </div>
    102 
    103 </div>
    104 <br>
    105 <div id="content">
    106 $ t=0
    107 <br>
    108 $if film != '' and scene != '' and shot != '':
    109     <div class="image-container">
    110     $ i = film
    111     $ scenes=countscenes(filmfolder, i)
    112     $for s in range(scenes):
    113         <pre style="margin-top:0px; margin-left:5px; width: 100%; " ></pre>
    114         <pre style="margin-top:0px; margin-left:5px; width: 100%; " >scene $str(s+1)</pre>
    115         $ t = counttakes(i, filmfolder, s+1, 1)
    116         $ shots = countshots(i, filmfolder, s+1)
    117         $for s2 in range(shots):
    118             $ t2 = countshots(i, filmfolder, s+1)
    119             $ p2 = counttakes(i, filmfolder, s+1, s2+1)
    120             $ mp4_file = basedir+'/'+filmfolder + i + '/scene' + str(s+1).zfill(3) + '/shot' + str(s2+1).zfill(3) + '/take' + str(p2).zfill(3) + '.mp4'
    121             $ shot_file = real_filmfolder + i + '/scene' + str(s+1).zfill(3) + '/shot' + str(s2+1).zfill(3) + '/'
    122             $ shot_mp4_file = real_filmfolder + i + '/scene' + str(s+1).zfill(3) + '/shot' + str(s2+1).zfill(3) + '/take' + str(p2).zfill(3) + '.mp4'
    123             $ picture = basedir+'/'+filmfolder + i + '/scene' + str(s+1).zfill(3) + '/shot' + str(s2+1).zfill(3) + '/take' + str(p2).zfill(3) + '.jpeg'
    124             $ picture_url = '/'+filmfolder + i + '/scene' + str(s+1).zfill(3) + '/shot' + str(s2+1).zfill(3) + '/take' + str(p2).zfill(3) + '.jpeg'
    125             $ thumbnail = basedir+'/'+filmfolder + i + '/scene' + str(s+1).zfill(3) + '/shot' + str(s2+1).zfill(3) + '/take' + str(p2).zfill(3) + '_thumb.jpeg'
    126             $ thumbnail_url = '/'+filmfolder + i + '/scene' + str(s+1).zfill(3) + '/shot' + str(s2+1).zfill(3) + '/take' + str(p2).zfill(3) + '_thumb.jpeg'
    127             <div class='shotdata' data-file="$shot_file" data-film="$film" data-scene="${str(s+1)}" data-shot="${str(s2+1)}" style="padding:0px;">
    128             |$str(s2+1)|
    129             $get_video_length(shot_mp4_file)
    130             <button class="sendDataButton">
    131             $ check=if_exist(thumbnail_url)
    132             $if check == True:
    133                 <img style="vertical-align:middle; width:100%; max-width:80px; height:auto;" src="$thumbnail_url?$randhash" alt="scene=${str(s+1)}&shot=${str(s2+1)}"/>
    134             $else:
    135                 $ check=if_exist(picture_url)
    136                 $if check == True:
    137                     $#createthumb(picture,thumbnail)
    138                     $#time.sleep(0.2)
    139                     <img style="vertical-align:middle; width:100%; max-width:80px; height:auto;" src="$picture_url?$randhash" alt="scene=${str(s+1)}&shot=${str(s2+1)}"/>
    140                 $else:
    141                     $ thumbnail_url = '/static/empty.jpeg'
    142                     <img style="vertical-align:middle; width:100%; max-width:80px; height:auto;" src="$thumbnail_url?$randhash" alt="scene=${str(s+1)}&shot=${str(s2+1)}"/>
    143             </button>
    144             </div>
    145         </br>
    146     </div>
    147 $else:
    148     <h1>FILMS</h1>
    149     $for i in films:
    150         <a href="$i"><pre>$i</pre></a>
    151         $ thumbnail_url = '/'+filmfolder + i + '/scene' + str(4).zfill(3) + '/shot' + str(1).zfill(3) + '/take' + str(1).zfill(3) + '.jpeg'
    152         <a href="$i"><img style="vertical-align:middle; width:80%; max-width:50px;"  src="$thumbnail_url?$randhash"/></a><br><br>
    153 
    154 $if shot != None:
    155     $for t in range(takes):
    156         $ thumbnail_url = '/'+filmfolder + film + '/scene' + str(scene).zfill(3) + '/shot' + str(shot).zfill(3) + '/take' + str(t+1).zfill(3) + '.jpeg'
    157         <pre>take $str(t+1)</pre>
    158         <a href="?scene=$scene&shot=$shot&take=${str(t+1)}"><img style="vertical-align:middle; width:80%; max-width:50px;"  src="$thumbnail_url?$randhash" alt="scene=$scene&shot=$shot&take=${str(t+1)}"/></a><br>
    159 $elif scene != None:
    160     $for s in range(shots)
    161         <pre>shot $str(s+1)</pre>
    162         $ t = countshots(film, filmfolder, scene)
    163         $ p = counttakes(film, filmfolder, scene, s+1)
    164         $ thumbnail_url = '/'+filmfolder + film + '/scene' + str(scene).zfill(3) + '/shot' + str(s+1).zfill(3) + '/take' + str(p).zfill(3) + '.jpeg'
    165         <a href="?scene=$scene&shot=${str(s+1)}"><img style="vertical-align:middle; width:80%; max-width:50px;" src="$thumbnail_url?$randhash" alt="scene=$scene&shot=$shot&take=${str(t+1)}"/></a><br>
    166 
    167 </div>
    168 <script>
    169 $$(document).ready(function() {
    170 function refreshPage() {
    171     $$.ajax({
    172         url: '/e/$film', // Replace with your server endpoint
    173         method: 'GET',
    174         success: function(html) {
    175         },
    176         error: function(error) {
    177             console.error('Error refreshing page:', error);
    178         }
    179     });
    180 }
    181 $$('.sendDataButton').click(function() {
    182     // Retrieve data from the div
    183     var shotname = $$('.sendDataButton').text(); //
    184     var shotdata = $$(this).closest('.shotdata');
    185     var film = shotdata.data('film'); // Get data-info attribute
    186     var scene = shotdata.data('scene'); // Get data-info attribute
    187     var shot = shotdata.data('shot'); // Get data-info attribute
    188     console.log('error', film);
    189     console.log('error', scene);
    190     console.log('error', shot);
    191 
    192     // Prepare the data to be sent
    193     var postData = {
    194         film: film,
    195         scene: scene,
    196         shot: shot
    197     };
    198 
    199     // Send the POST request
    200     $$.ajax({
    201         url: '/api', // Replace with your server URL
    202         type: 'POST',
    203         data: postData,
    204         success: function(response) {
    205             console.log('Data sent successfully:', response);
    206         },
    207         error: function(xhr, status, error) {
    208             console.error('Error sending data:', error);
    209         }
    210     });
    211 });
    212 
    213 $$('#LEFT').on('click', function () {
    214     $$.ajax({
    215     method: "POST",
    216     type: "Content-type",
    217     url:"/api?func=left",
    218     success: function(result) {
    219     },
    220     error: function(result) {
    221     console.log('error', result);
    222     }
    223 })
    224 });
    225 $$('#RIGHT').on('click', function () {
    226     $$.ajax({
    227     method: "POST",
    228     type: "Content-type",
    229     url:"/api?func=right",
    230     success: function(result) {
    231     },
    232     error: function(result) {
    233     console.log('error', result);
    234     }
    235 })
    236 });
    237 $$('#DOWN').on('click', function () {
    238     $$.ajax({
    239     method: "POST",
    240     type: "Content-type",
    241     url:"/api?func=down",
    242     success: function(result) {
    243     },
    244     error: function(result) {
    245     console.log('error', result);
    246     }
    247 })
    248 });
    249 $$('#UP').on('click', function () {
    250     $$.ajax({
    251     method: "POST",
    252     type: "Content-type",
    253     url:"/api?func=up",
    254     success: function(result) {
    255     },
    256     error: function(result) {
    257     console.log('error', result);
    258     }
    259 })
    260 });
    261 $$('#RECORD').on('click', function () { 
    262     $$.ajax({
    263     method: "POST",
    264     type: "Content-type",
    265     url:"/api?func=record",
    266     success: function(result) {
    267     },
    268     error: function(result) {
    269     console.log('error', result);
    270     }
    271 })
    272 });
    273 $$('#RETAKE').on('click', function () { 
    274     $$.ajax({
    275     method: "POST",
    276     type: "Content-type",
    277     url:"/api?func=retake",
    278     success: function(result) {
    279     },
    280     error: function(result) {
    281     console.log('error', result);
    282     }
    283 })
    284 });
    285 $$('#DELETE').on('click', function () { 
    286     $$.ajax({
    287     method: "POST",
    288     type: "Content-type",
    289     url:"/api?func=delete",
    290     success: function(result) {
    291     },
    292     error: function(result) {
    293     console.log('error', result);
    294     }
    295 })
    296 });
    297 $$('#VIEW').on('click', function () { 
    298     $$.ajax({
    299     method: "POST",
    300     type: "Content-type",
    301     url:"/api?func=view",
    302     success: function(result) {
    303     },
    304     error: function(result) {
    305     console.log('error', result);
    306     }
    307 })
    308 });
    309 $$('#MIDDLE').on('click', function () { 
    310     $$.ajax({
    311     method: "POST",
    312     type: "Content-type",
    313     url:"/api?func=middle",
    314     success: function(result) {
    315     },
    316     error: function(result) {
    317     console.log('error', result);
    318     }
    319 })
    320 });
    321 $$('#MOVE').on('click', function () { 
    322     $$.ajax({
    323     method: "POST",
    324     type: "Content-type",
    325     url:"/api?func=move",
    326     success: function(result) {
    327     setTimeout(function() {
    328     location.reload(); // Refresh the entire page
    329 },1500);
    330     },
    331     error: function(result) {
    332     console.log('error', result);
    333     }
    334 })
    335 });
    336 $$('#COPY').on('click', function () { 
    337     $$.ajax({
    338     method: "POST",
    339     type: "Content-type",
    340     url:"/api?func=copy",
    341     success: function(result) {
    342     },
    343     error: function(result) {
    344     console.log('error', result);
    345     }
    346 })
    347 });
    348 $$('#PASTE').on('click', function () { 
    349     $$.ajax({
    350     method: "POST",
    351     type: "Content-type",
    352     url:"/api?func=paste",
    353     success: function(result) {
    354     },
    355     error: function(result) {
    356     console.log('error', result);
    357     }
    358 })
    359 });
    360 $$('#DUB').on('click', function () { 
    361     $$.ajax({
    362     method: "POST",
    363     type: "Content-type",
    364     url:"/api?func=dub",
    365     success: function(result) {
    366     },
    367     error: function(result) {
    368     console.log('error', result);
    369     }
    370 })
    371 });
    372 
    373 
    374   // Function to fetch data and update div
    375   function updateShotData() {
    376     // Get the div and its data attributes
    377     const $$shotDivs = $$('.shotdata');
    378 
    379     // AJAX request
    380     $$.ajax({
    381       url: '/api', // Replace with your actual API endpoint
    382       method: 'GET',
    383       dataType: 'json', // Explicitly expect JSON response
    384       success: function(response) {
    385         // Assuming JSON response like: { "scene": "1", "shot": "2" }
    386         const currentScene = response.scene;
    387         const currentShot = response.shot;
    388         const currentFilm = response.film;
    389         const fileList = response.selected;
    390 
    391         // Reset all divs to transparent border
    392         $$shotDivs.css('border', '1px solid transparent');
    393         $$shotDivs.css('background', 'transparent');
    394 
    395         // Find and update matching div
    396         $$shotDivs.each(function() {
    397           const $$div = $$(this);
    398           if ($$div.data('scene') == currentScene && $$div.data('shot') == currentShot && $$div.data('film') == currentFilm ) {
    399             $$div.css('border', '1px solid white'); // Draw border on matching div
    400           }
    401           if (fileList.includes($$div.data('file'))) {
    402             $$div.css('background', 'grey');
    403           }
    404         });
    405       },
    406       error: function(xhr, status, error) {
    407         console.error('API request failed:', error);
    408         $$shotDivs.css('border', '1px solid transparent'); // Reset all borders on error
    409       }
    410     });
    411   }
    412 
    413 
    414   // Initial call
    415   updateShotData();
    416 
    417   // Set interval to call every second (1000ms)
    418   setInterval(updateShotData, 300);
    419 });
    420 
    421 
    422 </script>
    423