projectshft · zdresser · Aug 8, 2021 · Aug 9, 2021 · Aug 9, 2021 · Aug 9, 2021
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/collections/VideoCollection.js b/collections/VideoCollection.js
@@ -0,0 +1,19 @@
+var key = 'AIzaSyAPYWVgR_Q5sELYDsNvyPsUWdZnjZIrBRM';
+var VideoCollection = Backbone.Collection.extend({
+  model: VideoModel,
+
+  url: 'https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=5&type=video&videoEmbeddable=true&key=' + key,
+
+ parse: function(response) {
+   return response.items.map(function (video){
+     return {
+      id: video.id.videoId,
+      title: video.snippet.title,
+      text: video.snippet.description,
+      thumb: video.snippet.thumbnails.default.url
+     }
+   })
+ }
+
+
+});
diff --git a/index.html b/index.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="node_modules/bootstrap/dist/css/bootstrap.css"
+    />
+    <link rel="stylesheet" href="style.css" />
+    <script src="node_modules/jquery/dist/jquery.min.js"></script>
+    <script src="node_modules/underscore/underscore-min.js"></script>
+    <script src="node_modules/backbone/backbone-min.js"></script>
+    <script src="node_modules/handlebars/dist/handlebars.min.js"></script>
+    <title>Project Youtube</title>
+  </head>
+  <body>
+    <div class="container-fluid">
+      <div class="row align-items-end">
+        <div class="col-md-6 offset-md-3">
+        <div class="page-header">
+          <h1>Project YouTube</h1>
+          <hr/>
+        </div>
+        <div class="input-group">
+          <input type="text" id="search-query" class="form-control rounded" placeholder="Enter Search Term">
+        </input>
+        <button type="button" class="btn btn-primary search">
+          <span>Search</span>
+        </button>
+        </div>
+        <div class="current-video col-lg-10"></div>
+        <div class="videos row"></div>
+        </div>
+      </div>
+    </div>
+    <script id="video-template" type="text/x-handlebars-template">
+      <div class="img-container">
+        <a class="view-video" href="#" data-id={{id}}>
+          <img src="{{thumb}}">
+          <p><strong>{{title}}</strong></p>
+          <p>{{text}}</p>
+        </a>
+      </div>
+    </script>
+    <script id="main-video-template" type="text/x-handlebars-template">
+      <div class="container-fluid">
+        <div class="embed-responsive embed-responsive-16by9">
+          <iframe class="embed-responsive-item large-vid" src="https://www.youtube.com/embed/{{id}}" allowfullscreen></iframe>          
+          <h4>{{title}}</h4>
+          <p>{{text}}</p>
+        </div>
+      </div>
+    </script>
+
+    <script src="models/VideoModel.js"></script>
+    <script src="collections/VideoCollection.js"></script>
+    <script src="models/AppModel.js"></script>
+    <script src="views/AppView.js"></script>
+    <script src="views/VideoView.js"></script>
+    <script src="views/MainVideoView.js"></script>
+    <script src="main.js"></script>
+  </body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,187 @@
+
+var sampleData = {
+  "kind": "youtube#searchListResponse",
+  "etag": "jrLgj0XGHegO7nztkfHkqGu_dmo",
+  "nextPageToken": "CAUQAA",
+  "regionCode": "US",
+  "pageInfo": {
+    "totalResults": 1000000,
+    "resultsPerPage": 5
+  },
+  "items": [
+    {
+      "kind": "youtube#searchResult",
+      "etag": "BJ_pZJtlXOdlNB7-r4tAl81I3C4",
+      "id": {
+        "kind": "youtube#video",
+        "videoId": "L5dM6NdZXd4"
+      },
+      "snippet": {
+        "publishedAt": "2021-01-17T16:00:09Z",
+        "channelId": "UCBvnS6nyNGAl8EUNt-40xoQ",
+        "title": "Josh Bridges 2021 CrossFit Open Prep + Dave Castro Gets Called Out | Paying the Man Ep.083",
+        "description": "The CrossFit season is just around the corner so I show you how I am preparing for the 2021 CrossFit Open. I also call out Dave Castro, to get him and I in a ring, ...",
+        "thumbnails": {
+          "default": {
+            "url": "https://i.ytimg.com/vi/L5dM6NdZXd4/default.jpg",
+            "width": 120,
+            "height": 90
+          },
+          "medium": {
+            "url": "https://i.ytimg.com/vi/L5dM6NdZXd4/mqdefault.jpg",
+            "width": 320,
+            "height": 180
+          },
+          "high": {
+            "url": "https://i.ytimg.com/vi/L5dM6NdZXd4/hqdefault.jpg",
+            "width": 480,
+            "height": 360
+          }
+        },
+        "channelTitle": "Josh Bridges",
+        "liveBroadcastContent": "none",
+        "publishTime": "2021-01-17T16:00:09Z"
+      }
+    },
+    {
+      "kind": "youtube#searchResult",
+      "etag": "JFhM06PZ2Ck-Tu0ZALY18QhBKog",
+      "id": {
+        "kind": "youtube#video",
+        "videoId": "vcDsh9Sjm18"
+      },
+      "snippet": {
+        "publishedAt": "2020-10-23T16:43:38Z",
+        "channelId": "UCRs1pHnES3QDdh43xbjOmzw",
+        "title": "Event 1 &amp; 2 - 2007 Reload and Corn Sack Sprint - 2020 CrossFit Games",
+        "description": "The hardest test in CrossFit Games history begins here. Five men. Five women. Three days of grueling competition. Grab snacks. #CrossFitGames The CrossFit ...",
+        "thumbnails": {
+          "default": {
+            "url": "https://i.ytimg.com/vi/vcDsh9Sjm18/default.jpg",
+            "width": 120,
+            "height": 90
+          },
+          "medium": {
+            "url": "https://i.ytimg.com/vi/vcDsh9Sjm18/mqdefault.jpg",
+            "width": 320,
+            "height": 180
+          },
+          "high": {
+            "url": "https://i.ytimg.com/vi/vcDsh9Sjm18/hqdefault.jpg",
+            "width": 480,
+            "height": 360
+          }
+        },
+        "channelTitle": "CrossFit Games",
+        "liveBroadcastContent": "none",
+        "publishTime": "2020-10-23T16:43:38Z"
+      }
+    },
+    {
+      "kind": "youtube#searchResult",
+      "etag": "gW7BE77piDCVb3uIFDXHGyK1BNA",
+      "id": {
+        "kind": "youtube#video",
+        "videoId": "tzD9BkXGJ1M"
+      },
+      "snippet": {
+        "publishedAt": "2010-07-23T15:09:19Z",
+        "channelId": "UCtcQ6TPwXAYgZ1Mcl3M1vng",
+        "title": "What is CrossFit?",
+        "description": "What is CrossFit? CrossFit is an effective way to get fit. Anyone can do it. It is a fitness program that combines a wide variety of functional movements into a timed ...",
+        "thumbnails": {
+          "default": {
+            "url": "https://i.ytimg.com/vi/tzD9BkXGJ1M/default.jpg",
+            "width": 120,
+            "height": 90
+          },
+          "medium": {
+            "url": "https://i.ytimg.com/vi/tzD9BkXGJ1M/mqdefault.jpg",
+            "width": 320,
+            "height": 180
+          },
+          "high": {
+            "url": "https://i.ytimg.com/vi/tzD9BkXGJ1M/hqdefault.jpg",
+            "width": 480,
+            "height": 360
+          }
+        },
+        "channelTitle": "CrossFit®",
+        "liveBroadcastContent": "none",
+        "publishTime": "2010-07-23T15:09:19Z"
+      }
+    },
+    {
+      "kind": "youtube#searchResult",
+      "etag": "8KgGsXPicxGt8j-2-OuRhutT9s4",
+      "id": {
+        "kind": "youtube#video",
+        "videoId": "860T3WYvyoc"
+      },
+      "snippet": {
+        "publishedAt": "2020-10-23T20:16:34Z",
+        "channelId": "UCRs1pHnES3QDdh43xbjOmzw",
+        "title": "Event 3 - CrossFit Total - 2020 CrossFit Games",
+        "description": "The wait is finally over. Watch the three-day finale of the 2020 CrossFit Games right here. Buckle up for an unforgettable weekend. Every event of the final stage ...",
+        "thumbnails": {
+          "default": {
+            "url": "https://i.ytimg.com/vi/860T3WYvyoc/default.jpg",
+            "width": 120,
+            "height": 90
+          },
+          "medium": {
+            "url": "https://i.ytimg.com/vi/860T3WYvyoc/mqdefault.jpg",
+            "width": 320,
+            "height": 180
+          },
+          "high": {
+            "url": "https://i.ytimg.com/vi/860T3WYvyoc/hqdefault.jpg",
+            "width": 480,
+            "height": 360
+          }
+        },
+        "channelTitle": "CrossFit Games",
+        "liveBroadcastContent": "none",
+        "publishTime": "2020-10-23T20:16:34Z"
+      }
+    },
+    {
+      "kind": "youtube#searchResult",
+      "etag": "a53xv9Yh4o643yVpPbDCpFyCZIM",
+      "id": {
+        "kind": "youtube#video",
+        "videoId": "JZpVUNiSg5s"
+      },
+      "snippet": {
+        "publishedAt": "2020-12-28T18:09:41Z",
+        "channelId": "UCEQi1ZNJiw3YMRwni0OLsTQ",
+        "title": "I TRIED CROSSFIT FOR THE FIRST TIME",
+        "description": "Trying a crossfit workout for the first time with the @Buttery Bros BUTTERY BROS https://www.youtube.com/channel/UCp00ppkfPFBUTiiNNd8kS9Q BUTTERY ...",
+        "thumbnails": {
+          "default": {
+            "url": "https://i.ytimg.com/vi/JZpVUNiSg5s/default.jpg",
+            "width": 120,
+            "height": 90
+          },
+          "medium": {
+            "url": "https://i.ytimg.com/vi/JZpVUNiSg5s/mqdefault.jpg",
+            "width": 320,
+            "height": 180
+          },
+          "high": {
+            "url": "https://i.ytimg.com/vi/JZpVUNiSg5s/hqdefault.jpg",
+            "width": 480,
+            "height": 360
+          }
+        },
+        "channelTitle": "Whitney Simmons",
+        "liveBroadcastContent": "none",
+        "publishTime": "2020-12-28T18:09:41Z"
+      }
+    }
+  ]
+}
+
+var appModel = new AppModel();
+
+var appView = new AppView({ model: appModel });
diff --git a/models/AppModel.js b/models/AppModel.js
@@ -0,0 +1,16 @@
+var AppModel = Backbone.Model.extend({
+  defaults: function() {
+    return {
+      videos: new VideoCollection(),
+      current_video: null,
+    };
+  },
+
+  updateCurrentVideo: function(clickedVidId) {
+    var allVids = this.get('videos');
+
+    var currentVideo = allVids.findWhere({id: clickedVidId});
+
+    this.set('current_video', currentVideo);
+  }
+});
diff --git a/models/VideoModel.js b/models/VideoModel.js
@@ -0,0 +1,11 @@
+var VideoModel = Backbone.Model.extend({  
+
+  defaults: {
+    id: null,
+    title: '',
+    text: '',
+    thumb: '',
+  }, 
+
+  urlRoot: "https://www.youtube.com/embed/"
+})
diff --git a/package-lock.json b/package-lock.json