Merge branch 'feat/Video' into 'develop'

Feat/video



See merge request !7

@@ -16,7 +16,7 @@ router.get('/', function (req, res) {
         }
         if (videos.length != 0) {
           // 빈 배열 체크
-          console.log(videos);
+          //console.log(videos);
           var items = {
             category: category[i],
             videos: videos,

@@ -54,53 +54,73 @@ router.get('/products/detail/:id', function (req, res) {
     var video = [];
     //제품정보를 받고 그안에서 댓글을 받아온다.
     CategoriModel.find({ product_id: req.params.id }, function (err, comments) {
-      if (word != null) {
-        var count = 0;
-        youtube.addParam('order', 'rating'); // 평점 순으로 정렬
-        youtube.addParam('type', 'video'); // 타입 지정
-        youtube.addParam('videoLicense', 'creativeCommon'); // 크리에이티브 커먼즈 아이템만 불러옴
-        youtube.search(word, limit, function (err, result) {
-          // 검색 실행
-          console.log(word);
-          if (err) {
-            console.log(err);
-          } // 에러일 경우 에러공지하고 빠져나감
-          //console.log(JSON.stringify(result, null, 2)); // 받아온 전체 리스트 출력
-          var items = result['items']; // 결과 중 items 항목만 가져옴
-          for (var i in items) {
-            var it = items[i];
-            for (var j in it) {
-              if (it[j]['title'] != null) {
-                var title = it[j]['title'];
-              }
-              if (it[j]['videoId'] != null) {
-                var video_id = it[j]['videoId'];
+      VideoModel.find(function (err, myVideo) {
+        var mitem = []; // 카테고리별 비디오 목록을 담아두는 배열
+        var videos = []; // 비디오 목록을 담는 임시 배열
+        for (var j in myVideo) {
+          if (product.title == myVideo[j].categori) {
+            videos.push(myVideo[j].title);
+          }
+        }
+        if (videos.length != 0) {
+          // 빈 배열 체크
+          //console.log(videos);
+          var items = videos;
+          mitem.push(items);
+        }
+        //console.log(item[2].category.title);
+        //console.log(item[2].videos);
+        if (word != null) {
+          var count = 0;
+          youtube.addParam('order', 'rating'); // 평점 순으로 정렬
+          youtube.addParam('type', 'video'); // 타입 지정
+          youtube.addParam('videoLicense', 'creativeCommon'); // 크리에이티브 커먼즈 아이템만 불러옴
+          youtube.search(word, limit, function (err, result) {
+            // 검색 실행
+            //console.log(word);
+            if (err) {
+              console.log(err);
+            } // 에러일 경우 에러공지하고 빠져나감
+            //console.log(JSON.stringify(result, null, 2)); // 받아온 전체 리스트 출력
+            var items = result['items']; // 결과 중 items 항목만 가져옴
+            for (var i in items) {
+              var it = items[i];
+              for (var j in it) {
+                if (it[j]['title'] != null) {
+                  var title = it[j]['title'];
+                }
+                if (it[j]['videoId'] != null) {
+                  var video_id = it[j]['videoId'];
+                }
+                var urls = 'https://www.youtube.com/watch?v=' + video_id;
               }
-              var urls = 'https://www.youtube.com/watch?v=' + video_id;
+              var item = {
+                id: count,
+                title: title,
+                video_id: video_id,
+                urls: urls,
+                categori: product.title,
+              };
+              count++;
+              video.push(item);
             }
-            var item = {
-              id: count,
-              title: title,
-              video_id: video_id,
-              urls: urls,
-              categori: product.title,
-            };
-            count++;
-            video.push(item);
-          }
+            res.render('category/productsDetail', {
+              product: product,
+              comments: comments,
+              videos: video,
+              items: mitem,
+            });
+          });
+        } else {
+          //console.log(item[0]);
           res.render('category/productsDetail', {
             product: product,
             comments: comments,
             videos: video,
+            items: mitem,
           });
-        });
-      } else {
-        res.render('category/productsDetail', {
-          product: product,
-          comments: comments,
-          videos: video,
-        });
-      }
+        }
+      });
     });
   });
 });

@@ -3,6 +3,24 @@
         <div class="panel-heading">
             <%=product.title%>
         </div>
+        <div style="padding-bottom: 10px">
+            작성일 :
+            <%=product.getDate.year%> -
+                <%=product.getDate.month%> -
+                    <%=product.getDate.day%>
+        </div>
+        <div>
+            <% var count=0; %>
+                보유중인 영상
+                <% for (var i in items[0]) { %>
+                    <div>
+                        <%=items[0][i]%>
+                    </div>
+                    <%count++;};%>
+        </div>
+        <div>
+            설명 : <%=product.description%>
+        </div>
         <form method="get" action="">
             <div class="input-group">
                 <input type="text" class="form-control" placeholder="검색 키워드를 입력하세요!" name="keyword" autocomplete='off'>
@@ -30,18 +48,6 @@
                 <button class="btn btn-primary" style="margin-top: 10px; margin-left: 15px;" >영상담기</button>
         </form>
         <div class="panel-body">
-            <div style="padding-bottom: 10px">
-                작성일 : 
-                <%=product.getDate.year%> - 
-                <%=product.getDate.month%> - 
-                <%=product.getDate.day%>
-            </div>
-            <% if(product.thumbnail){%>
-                <p>
-                    <img src="/uploads/<%=product.thumbnail%>" style="max-width: 100%"/>
-                </p>
-            <% } %>
-            <%=product.description%>
             <!-- 댓글영역  -->
             <div>
                 댓글작성하기

 <% include ./includes/header.ejs %>
     <div id="masonry_container">
-        한식
-        <% for (var i in videos) { %>
-            <div id="<%=videos[i].id%>" vid="<%=videos[i].video_id%>">
+        <% var count = 0; %>
+        <% for (var i in video) { %>
+            <div>
+                <%=video[i].category.title%>
             </div>
-        <%};%>
+            <% for (var j in video[i].videos) { %>
+            <div id="<%=count%>" vid="<%=video[i].videos[j].video_id%>">
+            </div>
+            <%count++;};};%>
     </div>
-    
-<style type="text/css">
-.masonry-grid img { max-width: 260px; }
-</style>
-<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
-<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.1/imagesloaded.pkgd.min.js"></script>
-<script type="text/javascript">
-    var $masonry_container = $('#masonry_container');
-    $masonry_container.imagesLoaded(function(){
-      $masonry_container.masonry({
-        itemSelector : '.masonry-grid',
-        columnWidth : 270
-      });
-    });
-</script>
-<script>
-    var tag = document.createElement('script');
 
-    tag.src = "https://www.youtube.com/iframe_api";
-    var firstScriptTag = document.getElementsByTagName('script')[0];
-    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+    <style type="text/css">
+        .masonry-grid img {
+            max-width: 260px;
+        }
+    </style>
+    <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
+    <script type="text/javascript"
+        src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.1/imagesloaded.pkgd.min.js"></script>
+    <script type="text/javascript">
+        var $masonry_container = $('#masonry_container');
+        $masonry_container.imagesLoaded(function () {
+            $masonry_container.masonry({
+                itemSelector: '.masonry-grid',
+                columnWidth: 270
+            });
+        });
+    </script>
+    <script>
+        var tag = document.createElement('script');
 
-    var player;
-    var players = [];
-    var videoIds = [];
-    for (var i = 0;i<10;i++) {
-        players.push(String(i));
-        videoIds.push($('#'+i).attr('vid'));
-    }
+        tag.src = "https://www.youtube.com/iframe_api";
+        var firstScriptTag = document.getElementsByTagName('script')[0];
+        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+        var player;
+        var players = [];
+        var videoIds = [];
+        for (var i = 0; i < 30; i++) {
+            players.push(String(i));
+            videoIds.push($('#' + players[i]).attr('vid'));
+        }
 
-    function onYouTubeIframeAPIReady() {
-        for (var i = 0; i < videoIds.length; i++) {
-            player = new YT.Player(players[i], {
-                height: '360',
-                width: '640',
-                videoId: videoIds[i],
-                events: {
-                    // 'onReady': onPlayerReady,
-                    // 'onStateChange': onPlayerStateChange
-                }
-            });
+        function onYouTubeIframeAPIReady() {
+            for (var i = 0; i < videoIds.length; i++) {
+                player = new YT.Player(players[i], {
+                    height: '360',
+                    width: '640',
+                    videoId: videoIds[i],
+                    events: {
+                        // 'onReady': onPlayerReady,
+                        // 'onStateChange': onPlayerStateChange
+                    }
+                });
+            }
         }
-    }
 
     //   function onPlayerReady(event) {
     //   }
@@ -56,5 +62,5 @@
     //   }
     //   function stopVideo() {
     //   }
-</script>
-<% include ./includes/footer.ejs %>
\ No newline at end of file
+    </script>
+    <% include ./includes/footer.ejs %>
\ No newline at end of file

@@ -30,7 +30,7 @@
                 </div> 
                 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-9">
                     <ul class="nav navbar-nav">
-                        <li class="active">
+                        <li>
                             <a href="/">Home</a>
                         </li>
                         <li><a href="/categori/products">Categori</a></li>