diff --git a/feed/index.html b/feed/index.html index 23ce6dc..61e72b7 100644 --- a/feed/index.html +++ b/feed/index.html @@ -25,9 +25,12 @@ Sign up -

Latest Videos

-

Click to preview, double click to watch

-
+
+

Latest Videos

+ Switch to Detailed View +

Hold to preview, double click to watch

+
+
\ No newline at end of file diff --git a/feed/script.js b/feed/script.js index 6b40fa8..5f389b1 100644 --- 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=`` + document.querySelector("#videos").innerHTML+=`
` }) }) }) -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 }) \ No newline at end of file diff --git a/feed/style.css b/feed/style.css index f29303a..b930ae3 100644 --- a/feed/style.css +++ b/feed/style.css @@ -1,3 +1,3 @@ video:active { - scale:1.5; + scale:2; } \ No newline at end of file diff --git a/upload/script.js b/upload/script.js index 47046a2..243dd82 100644 --- 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 + }) }) }) \ No newline at end of file diff --git a/videos/index.html b/videos/index.html new file mode 100644 index 0000000..197d67c --- /dev/null +++ b/videos/index.html @@ -0,0 +1,35 @@ + + + + + + Feed - OurTube + + + + +
+ + Home + + + Latest + + + Upload + + + Login + + + Sign up + +
+
+

Latest Videos

+ Switch to Quick View +
+
+ + + \ No newline at end of file diff --git a/videos/script.js b/videos/script.js new file mode 100644 index 0000000..a5898e5 --- /dev/null +++ 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` + }) +}) \ No newline at end of file diff --git a/videos/style.css b/videos/style.css new file mode 100644 index 0000000..8ff5814 --- /dev/null +++ b/videos/style.css @@ -0,0 +1,4 @@ +#videos a { + color:black; + font-size:17pt; +} \ No newline at end of file diff --git a/watch/index.html b/watch/index.html index 457f081..674f2af 100644 --- a/watch/index.html +++ b/watch/index.html @@ -27,8 +27,8 @@ Sign up -

Upload

- +

Watch

+ diff --git a/watch/script.js b/watch/script.js index e33e5ab..9b4df02 100644 --- 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 }) -} \ No newline at end of file + + 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) +}) \ No newline at end of file