projectshft · brbledsoe · Feb 3, 2022 · Feb 3, 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,47 @@
+var VideosCollection = Backbone.Collection.extend({
+    url: "https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=5&q=cats&type=video&videoEmbeddable=true&key=AIzaSyAcShyrxv_vlY9gIpLpbT9e_RvS3-tj7Dc",
+
+    model: VideoModel, 
+
+    parse: function(response){
+        var videos = response.items;
+
+        return videos.map(function(v){
+            return {
+                id: v.id.videoId,
+                title: v.snippet.title,
+                description: v.snippet.description,
+                thumbnails: {
+                    default:{
+                        url: v.snippet.thumbnails.default.url,
+                        height:v.snippet.thumbnails.default.height,
+                        width:v.snippet.thumbnails.default.width 
+                    },
+                    medium:{
+                        url: v.snippet.thumbnails.medium.url,
+                        height:v.snippet.thumbnails.medium.height,
+                        width:v.snippet.thumbnails.medium.width 
+                    },
+                    high:{
+                        url: v.snippet.thumbnails.high.url,
+                        height:v.snippet.thumbnails.high.height,
+                        width:v.snippet.thumbnails.high.width 
+                    }
+                } 
+            }
+        })
+    },
+
+    searchForVideos: function (searchQuery){
+        this.updateUrl(searchQuery);
+
+        this.fetch({ reset: true });
+    }, 
+
+    updateUrl: function(query){
+      var newUrl = `https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=5&q=${query}&type=video&videoEmbeddable=true&key=AIzaSyAcShyrxv_vlY9gIpLpbT9e_RvS3-tj7Dc`
+
+      this.url = newUrl;
+    }
+
+})
diff --git a/index.html b/index.html
@@ -0,0 +1,93 @@
+<!-- <!DOCTYPE html> -->
+<html>
+  <head>
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="node_modules/bootstrap/dist/css/bootstrap.css"
+    />
+    <link
+      rel="stylesheet"
+      href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"
+    />
+
+    <link rel="stylesheet" type="text/css" 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>Backbone Youtube</title>
+  </head>
+  <body>
+    <div class="container">
+      <div class="row">
+        <div class="col-md-8 offset-md-2">
+          <div class="header text-center">
+            <h1></i> Backbone Youtube</h1>
+          </div>
+           <hr>
+          <div class="search-container row">
+
+            <div class="form-group col-6 offset-2">
+              <input
+                type="text"
+                class="search-bar form-control col"
+                id="img-input"
+                placeholder="Please enter search term here"
+              />
+            </div>
+
+            <button class="btn btn-primary search-video col-2">Search</button>
+          </div>
+        </div>
+
+        <div class="col-md-8 offset-2 mt-5">
+            <div class="row">
+                <!-- Main Video -->
+                <div class="main-video col-7"></div>
+
+                <!-- Video List -->
+                <div class="video-list col-5">
+
+                </div>
+            </div>
+        </div>
+      </div>
+    </div>
+
+    <script id="main-video" type="text/x-handlebars-template">
+        <div class="col-12 main-video-wrap">
+            <iframe 
+            class="main-video-iframe"
+            src="https://www.youtube.com/embed/{{id}}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+        </div>
+
+        <hr>
+        <h5>{{title}}</h5>
+        <p>{{description}}</p>
+    </script>
+
+    <script id="video-list-item" type="text/x-handlebars-template">
+        <div class="row">
+            <div class="col-5">
+                <img src="{{thumbnails.default.url}}" alt="" srcset="">
+            </div>
+            <div class="col-7">
+                <p 
+                class="item-title">
+                    {{title}}
+                </p>
+            </div>
+        </div>
+        <hr>
+    </script>
+
+    <script src="models/VideoModel.js"></script>
+    <script src="collections/VideosCollection.js"></script>
+    <script src="models/AppModel.js"></script>
+    <script src="views/AppView.js"></script>
+    <script src="views/VideoListItemView.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,3 @@
+var appModel = new AppModel();
+
+var appView = new AppView({ model: appModel });
diff --git a/models/AppModel.js b/models/AppModel.js
@@ -0,0 +1,31 @@
+var AppModel = Backbone.Model.extend({
+    defaults: function(){
+        return {
+            videos: new VideosCollection(),
+            main_video: undefined
+        }
+    },
+
+    initialize: function(){
+        this.listenTo(this.get('videos'), 'reset', this.setMainVideo)
+    },
+
+    setMainVideo: function(){
+        var mainVideo = this.get('videos').models[0].attributes;
+
+        this.set('main_video', mainVideo);
+    },
+
+    updateMainVideo: function(id){
+        if(id){
+            var allVideos = this.get('videos');
+
+            var newMainVideo = allVideos.findWhere({ id: id });
+
+            this.set('main_video', newMainVideo.attributes);
+        }else{
+            var firstVideo = this.get('videos').models[0];
+        } 
+    }
+
+})
diff --git a/models/VideoModel.js b/models/VideoModel.js
@@ -0,0 +1,9 @@
+var VideoModel = Backbone.Model.extend({
+    defaults: function(){
+        return {
+            id: null,
+            title: "",
+            description: ""
+        }
+    }
+})
diff --git a/node_modules/.bin/handlebars b/node_modules/.bin/handlebars
diff --git a/node_modules/.bin/uglifyjs b/node_modules/.bin/uglifyjs
diff --git a/node_modules/.package-lock.json b/node_modules/.package-lock.json
diff --git a/node_modules/@popperjs/core/LICENSE.md b/node_modules/@popperjs/core/LICENSE.md
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		var appModel = new AppModel();

		var appView = new AppView({ model: appModel });