projectshft · AlexRodgers11 · Mar 31, 2022 · Apr 1, 2022 · Apr 2, 2022
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/collections/VideosCollection.js b/collections/VideosCollection.js
@@ -0,0 +1,17 @@
+let VideosCollection = Backbone.Collection.extend({
+    model: VideoModel,
+
+    parse: function(response) {
+        let configuredResponse = response.items.map(function(vid) {
+            return {
+                id: vid.id.videoId,
+                video_url: 'https://www.youtube.com/embed/' + vid.id.videoId,
+                thumbnail_url: vid.snippet.thumbnails.default.url,
+                title: vid.snippet.title,
+                description: vid.snippet.description
+            }
+        })
+
+        return configuredResponse;
+    }
+});
diff --git a/index.html b/index.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="node_modules/bootstrap/dist/css/bootstrap.css"
+    />
+    <link rel="stylesheet" type="text/css" href="style.css" />
+    <title>Backbone Youtube</title>
+  </head>
+  <body>
+    <div class="container">
+      <div class="row">
+        <div class="col-xs-8 offset-xl-2">
+          <div class="header">
+            <h1>Project Youtube</h1>
+            <hr />
+          </div>
+        </div>
+      </div>
+      <div class="container search-container">
+        <div class="row">
+          <div class="col-xs-4 offset-xs-4">
+            <input
+              id="search-bar"
+              type="text"
+              class="form-control"
+              placeholder="Please enter search term here"
+            />
+          </div>
+          <div class="col-xs-4">
+            <button id="search" class="btn btn-primary">Search</button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="container">
+      <div class="row">
+        <div class="col-xs-6">
+          <div class="selected-video fitted"></div>
+        </div>
+        <div class="col-xs-4">
+          <div class="video-options fitted"></div>
+        </div>
+      </div>
+    </div>
+    <script id="selected-video-template" type="text/x-handlebars-template">
+      <div class="container fitted">
+        <iframe
+          width="560"
+          height="315"
+          src="{{video_url}}"
+          title="YouTube video player"
+          frameborder="0"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowfullscreen
+        ></iframe>
+        <hr />
+        <h3>{{title}}</h3>
+        <p>{{description}}</p>
+      </div>
+    </script>
+    <script id="video-option-template" type="text/x-handlebars-template">
+      <div data-id="{{id}}" class="container video-option fitted">
+        <img data-id="{{id}}" class="video-option" src="{{thumbnail_url}}" />
+        <span data-id="{{id}}" class="video-option">{{title}}</span>
+        <p>{{description}}</p>
+        <hr />
+      </div>
+    </script>
+    <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>
+    <script src="models/VideoModel.js"></script>
+    <script src="collections/VideosCollection.js"></script>
+    <script src="models/AppModel.js"></script>
+    <script src="views/VideoOptionView.js"></script>
+    <script src="views/SelectedVideoView.js"></script>
+    <script src="views/AppView.js"></script>
+    <script src="main.js"></script>
+    <script
+      src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
+      integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
+      crossorigin="anonymous"
+    ></script>
+  </body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,6 @@
+let appModel = new AppModel();
+
+let appView = new AppView({model: appModel});
+
+appModel.get('videos').fetch({reset: true});
+appModel.set('selectedVideo', appModel.get('videos').models[0]);
diff --git a/models/AppModel.js b/models/AppModel.js
@@ -0,0 +1,207 @@
+// 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"
+//         }
+//       }
+//     ]
+//   }
+
+let API_KEY = 'AIzaSyCHd0mgg00maYbK6w6fRP8iIBfqK6Jsmn4';
+
+let AppModel = Backbone.Model.extend({
+    defaults: function() {
+        let videosCollection = new VideosCollection();
+        videosCollection.url = `https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=5&q=taskmaster&type=video&videoEmbeddable=true&key=${API_KEY}`;
+        videosCollection.fetch();
+        return {
+            selectedVideo: videosCollection.models[0],
+            videos: videosCollection
+        }
+    },
+
+    setSelectedVideo: function(id) {
+        let allVideos = this.get('videos');
+        console.log(allVideos);
+        let selectedVideo = allVideos.findWhere({id: id});
+        console.log(selectedVideo);
+        console.log('setting selected video id');
+        this.set('selectedVideo', selectedVideo);
+    },
+
+
+});
diff --git a/models/VideoModel.js b/models/VideoModel.js
@@ -0,0 +1,9 @@
+let VideoModel = Backbone.Model.extend({
+    defaults: {
+        id: '',
+        video_url: '',
+        thumbnail_url: '',
+        title: '',
+        description: ''
+    }
+});