Create streaming mode

fferegrino · Jun 18, 2022 · f213d93 · f213d93
1 parent f89a7d9
commit f213d93
Show file tree

Hide file tree

Showing 5 changed files with 194 additions and 8 deletions.
diff --git a/app.css b/app.css
@@ -9,6 +9,35 @@
     width: 100vw;
 }
 
+button.button {
+    cursor: pointer;
+    border: white 3px solid;
+    color: white;
+    padding: 3px 10px;
+    background-color: transparent;
+    text-transform: lowercase;
+    font-family: 'Comfortaa', cursive;
+    border-radius: 2em/100%;
+}
+
+button.button:hover {
+    cursor: pointer;
+    border: white 3px solid;
+    background-color: #ffffff99;
+}
+
+button.landing {
+    padding: 8px 30px;
+    margin: 0px 15px;
+    font-size: 1.5em;
+    border-radius: 2em/100%;
+}
+
+button.primary {
+    color: black;
+    background-color: white;
+}
+
 #clock {
     font-family: 'Ubuntu Mono', monospace;
     font-size: 12em;
@@ -26,7 +55,8 @@
     border: #fff 4px solid;
     border-radius: 2rem/100%;
     overflow: hidden;
-    width: 30rem;
+    width: 30rem;    
+    margin-bottom: 2em;
 
     visibility: hidden;
     display: none;

diff --git a/app.js b/app.js
@@ -5,6 +5,7 @@ const defaultWorkMinutes = 25
 const defaultRestMinutes = 5
 const workMinutes = parseInt(urlParams.get('work') ?? defaultWorkMinutes)
 const restMinutes = parseInt(urlParams.get('rest') ?? defaultRestMinutes)
+const showProgress = urlParams.get("progress") != null
 
 // Get UI elements
 let clock = document.getElementById("clock")
@@ -34,7 +35,7 @@ function tick() {
 
 let interval = {}
 
-if (urlParams.get("progress")) {
+if (showProgress) {
     barContainer.style.visibility = "visible"
     barContainer.style.display = "block"
 }

diff --git a/favicon.ico b/favicon.ico
diff --git a/index.html b/index.html
@@ -3,15 +3,58 @@
 <head>
     <title>Study with me</title>
     <link href="app.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.1.0/pure-min.css" 
+        integrity="sha512-Q4WiqBxm6xN8av2KEK01keP+vRk6AlyS5yqbB87RtKOSC/B6kQM7dwMtBY45m6eH/gCxWjfvbIf7hSK3pEFlow==" 
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
     <style>
         html {
-            background: url(./jezael-melgoza-2FiXtdnVhjQ-unsplash.jpg) no-repeat center center fixed;
+            background: url(https://ik.imagekit.io/thatcsharpguy/stdywith_me/jonathan-formento-Agukhm5v0lA-unsplash.jpg) no-repeat center center fixed;
             -webkit-background-size: cover;
             -moz-background-size: cover;
             -o-background-size: cover;
             background-size: cover;
             color: white;
+            height: 100%;
         }
+
+/* The Modal (background) */
+.modal {
+  display: none; /* Hidden by default */
+  position: fixed; /* Stay in place */
+  z-index: 1; /* Sit on top */
+  left: 0;
+  top: 0;
+  width: 100%; /* Full width */
+  height: 100%; /* Full height */
+  overflow: auto; /* Enable scroll if needed */
+  background-color: rgb(0,0,0); /* Fallback color */
+  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+}
+
+/* Modal Content/Box */
+.modal-content {
+  background-color: black;
+  margin: 15% auto; /* 15% from the top and centered */
+  padding: 40px;
+  border-radius: 2em;
+  width: 40%; /* Could be more or less, depending on screen size */
+}
+
+/* The Close Button */
+.close {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+  color: white;
+  text-decoration: none;
+  cursor: pointer;
+}
+
     </style>
     <script src="utils.js"></script>
 </head>
@@ -23,14 +66,63 @@
         <div id="mainProgressBar"></div>
     </div>
     <div id="controls">
-        <button id="startButton">Start</button>
-        <button id="restartButton">Restart</button>
+        <button type="button" class="button landing primary" id="startButton">Start</button>
+        <button type="button" class="button landing" id="restartButton">Restart</button>
+        <button type="button" class="button landing" id="myBtn">Settings</button>
     </div>
 </div>
+
+<!-- The Modal -->
+<div id="settingsModal" class="modal">
+
+
+
+    <!-- Modal content -->
+    <div class="modal-content">
+        <span id="closeModal" class="close">&times;</span>
+
+        <div style="visibility: hidden; display: none;">
+            <label for="copy">Query</label>
+            <input type="text" id="copy" name="copy" />
+        </div>
+        <form id="form" class="pure-form pure-form-aligned">
+            <fieldset>
+                <div class="pure-control-group">
+                    <label for="time">Time</label>
+                    <input type="time" id="time" name="time" />
+                </div>
+                <div class="pure-control-group">
+                    <label for="work">Focus time</label>
+                    <input type="number" id="work" name="work" />
+                </div>
+                <div class="pure-control-group">
+                    <label for="rest">Rest time</label>
+                    <input type="number" id="rest" name="rest" />
+                </div>
+                <div class="pure-control-group">
+
+                    <label for="progress"></label>
+
+                    <label for="aligned-cb" class="pure-checkbox">
+                        <input type="checkbox" id="progress" name="progress" /> Show progress bar
+                    </label>
+                </div>
+                <div class="pure-controls">
+                    <button class="button primary" type="submit">set</button>
+                    <button class="button" id="streamerButton" type="button">stream</button>
+                </div>
+            </fieldset>
+        </form>
+    </div>
+</div>
+
 <script src="app.js"></script>
 <script>
     let startButton = document.getElementById("startButton")
     let restartButton = document.getElementById("restartButton")
+    const streamerButton= document.getElementById('streamerButton')
+    let form = document.getElementById("form")
+    let copy = document.getElementById("copy")
 
     startButton.addEventListener('click', function () {
         console.log(interval)
@@ -42,6 +134,67 @@
         elapsedSeconds = 0
         interval = setInterval(tick, 1000);
     }, false)
+
+form.addEventListener('change',function(){
+    const queryString = new URLSearchParams(Array.from(new FormData(form))).toString()
+    console.log(queryString)
+
+    console.log(window.location.protocol)
+    if (window.location.protocol == 'file:') {
+        var path = window.location.pathname.split("/").slice(0, -1).join('/')
+        copy.value = `file://${path}/index.html?${queryString}`
+    } else {
+        var origin = window.location.origin
+        var path = window.location.pathname.split("/").slice(-2, -1)
+        copy.value = `${origin}/${path}?${queryString}`
+    }
+
+    copy.select();
+    copy.setSelectionRange(0, 99999); 
+    console.log(copy.value)
+    navigator.clipboard.writeText(copy.value);
+});
+
+streamerButton.addEventListener('click', function () {
+    const queryString = new URLSearchParams(Array.from(new FormData(form))).toString()
+    const origin = window.location.origin
+    var path = window.location.pathname.split("/").slice(-2, -1)
+    copy.value = `${window.location.origin}/streaming?${queryString}`
+    navigator.clipboard.writeText(copy.value);
+
+}, false)
+
+// Fill the modal
+document.getElementById('work').value = workMinutes;
+document.getElementById('rest').value = restMinutes;
+document.getElementById('progress').checked = showProgress;
+
+// Get the modal
+var modal = document.getElementById("settingsModal");
+
+// Get the button that opens the modal
+var btn = document.getElementById("myBtn");
+
+// Get the <span> element that closes the modal
+var span = document.getElementById("closeModal");
+
+// When the user clicks on the button, open the modal
+btn.onclick = function() {
+  modal.style.display = "block";
+}
+// modal.style.display = "block";
+
+// When the user clicks on <span> (x), close the modal
+span.onclick = function() {
+  modal.style.display = "none";
+}
+
+// When the user clicks anywhere outside of the modal, close it
+window.onclick = function(event) {
+  if (event.target == modal) {
+    modal.style.display = "none";
+  }
+}
 </script>
 </body>
 </html>
diff --git a/streaming.html b/streaming.html
@@ -30,9 +30,11 @@
 <script src="app.js"></script>
 <script>
     // If the user has provided a start time already
-    if (urlParams.get('hour') != null || urlParams.get('minute') != null) {
-        let hour = parseInt(urlParams.get('hour'))
-        let minute = parseInt(urlParams.get('minute'))
+    if (urlParams.get('time') != null) {
+        const time = urlParams.get('time')
+        let hour = parseInt(time.slice(0, 2))
+        let minute = parseInt(time.slice(3))
+
         let currentTime = new Date();
         startTime = new Date(new Date().setHours(0, 0, 0, 0) + ((hour * 3600) + (minute * 60)) * 1000);
         elapsedSeconds = Math.trunc((currentTime.getTime() - startTime.getTime()) / 1000)