added a lot of stuff

boston2029 · Jul 17, 2024 · eff534f · eff534f
1 parent c83f2ab
commit eff534f
Show file tree

Hide file tree

Showing 9 changed files with 132 additions and 13 deletions.
diff --git a/feed/index.html b/feed/index.html
@@ -25,9 +25,12 @@
       Sign up
     </a>
   </div>
-  <h1>Latest Videos</h1>
-  <h2>Click to preview, double click to watch</h2>
-  <div id="videos"></div>
+  <center>
+    <h1>Latest Videos</h1>
+    <a href="/videos">Switch to Detailed View</a>
+    <h2>Hold to preview, double click to watch</h2>
+    <div id="videos"></div>
+  </center>
   <script type="module" src="script.js"></script>
 </body>
 </html>
diff --git a/feed/script.js b/feed/script.js
@@ -18,13 +18,23 @@ const storage = getStorage();
 listAll(ref(storage, "videos")).then(response => {
   response.items.forEach(item => {
     getDownloadURL(ref(storage, "videos/"+item.name)).then(url => {
-      document.querySelector("#videos").innerHTML=`<video width="100" src="${url}" ondblclick="location.href='/watch/?v=${item.name}'"></video>`
+      document.querySelector("#videos").innerHTML+=`<video width="100" src="${url}" ondblclick="location.href='/watch/?v=${item.name}'"></video><br>`
     })
   })
 })
 
-document.querySelector("#videos").addEventListener("click", (e) => {
+let currentPreview
+
+document.querySelector("#videos").addEventListener("mousedown", (e) => {
   if (e.target.nodeName!="VIDEO") return
+  currentPreview=e.target
   e.target.playbackRate=3
   e.target.play()
+})
+
+document.querySelector("#videos").addEventListener("mouseup", (e) => {
+  if (currentPreview==null) return
+  currentPreview.pause()
+  currentPreview.currentTime=0
+  currentPreview=null
 })
diff --git a/feed/style.css b/feed/style.css
@@ -1,3 +1,3 @@
 video:active {
-  scale:1.5;
+  scale:2;
 }
diff --git a/upload/script.js b/upload/script.js
@@ -1,5 +1,6 @@
 import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.3/firebase-app.js";
 import { getAuth, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/10.12.3/firebase-auth.js";
+import { getDatabase, ref as dbRef, set } from "https://www.gstatic.com/firebasejs/10.12.3/firebase-database.js";
 import { getStorage, ref, uploadBytesResumable } from "https://www.gstatic.com/firebasejs/10.12.3/firebase-storage.js";
 
 const firebaseConfig = {
@@ -13,6 +14,7 @@ const firebaseConfig = {
 
 const app = initializeApp(firebaseConfig);
 const auth = getAuth();
+const db = getDatabase();
 const storage = getStorage();
 
 onAuthStateChanged(auth, (user) => {
@@ -43,7 +45,13 @@ document.querySelector('input[type=file]').addEventListener('change', (e) => {
     const progress = (snapper.bytesTransferred / snapper.totalBytes) * 100
     document.querySelector('progress').value=progress
   }, (e)=>{alert("Error: "+e)}, () => {
-    alert("Your video has been uploaded!")
-    location.href="/watch/?v="+videoID
+    set(dbRef(db, "videos/"+videoID), {
+      name: prompt("Name your video"),
+      likes: 0,
+      dislikes: 0
+    }).then(() => {
+      alert("Your video has been uploaded!")
+      location.href="/watch/?v="+videoID
+    })
   })
 })
diff --git a/videos/index.html b/videos/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <title>Feed - OurTube</title>
+  <link href="/navbar.css" rel="stylesheet" type="text/css" />
+  <link href="style.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+  <div class="navbar">
+    <a href="/" class="item">
+      Home
+    </a>
+    <a href="/feed" class="item">
+      Latest
+    </a>
+    <a href="/upload" class="item">
+      Upload
+    </a>
+    <a href="/login" class="item pushRight">
+      Login
+    </a>
+    <a href="/signup" class="item">
+      Sign up
+    </a>
+  </div>
+  <center>
+    <h1>Latest Videos</h1>
+    <a href="/feed">Switch to Quick View</a>
+    <div id="videos"></div>
+  </center>
+  <script type="module" src="script.js"></script>
+</body>
+</html>
diff --git a/videos/script.js b/videos/script.js
@@ -0,0 +1,25 @@
+import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.3/firebase-app.js";
+import { getAuth } from "https://www.gstatic.com/firebasejs/10.12.3/firebase-auth.js";
+import { getDatabase, ref, onValue } from "https://www.gstatic.com/firebasejs/10.12.3/firebase-database.js";
+
+const firebaseConfig = {
+  apiKey: "AIzaSyBntOXNr3A0xTbstz8d66CzSbgGNKgRkQg",
+  authDomain: "clone-3a598.firebaseapp.com",
+  projectId: "clone-3a598",
+  storageBucket: "clone-3a598.appspot.com",
+  messagingSenderId: "851750777511",
+  appId: "1:851750777511:web:0aa9f90eb4961eef9d6182"
+};
+
+const app = initializeApp(firebaseConfig);
+const auth = getAuth();
+const db = getDatabase();
+
+onValue(ref(db, "videos"), (snapshot) => {
+  document.getElementById("videos").innerHTML=''
+  snapshot.forEach(video => {
+    let listElement = document.getElementById("videos").appendChild(document.createElement("a"))
+    listElement.href=`/watch/?v=${video.key}`
+    listElement.innerText=`${video.val().name} - ${video.val().views||0} views`
+  })
+})
diff --git a/videos/style.css b/videos/style.css
@@ -0,0 +1,4 @@
+#videos a {
+  color:black;
+  font-size:17pt;
+}
diff --git a/watch/index.html b/watch/index.html
@@ -27,8 +27,8 @@
       Sign up
     </a>
   </div>
-  <h1>Upload</h1>
-  <video width="500"></video>
+  <h1>Watch</h1>
+  <video style="width:100vw;height:80%;background:black;" controls autoplay></video>
   <script type="module" src="script.js"></script>
 </body>
 

diff --git a/watch/script.js b/watch/script.js
@@ -1,6 +1,7 @@
 import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.3/firebase-app.js";
 import { getAuth, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/10.12.3/firebase-auth.js";
-import { getStorage, ref, getDownloadURL } from "https://www.gstatic.com/firebasejs/10.12.3/firebase-storage.js";
+import { getDatabase, ref, onValue } from "https://www.gstatic.com/firebasejs/10.12.3/firebase-database.js";
+import { getStorage, ref as storageRef, getDownloadURL } from "https://www.gstatic.com/firebasejs/10.12.3/firebase-storage.js";
 
 const firebaseConfig = {
   apiKey: "AIzaSyBntOXNr3A0xTbstz8d66CzSbgGNKgRkQg",
@@ -13,13 +14,46 @@ const firebaseConfig = {
 
 const app = initializeApp(firebaseConfig);
 const auth = getAuth();
+const db = getDatabase();
 const storage = getStorage();
 
 let params = new URLSearchParams(document.location.search)
 let videoID = params.get("v")
 
 if (videoID != undefined && videoID.length==6) {
-  getDownloadURL(ref(storage, "videos/"+videoID)).then(url => {
+  getDownloadURL(storageRef(storage, "videos/"+videoID)).then(url => {
     document.querySelector("video").src=url
   })
-}
+
+  onValue(ref(db, "videos/"+videoID), (snapshot) => {
+    document.querySelector("h1").innerText=snapshot.val().name
+  })
+}
+
+
+
+let mousedownonvideo = false
+let mousedowntimer
+let shouldSpeedUp = false
+
+function startMouseDownTimer() {
+  mousedowntimer = setTimeout(function(){
+
+  },1000)
+}
+
+document.querySelector("video").addEventListener("mousedown", (e) => {
+  mousedownonvideo = true
+  startMouseDownTimer()
+})
+
+document.querySelector("video").addEventListener("mouseup", (e) => {
+  if (shouldSpeedUp == true) {
+    document.querySelector("video").playbackRate=1
+  } else {
+    // timer hasn't gone off yet
+    document.querySelector("video").play()
+  }
+  mousedownonvideo = false
+  clearTimeout(mousedowntimer)
+})