start video support

prosopopee/prosopopee.py

@@ -23,9 +23,76 @@ SETTINGS = {
         "auto-orient": True,
         "strip": True,
         "resize": None
+    },
+    "ffmpeg": {
+        "loglevel": "panic",
+        "format": "webm",
+        "resolution": "1280x720",
+        "bitrate": "3900k",
+        "preselect": "libvpx-720p"
     }
 }
 
+class Video(object):
+    base_dir = ""
+    target_dir = ""
+
+    def __init__(self, options):
+        # assuming string
+        if not isinstance(options, dict):
+            options = {"video": options}
+        self.options = SETTINGS["ffmpeg"].copy()  # used for caching, if it's modified -> regenerate
+        self.options.update(options)
+    
+    @property
+    def name(self):
+        return self.options["name"]
+
+    def ffmpeg(self, source, target, options):
+        if CACHE.needs_to_be_generated(source, target, options):
+            ffmpeg_switches = {
+                    "source": source,
+                    "target": target,
+                    "loglevel": "-loglevel %s" % options["loglevel"],
+                    "resolution": "-s %s" % options["resolution"],
+                    "preselect": "-vpre %s" % options["preselect"],
+                    "resize": "-vf scale=-1:%s" % options.get("resize"),
+                    "bitrate": "-b %s" % options["bitrate"],
+                    "format": "-f %s" % options["format"]
+                    }
+            warning("Generation", source)
+            if options.get("resize"):
+                command = "ffmpeg {loglevel} -i {source} {resize} -vframes 1 -y {target}".format(**ffmpeg_switches)
+                os.system(command)
+            else:
+                command = "ffmpeg {loglevel} -i {source} {resolution} {preselect} {bitrate} -pass 1 -an {format} -y {target}".format(**ffmpeg_switches)
+                command2 = "ffmpeg {loglevel} -i {source} {resolution} {preselect} {bitrate} -pass 2 -acodec libvorbis -ab 100k {format} -y {target}".format(**ffmpeg_switches)
+                os.system(command)
+                os.system(command2)
+            CACHE.cache_picture(source, target, options)
+        else:
+            okgreen("Skipped", source + " is already generated")
+    
+    def copy(self):
+        source, target = os.path.join(self.base_dir, self.name), os.path.join(self.target_dir, self.name)
+        options = self.options.copy()
+        self.ffmpeg(source, target, options)
+        return ""
+
+    def generate_thumbnail(self, gm_geometry):
+        thumbnail_name = self.name.split(".")
+        thumbnail_name[-2] += "-%s" % gm_geometry
+        thumbnail_name = thumbnail_name[-2] + ".png"
+        source, target = os.path.join(self.base_dir, self.name), os.path.join(self.target_dir, thumbnail_name)
+        options = self.options.copy()
+        options.update({"resize": gm_geometry})
+        self.ffmpeg(source, target, options)
+        return thumbnail_name
+    
+    def __repr__(self):
+        return self.name
+
+
 class Image(object):
     base_dir = ""
     target_dir = ""
@@ -50,7 +117,6 @@ class Image(object):
                     "strip": "-strip" if options["strip"] else "",
                     "quality": "-quality %s" % options["quality"] if "quality" in options else "-define jpeg:preserve-settings",
                     "resize": "-resize %s" % options["resize"] if options.get("resize", None) is not None else ""
-
                     }
             command = "gm convert {source} {auto-orient} {strip} {quality} {resize} {target}".format(**gm_switches)
             warning("Generation", source)
@@ -189,9 +255,11 @@ def main():
         # this should probably be a factory
         Image.base_dir = os.path.join(os.getcwd(), gallery)
         Image.target_dir = os.path.join(os.getcwd(), "build", gallery)
+        Video.base_dir = os.path.join(os.getcwd(), gallery)
+        Video.target_dir = os.path.join(os.getcwd(), "build", gallery)
 
         template_to_render = page_template if gallery_settings.get("static") else gallery_index_template
-        open(os.path.join("build", gallery, "index.html"), "w").write(template_to_render.render(settings=settings, gallery=gallery_settings, Image=Image, link=gallery).encode("Utf-8"))
+        open(os.path.join("build", gallery, "index.html"), "w").write(template_to_render.render(settings=settings, gallery=gallery_settings, Image=Image, Video=Video, link=gallery).encode("Utf-8"))
 
         if settings["rss"]:
             open(os.path.join("build", "feed.xml"), "w").write(feed_template.render(settings=settings, link=gallery, galleries=reversed(sorted(front_page_galleries_cover, key=lambda x: x["date"]))).encode("Utf-8"))

prosopopee/themes/exposure/static/css/style-page.css

@@ -9,11 +9,12 @@ body {
     width: 100%;
     background-color: #FBFBFB;
     color: black;
-    margin: 0;
+    margin: 0px;
 }
 
 section {
     margin-bottom: 80px;
+    margin-top: 40px;
 }
 
 a {
@@ -27,6 +28,7 @@ a {
     height: 100%;
     width: 100%;
     min-height: 250px;
+    margin-top: 0;
 }
 
 .full-picture > .picture-text {
@@ -90,7 +92,6 @@ a {
 
 .pictures-line .picture img {
     width: 100%;
-    height: 100%;
 }
 
 .pictures-line .separator {
@@ -336,3 +337,21 @@ a.google {
     line-height: normal;
     color: #333;
 }
+
+.picture video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    width: 100%;
+    height: auto;
+}
+
+.bg-section {
+    padding: 1px 0px;
+}
+
+.bg-section section {
+    margin-bottom: 40px;
+    margin-top: 40px;
+}

prosopopee/themes/exposure/static/js/jquery.lazyload.min.js

@@ -0,0 +1,2 @@
+/*! Lazy Load 1.9.7 - MIT license - Copyright 2010-2015 Mika Tuupola */
+!function(a,b,c,d){var e=a(b);a.fn.lazyload=function(f){function g(){var b=0;i.each(function(){var c=a(this);if(!j.skip_invisible||c.is(":visible"))if(a.abovethetop(this,j)||a.leftofbegin(this,j));else if(a.belowthefold(this,j)||a.rightoffold(this,j)){if(++b>j.failure_limit)return!1}else c.trigger("appear"),b=0})}var h,i=this,j={threshold:0,failure_limit:0,event:"scroll",effect:"show",container:b,data_attribute:"original",skip_invisible:!1,appear:null,load:null,placeholder:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC"};return f&&(d!==f.failurelimit&&(f.failure_limit=f.failurelimit,delete f.failurelimit),d!==f.effectspeed&&(f.effect_speed=f.effectspeed,delete f.effectspeed),a.extend(j,f)),h=j.container===d||j.container===b?e:a(j.container),0===j.event.indexOf("scroll")&&h.bind(j.event,function(){return g()}),this.each(function(){var b=this,c=a(b);b.loaded=!1,(c.attr("src")===d||c.attr("src")===!1)&&c.is("img")&&c.attr("src",j.placeholder),c.one("appear",function(){if(!this.loaded){if(j.appear){var d=i.length;j.appear.call(b,d,j)}a("<img />").bind("load",function(){var d=c.attr("data-"+j.data_attribute);c.hide(),c.is("img")?c.attr("src",d):c.css("background-image","url('"+d+"')"),c[j.effect](j.effect_speed),b.loaded=!0;var e=a.grep(i,function(a){return!a.loaded});if(i=a(e),j.load){var f=i.length;j.load.call(b,f,j)}}).attr("src",c.attr("data-"+j.data_attribute))}}),0!==j.event.indexOf("scroll")&&c.bind(j.event,function(){b.loaded||c.trigger("appear")})}),e.bind("resize",function(){g()}),/(?:iphone|ipod|ipad).*os 5/gi.test(navigator.appVersion)&&e.bind("pageshow",function(b){b.originalEvent&&b.originalEvent.persisted&&i.each(function(){a(this).trigger("appear")})}),a(c).ready(function(){g()}),this},a.belowthefold=function(c,f){var g;return g=f.container===d||f.container===b?(b.innerHeight?b.innerHeight:e.height())+e.scrollTop():a(f.container).offset().top+a(f.container).height(),g<=a(c).offset().top-f.threshold},a.rightoffold=function(c,f){var g;return g=f.container===d||f.container===b?e.width()+e.scrollLeft():a(f.container).offset().left+a(f.container).width(),g<=a(c).offset().left-f.threshold},a.abovethetop=function(c,f){var g;return g=f.container===d||f.container===b?e.scrollTop():a(f.container).offset().top,g>=a(c).offset().top+f.threshold+a(c).height()},a.leftofbegin=function(c,f){var g;return g=f.container===d||f.container===b?e.scrollLeft():a(f.container).offset().left,g>=a(c).offset().left+f.threshold+a(c).width()},a.inviewport=function(b,c){return!(a.rightoffold(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.abovethetop(b,c))},a.extend(a.expr[":"],{"below-the-fold":function(b){return a.belowthefold(b,{threshold:0})},"above-the-top":function(b){return!a.belowthefold(b,{threshold:0})},"right-of-screen":function(b){return a.rightoffold(b,{threshold:0})},"left-of-screen":function(b){return!a.rightoffold(b,{threshold:0})},"in-viewport":function(b){return a.inviewport(b,{threshold:0})},"above-the-fold":function(b){return!a.belowthefold(b,{threshold:0})},"right-of-fold":function(b){return a.rightoffold(b,{threshold:0})},"left-of-fold":function(b){return!a.rightoffold(b,{threshold:0})}})}(jQuery,window,document);

prosopopee/themes/exposure/templates/gallery-index.html

@@ -34,6 +34,7 @@
         <script type="text/javascript" src="../static/js/jquery-2.1.4.min.js" charset="utf-8"></script>
         <script type="text/javascript" src="../static/js/baguetteBox.min.js" charset="utf-8"></script>
         <script type="text/javascript" src="../static/js/jquery.panorama_viewer.min.js" charset="utf-8"></script>
+        <script type="text/javascript" src="../static/js/jquery.lazyload.min.js" charset="utf-8"></script>
         <script type="text/javascript" charset="utf-8">
 $(function() {
     baguetteBox.run(".baguette", {});
@@ -45,6 +46,31 @@ $(function() {
         overlay: true
     });
 });
+
+var video = $("#video");
+video.on('click', function(e){
+    var vid = video[0];
+    vid.play();
+    if (vid.requestFullscreen) {
+        vid.requestFullscreen();
+    } else if (vid.mozRequestFullScreen) {
+        vid.mozRequestFullScreen();
+    } else if (vid.webkitRequestFullscreen) {
+        vid.webkitRequestFullscreen();
+    }
+});
+
+$(function() {
+    $("img.lazy").lazyload({
+        effect : "fadeIn"
+    });
+    $("video.lazy").lazyload({
+        effect : "fadeIn"
+    });
+    $("section.lazy").lazyload({
+        effect : "fadeIn"
+    });
+});
         </script>
 
         {% include "footer.html" %}

prosopopee/themes/exposure/templates/sections/pictures-group.html

@@ -1,22 +1,34 @@
 {% if section.background %}
-<div style="padding: 1px 0px;background: {{ section.background }};">
+<div class="bg-section" style="background: {{ section.background }};">
-{% endif %}
+    {% endif %}
-<section class="pictures-group baguette">
+    <section class="pictures-group baguette">
         {% for line in section.images %}
         <div class="pictures-line">
             {% for image in line %}
+            {% if image.type == "video" %}
+            {% set video = Video(image) %}
+            {{ video.copy() }}
+            {% else %}
             {% set caption = image.text %}
             {% set image = Image(image) %}
             {{ image.copy() }}
+            {% endif %}
             <div class="picture caption">
+                {% if video %}
+                <img class="lazy" src="{{ video.generate_thumbnail("600") }}">
+                <video class="lazy" id="video" poster="{{ video.generate_thumbnail("600") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted>
+                    <source src="{{ video }}" type="video/webm" data-source="{{ video }}" data-format="vp8" data-extension="webm">
+                </video>
+                {% else %}
                 <a href="{{ image }}" {% if caption %}data-caption="{{ caption }}"{% endif %}>
-                    <img src="{{ image.generate_thumbnail("x600") }}">
+                    <img class="lazy" data-original="{{ image.generate_thumbnail("x600") }}">
                     {% if caption %}
                     <div class="caption__overlay">
                         <h5 class="caption__overlay__title">{{ caption }}</h5>
                     </div>
                     {% endif %}
                 </a>
+                {% endif %}
             </div>
             {% if not loop.last %}
             <div class="separator"></div>
@@ -24,7 +36,7 @@
             {% endfor %}
         </div>
         {% endfor %}
-</section>
+    </section>
-{% if section.background %}
+    {% if section.background %}
 </div>
 {% endif %}

prosopopee/themes/material/static/css/styles.css

@@ -126,3 +126,20 @@ main {
     width: 100%;
     height: 100%;
 }
+
+.picture video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    width: 100%;
+    height: auto;
+}
+
+div#bg-section {
+    padding: 1px 0px;
+}
+
+.pictures-group .row {
+    margin-top: 20px
+}

prosopopee/themes/material/static/js/jquery.lazyload.min.js

@@ -0,0 +1,2 @@
+/*! Lazy Load 1.9.7 - MIT license - Copyright 2010-2015 Mika Tuupola */
+!function(a,b,c,d){var e=a(b);a.fn.lazyload=function(f){function g(){var b=0;i.each(function(){var c=a(this);if(!j.skip_invisible||c.is(":visible"))if(a.abovethetop(this,j)||a.leftofbegin(this,j));else if(a.belowthefold(this,j)||a.rightoffold(this,j)){if(++b>j.failure_limit)return!1}else c.trigger("appear"),b=0})}var h,i=this,j={threshold:0,failure_limit:0,event:"scroll",effect:"show",container:b,data_attribute:"original",skip_invisible:!1,appear:null,load:null,placeholder:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC"};return f&&(d!==f.failurelimit&&(f.failure_limit=f.failurelimit,delete f.failurelimit),d!==f.effectspeed&&(f.effect_speed=f.effectspeed,delete f.effectspeed),a.extend(j,f)),h=j.container===d||j.container===b?e:a(j.container),0===j.event.indexOf("scroll")&&h.bind(j.event,function(){return g()}),this.each(function(){var b=this,c=a(b);b.loaded=!1,(c.attr("src")===d||c.attr("src")===!1)&&c.is("img")&&c.attr("src",j.placeholder),c.one("appear",function(){if(!this.loaded){if(j.appear){var d=i.length;j.appear.call(b,d,j)}a("<img />").bind("load",function(){var d=c.attr("data-"+j.data_attribute);c.hide(),c.is("img")?c.attr("src",d):c.css("background-image","url('"+d+"')"),c[j.effect](j.effect_speed),b.loaded=!0;var e=a.grep(i,function(a){return!a.loaded});if(i=a(e),j.load){var f=i.length;j.load.call(b,f,j)}}).attr("src",c.attr("data-"+j.data_attribute))}}),0!==j.event.indexOf("scroll")&&c.bind(j.event,function(){b.loaded||c.trigger("appear")})}),e.bind("resize",function(){g()}),/(?:iphone|ipod|ipad).*os 5/gi.test(navigator.appVersion)&&e.bind("pageshow",function(b){b.originalEvent&&b.originalEvent.persisted&&i.each(function(){a(this).trigger("appear")})}),a(c).ready(function(){g()}),this},a.belowthefold=function(c,f){var g;return g=f.container===d||f.container===b?(b.innerHeight?b.innerHeight:e.height())+e.scrollTop():a(f.container).offset().top+a(f.container).height(),g<=a(c).offset().top-f.threshold},a.rightoffold=function(c,f){var g;return g=f.container===d||f.container===b?e.width()+e.scrollLeft():a(f.container).offset().left+a(f.container).width(),g<=a(c).offset().left-f.threshold},a.abovethetop=function(c,f){var g;return g=f.container===d||f.container===b?e.scrollTop():a(f.container).offset().top,g>=a(c).offset().top+f.threshold+a(c).height()},a.leftofbegin=function(c,f){var g;return g=f.container===d||f.container===b?e.scrollLeft():a(f.container).offset().left,g>=a(c).offset().left+f.threshold+a(c).width()},a.inviewport=function(b,c){return!(a.rightoffold(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.abovethetop(b,c))},a.extend(a.expr[":"],{"below-the-fold":function(b){return a.belowthefold(b,{threshold:0})},"above-the-top":function(b){return!a.belowthefold(b,{threshold:0})},"right-of-screen":function(b){return a.rightoffold(b,{threshold:0})},"left-of-screen":function(b){return!a.rightoffold(b,{threshold:0})},"in-viewport":function(b){return a.inviewport(b,{threshold:0})},"above-the-fold":function(b){return!a.belowthefold(b,{threshold:0})},"right-of-fold":function(b){return a.rightoffold(b,{threshold:0})},"left-of-fold":function(b){return!a.rightoffold(b,{threshold:0})}})}(jQuery,window,document);

prosopopee/themes/material/templates/gallery-index.html

@@ -38,12 +38,35 @@
         <script type="text/javascript" src="../static/js/materialize.min.js" charset="utf-8"></script>
         <script type="text/javascript" src="../static/js/baguetteBox.min.js" charset="utf-8"></script>
         <script type="text/javascript" src="../static/js/jquery.panorama_viewer.min.js" charset="utf-8"></script>
+        <script type="text/javascript" src="../static/js/jquery.lazyload.min.js" charset="utf-8"></script>
         <script type="text/javascript" charset="utf-8">
-        $(document).ready(function(){
+$(document).ready(function(){
     $('.parallax').parallax();
-        });    
+});    
 
-        $(function() {
+var video = $("#video");
+video.on('click', function(e){
+    var vid = video[0];
+    vid.play();
+    if (vid.requestFullscreen) {
+        vid.requestFullscreen();
+    } else if (vid.mozRequestFullScreen) {
+        vid.mozRequestFullScreen();
+    } else if (vid.webkitRequestFullscreen) {
+        vid.webkitRequestFullscreen();
+    }
+});
+
+$(function() {
+    $("img.lazy").lazyload({
+        effect : "fadeIn"
+    });
+    $("video.lazy").lazyload({
+        effect : "fadeIn"
+    });
+});
+
+$(function() {
     baguetteBox.run(".baguette", {});
     $(".panorama").panorama_viewer({
         repeat: true,
@@ -52,9 +75,9 @@
         easing: "linear",
         overlay: true
     });
-        });
+});
 
-        $(".button-collapse").sideNav();
+$(".button-collapse").sideNav();
         </script>
         </main>
         {% include 'footer.html'%}

prosopopee/themes/material/templates/sections/pictures-group.html

@@ -1,19 +1,32 @@
 {% if section.background %}
-<div style="padding: 1px 0px;background: {{ section.background }};">
+<div id="bg-section" style="background: {{ section.background }};">
-{% endif %}
+    {% endif %}
-<div class="pictures-group baguette">
+    <div class="pictures-group baguette">
         <div class="row">
             {% for line in section.images %}
             <div class="pictures-line">
                 {% for image in line %}
+                {% if image.type == "video" %}
+                {% set video = Video(image) %}
+                {{ video.copy() }}
+                {% else %}
                 {% set caption = image.text %}
                 {% set image = Image(image) %}
                 {{ image.copy() }}
+                {% endif %}
                 <div class="col">
                     <div class="card">
+                        {% if video %}
+                        <div class="picture card-image">
+                            <img class="lazy" src="{{ video.generate_thumbnail("600") }}">
+                            <video class="lazy" id="video" poster="{{ video.generate_thumbnail("600") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted>
+                                <source src="{{ video }}" type="video/webm" data-source="{{ video }}" data-format="vp8" data-extension="webm">
+                            </video>
+                        </div>
+                        {% else %}
                         <div class="picture card-image caption">
                             <a href="{{ image }}" {% if caption %}data-caption="{{ caption }}"{% endif %}>
-                            <img src="{{ image.generate_thumbnail("x600") }}">
+                                <img class="lazy" data-original="{{ image.generate_thumbnail("x600") }}">
                                 {% if caption %}
                                 <div class="caption__overlay center">
                                     <h5 class="caption__overlay__title">{{ caption }}</h5>
@@ -21,13 +34,14 @@
                                 {% endif %}
                             </a>
                         </div>
+                        {% endif %}
                     </div>
                 </div>
                 {% endfor %}
             </div>
             {% endfor %}
         </div>
-</div>
+    </div>
-{% if section.background %}
+    {% if section.background %}
 </div>
 {% endif %}