diff options
Diffstat (limited to 'pointless/viewer')
-rw-r--r-- | pointless/viewer/screen.js | 9 | ||||
-rw-r--r-- | pointless/viewer/stage.js | 4 | ||||
-rw-r--r-- | pointless/viewer/timer.js | 37 | ||||
-rw-r--r-- | pointless/viewer/viewer.css | 16 |
4 files changed, 63 insertions, 3 deletions
diff --git a/pointless/viewer/screen.js b/pointless/viewer/screen.js index 0c1c3ad..28f4f55 100644 --- a/pointless/viewer/screen.js +++ b/pointless/viewer/screen.js | |||
@@ -8,7 +8,7 @@ | |||
8 | "use strict"; | 8 | "use strict"; |
9 | 9 | ||
10 | class Screen { | 10 | class Screen { |
11 | constructor(window, secondary=false) { | 11 | constructor(window, secondary=false, withTimer=false) { |
12 | this.window = window; | 12 | this.window = window; |
13 | this.secondary = secondary; | 13 | this.secondary = secondary; |
14 | this.canvas = window.document.getElementById("screen"); | 14 | this.canvas = window.document.getElementById("screen"); |
@@ -19,11 +19,18 @@ class Screen { | |||
19 | this.window.addEventListener("resize", function() { | 19 | this.window.addEventListener("resize", function() { |
20 | self._refreshPage(); | 20 | self._refreshPage(); |
21 | }); | 21 | }); |
22 | |||
23 | this.timer = withTimer ? new Timer(window) : null; | ||
24 | this.pageTurnCount = 0; | ||
22 | } | 25 | } |
23 | 26 | ||
24 | setPage(page) { | 27 | setPage(page) { |
28 | if (this.pageTurnCount === 1 && this.timer != null) | ||
29 | this.timer.start(); | ||
30 | |||
25 | this.page = page; | 31 | this.page = page; |
26 | this._refreshPage(); | 32 | this._refreshPage(); |
33 | this.pageTurnCount++; | ||
27 | } | 34 | } |
28 | 35 | ||
29 | _resizeScreen(ratio) { | 36 | _resizeScreen(ratio) { |
diff --git a/pointless/viewer/stage.js b/pointless/viewer/stage.js index 8c36981..68fdb45 100644 --- a/pointless/viewer/stage.js +++ b/pointless/viewer/stage.js | |||
@@ -17,8 +17,8 @@ class Stage { | |||
17 | 17 | ||
18 | var self = this; | 18 | var self = this; |
19 | this.projector.addEventListener("load", function() { | 19 | this.projector.addEventListener("load", function() { |
20 | self.audienceScreen = new Screen(self.projector, false); | 20 | self.audienceScreen = new Screen(self.projector, false, false); |
21 | self.presenterScreen = new Screen(window, true); | 21 | self.presenterScreen = new Screen(window, true, true); |
22 | onReady(); | 22 | onReady(); |
23 | }); | 23 | }); |
24 | 24 | ||
diff --git a/pointless/viewer/timer.js b/pointless/viewer/timer.js new file mode 100644 index 0000000..4f19986 --- /dev/null +++ b/pointless/viewer/timer.js | |||
@@ -0,0 +1,37 @@ | |||
1 | /* | ||
2 | * timer.js | ||
3 | * Part of Pointless Viewer, a Beamer presentation viewer | ||
4 | * Copyright 2018 Pacien TRAN-GIRARD | ||
5 | * License: GNU GPL v3 | ||
6 | */ | ||
7 | |||
8 | "use strict"; | ||
9 | |||
10 | class Timer { | ||
11 | constructor(window) { | ||
12 | this.display = window.document.getElementById("timer"); | ||
13 | this.startTime = null; | ||
14 | this._setDisplay(0); | ||
15 | } | ||
16 | |||
17 | start() { | ||
18 | if (this.startTime != null) return; | ||
19 | this.startTime = Date.now(); | ||
20 | |||
21 | var self = this; | ||
22 | setInterval(function() { | ||
23 | self._runTimer(); | ||
24 | }, 1000); | ||
25 | } | ||
26 | |||
27 | _runTimer() { | ||
28 | var timeDelta = Math.floor((Date.now() - this.startTime) / 1000); | ||
29 | this._setDisplay(timeDelta); | ||
30 | } | ||
31 | |||
32 | _setDisplay(seconds) { | ||
33 | var dateObj = new Date(null); | ||
34 | dateObj.setSeconds(seconds); | ||
35 | this.display.textContent = dateObj.toISOString().substr(11, 8); | ||
36 | } | ||
37 | } | ||
diff --git a/pointless/viewer/viewer.css b/pointless/viewer/viewer.css index dee9802..14db376 100644 --- a/pointless/viewer/viewer.css +++ b/pointless/viewer/viewer.css | |||
@@ -17,3 +17,19 @@ body { | |||
17 | left: 50%; | 17 | left: 50%; |
18 | transform: translateX(-50%) translateY(-50%); | 18 | transform: translateX(-50%) translateY(-50%); |
19 | } | 19 | } |
20 | |||
21 | .notification { | ||
22 | position: absolute; | ||
23 | bottom: 0; | ||
24 | left: 50%; | ||
25 | transform: translateX(-50%); | ||
26 | padding: 0.5rem 1rem; | ||
27 | border-radius: 1rem 1rem 0 0; | ||
28 | background-color: black; | ||
29 | font-family: sans-serif; | ||
30 | font-size: 1.6rem; | ||
31 | } | ||
32 | |||
33 | .notification:empty { | ||
34 | display: none; | ||
35 | } | ||