Stream with link feature added.

shubham-gupta-16 · Feb 12, 2024 · 66117fc · 66117fc
1 parent 230a1bf
commit 66117fc
Show file tree

Hide file tree

Showing 3 changed files with 185 additions and 27 deletions.
diff --git a/public/app.js b/public/app.js
@@ -1,5 +1,83 @@
 import { initializeApp } from "https://www.gstatic.com/firebasejs/10.8.0/firebase-app.js";
-import { getDatabase, ref, set, onValue, push } from "https://www.gstatic.com/firebasejs/10.8.0/firebase-database.js"
+import { getDatabase, ref, set, onValue, push, get } from "https://www.gstatic.com/firebasejs/10.8.0/firebase-database.js"
+
+const showDOM = (id) => {
+  document.getElementById(id).style.display = 'block';
+}
+const hideDOM = (id) => {
+  document.getElementById(id).style.display = 'none';
+}
+
+const fetchRoomDetails = async (room) => {
+  const roomDetails = ref(database, 'videos/' + room);
+  try {
+    let snapshot = await get(roomDetails);
+    if (snapshot.exists() && snapshot.hasChild("details")) {
+      let createdAt = snapshot.val().details.createdAt;
+      let currentTimestamp = new Date().getTime();
+      if (currentTimestamp - createdAt > 24 * 60 * 60 * 1000 || createdAt == null) {
+        location.hash = '';
+        throw "Room expired. Please create a new room.";
+      }
+      return snapshot.val();
+    } else {
+      location.hash = '';
+      return null;
+    }
+  } catch (error) {
+    location.hash = '';
+    console.error(error);
+    throw error;
+  }
+}
+
+const generateOrGetRoom = () => {
+  const basePosition = ref(database, 'videos');
+  const hash = window.location.hash;
+  var room;
+  console.log(hash);
+  if (hash.length === 0 || hash === '#') {
+    room = push(basePosition).key;
+  } else {
+    room = hash.substring(1);
+  }
+  // window.location.hash = room;
+  return room;
+}
+
+const generateUser = (room) => {
+  return push(ref(database, 'videos/' + room)).key;
+}
+
+const createRoomForStreamLink = (room, url) => {
+  let currentTimestamp = new Date().getTime();
+  set(ref(database, 'videos/' + room + '/details'), { type: "link", url: url, createdAt: currentTimestamp }).then(() => {
+    console.log('Room created for stream link');
+    location.hash = room;
+    video.src = url
+    hideDOM('stream-link')
+    hideDOM('choose-video')
+    showDOM('share-button')
+  }).catch((error) => {
+    alert("Error while creating room for stream link");
+  });
+}
+
+const createRoomForFile = (room, path) => {
+  let currentTimestamp = new Date().getTime();
+  set(ref(database, 'videos/' + room + '/details'), { type: "file", path: path, createdAt: currentTimestamp }).then(() => {
+    console.log('Room created for file');
+    video.src = path
+    location.hash = room;
+    hideDOM('stream-link')
+    hideDOM('choose-video')
+    showDOM('share-button')
+  }).catch((error) => {
+    alert("Error while creating room for file");
+  });
+}
+
+//  start form here
 const app = initializeApp({
   apiKey: "AIzaSyCDxyIHWrTNhRfuHZXKQSLW6vpYEAuDc4w",
   authDomain: "videocallaplication.firebaseapp.com",
@@ -11,23 +89,62 @@ const app = initializeApp({
   measurementId: "G-9ELKGRM2QQ"
 });
 const database = getDatabase(app);
-const basePosition = ref(database, 'videos');
-const hash = window.location.hash;
-console.log(hash);
-var room;
-if (hash.length === 0 || hash === '#') {
-  room = push(basePosition).key; 
-} else {
-  room = hash.substring(1);
-}
-window.location.hash = room;
-const pos = ref(database, 'videos/' + room);
-var user = push(pos).key;
+const room = generateOrGetRoom();
+const user = generateUser(room);
+fetchRoomDetails(room).then((val) => {
+  if (!val) {
+    showDOM('stream-link')
+    showDOM('choose-video')
+    return;
+  }
+  let details = val.details;
+  if (details.type === "link") {
+    video.src = details.url;
+    hideDOM('stream-link')
+    hideDOM('choose-video')
+    showDOM('share-button')
+  } else {
+    hideDOM('stream-link')
+    showDOM('choose-video')
+  }
+  // room already exists
+}).catch((error) => {
+  alert(error);
+});
+// setup complete
 
 var video = document.getElementById('localVideo');
+const streamInput = document.getElementById('streamInput');
+
+// on input stream link
+document.getElementById('streamInputButton').addEventListener('click', function (event) {
+  console.log(streamInput.value);
+  // todo validate url.
+  createRoomForStreamLink(room, streamInput.value);
+});
+
+// on video file input, set the video file in video tag
+document.getElementById('fileInput').addEventListener('change', function (event) {
+  var file = event.target.files[0];
+  var path = URL.createObjectURL(file);
+  createRoomForFile(room, path);
+});
 
+document.getElementById('share-button').addEventListener('click', function (event) {
+  var url = window.location.href;
+  // copy to clipboard
+  navigator.clipboard.writeText(url).then(function () {
+    alert('Room link copied to clipboard');
+  }, function (err) {
+    alert('Error while copying room link to clipboard');
+  });
+});
+
+
+const pos = ref(database, 'videos/' + room + "/state");
 var seeking = false;
 onValue(pos, (snapshot) => {
+  if (!snapshot.exists()) return;
   let json = snapshot.val();
   if (!json) return;
   if (json.user === user) return;
@@ -42,15 +159,6 @@ onValue(pos, (snapshot) => {
   video.currentTime = timestamp;
 });
 
-
-
-// on video file input, set the video file in video tag
-document.getElementById('fileInput').addEventListener('change', function (event) {
-  var file = event.target.files[0];
-  var url = URL.createObjectURL(file);
-  var video = document.getElementById('localVideo');
-  video.src = url;
-});
 // video pasuse play event with current timestamp
 video.addEventListener('pause', function () {
   console.log('paused at', video.currentTime);

diff --git a/public/index.html b/public/index.html
@@ -15,12 +15,24 @@ <h1>Welcome to Online Watch Party!</h1>
     <p>Copy the above url and send it to your friend. Then both should open same video file from their device by pressing the 'CHOOSE VIDEO' button. And that's it!</p>
     <!-- input video -->
     <video id="localVideo" controls></video>
-    <input hidden type="file" id="fileInput" accept="video/*">
-
+    <div id="choose-video">
+        <input hidden type="file" id="fileInput" accept="video/*">
+        <br>
+        <label for="fileInput" class="mdc-button mdc-button--raised">
+            <span class="mdc-button__label">Choose Video</span>
+        </label>
+    </div>
     <br>
-    <label for="fileInput" class="mdc-button mdc-button--raised">
-        <span class="mdc-button__label">Choose Video</span>
-    </label>
+    <div id="stream-link">
+        <input type="text" id="streamInput" class="text-input" placeholder="Stream Link">
+        <br>
+        <button class="mdc-button mdc-button--raised" id="streamInputButton">
+            <span class="mdc-button__label">Stream</span>
+        </button>
+    </div>
+    <button class="mdc-button mdc-button--raised" id="share-button">
+        <span class="mdc-button__label">Copy Room Link</span>
+    </button>
 </div>
 <script src="app.js" type="module"></script>
 </body>

diff --git a/public/main.css b/public/main.css
@@ -6,6 +6,31 @@ body {
     padding: 0;
 }
 
+input[type=text], select {
+    width: 100%;
+    padding: 12px 20px;
+    margin: 8px 0;
+    display: inline-block;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-sizing: border-box;
+}
+
+input[type=submit] {
+    width: 100%;
+    background-color: #4CAF50;
+    color: white;
+    padding: 14px 20px;
+    margin: 8px 0;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+input[type=submit]:hover {
+    background-color: #45a049;
+}
+
 .container {
     margin: 0 auto;
     max-width: 720px;
@@ -18,3 +43,16 @@ video {
     height: 100%;
     display: block;
 }
+
+#share-button {
+    background-color: #4CAF50;
+    display: none;
+}
+
+#stream-link {
+    display: none;
+}
+
+#choose-video {
+    display: none;
+}