Merge branch 'master' of github.com:iRapha/search_within_videos

irapha · Feb 19, 2017 · d3c2c61 · d3c2c61
2 parents 1c29cd7 + 7eb50ac
commit d3c2c61
Showing 1 changed file with 60 additions and 52 deletions.
diff --git a/app/templates/pages/home_page.html b/app/templates/pages/home_page.html
@@ -11,49 +11,48 @@ <h4>Search within YouTube videos</h4>
 <div id="pagination-container"></div>
 
 {% raw %}
-
-
+<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.min.js"></script>
 <!-- not real lmao this is it -->
 <div id="body_container">
-  <div id="results_container">
-    <div class="result_container">
-      <div class="preview_container">
-        <img class="preview" src="https://i.ytimg.com/vi/ZaUB84dMQ9U/hqdefault.jpg?custom=true&w=336&h=188&stc=true&jpg444=true&jpgq=90&sp=68&sigh=uK1rbMa1Wwwo63_uAf5EcFpzSKU" />
-        <div class="hover_holder">
-          <div z-index="100" onclick="window.open('timestamped video url','mywindow');"
-               style="cursor: pointer; margin-left: 20%;" class="hover"
-               value="store the frame img url here and modify the img tag above">
-          </div>
-          <div z-index="100" onclick="window.open('timestamped video url','mywindow');"
-               style="cursor: pointer; margin-left: 40%" class="hover"
-               value="store the frame img url here and modify the img tag above">
-          </div>
-        </div>
-      </div>
-      <div class="vid_deets">
-        <div class="vid_title">Title</div>
-        <div class="vid_desc">desc</div>
-        <div class="vid_username">username</div>
-      </div>
-    </div>
-  </div>
 </div>
 
+</script>
 
-<script type="text/html" id="hit-template">
-	<div class="hit">
-		<div class="hit-img">
-			<a href="{{url}}&t={{#helpers.divide}}{{time}}{{/helpers.divide}}s"><img src="{{image_url}}"/></a>
+<script id="test" type="text/x-handlebars-template">
+	<div id="results_container">
+		<div class="result_container">
+		<div class="preview_container">
+			<img class="preview" src="{{thumb}}" thumb="{{thumb}}"/>
+			<div class="hover_holder">
+			{{#each stamps}}
+			<div z-index="100" onclick="window.open('{{url}}&t={{this.sec}}','mywindow');"
+				style="cursor: pointer; margin-left: 20%;" class="hover"
+				value="{{this.image_url}}" onmouseover="showFrame(this)" url="{{url}}", onmouseout="hideFrame(this)">
+			</div>
+			{{/each}}
+
+			</div>
 		</div>
-		<div class="hit-text">
-			<h3><a href="{{url}}&t={{#helpers.divide}}{{time}}{{/helpers.divide}}s">{{title}}</a></h3>
-			<p>{{username}}</p>
-			<p>Term occurs at {{#helpers.format}}{{time}}{{/helpers.format}}</p>
+			<div class="vid_deets">
+				<div class="vid_title">{{title}}</div>
+				<div class="vid_desc">{{desc}}</div>
+				<div class="vid_username">{{username}}</div>
+      		</div>
 		</div>
 	</div>
 </script>
-
 <script>
+function showFrame(e) {
+	var curr = $(e);
+	curr.parent().siblings('.preview').attr('src', curr.attr('value'));
+}
+function hideFrame(e) {
+	console.log('hideFrame');
+	var curr = $(e)
+	curr.parent().siblings('.preview').attr('src', curr.parent().siblings('.preview').attr('thumb'));
+}
+var source   = $("#test").html();
+var template = Handlebars.compile(source);
 
 var search = instantsearch({
 	appId: 'Y9MCTNJ20T',
@@ -66,6 +65,34 @@ <h3><a href="{{url}}&t={{#helpers.divide}}{{time}}{{/helpers.divide}}s">{{title}
 		  return;
 		}
 		helper.search();
+		helper.on('result', function(data){
+			$('#body_container').empty();
+			if (data.hits && data.hits.length > 0) {
+				var dict = {};
+				for (var i = 0; i < data.hits.length; i++) {
+					var curr = data.hits[i];
+					curr.sec = curr.time/1000;
+					if (dict[curr.url]) {
+						dict[curr.url].stamps.push(curr);
+					}
+					else {
+						dict[curr.url] = {
+							stamps: [curr],
+							desc: curr.desc,
+							title: curr.title,
+							username: curr.username,
+							thumb: curr.thumb
+						}
+					}
+				}
+				console.log(dict);
+				Object.keys(dict).forEach(function(key) {
+					value = dict[key];
+					$('#body_container').append(template(value));
+				});
+			}
+
+		});
 		searchResults.show();
 	}
 });
@@ -88,27 +115,8 @@ <h3><a href="{{url}}&t={{#helpers.divide}}{{time}}{{/helpers.divide}}s">{{title}
 	})
 );
 
-search.addWidget(
-	instantsearch.widgets.hits({
-		container: '#hits-container',
-		templates: {
-			item: getTemplate("#hit-template")
-		}
-	})
-);
-
-search.addWidget(
-	instantsearch.widgets.pagination({
-		container: '#pagination-container'
-	})
-);
-
 search.start();
 
-function getTemplate(name) {
-	return document.querySelector(name).innerHTML;
-}
-
 </script>
 
 {% endraw %}