Added UI/UX for Importing artbitrary videos from a URL

app/app.go

@@ -83,10 +83,16 @@ func NewApp(cfg *Config) (*App, error) {
 	template.Must(uploadTemplate.Parse(box.MustString("base.html")))
 	a.Templates.Add("upload", uploadTemplate)
 
+	importTemplate := template.New("import")
+	template.Must(importTemplate.Parse(box.MustString("import.html")))
+	template.Must(importTemplate.Parse(box.MustString("base.html")))
+	a.Templates.Add("import", importTemplate)
+
 	// Setup Router
 	r := mux.NewRouter().StrictSlash(true)
 	r.HandleFunc("/", a.indexHandler).Methods("GET", "OPTIONS")
 	r.HandleFunc("/upload", a.uploadHandler).Methods("GET", "OPTIONS", "POST")
+	r.HandleFunc("/import", a.importHandler).Methods("GET", "OPTIONS", "POST")
 	r.HandleFunc("/v/{id}.mp4", a.videoHandler).Methods("GET")
 	r.HandleFunc("/v/{prefix}/{id}.mp4", a.videoHandler).Methods("GET")
 	r.HandleFunc("/t/{id}", a.thumbHandler).Methods("GET")
@@ -296,6 +302,124 @@ func (a *App) uploadHandler(w http.ResponseWriter, r *http.Request) {
 	}
 }
 
+// HTTP handler for /import
+func (a *App) importHandler(w http.ResponseWriter, r *http.Request) {
+	if r.Method == "GET" {
+		ctx := &struct{}{}
+		a.render("import", w, ctx)
+	} else if r.Method == "POST" {
+		r.ParseMultipartForm(1024)
+
+		url := r.FormValue("url")
+		if url == "" {
+			err := fmt.Errorf("error, no url supplied")
+			log.Error(err)
+			http.Error(w, err.Error(), http.StatusBadRequest)
+			return
+		}
+
+		// TODO: Make collection user selectable from drop-down in Form
+		// XXX: Assume we can put uploaded videos into the first collection (sorted) we find
+		keys := make([]string, 0, len(a.Library.Paths))
+		for k := range a.Library.Paths {
+			keys = append(keys, k)
+		}
+		sort.Strings(keys)
+		//collection := keys[0]
+
+		/*
+			uf, err := ioutil.TempFile(
+				a.Config.Server.UploadPath,
+				fmt.Sprintf("tube-import-*%s.mp4",
+			)
+			if err != nil {
+				err := fmt.Errorf("error creating temporary file for importing: %w", err)
+				log.Error(err)
+				http.Error(w, err.Error(), http.StatusInternalServerError)
+				return
+			}
+			defer os.Remove(uf.Name())
+
+				_, err = io.Copy(uf, file)
+				if err != nil {
+					err := fmt.Errorf("error writing file: %w", err)
+					log.Error(err)
+					http.Error(w, err.Error(), http.StatusInternalServerError)
+					return
+				}
+
+				tf, err := ioutil.TempFile(
+					a.Config.Server.UploadPath,
+					fmt.Sprintf("tube-transcode-*.mp4"),
+				)
+				if err != nil {
+					err := fmt.Errorf("error creating temporary file for transcoding: %w", err)
+					log.Error(err)
+					http.Error(w, err.Error(), http.StatusInternalServerError)
+					return
+				}
+
+				vf := filepath.Join(
+					a.Library.Paths[collection].Path,
+					fmt.Sprintf("%s.mp4", shortuuid.New()),
+				)
+				thumbFn1 := fmt.Sprintf("%s.jpg", strings.TrimSuffix(tf.Name(), filepath.Ext(tf.Name())))
+				thumbFn2 := fmt.Sprintf("%s.jpg", strings.TrimSuffix(vf, filepath.Ext(vf)))
+
+				// TODO: Use a proper Job Queue and make this async
+				if err := utils.RunCmd(
+					a.Config.Transcoder.Timeout,
+					"ffmpeg",
+					"-y",
+					"-i", uf.Name(),
+					"-vcodec", "h264",
+					"-acodec", "aac",
+					"-strict", "-2",
+					"-loglevel", "quiet",
+					tf.Name(),
+				); err != nil {
+					err := fmt.Errorf("error transcoding video: %w", err)
+					log.Error(err)
+					http.Error(w, err.Error(), http.StatusInternalServerError)
+					return
+				}
+
+				if err := utils.RunCmd(
+					a.Config.Thumbnailer.Timeout,
+					"mt",
+					"-b",
+					"-s",
+					"-n", "1",
+					tf.Name(),
+				); err != nil {
+					err := fmt.Errorf("error generating thumbnail: %w", err)
+					log.Error(err)
+					http.Error(w, err.Error(), http.StatusInternalServerError)
+					return
+				}
+
+				if err := os.Rename(thumbFn1, thumbFn2); err != nil {
+					err := fmt.Errorf("error renaming generated thumbnail: %w", err)
+					log.Error(err)
+					http.Error(w, err.Error(), http.StatusInternalServerError)
+					return
+				}
+
+				if err := os.Rename(tf.Name(), vf); err != nil {
+					err := fmt.Errorf("error renaming transcoded video: %w", err)
+					log.Error(err)
+					http.Error(w, err.Error(), http.StatusInternalServerError)
+					return
+				}
+				fmt.Fprintf(w, "Video successfully uploaded!")
+		*/
+
+		fmt.Fprintf(w, "Not Implemented (yet)")
+	} else {
+		http.Error(w, "Method Not Allowed", http.StatusMethodNotAllowed)
+	}
+}
+
 // HTTP handler for /v/id
 func (a *App) pageHandler(w http.ResponseWriter, r *http.Request) {
 	vars := mux.Vars(r)

static/import.css

@@ -0,0 +1,145 @@
+.import-container {
+  display: inline-block;
+  max-width: 100%;
+  margin-top: 50px;
+}
+
+.import-wrapper {
+  padding: 20px;
+  background-color: #282a2e;
+  border: 1px solid #1e1e1e;
+  border-radius: 20px;
+  font-family: 'Trebuchet MS', Arial, sans-serif;
+}
+
+.import-form {
+  border: 5px dashed #676867;
+  border-radius: 10px;
+  cursor: pointer;
+}
+
+.import-box {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  min-width: 300px;
+  min-height: 300px;
+}
+
+.import-details {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 0 0 20px 0;
+}
+
+.import-details > * {
+  margin-top: 20px;
+}
+
+.import-details span {
+  color: #c5c8c6;
+  font-weight: bold;
+}
+
+.import-message {
+  white-space: normal;
+  padding: 0 20px;
+  word-wrap: break-word;
+  max-width: 300px;
+}
+
+.import-message.error {
+  color: #e82e57;
+}
+
+.import-button-wrapper {
+  display: none;
+  width: 100%;
+  padding: 0 20px;
+}
+
+.import-button {
+  border: 0;
+  box-shadow: none;
+  border-radius: 0px;
+
+  width: 100%;
+  padding: 15px;
+  background: #191919 !important;
+  font-family: 'Trebuchet MS', Arial, sans-serif;
+  color: #c5c8c6;
+  border-radius: 10px;
+  cursor: pointer;
+}
+
+.import-button.transparent {
+  background: transparent !important;
+  padding: 10px;
+}
+
+.import-progress-container {
+  display: none;
+  width: 100%;
+  padding: 0 20px;
+}
+
+.import-progress {
+  height: 30px;
+  background: linear-gradient(45deg, #c7c7c7, #ae81ff);
+  border-radius: 5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.import-progress-label {
+  color: #282a2e !important;
+}
+
+/* SPINNER */
+
+.loader,
+.loader:after {
+  border-radius: 50%;
+  width: 3em;
+  height: 3em;
+}
+.loader {
+  font-size: 10px;
+  position: relative;
+  text-indent: -9999em;
+  border-top: 0.5em solid rgba(255, 255, 255, 0.2);
+  border-right: 0.5em solid rgba(255, 255, 255, 0.2);
+  border-bottom: 0.5em solid rgba(255, 255, 255, 0.2);
+  border-left: 0.5em solid #ffffff;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-animation: load8 1.1s infinite linear;
+  animation: load8 1.1s infinite linear;
+}
+@-webkit-keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}

static/import.js

@@ -0,0 +1,199 @@
+// common variables
+let iBytesImported = 0
+let iBytesTotal = 0
+let iPreviousBytesLoaded = 0
+let iMaxFilesize = 104857600 // 100MB
+let timer = 0
+let importInProgress = 'n/a'
+let isProcessing = false
+let url = null
+
+/* CACHED ELEMENTS */
+
+const importForm = document.getElementById('import-form')
+const importInput = document.getElementById('import-input')
+const importMessageLabel = document.getElementById('import-message')
+const importButtonWrapper = document.getElementById('import-button-wrapper')
+const importButton = document.getElementById('import-button')
+const importProgressContainer = document.getElementById('import-progress-container')
+const importProgressBar = document.getElementById('import-progress')
+const importProgressLabel = document.getElementById('import-progress-label')
+const importStopped = document.getElementById('import-stopped')
+const importStarted = document.getElementById('import-started')
+
+/* HELPERS */
+
+const setProgress = (_progress) => {
+    importProgressContainer.style.display = _progress > 0 ? 'flex' : 'none'
+    importProgressBar.style.width = `${_progress}%`
+    importProgressLabel.innerText =  _progress >= 15 ? `${_progress}%` : ''
+}
+
+const setMessage = (_message, isError) => {
+    importMessageLabel.style.display = _message ? 'block' : 'none'
+    importMessageLabel.innerHTML = _message
+    if (isError) {
+        importMessageLabel.classList.add('error')
+    } else {
+        importMessageLabel.classList.remove('error')
+    }
+}
+
+const setImportState = (_importInProgress) => {
+    importInProgress = _importInProgress
+
+    importStarted.style.display = _importInProgress ? 'inline-block' : 'none'
+    importStopped.style.display = _importInProgress ? 'none' : 'block'
+
+    if (_importInProgress) {
+        importButton.classList.add('transparent')
+        timer = setInterval(doInnerUpdates, 300)
+    } else {
+        importButton.classList.remove('transparent')
+        clearInterval(timer)
+    }
+}
+
+const secondsToTime = (secs) => {
+    let hr = Math.floor(secs / 3600)
+    let min = Math.floor((secs - (hr * 3600)) / 60)
+    let sec = Math.floor(secs - (hr * 3600) - (min * 60))
+    if (hr < 10) hr = `0${hr}`
+    if (min < 10) min = `0${min}`
+    if (sec < 10) sec = `0${sec}`
+    if (hr) hr = '00'
+    return `${hr}:${min}:${sec}`
+}
+
+const bytesToSize = (bytes) => {
+    const sizes = ['Bytes', 'KB', 'MB']
+    if (bytes == 0) return 'n/a'
+    const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)))
+    return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i]
+}
+
+const determineDragAndDropCapable = () => {
+    const div = document.createElement('div')
+    return (('draggable' in div)
+        || ('ondragstart' in div && 'ondrop' in div))
+        && 'FormData' in window
+        && 'FileReader' in window
+}
+
+/* MAIN */
+
+document.addEventListener('DOMContentLoaded', () => {
+    ['drag', 'dragstart', 'dragend', 'dragover', 'dragenter', 'dragleave']
+        .forEach((evt) => {
+            importForm.addEventListener(evt, (e) => {
+                e.preventDefault()
+                e.stopPropagation()
+            })
+        })
+}, false)
+
+const labelClicked = (e) => {
+    if (importInProgress === true) {
+        e.preventDefault()
+        return false
+    }
+}
+
+const urlSelected = (_url) => {
+    url = _url || importInput.value
+
+    setMessage('')
+    setProgress(0)
+    
+    importButtonWrapper.style.display = 'block'
+    setImportState(false)
+}
+
+const startImporting = () => {
+    if (importInProgress === true) return
+    if (!url) return
+
+    isProcessing = false
+    iPreviousBytesLoaded = 0
+    setMessage('')
+    setProgress(0)
+    setImportState(true)
+
+    const formData = new FormData()
+    formData.append('url', url)
+    const xhr = new XMLHttpRequest()
+
+    xhr.upload.addEventListener('progress', importProgress, false)
+    xhr.addEventListener('load', importFinish, false)
+    xhr.addEventListener('error', importError, false)
+    xhr.addEventListener('abort', importAbort, false)
+
+    xhr.open('POST', '/import')
+    xhr.send(formData)
+
+    timer = setInterval(doInnerUpdates, 300)
+}
+
+const doInnerUpdates = () => { // we will use this function to display import speed
+    if (isProcessing) {
+        clearInterval(timer)
+        return
+    }
+
+    let iDiff = iBytesImported - iPreviousBytesLoaded
+    // if nothing new loaded - exit
+    if (iDiff == 0)
+        return
+    iPreviousBytesLoaded = iBytesImported
+    iDiff = iDiff * 2
+    const iBytesRem = iBytesTotal - iPreviousBytesLoaded
+    const secondsRemaining = iBytesRem / iDiff
+    // update speed info
+    let iSpeed = iDiff.toString() + 'B/s'
+    if (iDiff > 1024 * 1024) {
+        iSpeed = (Math.round(iDiff * 100/(1024*1024))/100).toString() + 'MB/s'
+    } else if (iDiff > 1024) {
+        iSpeed =  (Math.round(iDiff * 100/1024)/100).toString() + 'KB/s'
+    }
+
+    const speedMessage = `${iSpeed} | ${secondsToTime(secondsRemaining)}`
+    setMessage(speedMessage)
+}
+
+function importProgress(e) { // import process in progress
+    if (e.lengthComputable) {
+        iBytesImported = e.loaded
+        iBytesTotal = e.total
+
+        const iPercentComplete = Math.round(iBytesImported / iBytesTotal * 100)
+        setProgress(iPercentComplete)
+        if (iPercentComplete === 100) {
+            isProcessing = true
+            setMessage('Processing video... please wait')
+        }
+    } else {
+        setMessage('Unable to compute progress.')
+    }
+}
+
+const importFinish = (e) => { // import successfully finished
+    const message = e.target.responseText
+    const isSuccess = e.target.status < 400
+
+    setProgress(isSuccess ? 100 : 0)
+    setMessage(message, !isSuccess)
+    setImportState(false)
+    if (isSuccess) removeFile(null, true)
+}
+
+const importError = () => { // import error
+    setMessage('An error occurred while importing the url.', true)
+    setProgress(0)
+    setImportState(false)
+}
+
+const importAbort = () => { // import abort
+    setMessage('The import has been canceled by the user or the browser dropped the connection.', true)
+    setProgress(0)
+    setImportState(false)
+}

templates/base.html

@@ -7,6 +7,7 @@
     <link rel="shortcut icon" type="image/x-icon" href="/static/favicon.ico">
     <link rel="stylesheet" type="text/css" href="/static/theme.css">
     <link rel="stylesheet" type="text/css" href="/static/upload.css">
+    <link rel="stylesheet" type="text/css" href="/static/import.css">
 
     {{ template "stylesheets" . }}
     {{ template "css" . }}

templates/import.html

@@ -0,0 +1,29 @@
+{{define "content"}}
+  <div style="text-align: center;">
+    <label class="import-container" onclick="labelClicked(event)">
+      <div class="import-wrapper">
+        <form id="import-form" class="import-form" enctype="multipart/form-data" method="POST" action="/import">
+          <input id="import-input" type="url" required onchange="urlSelected()" />
+          <div class="import-details">
+            <span id="import-message" class="import-message">No URL entered</span>
+            <div id="import-button-wrapper" class="import-button-wrapper">
+              <button id="import-button" class="import-button" onclick="startImporting()" type="button">
+                <span id="import-stopped">Import</span>
+                <span id="import-started" class="loader" style="display: none;"></span>
+              </button>
+            </div>
+            <div id="import-progress-container" class="import-progress-container">
+              <div id="import-progress" class="import-progress">
+                <span id="import-progress-label" class="import-progress-label"></span>
+              </div>
+              <div style="flex-grow: 1;"></div>
+            </div>
+          </div>
+        </form>
+      </div>
+    </label>
+  </div>
+{{end}}
+{{define "scripts"}}
+  <script type="application/javascript" src="/static/import.js"></script>
+{{end}}

templates/upload.html

@@ -30,6 +30,7 @@
         </form>
       </div>
     </label>
+    <p>Need to import a video from another source? Click <a href="/import">Import</a></p>
   </div>
 {{end}}
 {{define "scripts"}}