From 56580705e3a62eaf1c498c1c0456fc33fe3b2f76 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Tue, 5 Apr 2016 14:05:35 -0400
Subject: broaden media support

---
 themes/okadmin/public/js/app.js    | 18 +++++++++--
 themes/okadmin/public/js/parser.js | 31 +++++++++++++++++--
 themes/okadmin/public/js/upload.js | 61 ++++++++++++++++++++++++++++----------
 3 files changed, 89 insertions(+), 21 deletions(-)

(limited to 'themes/okadmin/public/js')

diff --git a/themes/okadmin/public/js/app.js b/themes/okadmin/public/js/app.js
index e79f704..a12f517 100644
--- a/themes/okadmin/public/js/app.js
+++ b/themes/okadmin/public/js/app.js
@@ -5,7 +5,8 @@ var OKAdmin = function(){
     var parent = this
     var uploader = new OKUpload ()
     uploader.bind( this )
-    uploader.add = function(url){
+    uploader.add = function(media){
+      var url = media.url
       var imageTemplate = $(".image-template", parent).html()
       var $el = $(imageTemplate)
       $el.find(".uri").val(url)
@@ -46,7 +47,7 @@ var OKAdmin = function(){
       $el.find("img").attr("src", url)
       $("ol", parent).prepend($el)
     }
-    uploader.addVideo = function(media){
+    uploader.addMedia = function(media){
       switch (media.type) {
         case 'youtube':
         case 'vimeo':
@@ -64,6 +65,19 @@ var OKAdmin = function(){
           $el.find("img").attr("src", media.thumbnail )
           $("ol", parent).prepend($el)
           break
+        case 'audio':
+          var audioTemplate = $(".audio-template", parent).html()
+          var $el = $(audioTemplate)
+          $el.addClass("loaded")
+          $el.find(".audio-type").val( media.type )
+          $el.find(".audio-token").val( media.token )
+          $el.find(".audio-uri").val( media.uri )
+          $el.find(".audio-title").val( media.title )
+          $el.find(".audio-thumb").val( media.thumbnail )
+          $el.find(".audio-duration").val( media.duration )
+          $el.find("img").attr("src", media.thumbnail )
+          $("ol", parent).prepend($el)
+          break
         case 'link':
           var linkTemplate = $(".link-template", parent).html()
           var $el = $(linkTemplate)
diff --git a/themes/okadmin/public/js/parser.js b/themes/okadmin/public/js/parser.js
index b4a087d..4ab9a6c 100644
--- a/themes/okadmin/public/js/parser.js
+++ b/themes/okadmin/public/js/parser.js
@@ -52,6 +52,31 @@ var Parser = {
 		tag: function (media) {
 			return '<video src="' + media.url + '">';
 		}
+	}, {
+		type: 'audio',
+		regex: /\.(wav|mp3)(\?.*)?$/i,
+		fetch: function(url, done) {
+			var audio = document.createElement("audio")
+			var url_parts = url.replace(/\?.*$/, "").split("/")
+			var filename = url_parts[ url_parts.length-1 ]
+			audio.addEventListener("loadedmetadata", function(){
+				var duration = audio.duration
+				audio = null
+				done({
+					url: url,
+					type: "audio",
+					token: url,
+					thumbnail: "http://okfocus.s3.amazonaws.com/misc/okcms/audio.png",
+					title: filename,
+					duration: duration,
+				})
+			})
+			audio.src = url
+			audio.load()
+		},
+		tag: function (media) {
+			return '<audio src="' + media.url + '">';
+		}
 	}, {
 		type: 'youtube',
 		regex:  /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/ ]{11})/i,
@@ -116,8 +141,7 @@ var Parser = {
 			// return '<img class="video" type="vimeo" vid="'+media.token+'" src="'+media.thumbnail+'"><span class="playvid">&#9654;</span>';
 			return '<div class="video" style="width: ' + media.width + 'px; height: ' + media.height + 'px; overflow: hidden; position: relative;"><iframe frameborder="0" scrolling="no" seamless="seamless" webkitallowfullscreen="webkitAllowFullScreen" mozallowfullscreen="mozallowfullscreen" allowfullscreen="allowfullscreen" id="okplayer" src="http://player.vimeo.com/video/' + media.token + '?api=1&title=0&byline=0&portrait=0&playbar=0&player_id=okplayer&loop=0&autoplay=0" width="' + media.width + '" height="' + media.height + '" style="position: absolute; top: 0px; left: 0px; width: ' + media.width + 'px; height: ' + media.height + 'px;"></iframe></div>'
 		}
-	},
-	{
+	}, {
 		type: 'soundcloud',
 		regex: /soundcloud.com\/[-a-zA-Z0-9]+\/[-a-zA-Z0-9]+\/?$/i,
 		fetch: function (url, done) {
@@ -128,13 +152,14 @@ var Parser = {
 					+ '&client_id=' 
 					+ '0673fbe6fc794a7750f680747e863b10',
 				success: function(result) {
-				  // console.log(result)
+				  console.log(result)
 					done({
 						url: url,
 						type: "soundcloud",
 						token: result.id,
 						thumbnail: result.artwork_url || result.user.avatar_url,
 						title: result.user.username + " - " + result.title,
+						duration: result.duration,
 						width: 166,
 						height: 166,
 					})
diff --git a/themes/okadmin/public/js/upload.js b/themes/okadmin/public/js/upload.js
index cfc1199..2ce14ad 100644
--- a/themes/okadmin/public/js/upload.js
+++ b/themes/okadmin/public/js/upload.js
@@ -1,6 +1,8 @@
 
 var OKUpload = function(){
-	this.action = "/_services/image"
+	this.action = this.imageAction = "/_services/s3/image"
+	this.videoAction = "/_services/s3/video"
+	this.audioAction = "/_services/s3/audio"
 }
 OKUpload.prototype.bind = function(rapper){
   var uploader = this
@@ -14,18 +16,25 @@ OKUpload.prototype.bind = function(rapper){
   $(".add-url", rapper).on("keydown blur", pressEnter( function(e){
     var url = $(this).val()
     $(this).val("")
-    if (! url) return
-    Parser.parse( url, function(media){
-      console.log(url, media)
-      if (media.type == "image") {
-        uploader.add(url)
-      }
-      else {
-        uploader.addVideo(media)
-      }
-    })
+    uploader.parse(url)
   }))
 }
+OKUpload.prototype.parse = function(url){
+  if (! url) return
+  var uploader = this
+  Parser.parse( url, function(media){
+    console.log(url, media)
+    if (! media) {
+      alert("Not a valid link")
+    }
+    else if (media.type == "image") {
+      uploader.add(media)
+    }
+    else {
+      uploader.addMedia(media)
+    }
+  })
+}
 OKUpload.prototype.handleFileSelect = function(e) {
   e.stopPropagation();
   e.preventDefault();
@@ -33,13 +42,29 @@ OKUpload.prototype.handleFileSelect = function(e) {
   var files = e.dataTransfer ? e.dataTransfer.files : e.target.files;
 
   for (var i = 0, f; f = files[i]; i++) {
-    if ( ! f.type.match('image.*')) {
+    if ( ! f.type.match('image.*') && ! f.type.match('video.*') ) {
       continue;
     }
     this.upload(f)
   }
 }
 OKUpload.prototype.upload = function(f){
+
+  var field, action
+
+  if ( f.type.match('video.*') ) {
+    field = 'video'
+    action = this.videoAction
+  }
+  else if ( f.type.match('audio.*') ) {
+    field = 'audio'
+    action = this.audioAction
+  }
+  else {
+    field = 'image'
+    action = this.imageAction || this.action
+  }
+  
   this.xhrCount += 1
 
   this.$progress.addClass("loading")
@@ -51,10 +76,10 @@ OKUpload.prototype.upload = function(f){
   this.$progress.append($loader)
   
   var fd = new FormData()
-  fd.append('image', f)
+  fd.append(field, f)
 
   var request = new XMLHttpRequest()
-  request.open("POST", this.action, true)
+  request.open("POST", action, true)
  
   request.addEventListener("progress", updateProgress.bind(this));
   request.addEventListener("load", transferComplete.bind(this));
@@ -77,6 +102,7 @@ OKUpload.prototype.upload = function(f){
         this.success( responseData )
       }
       catch (e) {
+        console.log(request.responseText)
         console.log("ERROR PARSING JSON")
       }
     }
@@ -121,12 +147,15 @@ OKUpload.prototype.success = function(data){
     return
   }
   var url = data[0].extra.Location
-  this.add(url)
+  this.parse(url)
 }
 OKUpload.prototype.add = function(media){
   console.log(media)
 }
-OKUpload.prototype.addVideo = function(media){
+OKUpload.prototype.addMedia = function(media){
+  console.log(media)
+}
+OKUpload.prototype.addAudio = function(media){
   console.log(media)
 }
 OKUpload.prototype.error = function(error){
-- 
cgit v1.2.3-70-g09d2