initial commit

.gitignore

@@ -0,0 +1 @@
+*.json

assets/script.js

@@ -0,0 +1,133 @@
+const firebaseConfig = {
+    apiKey: "AIzaSyA2pMMabP65Eriww5LGLQ2J1i8twddpxXc",
+    authDomain: "streemio.firebaseapp.com",
+    projectId: "streemio",
+    storageBucket: "streemio.appspot.com",
+    messagingSenderId: "815746485494",
+    appId: "1:815746485494:web:906034e1668937e18bb0d7"
+}
+  // Initialize Firebase
+firebase.initializeApp(firebaseConfig)
+
+
+const root = document.documentElement
+const upload = document.querySelector('.upload')
+const download = document.querySelector('.download')
+const container = document.querySelector('.container')
+const storageRef = firebase.storage().ref()
+const fileId = ID()
+
+
+function uploadFile(file) {
+    const ref = storageRef.child(fileId)
+    const uploadTask = ref.put(file)
+    uploadTask.on(
+        'state_changed', 
+        (snapshot) => setUploadProgress(snapshot), 
+        (error) => console.error(error), 
+        () => successfulUpload(ref, file.name)
+    )
+}
+
+
+async function downloadFileFromStorage() {
+    const fileRef = storageRef.child(fileId)
+    const metadata = await getMetadata(fileRef)
+    const { contentType, customMetadata: { fileName } } = metadata
+    const url = await fileRef.getDownloadURL()
+    downloadFile(url, fileName, contentType)
+}
+
+
+function downloadFile(url, fileName, contentType) {
+    const xhr = new XMLHttpRequest()
+    xhr.responseType = 'blob'
+    xhr.onload = () => downloadComplete(xhr.response, fileName, contentType)
+    xhr.onprogress = (e) => setDownloadProgress(e)
+    xhr.open('GET', url)
+    xhr.send()
+}
+
+
+function saveFile(blob, filename, contentType) {
+    const file = new File([blob], filename, {
+        type: contentType,
+    })
+    const link = document.createElement('a')
+    link.download = file.name
+    link.href = URL.createObjectURL(file)
+    link.click()
+    URL.revokeObjectURL(link.href)
+}
+
+
+function setUploadProgress({ bytesTransferred, totalBytes }) {
+    let progress = ~~(bytesTransferred / totalBytes * 100)
+    root.style.setProperty('--progress', progress)
+    upload.setAttribute('progress', progress + '%')
+    download.setAttribute('progress', progress + '%')
+}
+
+
+function successfulUpload(ref, fileName) {
+    container.classList.add('active')
+    history.replaceState(undefined, '', `?ref=${fileId}`)
+    ref.updateMetadata({
+        customMetadata: {
+            fileName
+        }
+    })
+}
+
+
+function setDownloadProgress(e) {
+    if (e.lengthComputable) {
+        let progress = ~~(100 - e.loaded / e.total * 100)
+        root.style.setProperty('--progress', progress)
+        upload.setAttribute('progress', progress + '%')
+        download.setAttribute('progress', progress + '%')
+    }
+}
+
+
+function downloadComplete(blob, fileName, contentType) {
+    saveFile(blob, fileName, contentType)
+    container.classList.remove('active')
+    document.location.replace('/')
+}
+
+
+async function getMetadata(fileRef) {
+    return await fileRef.getMetadata()
+}
+
+
+upload.addEventListener('drop', (e) => {
+    uploadFile(e.dataTransfer.files[0])
+    e.preventDefault()
+})
+
+
+upload.addEventListener('dragenter', (e) => {
+    e.preventDefault()
+})
+
+
+upload.addEventListener('dragover', (e) => {
+    e.preventDefault()
+})
+
+
+download.addEventListener('click', (e) => {
+    downloadFileFromStorage()
+})
+
+
+function ID() {
+    if (document.location.search !== '') {
+        container.classList.add('active')
+        root.style.setProperty('--progress', 100)
+        return document.location.search.split('=')[1]    
+    }
+    return '_' + Math.random().toString(36).substr(2, 9)
+}

assets/style.css

@@ -0,0 +1,112 @@
+@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
+
+:root {
+  --light-color: rgba(0, 0, 0, 0.1);
+  --dark-color: rgba(0, 0, 0, 0.5);
+  --progress: 0;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-family: 'Lato', sans-serif;
+  margin: 0;
+}
+
+/* .container {
+  width: %;
+} */
+
+.container.active .file {
+  transform: rotateX(180deg);
+}
+
+.header {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  padding-bottom: 1.7rem;
+}
+
+.header h2 {
+  color: var(--dark-color);
+  padding: 0 0.5rem;
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 0.2rem var(--dark-color) solid;
+  height: 0.2rem;
+  width: 100%;
+}
+
+.file {
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 1px 10px var(--light-color);
+  border-radius: 4px;
+  height: 17rem;
+  width: 15rem;
+  transition: box-shadow 0.3s, transform 0.4s ease;
+  transform-style: preserve-3d;
+}
+
+.file:hover {
+  box-shadow: 0 1px 10px var(--dark-color);
+}
+
+.upload,
+.download {
+  background-image: linear-gradient(
+    0deg,
+    rgb(184, 255, 200) 0%,
+    rgba(0, 0, 0, 0) calc(var(--progress) * 1%)
+  );
+  backface-visibility: hidden;
+  border-radius: 4px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+}
+
+.upload {
+  transform: rotateX(0deg);
+  z-index: 2;
+}
+
+.upload::after,
+.download::after {
+  content: attr(progress);
+  font-family: 'Font Awesome 5 Free', Lato, sans-serif;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  font-weight: bold;
+  font-size: 16px;
+  color: var(--light-color);
+}
+
+.upload,
+.download i {
+  color: var(--light-color);
+  font-size: 9rem;
+}
+
+.download {
+  cursor: pointer;
+  transform: rotateX(180deg);
+}

index.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./assets/style.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
+      integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
+      crossorigin="anonymous"
+    />
+    <title>stream.io</title>
+  </head>
+  <body>
+    <div class="container">
+      <div class="header">
+        <!-- <div class="divider"></div> -->
+        <h2>stream.io</h4>
+      </div>
+      <div class="file">
+        <div class="upload">
+          <i class="fas fa-cloud-upload-alt"></i>
+        </div>
+        <div class="download">
+          <i class="fas fa-cloud-download-alt"></i>
+        </div>
+      </div>
+    </div>
+    <!-- The core Firebase JS SDK is always required and must be listed first -->
+    <script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-app.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-storage.js"></script>
+    <script src="./assets/script.js"></script>
+  </body>
+</html>