Merge branch 'master' of github.com:vircheck/videowall

lucacioria · Nov 3, 2012 · 4954472 · 4954472
2 parents 7063b4b + 79b8f35
commit 4954472
Show file tree

Hide file tree

Showing 5 changed files with 99 additions and 2 deletions.
diff --git a/app/assets/images/hbutton.png b/app/assets/images/hbutton.png
diff --git a/app/assets/images/hbuttonYELLOW.png b/app/assets/images/hbuttonYELLOW.png
diff --git a/app/assets/javascripts/main_app.js.coffee b/app/assets/javascripts/main_app.js.coffee
@@ -79,6 +79,7 @@ display_videos_chunk = ->
       class_mod: size.mod
       video_index: current_index
       video_size: JSON.stringify size
+      highlighted: video.highlighted
 
     current_index++
 
@@ -119,6 +120,44 @@ clear_container = (first_load = false) ->
     columnWidth: COLUMN_WIDTH
     isResizable: true
 
+toggle_size = (size) ->
+  if size.mod is 'small'
+    V_SIZES[0]
+  else
+    V_SIZES[1]
+
+toggle_highlighted = (e) ->
+  e.preventDefault()
+  staron = $(@).data 'on'
+  $(@).data 'on', not staron
+  $(@).toggleClass 'on'
+  $(@).toggleClass 'off'
+
+  $screenshot = $(@).parent().parent().parent()
+  videosize = $screenshot.data 'videosize'
+  if videosize.mod is 'big' then return false
+
+  $screenshot.toggleClass 'video_small'
+  $screenshot.toggleClass 'video_big'
+  videosize = toggle_size videosize
+  $screenshot.data 'videosize', videosize
+
+  videoindex = $screenshot.data 'videoid'
+  video = videos[videoindex]
+  new_screen = $ screenshot_template
+    video_id: video_id video.video_url
+    width: videosize.width
+    height: videosize.height
+    class_mod: videosize.mod
+    video_index: videoindex
+    video_size: JSON.stringify videosize
+    highlighted: true
+
+  $screenshot.html new_screen.html()
+
+  $cont.masonry 'reload'
+  return false
+
 $ ->
   $cont = $ '#container'
   $loader = $ '.loader'
@@ -127,6 +166,11 @@ $ ->
   $(window).resize update_cont_size
   $(window).scroll scroll_check
   $('.screenshot').live 'click', load_video
+  $('.screenshot').live 'mouseover', ->
+    $(@).addClass 'controls'
+  $('.screenshot').live 'mouseout', ->
+    $(@).removeClass 'controls'
+  $('.star').live 'click', toggle_highlighted
 
   video_template = _.template $('#video-template').html()
   screenshot_template = _.template $('#screenshot-template').html()
@@ -140,7 +184,6 @@ $ ->
     friends = f
     $search = $('#search')
     source = (el.name for el in friends)
-    console.log source
     $search.autocomplete
       source: source
       source: (request, response) ->

diff --git a/app/assets/stylesheets/login_page_style.css b/app/assets/stylesheets/login_page_style.css
@@ -433,4 +433,53 @@ div.loader {
 	bottom: 40px;
 	left: 40px;
 	z-index: 99999;
+}
+
+.screenshot > div {
+	position: relative;
+	overflow: hidden;
+}
+
+.control-controls {
+	margin-top: -42px;
+	background-color: rgba(0, 0, 0, 1);
+	color: #f2f2f2;
+	height: 42px;
+	width: 100%;
+	text-align: right;
+	z-index: 999999;
+	-webkit-transition-property: margin-top;
+	-webkit-transition-duration: .4s;
+	-moz-transition-property: margin-top;
+	-moz-transition-duration: .4s;
+	transition-property: margin-top;
+	transition-duration: .4s;
+}
+
+.controls .control-controls {
+	margin-top: 0;
+}
+
+.control-controls > * {
+	margin-right: 10px;
+	clear: both;
+}
+
+.star.on, .star.off {
+	float: right;
+}
+
+.star.on div, .star.off div {
+	width: 34px;
+	height: 28px;
+	background-size: contain;
+	margin-top:6px;
+}
+
+.star.off div {
+	background: url(hbutton.png) center center no-repeat;
+}
+
+.star.on div {
+	background: url(hbuttonYELLOW.png) center center no-repeat;
 }
diff --git a/app/views/main_app/index.html.erb b/app/views/main_app/index.html.erb
@@ -30,12 +30,17 @@
 <!-- Templates -->
 
 <script type="text/template" id="video-template"><div class="video_container_<%%- class_mod %>">
-		<iframe width="<%%- width %>" height="<%%- height %>" src="http://www.youtube.com/embed/<%%- video_id %>?modestbranding=1&rel=0&showinfo=0&autohide=1&autoplay=1"
+		<iframe width="<%%- width %>" height="<%%- height %>" src="http://www.youtube.com/embed/<%%- video_id %>?modestbranding=1&rel=0&showinfo=0&autohide=1&autoplay=1&wmode=transparent"
 frameborder="0" allowfullscreen></iframe>
 	</div></script>
 
 <script type="text/template" id="screenshot-template"><div class="video_<%%- class_mod %> screenshot" data-videoid="<%%- video_index %>" data-videosize="<%%- video_size %>">
 	<div class="video_container_<%%- class_mod %>">
+		<div class="control-controls">
+			<a href="#" class="star <%%= highlighted ? 'on' : 'off' %>" data-on="<%%= highlighted %>">
+				<div></div>
+			</a>
+		</div>
   		<img width="<%%- width %>" height="<%%- height %>" src="http://img.youtube.com/vi/<%%- video_id %>/hqdefault.jpg" />
   	</div>
   </div></script>