edit.html - gonzopi - git clone https://git.tarina.org/gonzopi

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