Commit 1c1080a4 authored by Michael Murtaugh's avatar Michael Murtaugh

merged src + webpack inits

parent f217ff9b
Pipeline #232 canceled with stages
package-lock.json
node_modules/
*.pyc
__pycache__/
......
dist/cceditorapp.js: src/*.js src/editor.css
node_modules/.bin/webpack --config editor.webpack.js
# dist/gltest.js: src/gltest.js
# node_modules/.bin/webpack --config webpack.test.js
dist/ccplayer.js: src/*.js
node_modules/.bin/webpack --config player.webpack.js
const path = require('path');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
entry: './src/cceditorapp.js',
mode: 'production', // 'development', production
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'cceditorapp.js',
library: 'cceditorapp'
},
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
}
]
}
// plugins: [
// new UglifyJSPlugin()
// ]
};
const path = require('path');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
entry: "./src/ccplayer.js",
mode: "development",
output: {
filename: "ccplayer.js",
path: path.resolve(__dirname, 'dist'),
library: "ccplayer"
}
// plugins: [
// new UglifyJSPlugin()
// ]
}
\ No newline at end of file
function get (url, callback) {
var request = new XMLHttpRequest();
request.open('GET', url, true);
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
callback(null, request.responseText);
} else {
callback("server error", null);
}
};
request.onerror = function() {
callback("connection error", null);
};
request.send();
}
module.exports.get = get;
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
var timecode = require("./timecode.js"),
$ = require("jquery");
function strip_fragment (url) {
var p = url.indexOf("#");
if (p >= 0) { return url.substring(0, p); }
return url;
}
function parse_fragment (url) {
// console.log("parse_fragment", url);
ret = {}
if (url.indexOf("#") >= 0) {
var p = url.split("#", 2);
ret.base = p[0];
ret.fragment = p[1];
} else {
ret.base = url;
ret.fragment = '';
}
return ret;
}
function parseTime (h) {
var m = h.match("t=([^&,]*)");
// console.log("parseTime", h, m);
if (m) { return timecode.timecode_to_seconds(m[1]); }
}
class CCFrame {
constructor (elt) {
// console.log("ccframe.init", elt);
this.elt = elt;
this.url = null;
this.video = null;
this.iframe = null;
this.interval = null;
this.pageNumber = null;
var that = this;
$(elt).bind("control", function (e, cmd) {
// console.log("ccframe got control", e, cmd);
if (cmd == "toggle") {
that.toggle();
} else if (cmd == "jumpback") {
that.jumpback();
} else if (cmd == "jumpforward") {
that.jumpforward();
}
});
// this.elt.addEventListener("load", this.load);
}
_clear () {
if (this.video !== null) {
this.video.pause();
this.elt.removeChild(this.video);
this.video = null;
}
if (this.iframe !== null) {
this.elt.removeChild(this.iframe);
this.iframe = null;
}
if (this.interval !== null) {
window.clearInterval(this.interval);
this.interval = null;
}
this.pageNumber = null;
this.elt.innerHTML = "";
}
set src (url) {
// console.log("ccframe.src", url);
var purl = parse_fragment(url),
previous_url = this.url ? parse_fragment(this.url) : null;
// console.log("purl", purl, "previous", previous_url)
var viewers = {
'video': {
pattern: /\.(mp4|webm|ogv|ogg|mp3)$/,
viewer: function (m) {
/* Check if match previous_url */
if (this.video && previous_url && previous_url.base == purl.base) {
var t = parseTime(purl.fragment);
if (t) {
this.video.currentTime = t;
this.video.play();
return;
} else {
console.log("ccframe, bad timecode?", purl.fragment);
}
}
this._clear();
this.video = document.createElement("video");
this.video.setAttribute("autoplay", "");
this.video.setAttribute("controls", "");
this.elt.appendChild(this.video);
// console.log("adding load listeneer")
// this.video.addEventListener("loaded", this._load.bind(this));
this.video.addEventListener("timeupdate", this._timeupdate.bind(this));
this.video.src = url;
}
},
'local_pdf': {
pattern: function (url) {
// console.log("local_pdf?", url);
if (url.match(/\.pdf$/i)) {
if (url.match(/^https?:/) == null) {
return true;
}
}
return false;
},
viewer: function (m) {
this._clear();
this.iframe = document.createElement("iframe");
this.elt.appendChild(this.iframe);
this.iframe.src = '/lib/generic/web/viewer.html?file='+url;
this.iframe.addEventListener("load", this._load.bind(this));
}
}
}
var default_viewer = function () {
if (previous_url && previous_url.base == purl.base) {
// fragment change only
// console.log("ccframe: update hash", purl.fragment);
this.iframe.contentWindow.location.hash = purl.fragment;
return;
}
this._clear();
this.iframe = document.createElement("iframe");
this.elt.appendChild(this.iframe);
this.iframe.src = url;
this.iframe.addEventListener("load", this._load.bind(this));
}
//this._clear();
this.url = url;
$(this.elt).trigger("srcchange", this.url);
// var urlnf = strip_fragment(url);
// console.log("cceditor", setsrc, url);
for (var type in viewers) {
var v = viewers[type],
m = (v.pattern instanceof RegExp) ? v.pattern.exec(purl.base) : v.pattern.call(this, purl.base);
if (m) {
v.viewer.call(this, m);
return this;
}
}
default_viewer.call(this);
return this;
}
get src () {
return this.url;
}
_load (e) {
// console.log("ccframe._load", this, e, this.url);
if (this.iframe.contentDocument) {
var video = this.iframe.contentDocument.querySelector("video");
if (video) {
// console.log("iframe has video", video);
}
var pageNumber = this.iframe.contentDocument.querySelector("input#pageNumber");
this.pageNumberInput = pageNumber;
this.pageNumber = pageNumber && pageNumber.value;
if (pageNumber) {
// console.log("iframe has pageNumber", pageNumber);
this.interval = function () {
if (this.pageNumberInput.value != this.pageNumber) {
this.pageNumber = this.pageNumberInput.value;
// console.log("page changed", this.pageNumber);
}
};
window.setInterval(this.interval.bind(this), 1000);
// The input/change eventListeners only seem to fire on user initiated changes (in Firefox at least)
// pageNumber.addEventListener("input", function () {
// console.log("page changed", pageNumber.value);
// }, false);
}
} else {
// console.log("unable to access iframe.contentDocument");
}
if (this.iframe.contentWindow) {
var that = this;
// console.log("watching iframe.contentWindow")
this.iframe.contentWindow.addEventListener("hashchange", function () {
// console.log("iframe hashchange", that.iframe.contentWindow.location.hash);
$(that.elt).trigger("hashchange", that.iframe.contentWindow.location.hash);
})
} else {
// console.log("unable to access iframe.contentWindow")
}
}
_timeupdate (e) {
if (this.video) {
var h = "#t="+timecode.seconds_to_timecode(this.video.currentTime);
$(this.elt).trigger("hashchange", h);
}
// console.log("timeupdate", this.video.currentTime);
}
// pause () {
// if (this.video !== null) {
// this.video.pause();
// }
// }
// play () {
// if (this.video !== null) {
// this.video.play();
// }
// }
/* Functions for Ctrl Keys */
toggle () {
if (this.video !== null) {
this.video.paused ? this.video.play() : this.video.pause();
}
}
jumpforward () {
if (this.video !== null) {
this.video.currentTime += 5;
}
}
jumpback () {
if (this.video !== null) {
this.video.currentTime -= 5;
}
}
get currentTime () {
if (this.video !== null) {
return this.video.currentTime;
}
}
set currentTime (t) {
if (this.video !== null) {
this.video.currentTime = t;
}
}
get fragment () {
if (this.pageNumber !== null) {
return "#page="+this.pageNumber;
} else if (this.video) {
return "#t="+timecode.seconds_to_timecode(this.video.currentTime);
} else {
return this.iframe.contentWindow.location.hash;
}
}
set fragment (val) {
}
}
module.exports = CCFrame;
var timecode = require("./timecode.js"),
EventEmitter = require("eventemitter3");
function parse_fragment (url) {
// console.log("parse_fragment", url);
ret = {}
if (url.indexOf("#") >= 0) {
var p = url.split("#", 2);
ret.base = p[0];
ret.fragment = p[1];
} else {
ret.base = url;
ret.fragment = '';
}
return ret;
}
function parseTime (h) {
var m = h.match("t=([^&,]*)");
// console.log("parseTime", h, m);
if (m) { return timecode.timecode_to_seconds(m[1]); }
}
class CCFrameSimple {
constructor (elt) {
// console.log("ccframe.init", elt);
this.elt = elt;
// console.log("CCFrameSimple", this.elt, this.elt.nodeName);
if (this.elt.nodeName == "VIDEO" || this.elt.nodeName == "IFRAME") {
var src = this.elt.getAttribute("src");
// console.log("ccframe inited with src", src);
if (src) {
var purl = parse_fragment(src);
this.url = src;
}
this.elt.addEventListener("load", this._load.bind(this));
if (this.elt.nodeName == "VIDEO") {
this.elt.addEventListener("timeupdate", this._timeupdate.bind(this));
}
if (this.elt.contentWindow) {
this.elt.contentWindow.addEventListener("hashchange", function () {
// console.log("iframe hashchange", that.iframe.contentWindow.location.hash);
// $(that.elt).trigger("hashchange", that.iframe.contentWindow.location.hash);
that.events.emit("hashchange", that.elt.contentWindow.location.hash);
// new: may 2018, update my own source to reflect changed hash!
that._update_hash(that.elt.contentWindow.location.hash);
})
}
} else {
console.log("WARNING, unsupported element type", this.elt.nodeName);
}
var that = this;
this.events = new EventEmitter();
// console.log("ccframesimple.events", this.events);
}
on (event, callback) {
this.events.on(event, callback);
return this;
}
set src (url) {
// console.log("ccframe.src", url);
var purl = parse_fragment(url),
previous_url = this.url ? parse_fragment(this.url) : null;
this.url = url;
if (!previous_url || previous_url.base != purl.base) {
this.events.emit("srcchange", purl.base);
}
if (this.elt.nodeName == "IFRAME") {
if (previous_url && previous_url.base == purl.base) {
// fragment change only
// console.log("ccframesimple.iframe fragment update", purl.fragment)
this.elt.contentWindow.location.hash = purl.fragment;
} else {
console.log("ccframesimple setting src", url);
this.elt.src = url;
}
} else {
if (previous_url && previous_url.base == purl.base) {
var t = parseTime(purl.fragment);
if (t !== undefined) {
// console.log("ccframesimple.media currentTime update", t)
this.elt.currentTime = t;
this.elt.play();
} else {
console.log("ccframe, bad timecode?", purl.fragment);
}
} else {
console.log("ccframesimple setting src", url);
this.elt.src = url;
this.elt.play();
}
}
return this;
}
get src () {
return this.url;
}
get base () {
return parse_fragment(this.url).base;
}
_load (e) {
// console.log("ccframe._load", this, e, this.url);
if (this.elt.contentDocument) {
var video = this.elt.contentDocument.querySelector("video");
if (video) {
// console.log("iframe has video", video);
}
// var pageNumber = this.elt.contentDocument.querySelector("input#pageNumber");
// this.pageNumberInput = pageNumber;
// this.pageNumber = pageNumber && pageNumber.value;
// if (pageNumber) {
// // console.log("iframe has pageNumber", pageNumber);
// this.interval = function () {
// if (this.pageNumberInput.value != this.pageNumber) {
// this.pageNumber = this.pageNumberInput.value;
// // console.log("page changed", this.pageNumber);
// }
// };
// window.setInterval(this.interval.bind(this), 1000);
// }
} else {
// console.log("unable to access iframe.contentDocument");
}
if (this.elt.contentWindow) {
var that = this;
// console.log("watching iframe.contentWindow")
this.elt.contentWindow.addEventListener("hashchange", function () {
// console.log("iframe hashchange", that.iframe.contentWindow.location.hash);
// $(that.elt).trigger("hashchange", that.iframe.contentWindow.location.hash);
that.events.emit("hashchange", that.elt.contentWindow.location.hash);
// new: may 2018, update my own source to reflect changed hash!
that._update_hash(that.elt.contentWindow.location.hash);
})
}
}
_update_hash (f) {
this.url = parse_fragment(this.url).base+f;
// console.log("updated hash", this.url);
}
_timeupdate (e) {
var h = "#t="+timecode.seconds_to_timecode(this.elt.currentTime);
this.events.emit("hashchange", h, this.elt.currentTime);
// new: may 2018, update my own source to reflect changed hash!
this._update_hash(h);
}
/* Functions for Ctrl Keys */
toggle () {
if (this.elt.play) {
this.video.paused ? this.video.play() : this.video.pause();
}
}
jumpforward () {
if (this.elt.play) {
this.video.currentTime += 5;
}
}
jumpback () {
if (this.elt.play) {
this.video.currentTime -= 5;
}
}
get currentTime () {
if (this.elt.play) {
return this.elt.currentTime;
}
}
set currentTime (t) {
if (this.elt.play) {
this.elt.currentTime = t;
}
}
get fragment () {
// if (this.pageNumber !== null) {
// return "#page="+this.pageNumber;
if (this.elt.currentTime) {
return "#t="+timecode.seconds_to_timecode(this.elt.currentTime);
} else {
return this.elt.contentWindow.location.hash;
}
}
set fragment (val) {
}
}
module.exports = CCFrameSimple;
var createIntervalTree = require("interval-tree-1d"),
srt = require("./sloppysrt.js"),
updateset = require('./updateset.js'),
parse_href = require("./href.js").parse_href,
CCFrameSimple = require("./ccframesimple.js"),
$ = require("jquery"),
smoothscroll = require('smoothscroll-polyfill');
// https://github.com/iamdustan/smoothscroll
// http://iamdustan.com/smoothscroll/
// console.log("smoothscroll", smoothscroll);
// console.log("updateset", updateset);
smoothscroll.polyfill();
function ccplayer (opts) {
var that = {},
tree_for_source = {},
frame_for_title = {},
titles_by_id = {},
ttid = 0,
byid = {},
active = updateset(),
active_tree,
titles_iframe,
ccvideo,
ttid = 0;
// console.log("CCPLAYER!");
// return the first enclosing div.title of a given elt
function enclosing_title (elt) {
if (elt.nodeName == "DIV" && elt.classList.contains("title")) {
return elt;
}
if (elt.parentNode) { return enclosing_title(elt.parentNode); }
}
function parse_leaflet_href (href) {
return /(.+?)\#(\d+)\/(\-?\d+(?:\.\d+)?)\/(\-?\d+(?:\.\d+)?)/.exec(href);
}
function preserve_zoom_level_link_filter (oldhref, newhref) {
// console.log("preserve_zoom_level_link_filter", oldhref, newhref);
var oldp = parse_leaflet_href(oldhref),
old_zoom_level = oldp ? oldp[2] : null,
old_href = oldp ? oldp[1] : null,
newp = parse_leaflet_href(newhref),
new_zoom_level = newp ? newp[2] : null,
new_href = newp ? newp[1] : null;
// NB: Considers zoom_level 6 + 7 "neutral" ... ie when the newhref's zoom level is 6
// hold whatever previous zoom level was present!
// console.log("old_zoom_level", old_zoom_level, new_zoom_level);
if (oldp && newp && old_href == new_href && new_zoom_level >= 6 && new_zoom_level <= 8) {
var ret = newp[1]+"#"+oldp[2]+"/"+newp[3]+"/"+newp[4];
// console.log("old zoom", oldp[2], "new zoom", newp[2]);
// console.log("transformed leaflet link to preserve zoom", newhref, ret);
return ret;
}
return newhref;
}
function strip_href (url) {
var p = url.indexOf("#");
if (p >= 0) {
return url.substr(0, p);
} else {
return url;
}
}
function activate_title (title, video_links) {
// simulate clicking on the links in a title
// if video_links isn't set, title=video links are skipped
// console.log("activate_title", title, video_links);
var links = title.querySelectorAll("a[title]");
for (var i=0, l=links.length; i<l; i++) {
var a = links[i],
a_title = a.getAttribute("title"),
href = a.getAttribute("href");
if (a_title != "video" || video_links) {
if (a_title == "scans") {
// old frame based
// href = preserve_zoom_level_link_filter(frame_for_title[a_title].src, href)
href = preserve_zoom_level_link_filter(window.location.href, href)
var justthehash = href.substr(href.indexOf("#"))
// console.log("window.location", newwindowhref );
// window.location.href = strip_href(window.location.href) + justthehash;
window.location.hash = justthehash;
// window.location.href = whref;
}
frame_for_title[a_title].src = href;
}
}
}
// process clicks on the titles
function capture_clicks (doc) {
doc.addEventListener("click", function (e) {
// console.log("click", e.target);
var title = enclosing_title (e.target);
// console.log("enclosing_title", title);
if (title) {
e.preventDefault();
activate_title(title, true);
// var links = title.querySelectorAll("a[title]");
// for (var i=0, l=links.length; i<l; i++) {
// var a = links[i],
// a_title = a.getAttribute("title"),
// href = a.getAttribute("href");
// frame_for_title[a_title].src = href;
// }
}
return;
// if (e.target.nodeName == "A") {
// var title = e.target.getAttribute("title"),
// href = e.target.getAttribute("href");
// frame_for_title[title].src = href;
// }
})
}
function init_titles () {
// console.log("init_titles");
var tt = titles_iframe.contentDocument.querySelectorAll(".title");
if (tt.length) {
capture_clicks(titles_iframe.contentDocument);
// srt.normalizeSRT(tt);
var hrefs = [];
for (var i=0, l=tt.length; i<l; i++) {
hrefs.push(parse_href(tt[i].getAttribute("data-href")));
}
for (var i=0, l=tt.length; i<l; i++) {
// console.log("href", hrefs[i]);
var href = hrefs[i],
src = href.base,
start = href.start ? href.start : 0,
end;
if (tree_for_source[href.base] === undefined) {
// console.log("init tree for src", href.base);
tree_for_source[href.base] = createIntervalTree();
}
if (href.end) {
end = href.end;
} else if ((i+1 < l) && (hrefs[i+1].base == href.base) && hrefs[i+1].start) {
end = Math.max(start, hrefs[i+1].start - 0.01);
} else {
end = start + 10;
}
var intv = [start, end];
intv.title = tt[i];
if (tt[i].id == undefined) {
tt[i].id = "_tid"+(++ttid); // apply unique id, required by updateset !!!
}
titles_by_id[tt[i].id] = tt[i];
//tt[i].style.display = "none";
// console.log("inserting", intv);
tree_for_source[href.base].insert(intv);
// var w = (tt[i].end != undefined) ? tt[i].end - tt[i].start : 10;
//
// byid[tt.id] = document.createElement("div");
// var intv = [tt[i].start, (tt[i].end != undefined) ? tt[i].end : tt[i].start + 10];
// intv.title = tt[i];
// tree.insert(intv);
}
}
// console.log("init_titles", ccvideo.base, active_tree);
if (ccvideo && ccvideo.base && !active_tree) {
active_tree = tree_for_source[ccvideo.base];
// console.log("init_titles: active_tree", active_tree);
}
}
function time_update (t) {
// console.log("time_update", t);
var items = [];
if (!active_tree) { console.log("ccplayer.time_update: no active_tree"); return; }
active_tree.queryPoint(t, function (x) {
items.push(x.title);