You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
138 lines
4.0 KiB
138 lines
4.0 KiB
// Entry component with image and sound
|
|
enyo.kind({
|
|
name: "VideoViewer.Item",
|
|
kind: enyo.Control,
|
|
published: {
|
|
code: "",
|
|
title: "",
|
|
category: "",
|
|
isFavorite: false,
|
|
image: "",
|
|
tojournal: false
|
|
},
|
|
events: {
|
|
onVideoPlayed: ""
|
|
},
|
|
classes: "item",
|
|
components: [
|
|
{ name: "spinner", kind: "Image", src: "images/spinner-dark.gif", classes: "spinner" },
|
|
{ name: "background", classes: "itemImage", kind: "Image", src: "images/notloaded.png" },
|
|
{ name: "itemImage", classes: "itemImage", kind: "Image", showing: false, onload: "imageLoaded", onerror: "defaultImage", ontap: "showVideo" },
|
|
{ name: "itemPlay", classes: "itemPlay", kind: "Image", showing: false, src: "icons/play.svg", ontap: "showVideo" },
|
|
{ name: "itemFavorite", classes: "itemFavorite", kind: "Image", src: "icons/notfavorite.svg", showing: false, ontap: "showVideo" },
|
|
{ name: "itemOverlay", classes: "itemOverlay" },
|
|
{ name: "itemTitle", classes: "itemTitle", content: "" }
|
|
],
|
|
|
|
// Constructor
|
|
create: function() {
|
|
this.inherited(arguments);
|
|
this.nameChanged();
|
|
this.titleChanged();
|
|
this.isFavoriteChanged();
|
|
this.tojournalChanged();
|
|
},
|
|
|
|
// Item setup
|
|
nameChanged: function() {
|
|
var image = this.image ? this.image : "";
|
|
var imgurl = this.replaceValues(Util.getImages());
|
|
if (typeof chrome != 'undefined' && chrome.app && chrome.app.runtime) {
|
|
// HACK: When in Chrome App image should be load using a XmlHttpRequest
|
|
var xhr = new XMLHttpRequest();
|
|
var that = this;
|
|
xhr.open('GET', imgurl, true);
|
|
xhr.responseType = 'blob';
|
|
xhr.onload = function(e) {
|
|
that.$.itemImage.setAttribute("src", window.URL.createObjectURL(this.response));
|
|
};
|
|
xhr.send();
|
|
} else {
|
|
this.$.itemImage.setAttribute("src", imgurl);
|
|
}
|
|
},
|
|
|
|
titleChanged: function() {
|
|
this.$.itemTitle.setContent(this.title);
|
|
},
|
|
|
|
isFavoriteChanged: function() {
|
|
this.$.itemFavorite.setShowing(this.isFavorite);
|
|
},
|
|
|
|
imageLoaded: function() {
|
|
this.$.itemImage.setShowing(true);
|
|
this.$.itemPlay.setShowing(true);
|
|
this.$.spinner.setShowing(false);
|
|
this.$.background.setShowing(false);
|
|
},
|
|
|
|
tojournalChanged: function() {
|
|
if (this.tojournal) {
|
|
this.$.itemPlay.setSrc("icons/tojournal.svg");
|
|
} else {
|
|
this.$.itemPlay.setSrc("images/play.svg");
|
|
}
|
|
this.$.itemPlay.render();
|
|
},
|
|
|
|
defaultImage: function() {
|
|
this.$.itemImage.setAttribute("src", "images/notloaded.png");
|
|
this.$.itemImage.setShowing(true);
|
|
this.$.itemPlay.setShowing(true);
|
|
this.$.spinner.setShowing(false);
|
|
this.$.background.setShowing(false);
|
|
},
|
|
|
|
replaceValues: function(template) {
|
|
// Remplace values in the template
|
|
var output = template;
|
|
output = output.replace(new RegExp("%id%", "g"),this.code);
|
|
output = output.replace(new RegExp("%image%", "g"), this.image);
|
|
output = output.replace(new RegExp("%category%", "g"), this.category);
|
|
output = output.replace(new RegExp("%title%", "g"), this.title);
|
|
return output;
|
|
},
|
|
|
|
videoURL: function() {
|
|
return this.replaceValues(Util.getVideos())+"."+constant.videoType;
|
|
},
|
|
|
|
exportToVideo: function() {
|
|
// Load file
|
|
var url =this.videoURL();
|
|
var mimetype = (constant.videoType=="mp4"?"video/mp4":"video/webm");
|
|
var request = new XMLHttpRequest();
|
|
request.open("GET",url,true);
|
|
request.setRequestHeader("Content-type",mimetype);
|
|
request.responseType = "arraybuffer";
|
|
var that = this;
|
|
request.onload = function() {
|
|
if (request.status == 200 || request.status == 0) {
|
|
var blob = new Uint8Array(this.response);
|
|
var base64 = "data:"+mimetype+";base64,"+Util.toBase64(blob);
|
|
var metadata = {
|
|
mimetype: mimetype,
|
|
title: that.title+"."+constant.videoType,
|
|
activity: "org.olpcfrance.MediaViewerActivity",
|
|
timestamp: new Date().getTime(),
|
|
creation_time: new Date().getTime(),
|
|
file_size: 0
|
|
};
|
|
app.datastore.create(metadata, function() {
|
|
console.log("video '"+that.title+"' saved in journal.");
|
|
}, base64);
|
|
}
|
|
};
|
|
request.send();
|
|
},
|
|
|
|
// Handle event
|
|
showVideo: function() {
|
|
if (this.tojournal) {
|
|
this.exportToVideo();
|
|
}
|
|
this.doVideoPlayed();
|
|
|
|
}
|
|
});
|