이승윤 / OpenSource-MyCookBook

Go to a project
Toggle navigation Toggle navigation pinning
이승윤
2faf482b 2 parents 6da8af16 0f29049d

Merge branch 'feat/Video' into 'develop' 

Feat/video



See merge request !7
Inline Side-by-side
Showing 5 changed files with 131 additions and 99 deletions
...@@ -16,7 +16,7 @@ router.get('/', function (req, res) { ...@@ -16,7 +16,7 @@ router.get('/', function (req, res) {
16 } 16 }
17 if (videos.length != 0) { 17 if (videos.length != 0) {
18 // 빈 배열 체크 18 // 빈 배열 체크
19 - console.log(videos); 19 + //console.log(videos);
20 var items = { 20 var items = {
21 category: category[i], 21 category: category[i],
22 videos: videos, 22 videos: videos,
......
...@@ -54,53 +54,73 @@ router.get('/products/detail/:id', function (req, res) { ...@@ -54,53 +54,73 @@ router.get('/products/detail/:id', function (req, res) {
54 var video = []; 54 var video = [];
55 //제품정보를 받고 그안에서 댓글을 받아온다. 55 //제품정보를 받고 그안에서 댓글을 받아온다.
56 CategoriModel.find({ product_id: req.params.id }, function (err, comments) { 56 CategoriModel.find({ product_id: req.params.id }, function (err, comments) {
57 - if (word != null) { 57 + VideoModel.find(function (err, myVideo) {
58 - var count = 0; 58 + var mitem = []; // 카테고리별 비디오 목록을 담아두는 배열
59 - youtube.addParam('order', 'rating'); // 평점 순으로 정렬 59 + var videos = []; // 비디오 목록을 담는 임시 배열
60 - youtube.addParam('type', 'video'); // 타입 지정 60 + for (var j in myVideo) {
61 - youtube.addParam('videoLicense', 'creativeCommon'); // 크리에이티브 커먼즈 아이템만 불러옴 61 + if (product.title == myVideo[j].categori) {
62 - youtube.search(word, limit, function (err, result) { 62 + videos.push(myVideo[j].title);
63 - // 검색 실행 63 + }
64 - console.log(word); 64 + }
65 - if (err) { 65 + if (videos.length != 0) {
66 - console.log(err); 66 + // 빈 배열 체크
67 - } // 에러일 경우 에러공지하고 빠져나감 67 + //console.log(videos);
68 - //console.log(JSON.stringify(result, null, 2)); // 받아온 전체 리스트 출력 68 + var items = videos;
69 - var items = result['items']; // 결과 중 items 항목만 가져옴 69 + mitem.push(items);
70 - for (var i in items) { 70 + }
71 - var it = items[i]; 71 + //console.log(item[2].category.title);
72 - for (var j in it) { 72 + //console.log(item[2].videos);
73 - if (it[j]['title'] != null) { 73 + if (word != null) {
74 - var title = it[j]['title']; 74 + var count = 0;
75 - } 75 + youtube.addParam('order', 'rating'); // 평점 순으로 정렬
76 - if (it[j]['videoId'] != null) { 76 + youtube.addParam('type', 'video'); // 타입 지정
77 - var video_id = it[j]['videoId']; 77 + youtube.addParam('videoLicense', 'creativeCommon'); // 크리에이티브 커먼즈 아이템만 불러옴
78 + youtube.search(word, limit, function (err, result) {
79 + // 검색 실행
80 + //console.log(word);
81 + if (err) {
82 + console.log(err);
83 + } // 에러일 경우 에러공지하고 빠져나감
84 + //console.log(JSON.stringify(result, null, 2)); // 받아온 전체 리스트 출력
85 + var items = result['items']; // 결과 중 items 항목만 가져옴
86 + for (var i in items) {
87 + var it = items[i];
88 + for (var j in it) {
89 + if (it[j]['title'] != null) {
90 + var title = it[j]['title'];
91 + }
92 + if (it[j]['videoId'] != null) {
93 + var video_id = it[j]['videoId'];
94 + }
95 + var urls = 'https://www.youtube.com/watch?v=' + video_id;
78 } 96 }
79 - var urls = 'https://www.youtube.com/watch?v=' + video_id; 97 + var item = {
98 + id: count,
99 + title: title,
100 + video_id: video_id,
101 + urls: urls,
102 + categori: product.title,
103 + };
104 + count++;
105 + video.push(item);
80 } 106 }
81 - var item = { 107 + res.render('category/productsDetail', {
82 - id: count, 108 + product: product,
83 - title: title, 109 + comments: comments,
84 - video_id: video_id, 110 + videos: video,
85 - urls: urls, 111 + items: mitem,
86 - categori: product.title, 112 + });
87 - }; 113 + });
88 - count++; 114 + } else {
89 - video.push(item); 115 + //console.log(item[0]);
90 - }
91 res.render('category/productsDetail', { 116 res.render('category/productsDetail', {
92 product: product, 117 product: product,
93 comments: comments, 118 comments: comments,
94 videos: video, 119 videos: video,
120 + items: mitem,
95 }); 121 });
96 - }); 122 + }
97 - } else { 123 + });
98 - res.render('category/productsDetail', {
99 - product: product,
100 - comments: comments,
101 - videos: video,
102 - });
103 - }
104 }); 124 });
105 }); 125 });
106 }); 126 });
......
...@@ -3,6 +3,24 @@ ...@@ -3,6 +3,24 @@
3 <div class="panel-heading"> 3 <div class="panel-heading">
4 <%=product.title%> 4 <%=product.title%>
5 </div> 5 </div>
6 + <div style="padding-bottom: 10px">
7 + 작성일 :
8 + <%=product.getDate.year%> -
9 + <%=product.getDate.month%> -
10 + <%=product.getDate.day%>
11 + </div>
12 + <div>
13 + <% var count=0; %>
14 + 보유중인 영상
15 + <% for (var i in items[0]) { %>
16 + <div>
17 + <%=items[0][i]%>
18 + </div>
19 + <%count++;};%>
20 + </div>
21 + <div>
22 + 설명 : <%=product.description%>
23 + </div>
6 <form method="get" action=""> 24 <form method="get" action="">
7 <div class="input-group"> 25 <div class="input-group">
8 <input type="text" class="form-control" placeholder="검색 키워드를 입력하세요!" name="keyword" autocomplete='off'> 26 <input type="text" class="form-control" placeholder="검색 키워드를 입력하세요!" name="keyword" autocomplete='off'>
...@@ -30,18 +48,6 @@ ...@@ -30,18 +48,6 @@
30 <button class="btn btn-primary" style="margin-top: 10px; margin-left: 15px;" >영상담기</button> 48 <button class="btn btn-primary" style="margin-top: 10px; margin-left: 15px;" >영상담기</button>
31 </form> 49 </form>
32 <div class="panel-body"> 50 <div class="panel-body">
33 - <div style="padding-bottom: 10px">
34 - 작성일 :
35 - <%=product.getDate.year%> -
36 - <%=product.getDate.month%> -
37 - <%=product.getDate.day%>
38 - </div>
39 - <% if(product.thumbnail){%>
40 - <p>
41 - <img src="/uploads/<%=product.thumbnail%>" style="max-width: 100%"/>
42 - </p>
43 - <% } %>
44 - <%=product.description%>
45 <!-- 댓글영역 --> 51 <!-- 댓글영역 -->
46 <div> 52 <div>
47 댓글작성하기 53 댓글작성하기
......
1 <% include ./includes/header.ejs %> 1 <% include ./includes/header.ejs %>
2 <div id="masonry_container"> 2 <div id="masonry_container">
3 - 한식 3 + <% var count = 0; %>
4 - <% for (var i in videos) { %> 4 + <% for (var i in video) { %>
5 - <div id="<%=videos[i].id%>" vid="<%=videos[i].video_id%>"> 5 + <div>
6 + <%=video[i].category.title%>
6 </div> 7 </div>
7 - <%};%> 8 + <% for (var j in video[i].videos) { %>
9 + <div id="<%=count%>" vid="<%=video[i].videos[j].video_id%>">
10 + </div>
11 + <%count++;};};%>
8 </div> 12 </div>
9 -
10 -<style type="text/css">
11 -.masonry-grid img { max-width: 260px; }
12 -</style>
13 -<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
14 -<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.1/imagesloaded.pkgd.min.js"></script>
15 -<script type="text/javascript">
16 - var $masonry_container = $('#masonry_container');
17 - $masonry_container.imagesLoaded(function(){
18 - $masonry_container.masonry({
19 - itemSelector : '.masonry-grid',
20 - columnWidth : 270
21 - });
22 - });
23 -</script>
24 -<script>
25 - var tag = document.createElement('script');
26 13
27 - tag.src = "https://www.youtube.com/iframe_api"; 14 + <style type="text/css">
28 - var firstScriptTag = document.getElementsByTagName('script')[0]; 15 + .masonry-grid img {
29 - firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 16 + max-width: 260px;
17 + }
18 + </style>
19 + <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
20 + <script type="text/javascript"
21 + src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.1/imagesloaded.pkgd.min.js"></script>
22 + <script type="text/javascript">
23 + var $masonry_container = $('#masonry_container');
24 + $masonry_container.imagesLoaded(function () {
25 + $masonry_container.masonry({
26 + itemSelector: '.masonry-grid',
27 + columnWidth: 270
28 + });
29 + });
30 + </script>
31 + <script>
32 + var tag = document.createElement('script');
30 33
31 - var player; 34 + tag.src = "https://www.youtube.com/iframe_api";
32 - var players = []; 35 + var firstScriptTag = document.getElementsByTagName('script')[0];
33 - var videoIds = []; 36 + firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
34 - for (var i = 0;i<10;i++) { 37 + var player;
35 - players.push(String(i)); 38 + var players = [];
36 - videoIds.push($('#'+i).attr('vid')); 39 + var videoIds = [];
37 - } 40 + for (var i = 0; i < 30; i++) {
41 + players.push(String(i));
42 + videoIds.push($('#' + players[i]).attr('vid'));
43 + }
38 44
39 - function onYouTubeIframeAPIReady() { 45 + function onYouTubeIframeAPIReady() {
40 - for (var i = 0; i < videoIds.length; i++) { 46 + for (var i = 0; i < videoIds.length; i++) {
41 - player = new YT.Player(players[i], { 47 + player = new YT.Player(players[i], {
42 - height: '360', 48 + height: '360',
43 - width: '640', 49 + width: '640',
44 - videoId: videoIds[i], 50 + videoId: videoIds[i],
45 - events: { 51 + events: {
46 - // 'onReady': onPlayerReady, 52 + // 'onReady': onPlayerReady,
47 - // 'onStateChange': onPlayerStateChange 53 + // 'onStateChange': onPlayerStateChange
48 - } 54 + }
49 - }); 55 + });
56 + }
50 } 57 }
51 - }
52 58
53 // function onPlayerReady(event) { 59 // function onPlayerReady(event) {
54 // } 60 // }
...@@ -56,5 +62,5 @@ ...@@ -56,5 +62,5 @@
56 // } 62 // }
57 // function stopVideo() { 63 // function stopVideo() {
58 // } 64 // }
59 -</script>
60 -<% include ./includes/footer.ejs %>
...\ No newline at end of file ...\ No newline at end of file
65 + </script>
66 + <% include ./includes/footer.ejs %>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
30 </div> 30 </div>
31 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-9"> 31 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-9">
32 <ul class="nav navbar-nav"> 32 <ul class="nav navbar-nav">
33 - <li class="active"> 33 + <li>
34 <a href="/">Home</a> 34 <a href="/">Home</a>
35 </li> 35 </li>
36 <li><a href="/categori/products">Categori</a></li> 36 <li><a href="/categori/products">Categori</a></li>
......