media view

5 files changed, 67 insertions, 10 deletions

diff --git a/public/assets/javascripts/ui/lib/Parser.js b/public/assets/javascripts/ui/lib/Parser.js
index 1cf0418..52c96e6 100644
--- a/public/assets/javascripts/ui/lib/Parser.js
+++ b/public/assets/javascripts/ui/lib/Parser.js
@@ -21,7 +21,7 @@ var Parser = {
 			}
 		},
 		tag: function (media) {
-			return '<img src="' + media.url + '" onerror="imgError(this);">';
+			return '<img src="' + media.url + '">';
 		}
 	}, {
 		type: 'video',
@@ -43,7 +43,7 @@ var Parser = {
 			video.load()
 		},
 		tag: function (media) {
-			return '<video src="' + media.url + '" onerror="imgError(this);">';
+			return '<video src="' + media.url + '">';
 		}
 	}, {
 		type: 'youtube',
@@ -73,7 +73,8 @@ var Parser = {
 			})
 		},
 		tag: function (media) {
-			return '<img class="video" type="youtube" vid="'+media.token+'" src="'+media.thumbnail+'"><span class="playvid">&#9654;</span>';
+			// 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',
@@ -101,7 +102,8 @@ var Parser = {
 			})
 		},
 		tag: function (media) {
-			return '<img class="video" type="vimeo" vid="'+media.token+'" src="'+media.thumbnail+'"><span class="playvid">&#9654;</span>';
+			// 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&js_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>'
 		}
 	},
 	/*
@@ -165,5 +167,18 @@ var Parser = {
 		if (! matched) {
 			cb(null)
 		}
-	}
-}
\ No newline at end of file
+	},
+	
+	tag: function (media){
+	  if (media.type in Parser.lookup) {
+	    return Parser.lookup[media.type].tag(media)
+	  }
+	  return ""
+	},
+
+  thumbnail: function (media) {
+    return '<img src="' + (media.thumbnail || media.url) + '" class="thumb">';
+  },
+
+};
+Parser.lookup = _.indexBy(Parser.integrations, 'type');
diff --git a/public/assets/javascripts/ui/site/StaffView.js b/public/assets/javascripts/ui/site/StaffView.js
index fd173e5..fdf39d2 100644
--- a/public/assets/javascripts/ui/site/StaffView.js
+++ b/public/assets/javascripts/ui/site/StaffView.js
@@ -7,15 +7,20 @@ var StaffView = View.extend({
 
 	initialize: function() {
 		this.$toggleStaff = $("#toggle-staff")
+		this.$mediaEmbed = $("#media-embed")
     if (this.$toggleStaff.length && this.$toggleStaff.data().isstaff) {
       this.$toggleStaff.html("Is Staff")
     }
+    if (this.$mediaEmbed.length) {
+      var media = this.$mediaEmbed.data()
+      this.$mediaEmbed.html( Parser.tag( media ) )
+    }
 	},
 
 	load: function() {
 		$(".json").each(function(){
       $(this).JSONView( this.innerText )
-    })
+    }).show()
 
 		this.projectList = new ProjectList ()
 	},
diff --git a/public/assets/stylesheets/staff.css b/public/assets/stylesheets/staff.css
index 02510a3..05d3541 100644
--- a/public/assets/stylesheets/staff.css
+++ b/public/assets/stylesheets/staff.css
@@ -38,6 +38,9 @@ hr {
   width: 80%;
   margin: 0 auto;
 }
+.json {
+  display: none;
+}
 .jsonview {
   border: 1px solid #ddd;
   background: rgba(238,238,238,0.5);
@@ -91,4 +94,4 @@ iframe.embed {
 .page table.projectList,
 .page table.projectList td.border {
   border: 0;
-}
\ No newline at end of file
+}
diff --git a/server/lib/views/staff.js b/server/lib/views/staff.js
index a9d85ba..d27ba0f 100644
--- a/server/lib/views/staff.js
+++ b/server/lib/views/staff.js
@@ -55,7 +55,7 @@ var staff = module.exports = {
     },
 
     ensureRecentUsers: function(req, res, next){
-      var dreq = { params: { sort: 'last_seen', limit: 20, offset: 0 } }
+      var dreq = { query: { sort: 'last_seen', limit: 20, offset: 0 } }
       staff.middleware.ensureUsers(dreq, res, next)
     },
 
@@ -120,7 +120,10 @@ var staff = module.exports = {
 
     ensureMediaUser: function(req, res, next){
       if (! res.locals.media) { return next() }
-      staff.middleware.ensureObjectsUsers([ res.locals.media ], next)
+      staff.middleware.ensureObjectsUsers([ res.locals.media ], function(){
+        res.locals.mediaUser = res.locals.media.User
+        next()
+      })
     },
     
     ensureObjectsUsers: function(objects, next){
diff --git a/views/staff/media/show.ejs b/views/staff/media/show.ejs
index 8257307..76dcd32 100644
--- a/views/staff/media/show.ejs
+++ b/views/staff/media/show.ejs
@@ -11,4 +11,35 @@
   
   <hr>
 
+  <center>
+    <div id="media-embed" data-type="[[- media.type ]]" data-token="[[- media.token ]]" data-url="[[- media.url ]]" data-width="[[- media.width ]]" data-height="[[- media.height ]]" style="width: [[- media.width ]]px; height: [[- media.height ]]px">
+    </div>
+  </center>
+  
+  <table>
+    <tr>
+      <td>
+        uploaded by
+      </td>
+      <td>
+        [[ if (media.user.photo) { ]]
+          <a href="/staff/users/[[- media.user.username ]]"><div style="background-image:url([[- media.user.photo ]])" class="avatar"></div></a>
+        [[ } ]]
+      </td>
+      <td>
+        <a href="/staff/users/[[- media.user.username ]]">[[- media.user.username ]]</a>
+      </td>
+      <td>
+        [[- media.user.displayName ]]
+      </td>
+      <td class="editLinks">
+        <a href="/profile/[[- media.user.username ]]">[view profile]</a>
+      </td>
+    </tr>
+  </table>
+
+  <div class="json">
+    [[- mediaJSON ]]
+  </div>
+
 [[ include ../_footer ]]