commit da38a267bc12f99d9dd51ac60a98e27459c8f5ef
parent fdd87677317dec41b4e5c06b544c9785c4772357
Author: rbckman <rob@tarina.org>
Date: Mon, 7 Apr 2025 18:35:27 +0300
html5 player playin wave simultaniously sweet
Diffstat:
4 files changed, 114 insertions(+), 7 deletions(-)
diff --git a/srv/gonzopiserver.py b/srv/gonzopiserver.py
@@ -19,6 +19,7 @@ urls = (
'/','intro',
'/c/?', 'index',
'/f/(.*)?', 'films',
+ '/p/(.*)?', 'player',
'/api','api'
)
@@ -368,6 +369,10 @@ class films:
scenes = countscenes(filmfolder, film)
return render.filmpage(allfilms, film, scenes, str, filmfolder, counttakes, countshots, shots, i.scene, takes, i.shot, i.take, checkvideo, randhash)
+class player:
+ def GET(self, film):
+ i=web.input(scene=None,shot=None,take=None)
+ return render.player(filmfolder,film,i.scene,i.shot,i.take,str)
class api:
def GET(self):
@@ -487,22 +492,23 @@ class api:
video = ''
if film != None:
if selected == 0:
- video = '/'+filmfolder + film +'/'+ film+'.mp4'
+ video = '/p/'+film
menudone+=menudone+'video'
if selected == 4:
- video = '/'+filmfolder + film +'/'+ film+'.mp4'
+ video = '/p/'+film
elif selected == 5:
- video = '/'+filmfolder + film + '/scene' + str(scene).zfill(3) + '/scene.mp4'
+ video = '/p/'+film+'?scene=' + str(scene)
elif selected == 6:
- video = '/'+filmfolder + film + '/scene' + str(scene).zfill(3) + '/shot' + str(shot).zfill(3) + '/take' + str(take).zfill(3) + '.mp4'
+ video = '/p/'+film+'?scene='+str(scene)+'&shot='+str(shot)+'&take='+str(take)
elif selected == 7:
- video = '/'+filmfolder + film + '/scene' + str(scene).zfill(3) + '/shot' + str(shot).zfill(3) + '/take' + str(take).zfill(3) + '.mp4'
+ video = '/p/'+film+'?scene='+str(scene)+'&shot='+str(shot)+'&take='+str(take)
else:
- video = '/'+filmfolder + film + '/scene' + str(scene).zfill(3) + '/shot' + str(shot).zfill(3) + '/take' + str(take).zfill(3) + '.mp4'
+ video = '/p/'+film+'?scene='+str(scene)+'&shot='+str(shot)+'&take='+str(take)
thumb = '/'+filmfolder + film + "/scene" + str(scene).zfill(3) + "/shot" + str(shot).zfill(3) + "/take" + str(take).zfill(3) + ".jpeg"
if os.path.isfile(basedir+thumb) == True:
randhashimg = '?'+hashlib.md5(str(random.getrandbits(256)).encode('utf-8')).hexdigest()
writemenu=menudone+'<br><br>'+vumetermessage+'<br><a href="'+video+'"><img src="'+thumb+randhashimg+'"></a>'
+ #writemenu=menudone+render.player(filmfolder,film,scene,shot,take,str)
else:
writemenu=menudone+'<br><br>'+vumetermessage+'<br>'
f = open(basedir+'/static/menu.html', 'w')
diff --git a/srv/static/style.css b/srv/static/style.css
@@ -100,3 +100,26 @@ img
padding: 5px;
border-radius: 10px
}
+
+.player-container {
+width: 90vw; /* 100% of viewport width */
+margin: 0 auto;
+font-family: Arial, sans-serif;
+}
+video {
+width: 100%; /* Takes full width of container */
+height: auto; /* Maintains aspect ratio */
+display: block; /* Removes bottom gap */
+}
+.controls {
+padding: 10px; /* Better spacing on mobile */
+text-align: center; /* Center buttons */
+}
+/* Optional: Add max-width for very large screens */
+@media (min-width: 1200px) {
+.player-container {
+max-width: 1200px; /* Optional maximum width */
+margin: 0 auto; /* Centers on large screens */
+}
+}
+
diff --git a/srv/templates/base.html b/srv/templates/base.html
@@ -3,7 +3,7 @@ $def with (content)
<HEAD>
<meta charset="utf-8">
<title>Gonzo Pi | a reboot of filmmaking </title>
- <link rel="stylesheet" href="/static/style.css?v=135" type="text/css" rel="stylesheet"/>
+ <link rel="stylesheet" href="/static/style.css?v=155" type="text/css" rel="stylesheet"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="/static/jquery-3.7.1.min.js" type="text/javascript"></script>
</HEAD>
diff --git a/srv/templates/player.html b/srv/templates/player.html
@@ -0,0 +1,78 @@
+$def with (filmfolder,film,scene,shot,take,str)
+$ video=''
+$ audio=''
+$if shot != None and take != None:
+ $ video = '/'+filmfolder + film + '/scene' + str(scene).zfill(3) + '/shot' + str(shot).zfill(3) + '/take' + str(take).zfill(3) + '.mp4'
+ $ title = film + ' scene|' + str(scene).zfill(3) + ' shot|' + str(shot).zfill(3) + ' take|' + str(take).zfill(3)
+ $ audio = '/'+filmfolder + film + '/scene' + str(scene).zfill(3) + '/shot' + str(shot).zfill(3) + '/take' + str(take).zfill(3) + '.wav'
+$elif scene != None:
+ $ video = '/'+filmfolder + film + '/scene' + str(scene).zfill(3) + '/scene.mp4'
+ $ audio = '/'+filmfolder + film + '/scene' + str(scene).zfill(3) + '/scene.wav'
+ $ title = film + ' scene|' + str(scene).zfill(3)
+$elif film != None:
+ $ video = '/'+filmfolder + film + '/'+film+'.mp4'
+ $ audio = '/'+filmfolder + film + '/'+film+'.wav'
+ $ title = film
+<h3>$title</h3>
+<div class="player-container">
+<video id="videoPlayer" controls>
+ <source src="$video" type="video/mp4">
+ Your browser does not support the video element.
+</video>
+<audio id="audioPlayer">
+ <source src="$audio" type="audio/wav">
+ Your browser does not support the audio element.
+</audio>
+<div class="controls">
+</div>
+</div>
+
+<script>
+const video = document.getElementById('videoPlayer');
+const audio = document.getElementById('audioPlayer');
+
+// Sync video and audio playback
+video.addEventListener('play', () => {
+ audio.play();
+});
+
+video.addEventListener('pause', () => {
+ audio.pause();
+});
+
+// Sync playhead movement
+video.addEventListener('seeked', () => {
+ audio.currentTime = video.currentTime;
+});
+
+// Keep audio in sync during playback
+video.addEventListener('timeupdate', () => {
+ if (Math.abs(video.currentTime - audio.currentTime) > 0.5) {
+ audio.currentTime = video.currentTime;
+ }
+});
+
+// Optional: Handle playback rate changes
+video.addEventListener('ratechange', () => {
+ audio.playbackRate = video.playbackRate;
+});
+
+// Control functions
+function playBoth() {
+ video.play();
+ audio.play();
+}
+
+function pauseBoth() {
+ video.pause();
+ audio.pause();
+}
+
+// Ensure audio stays muted if video is muted
+video.addEventListener('volumechange', () => {
+ audio.muted = video.muted;
+ audio.volume = video.volume;
+});
+</script>
+
+<h3><a href="/c">BACK</a></h3>
