From 23608321549df020dc0a2c79fc00f5edd1ffe2e6 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Tue, 4 Aug 2015 22:14:25 -0400
Subject: pull in video stuff and write bg wrapper :)

---
 public/js/lib/bg.js     |  29 +++++
 public/js/lib/parser.js | 286 ------------------------------------------------
 public/js/lib/video.js  |  91 +++++++++++++++
 3 files changed, 120 insertions(+), 286 deletions(-)
 create mode 100644 public/js/lib/bg.js
 delete mode 100644 public/js/lib/parser.js
 create mode 100644 public/js/lib/video.js

(limited to 'public/js/lib')

diff --git a/public/js/lib/bg.js b/public/js/lib/bg.js
new file mode 100644
index 0000000..5a188f3
--- /dev/null
+++ b/public/js/lib/bg.js
@@ -0,0 +1,29 @@
+var bg = (function(){
+
+  var bg = {}
+  bg.el = document.getElementById("bg")
+  
+  bg.change = function(url){
+    var img = new Image ()
+    img.src = url
+    oktween.add({
+      obj: bg.el.style,
+      from: { opacity: 1 },
+      to: { opacity: 0 },
+      easing: "circ_in",
+      duration: 500,
+      finished: function(){
+        bg.el.style.backgroundImage = "url(" + url + ")"
+      }
+    }).then({
+      delay: 500,
+      obj: bg.el.style,
+      from: { opacity: 0 },
+      to: { opacity: 1 },
+      easing: "circ_in",
+      duration: 500,
+    })
+    
+  }
+  
+})()
\ No newline at end of file
diff --git a/public/js/lib/parser.js b/public/js/lib/parser.js
deleted file mode 100644
index 20c5306..0000000
--- a/public/js/lib/parser.js
+++ /dev/null
@@ -1,286 +0,0 @@
-var Parser = (function(){
-  var Parser = {}
-	Parser.integrations = [{
-		type: 'image',
-		regex: /\.(jpeg|jpg|gif|png|svg)(\?.*)?$/i,
-		fetch: function(url, done) {
-			var img = new Image ()
-			img.onload = function(){
-				if (!img) return
-				var width = img.naturalWidth, height = img.naturalHeight
-				img = null
-				done({
-					url: url,
-					type: "image",
-					token: "",
-					thumbnail: "",
-					title: "",
-					width: width,
-					height: height,
-				})
-			}
-			img.src = url
-			if (img.complete) {
-				img.onload()
-			}
-		},
-		tag: function (media) {
-			return '<img src="' + media.url + '">';
-		}
-	}, {
-		type: 'video',
-		regex: /\.(mp4|webm)(\?.*)?$/i,
-		fetch: function(url, done) {
-			var video = document.createElement("video")
-			video.addEventListener("loadedmetadata", function(){
-				var width = video.videoWidth, height = video.videoHeight
-				video = null
-				done({
-					url: url,
-					type: "video",
-					token: "",
-					thumbnail: "",
-					title: "",
-					width: width,
-					height: height,
-				})
-			})
-			video.src = url
-			video.load()
-		},
-		tag: function (media) {
-			return '<video src="' + media.url + '">';
-		}
-	}, {
-		type: 'youtube',
-		regex:  /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/ ]{11})/i,
-		fetch: function(url, done) {
-			var id = (url.match(/v=([-_a-zA-Z0-9]{11})/i) || url.match(/youtu.be\/([-_a-zA-Z0-9]{11})/i) || url.match(/embed\/([-_a-zA-Z0-9]{11})/i))[1].split('&')[0];
-			var thumb = "http://i.ytimg.com/vi/" + id + "/hqdefault.jpg"
-			$.ajax({
-				type: 'GET',
-				url: 'https://www.googleapis.com/youtube/v3/videos',
-				dataType: "jsonp",
-				data: {
-					id: id,
-					key: "AIzaSyDYPKGD0-_VRBWpUYRmX8Qg6BtWmcPU_cM",
-					part: "id,contentDetails,snippet,status",
-				},
-				success: function(result){
-					var res = result.items[0]
-					done({
-						url: url,
-						type: "youtube",
-						token: id,
-						thumbnail: thumb,
-						title: res.snippet.title,
-						width: 640,
-						height: 360,
-					})
-				}
-			})
-		},
-		tag: function (media) {
-			// return '<img class="video" type="youtube" 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" width="' + media.width + '" height="' + media.height + '" src="http://youtube.com/embed/' + media.token + '?showinfo=0" style="position: absolute; top: 0px; left: 0px; width: ' + media.width + 'px; height: ' + media.height + 'px;"></iframe></div>'
-		}
-	}, {
-		type: 'vimeo',
-		regex: /vimeo.com\/\d+$/i,
-		fetch: function(url, done) {
-			var id = url.match(/\d+$/i)[0];
-			$.ajax({
-				type: 'GET',
-				url: 'http://vimeo.com/api/v2/video/' + id + '.json',
-				success: function(result){
-					if (result.length == 0) { return done(id, "", 640, 360) }
-					var res = result[0]
-					if (res.embed_privacy != "anywhere") {
-					  AlertModal.alert("Sorry, the author of this video has marked it private, preventing it from being embedded.", function(){})
-					  return
-					}
-					done({
-						url: url,
-						type: "vimeo",
-						token: id,
-						thumbnail: res.thumbnail_large,
-						title: res.title,
-						width: res.width,
-						height: res.height,
-					})
-				}
-			})
-		},
-		tag: function (media) {
-			// 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) {
-			$.ajax({
-				type: 'GET',
-				url: 'http://api.soundcloud.com/resolve.json?url=' 
-					+ url
-					+ '&client_id=' 
-					+ '0673fbe6fc794a7750f680747e863b10',
-				success: function(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,
-						width: 166,
-						height: 166,
-					})
-				}
-			});
-		},
-		tag: function (media) {
-			return '<iframe width="166" height="166" scrolling="no" frameborder="no"' +
-					'src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/' + media.token +
-					'&amp;color=ff6600&amp;auto_play=false&amp;show_artwork=true"></iframe>'
-		}
-	},
-  /*
-	{
-		type: 'link',
-		regex: /^http.+/i,
-		fetch: function(url, done) {
-			done({
-				url: url,
-				type: "link",
-				token: "",
-				thumbnail: "",
-				title: "",
-				width: 100,
-				height: 100,
-			})
-		},
-		tag: function (media) {
-			return '<a href="' + media.url + '" target="_blank">' + media.url + '</a>'
-		}
-	}
-	*/
-	]
-
-  Parser.tumblr = function(url, cb){
-    var domain = url.replace(/^https?:\/\//,"").split("/")[0]
-    if (domain.indexOf(".") == -1) {
-    	domain += ".tumblr.com"
-    }
-    $.ajax({
-      type: 'GET', 
-      url: "http://" + domain + "/api/read",
-      dataType: "jsonp",
-      data: {
-        format: "json",
-      },
-      success: function(data){
-        var media_list = []
-        var blog = data.tumblelog
-        
-        data.posts.forEach(parse)
-        cb(media_list)
-
-        function parse(post){
-          var media, caption, url
-          switch (post.type) {
-            case 'photo':
-              caption = stripHTML(post['photo-caption'])
-              if (post.photos.length) {
-                post.photos.forEach(function(photo){
-                  var media = {
-                    url: photo['photo-url-1280'],
-                    type: "image",
-                    token: "",
-                    thumbnail: photo['photo-url-500'],
-                    description: caption,
-                    width: parseInt(photo.width),
-                    height: parseInt(photo.height),
-                  }
-                  media_list.push(media)
-                })
-              }
-              else {
-                media = {
-                  url: post['photo-url-1280'],
-                  type: "image",
-                  token: "",
-                  thumbnail: post['photo-url-500'],
-                  description: caption,
-                  width: parseInt(post.width),
-                  height: parseInt(post.height),
-                }
-                media_list.push(media)
-              }
-              break
-            case 'video':
-              url = post['video-source']
-              if (url.indexOf("http") !== 0) { break }
-              if (Parser.lookup.youtube.regex.test(url)) {
-                var id = (url.match(/v=([-_a-zA-Z0-9]{11})/i) || url.match(/youtu.be\/([-_a-zA-Z0-9]{11})/i) || url.match(/embed\/([-_a-zA-Z0-9]{11})/i))[1].split('&')[0];
-                var thumb = "http://i.ytimg.com/vi/" + id + "/hqdefault.jpg"
-                media = {
-                  url: post['video-source'],
-                  type: "youtube",
-                  token: id,
-                  thumbnail: thumb,
-                  title: stripHTML(post['video-caption']),
-                  width: 640,
-                  height: 360,
-                }
-                media_list.push(media)
-              }
-              break
-          }
-        }
-//         console.log(post)
-      }
-    })
-  }
-
-	Parser.parse = function (url, cb) {
-		var matched = Parser.integrations.some(function(integration){
-			if (integration.regex.test(url)) {
-				integration.fetch(url, function(res){
-					cb(res)
-				})
-				return true
-			}
-			return false
-		})
-		if (! matched) {
-			cb(null)
-		}
-	}
-	
-	Parser.tag = function (media){
-	  if (media.type in Parser.lookup) {
-	    return Parser.lookup[media.type].tag(media)
-	  }
-	  return ""
-	}
-
-	Parser.loadImage = function(url, cb, error){
-		if (Parser.lookup.image.regex.test(url)) {
-			Parser.lookup.image.fetch(url, function(media){
-				cb(media)
-			})
-		}
-		else error && error()
-	}
-	
-  Parser.thumbnail = function (media) {
-    return '<img src="' + (media.thumbnail || media.url) + '" class="thumb">';
-  }
-
-  Parser.lookup = _.indexBy(Parser.integrations, 'type');
-
-  return Parser
-})()
-
diff --git a/public/js/lib/video.js b/public/js/lib/video.js
new file mode 100644
index 0000000..45e6043
--- /dev/null
+++ b/public/js/lib/video.js
@@ -0,0 +1,91 @@
+var video = (function(){
+  var video = {}
+  var mx
+  
+  video.init = function(opt){
+    video.build()
+  }
+
+  video.build = function(media){
+    switch (media.type) {
+      case 'video':
+        mxType = MX.Video
+        break
+      case 'vimeo':
+        mxType = MX.Vimeo
+        break
+      case 'youtube':
+        mxType = MX.Youtube
+        break
+    }
+    if (app.muted) {
+      media.mute = true
+    }
+    mx = new mxType({
+      media: media,
+      backface: false,
+    })
+    video.el.innerHTML = ""
+    video.el.appendChild(mx.el)
+    
+    mx.load()
+  }
+  
+  video.play = function(){
+    mx.play()
+  }
+  
+  video.pause = function(){
+    mx.pause()
+  }
+  
+  video.toggle = function(shouldPause){
+    if (typeof shouldPause !== "boolean") {
+      shouldPause = ! mx.paused
+    }
+    shouldPause ? mx.pause() : mx.play()
+    return shouldPause
+  }
+  
+  video.toggleMuted = function(shouldMute){
+    if (typeof shouldMute !== "boolean") {
+      shouldMute = ! mx.muted
+    }
+    shouldMute ? mx.mute() : mx.unmute()
+    return shouldMute
+  }
+  
+  video.paused = function(){
+    return mx.paused
+  }
+  
+  video.muted = function(){
+    return mx.muted
+  }
+  
+  video.seek = function(n){
+    mx.seek(n)
+  }
+  
+  video.setLoop = function(shouldLoop){
+    mx.setLoop(shouldLoop)
+  }
+  
+  video.mute = function(muted){
+    if (muted) {
+      mx.mute()
+    }
+    else {
+      mx.unmute()
+    }
+  }
+
+  video.unmute = function(){
+    mx.unmute()
+  }
+  
+  video.setVolume = function(n){
+    mx.setVolume(n)
+  }
+
+})()
-- 
cgit v1.2.3-70-g09d2