prenex/magcms
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

start video support

Browse Source
This commit is contained in:
Adrien Beudin 2016-04-29 12:40:34 +02:00
parent a0bbe975e5
commit fc82ddc1ab
9 changed files with 278 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
prosopopee/prosopopee.py
View File

@ -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"))

23
prosopopee/themes/exposure/static/css/style-page.css
View File

@ -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;
}

2
prosopopee/themes/exposure/static/js/jquery.lazyload.min.js vendored Normal file
View File

@ -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);

26
prosopopee/themes/exposure/templates/gallery-index.html
View File

@ -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" %}

24
prosopopee/themes/exposure/templates/sections/pictures-group.html
View File

@ -1,22 +1,34 @@
{% if section.background %}
<div style="padding: 1px 0px;background: {{ section.background }};">
{% endif %}
<section class="pictures-group baguette">
<div class="bg-section" style="background: {{ section.background }};">
{% endif %}
<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>
{% if section.background %}
</section>
{% if section.background %}
</div>
{% endif %}

17
prosopopee/themes/material/static/css/styles.css
View File

@ -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
}

2
prosopopee/themes/material/static/js/jquery.lazyload.min.js vendored Normal file
View File

@ -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);

33
prosopopee/themes/material/templates/gallery-index.html
View File

@ -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'%}

26
prosopopee/themes/material/templates/sections/pictures-group.html
View File

@ -1,19 +1,32 @@
{% if section.background %}
<div style="padding: 1px 0px;background: {{ section.background }};">
{% endif %}
<div class="pictures-group baguette">
<div id="bg-section" style="background: {{ section.background }};">
{% endif %}
<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>
{% if section.background %}
</div>
{% if section.background %}
</div>
{% endif %}