4 files changed, 88 insertions, 27 deletions

diff --git a/beamer/viewer/screen/timer.js b/beamer/viewer/screen/timer.js
index a04ea63..112a421 100644
--- a/beamer/viewer/screen/timer.js
+++ b/beamer/viewer/screen/timer.js
@@ -1,17 +1,17 @@
 /*
  * Beamer Viewer, a web-based PDF presentation viewer
- * Copyright (C) 2018 Pacien TRAN-GIRARD
- * 
+ * Copyright (C) 2021 Pacien TRAN-GIRARD
+ *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as
  * published by the Free Software Foundation, either version 3 of the
  * License, or (at your option) any later version.
- * 
+ *
  * This program is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  * GNU Affero General Public License for more details.
- * 
+ *
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
@@ -20,24 +20,59 @@
 
 class Timer {
   constructor(window) {
-    this.display = window.document.getElementById("timer");
-    this.startTime = null;
+    this.display = window.document.getElementById("timer-value");
+    this.carryoverMs = 0; // saved on pause
+    this.runningStartTs = null; // null if paused
+
+    window.document.getElementById("timer-pause").addEventListener("click", event => {
+      event.stopPropagation();
+      this._startStop();
+    });
+
+    window.document.getElementById("timer-reset").addEventListener("click", event => {
+      event.stopPropagation();
+      this._reset();
+    });
+
+    setInterval(() => this._refreshTimer(), 1000);
+
+    this._toggleDisplay(false);
     this._setDisplay(0);
+    window.document.getElementById("timer").classList.remove("hidden");
   }
 
   start() {
-    if (this.startTime != null) return;
-    this.startTime = Date.now();
+    if (this.runningStartTs != null) return;
+    this.runningStartTs = Date.now();
+    this._toggleDisplay(true);
+  }
+
+  _stop() {
+    if (this.runningStartTs == null) return;
+    this.carryoverMs += Date.now() - this.runningStartTs;
+    this.runningStartTs = null;
+    this._toggleDisplay(false);
+ }
 
-    const self = this;
-    setInterval(function() {
-      self._runTimer();
-    }, 1000);
+  _startStop() {
+    if (this.runningStartTs == null)
+      this.start();
+    else
+      this._stop();
+
+    this._refreshTimer();
+  }
+
+  _reset() {
+    this.carryoverMs = 0;
+    if (this.runningStartTs != null) this.runningStartTs = Date.now();
+    this._setDisplay(0);
   }
 
-  _runTimer() {
-    const timeDelta = Math.floor((Date.now() - this.startTime) / 1000);
-    this._setDisplay(timeDelta);
+  _refreshTimer() {
+    if (this.runningStartTs == null) return;
+    const timeDeltaMs = Date.now() - this.runningStartTs + this.carryoverMs;
+    this._setDisplay(Math.floor(timeDeltaMs / 1000));
   }
 
   _setDisplay(seconds) {
@@ -45,4 +80,11 @@ class Timer {
     dateObj.setSeconds(seconds);
     this.display.textContent = dateObj.toISOString().substr(11, 8);
   }
+
+  _toggleDisplay(active) {
+    if (active)
+      this.display.classList.remove("timer-paused");
+    else
+      this.display.classList.add("timer-paused");
+  }
 }
diff --git a/beamer/viewer/viewer.css b/beamer/viewer/viewer.css
index a69ddb2..419f977 100644
--- a/beamer/viewer/viewer.css
+++ b/beamer/viewer/viewer.css
@@ -1,17 +1,17 @@
 /*
  * Beamer Viewer, a web-based PDF presentation viewer
- * Copyright (C) 2018 Pacien TRAN-GIRARD
- * 
+ * Copyright (C) 2021 Pacien TRAN-GIRARD
+ *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as
  * published by the Free Software Foundation, either version 3 of the
  * License, or (at your option) any later version.
- * 
+ *
  * This program is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  * GNU Affero General Public License for more details.
- * 
+ *
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
@@ -106,10 +106,24 @@ header span {
   font-size: 1.6rem;
 }
 
-.notification:empty {
+.notification:empty, .hidden {
   display: none;
 }
 
+.timer-action {
+  cursor: pointer;
+}
+
+.timer-paused {
+  animation: blinking 1s step-start infinite;
+}
+
+@keyframes blinking {
+  50% {
+    opacity: 60%;
+  }
+}
+
 .warning {
   font-weight: bold;
   color: orangered;
diff --git a/index.html b/index.html
index e377e27..0f8dde1 100644
--- a/index.html
+++ b/index.html
@@ -2,18 +2,18 @@
 
 <!--
  * Beamer Viewer, a web-based PDF presentation viewer
- * Copyright (C) 2018 Pacien TRAN-GIRARD
- * 
+ * Copyright (C) 2021 Pacien TRAN-GIRARD
+ *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as
  * published by the Free Software Foundation, either version 3 of the
  * License, or (at your option) any later version.
- * 
+ *
  * This program is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  * GNU Affero General Public License for more details.
- * 
+ *
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 -->
@@ -70,7 +70,7 @@
 
       <div>
         <ul>
-          <li><a href="https://pacien.org">&copy; 2018 Pacien</a></li>
+          <li><a href="https://pacien.org">&copy; 2021 Pacien</a></li>
           <li><a href="https://github.com/pacien/beamer-viewer/issues">Bug tracker</a></li>
           <li><a href="https://cgit.pacien.net/public/apps/beamer-viewer/">Source repository</a></li>
           <li><a href="https://mozilla.github.io/pdf.js/">Powered by PDF.js</a></li>
@@ -79,7 +79,12 @@
       </div>
     </div>
 
-    <div id="timer" class="notification"></div>
+    <div id="timer" class="notification hidden">
+      <span id="timer-pause" class="timer-action" title="Pause/resume timer">⏱︎</span>
+      <span id="timer-value"></span>
+      <span id="timer-reset" class="timer-action" title="Reset timer">↺</span>
+    </div>
+
     <div id="message" class="notification"></div>
 
     <script type="text/javascript" src="beamer/pdfjs/pdf.js"></script>
diff --git a/readme.md b/readme.md
index a30659b..51cf765 100644
--- a/readme.md
+++ b/readme.md
@@ -16,7 +16,7 @@ A demonstration is available [here](https://beamerviewer.pacien.org/#file=sample
 
 ## License