image/video width/height

3 files changed, 12 insertions, 10 deletions

diff --git a/html.rb b/html.rb
index 7e9d2f0..1018a31 100755
--- a/html.rb
+++ b/html.rb
@@ -1,5 +1,4 @@
 #!/usr/bin/env ruby
-require 'erb'
 
 MEDIA_DIR = '/srv/media'
 MEDIA_URL = 'https://media.pdp8.info'
@@ -13,6 +12,7 @@ def nav(cat)
     cl = c == cat ? 'item current' : 'item'
     html += "&nbsp;<a class='#{cl}' href='/#{c}.html'>#{c}</a>"
   end
+  html += "&nbsp;<a class='item' href='/social/create.html'>social</a>"
   html += "&nbsp;<a class='item' href='/rss.xml'>rss</a>"
   html += "&nbsp;<a id='menu' href='#' onclick='show_vertical_menu()'>&equiv;</a>"
   html += '</nav>'
@@ -34,7 +34,6 @@ def print_html(basename, html)
   out = File.join(WWW_DIR, basename + '.html')
   puts out
   File.open(out, 'w+') { |f| f.puts html }
-  File.open('tmp.html', 'w+') { |f| f.puts html } if basename == 'music'
   puts `tidy -iqm -w 0 #{out} 2>&1`
 end
 
@@ -51,7 +50,8 @@ def music_html
     html += "<h1>#{title}</h1>"
     html += File.read(File.join(dir, 'README')).chomp.gsub("\n\n", '<p>').gsub("\n", '<br>') # + '<p>'
     cover = File.join(MEDIA_URL, dir.sub(MEDIA_DIR, ''), 'cover.webp')
-    html += "<img class='cover' loading='lazy' width='1024' height='1024' src='#{cover}' alt='cover'>"
+    w, h = `identify -format "%w %h" #{cover}`.chomp.split(' ')
+    html += "<img class='cover' loading='lazy' width='#{w}' height='#{h}' src='#{cover}' alt='cover'>"
     html += '<table>'
     copyrights_file = File.join(dir, 'copyrights')
     copyrights = File.readlines(copyrights_file).collect { |l| l.chomp } if File.exist? copyrights_file
@@ -102,15 +102,15 @@ def video_html
     mp4 =   File.join(MEDIA_URL, 'videos', File.basename(dir), title.gsub(' ', '_') + '.mp4')
     webm = File.join(MEDIA_URL, 'videos', File.basename(dir), title.gsub(' ', '_') + '.webm')
     poster = File.join(MEDIA_URL, 'videos', File.basename(dir), 'poster.png')
+    w, h = `ffprobe -v error -select_streams v:0 -show_entries stream=width,height -of csv=p=0 #{webm}`.chomp.split(',')
 
-    html += "<video controls preload='none' poster='#{poster}'>
+    html += "<video controls preload='none'  width='#{w}' height='#{h}' poster='#{poster}'>
         <source src='#{webm}' type='video/webm'>
         <source src='#{mp4}' type='video/mp4'>
         </video><p>
         "
     html += lines.join('<br>')
     html += '</div>'
-    # html += '<hr>'
   end
   html += '<p>&nbsp;&copy; pdp8 <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>'
   html += File.read(File.join(SNIPPETS, 'tail.html'))
@@ -128,9 +128,10 @@ def climbing_html
       webm: txt.sub(MEDIA_DIR, MEDIA_URL).sub('.txt', '.webm'),
       webp: txt.sub(MEDIA_DIR, MEDIA_URL).sub('.txt', '.webp') }
   end.sort_by { |m| m[:date] }.reverse.each do |post|
+    w, h = `ffprobe -v error -select_streams v:0 -show_entries stream=width,height -of csv=p=0 #{post[:webm]}`.chomp.split(',')
     html += '<div class="post">'
     html += "<h1>#{post[:date]}</h1>"
-    html += "<video controls preload='none' poster=#{post[:webp]}>
+    html += "<video controls preload='none' width='#{w}' height='#{h}' poster=#{post[:webp]}>
         <source src='#{post[:webm]}' type='video/webm'>
         <source src='#{post[:mp4]}' type='video/mp4'>
         <a href=#{post[:mp4]}>#{post[:mp4]}</a>
diff --git a/html/code.html b/html/code.html
index 6b43fee..3c342ea 100644
--- a/html/code.html
+++ b/html/code.html
@@ -1 +1 @@
-<iframe src='https://git.pdp8.info/' title="pdp8 git repositories"/>"
+<iframe src='https://git.pdp8.info/' title='pdp8 git repositories'/>
diff --git a/html/style.css b/html/style.css
index 1c8bf59..05e4964 100644
--- a/html/style.css
+++ b/html/style.css
@@ -52,7 +52,7 @@ nav a:hover {
 }
 
 .post {
-  padding: 1em;
+  margin: 1em;
 }
 
 img,
@@ -61,13 +61,14 @@ video {
   max-width: 80vw;
   object-fit: contain;
   display: block;
-  margin-left: auto;
-  margin-right: auto;
+  margin-left: 0;
 }
 
 #image {
   padding-top: 2.5%;
   padding-bottom: 1%;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .cover {