Repository: openmeetings Updated Branches: refs/heads/master 9634f6ad2 -> f8bbde4a2
[OPENMEETINGS-401, OPENMEETINGS-828] pause and seek are added with room sync Project: http://git-wip-us.apache.org/repos/asf/openmeetings/repo Commit: http://git-wip-us.apache.org/repos/asf/openmeetings/commit/f8bbde4a Tree: http://git-wip-us.apache.org/repos/asf/openmeetings/tree/f8bbde4a Diff: http://git-wip-us.apache.org/repos/asf/openmeetings/diff/f8bbde4a Branch: refs/heads/master Commit: f8bbde4a205428bb5140abe20e3b1d47b5baa91b Parents: 9634f6a Author: Maxim Solodovnik <[email protected]> Authored: Mon Sep 11 00:15:41 2017 +0700 Committer: Maxim Solodovnik <[email protected]> Committed: Mon Sep 11 00:15:41 2017 +0700 ---------------------------------------------------------------------- .../openmeetings/db/dto/room/Whiteboard.java | 3 +- .../openmeetings/web/room/wb/WbAction.java | 1 + .../openmeetings/web/room/wb/WbPanel.java | 30 +++- .../org/apache/openmeetings/web/room/wb/wb.js | 138 +++++++++++-------- 4 files changed, 113 insertions(+), 59 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/openmeetings/blob/f8bbde4a/openmeetings-db/src/main/java/org/apache/openmeetings/db/dto/room/Whiteboard.java ---------------------------------------------------------------------- diff --git a/openmeetings-db/src/main/java/org/apache/openmeetings/db/dto/room/Whiteboard.java b/openmeetings-db/src/main/java/org/apache/openmeetings/db/dto/room/Whiteboard.java index 3e4172c..cda1013 100644 --- a/openmeetings-db/src/main/java/org/apache/openmeetings/db/dto/room/Whiteboard.java +++ b/openmeetings-db/src/main/java/org/apache/openmeetings/db/dto/room/Whiteboard.java @@ -97,8 +97,9 @@ public class Whiteboard implements Serializable { height = DEFAULT_HEIGHT; } - public void put(String uid, JSONObject obj) { + public Whiteboard put(String uid, JSONObject obj) { roomItems.put(uid, obj.toString(new NullStringer())); + return this; } public JSONObject get(String uid) { http://git-wip-us.apache.org/repos/asf/openmeetings/blob/f8bbde4a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbAction.java ---------------------------------------------------------------------- diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbAction.java b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbAction.java index 09e238c..7fded48 100644 --- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbAction.java +++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbAction.java @@ -35,4 +35,5 @@ public enum WbAction { , downloadPdf , startRecording , stopRecording + , videoStatus } http://git-wip-us.apache.org/repos/asf/openmeetings/blob/f8bbde4a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbPanel.java ---------------------------------------------------------------------- diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbPanel.java b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbPanel.java index a2e4a4d..b73c10c 100644 --- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbPanel.java +++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbPanel.java @@ -299,8 +299,11 @@ public class WbPanel extends AbstractWbPanel { for (int i = 0; i < arr.length(); ++i) { JSONObject _o = arr.getJSONObject(i); String uid = _o.getString("uid"); - undo.put(wb.get(uid)); - wb.put(uid, _o); + JSONObject po = wb.get(uid); + if (po != null) { + undo.put(po); + wb.put(uid, _o); + } } if (arr.length() != 0) { WhiteboardCache.update(roomId, wb); @@ -384,6 +387,20 @@ public class WbPanel extends AbstractWbPanel { } } break; + case videoStatus: + { + Whiteboard wb = WhiteboardCache.get(roomId).get(obj.getLong("wbId")); + String uid = obj.getString("uid"); + JSONObject po = wb.get(uid); + if (po != null && "video".equals(po.getString("type"))) { + JSONObject ns = obj.getJSONObject("status"); + po.put("status", ns.put("updated", System.currentTimeMillis())); + WhiteboardCache.update(roomId, wb.put(uid, po)); + obj.put("slide", po.getInt("slide")); + sendWbAll(WbAction.videoStatus, obj); + } + } + break; default: break; } @@ -508,7 +525,7 @@ public class WbPanel extends AbstractWbPanel { .put("fileId", fi.getId()) .put("fileType", fi.getType().name()) .put("count", fi.getCount()) - .put("type", FileItem.Type.Video == fi.getType() || FileItem.Type.Recording == fi.getType() ? "video" : "image") + .put("type", "image") .put("left", UPLOAD_WB_LEFT) .put("top", UPLOAD_WB_TOP) .put("width", fi.getWidth() == null ? DEFAULT_WIDTH : fi.getWidth()) @@ -516,6 +533,13 @@ public class WbPanel extends AbstractWbPanel { .put("uid", wuid) .put("slide", wb.getSlide()) ; + if (FileItem.Type.Video == fi.getType() || FileItem.Type.Recording == fi.getType()) { + file.put("type", "video"); + file.put("status", new JSONObject() + .put("paused", true) + .put("pos", 0.0) + .put("updated", System.currentTimeMillis())); + } final String ruid = wbs.getUid(); if (clean) { clearAll(roomId, wb.getId()); http://git-wip-us.apache.org/repos/asf/openmeetings/blob/f8bbde4a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/wb.js ---------------------------------------------------------------------- diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/wb.js b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/wb.js index 4edf5c1..e52dbc7 100644 --- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/wb.js +++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/wb.js @@ -45,9 +45,21 @@ var UUID = (function() { })(); var Player = (function() { let player = {}, mainColor = '#ff6600', rad = 20; - function filter(_o, props) { + function _filter(_o, props) { return props.reduce((result, key) => { result[key] = _o[key]; return result; }, {}); } + function _sendStatus(g, _paused, _pos) { + g.status.paused = _paused; + g.status.pos = _pos; + wbAction('videoStatus', JSON.stringify({ + wbId: g.canvas.wbId + , uid: g.uid + , status: { + paused: _paused + , pos: _pos + } + })); + } player.create = function(canvas, _o, _role) { let vid = $('<video>').hide().attr('class', 'wb-video slide-' + canvas.slide).attr('id', 'wb-video-' + _o.uid) @@ -59,11 +71,11 @@ var Player = (function() { video.visible = false; poster.width = _o.width; poster.height = _o.height; - let paused = true, playable = false; + let playable = false; let trg = new fabric.Triangle({ left: 2.7 * rad , top: _o.height - 2.5 * rad - , visible: paused + , visible: _o.status.paused , angle: 90 , width: rad , height: rad @@ -73,7 +85,7 @@ var Player = (function() { let rectPause1 = new fabric.Rect({ left: 1.6 * rad , top: _o.height - 2.5 * rad - , visible: !paused + , visible: !_o.status.paused , width: rad / 3 , height: rad , stroke: mainColor @@ -82,7 +94,7 @@ var Player = (function() { let rectPause2 = new fabric.Rect({ left: 2.1 * rad , top: _o.height - 2.5 * rad - , visible: !paused + , visible: !_o.status.paused , width: rad / 3 , height: rad , stroke: mainColor @@ -120,24 +132,6 @@ var Player = (function() { progress.set('width', (video.getElement().currentTime * cProgress.width) / video.getElement().duration); canvas.renderAll(); }; - let updateControls = function() { - video.visible = true; - poster.visible = false; - - trg.visible = paused; - rectPause1.visible = !paused; - rectPause2.visible = !paused; - canvas.renderAll(); - }; - cProgress.on({ - 'mousedown': function (evt) { - let _ptr = canvas.getPointer(evt.e) - , ptr = canvas._normalizePointer(group, _ptr) - , l = (group.width / 2 + ptr.x) * canvas.getZoom() - cProgress.aCoords.bl.x; - video.getElement().currentTime = l * video.getElement().duration / cProgress.width; - updateProgress(); - } - }); let progress = new fabric.Rect({ left: 3.5 * rad , top: _o.height - 1.5 * rad @@ -150,18 +144,44 @@ var Player = (function() { , ry: 5 }); let request; + + let opts = $.extend({ + subTargetCheck: true + , objectCaching: false + , omType: 'Video' + , selectable: canvas.selection + }, _filter(_o, ['fileId', 'fileType', 'slide', 'uid', '_poster', '_src', 'width', 'height', 'status'])); + let group = new fabric.Group([video, poster, play, progress, cProgress], opts); + + let updateControls = function() { + video.visible = true; + poster.visible = false; + + trg.visible = group.status.paused; + rectPause1.visible = !group.status.paused; + rectPause2.visible = !group.status.paused; + canvas.renderAll(); + }; let render = function () { if (isDone()) { - paused = true; + _sendStatus(group, true, video.getElement().duration); updateControls(); } updateProgress(); - if (paused) { + if (group.status.paused) { cancelAnimationFrame(request); } else { request = fabric.util.requestAnimFrame(render); } }; + cProgress.on({ + 'mousedown': function (evt) { + let _ptr = canvas.getPointer(evt.e) + , ptr = canvas._normalizePointer(group, _ptr) + , l = (group.width / 2 + ptr.x) * canvas.getZoom() - cProgress.aCoords.bl.x; + _sendStatus(group, group.status.paused, l * video.getElement().duration / cProgress.width) + } + }); play.on({ /* * https://github.com/kangax/fabric.js/issues/4115 @@ -190,28 +210,13 @@ var Player = (function() { left: pos.left , top: pos.top }); - if (paused) { - if (isDone()) { - video.getElement().currentTime = 0; - } - video.getElement().play(); - fabric.util.requestAnimFrame(render); - } else { - video.getElement().pause(); + if (!group.status.paused && isDone()) { + video.getElement().currentTime = 0; } - paused = !paused; + _sendStatus(group, !group.status.paused, video.getElement().currentTime) updateControls(); } }); - - let opts = $.extend({ - subTargetCheck: true - , objectCaching: false - , omType: 'Video' - , selectable: canvas.selection - }, filter(_o, ['fileId', 'fileType', 'slide', 'uid', '_poster', '_src', 'width', 'height'])); - let group = new fabric.Group([video, poster, play, progress, cProgress], opts); - group.on({ 'mouseover': function() { play.visible = playable; @@ -229,6 +234,18 @@ var Player = (function() { group.setPlayable = function(_r) { playable = _r !== NONE; }; + group.videoStatus = function(_status) { + group.status = _status; + updateControls(); + video.getElement().currentTime = group.status.pos; + updateProgress(); + if (group.status.paused) { + video.getElement().pause(); + } else { + video.getElement().play(); + fabric.util.requestAnimFrame(render); + } + } group.setPlayable(_role); canvas.add(group); canvas.renderAll(); @@ -245,7 +262,7 @@ var Player = (function() { , scaleX: 1 , scaleY: 1 , top: 10 - }, filter(_o, ['angle', 'left', 'scaleX', 'scaleY', 'top'])); + }, _filter(_o, ['angle', 'left', 'scaleX', 'scaleY', 'top'])); g.set(opts); g.canvas.renderAll(); }; @@ -1274,6 +1291,12 @@ var Wb = function() { __setSize(canvas); }); } + function _videoStatus(json) { + let g = _findObject(json); + if (!!g) { + g.videoStatus(json.status); + } + } wb.setRole = function(_role) { if (role != _role) { var btn = getBtn(); @@ -1439,6 +1462,7 @@ var Wb = function() { func(canvases[i]); } } + wb.videoStatus = _videoStatus; return wb; }; var WbArea = (function() { @@ -1521,6 +1545,20 @@ var WbArea = (function() { wbAction('removeWb', JSON.stringify({wbId: li.data().wbId})); }); } + function _getImage(cnv, fmt) { + //TODO zoom ??? + return cnv.toDataURL({ + format: fmt + , width: cnv.width + , height: cnv.height + , multiplier: 1. / cnv.getZoom() + , left: 0 + , top: 0 + }); + } + function _videoStatus(json) { + self.getWb(json.wbId).videoStatus(json); + } self.getWbTabId = function(id) { return "wb-tab-" + id; }; @@ -1674,17 +1712,6 @@ var WbArea = (function() { if (!_inited) return; self.getWb(json.wbId).setSize(json); } - function _getImage(cnv, fmt) { - //TODO zoom ??? - return cnv.toDataURL({ - format: fmt - , width: cnv.width - , height: cnv.height - , multiplier: 1. / cnv.getZoom() - , left: 0 - , top: 0 - }); - } self.download = function(fmt) { var wb = getActive().data(); if ('pdf' === fmt) { @@ -1704,6 +1731,7 @@ var WbArea = (function() { a.dispatchEvent(new MouseEvent('click', {view: window, bubbles: false, cancelable: true})); } } + self.videoStatus = _videoStatus; return self; })(); $(function() {
