start work on #77 and #41

app/index.html

@@ -59,6 +59,8 @@ <h3>Javascript is deactivated. You must <a href="http://www.activatejavascript.o
 
     <div id="root" class="ng-cloak">
 
+        <div ui-view="modal" class="view-change-animation"></div>
+
         <navbar-component></navbar-component>
 
         <div ui-view class="view-change-animation"></div>
@@ -113,7 +115,6 @@ <h3>Javascript is deactivated. You must <a href="http://www.activatejavascript.o
     <script src="components/navbar-mini-player/navbar-mini-player.js"></script>
     <script src="components/navbar/navbar.js"></script>
     <script src="components/navbar/panels/navigation-panel-controller.js"></script>
-    <script src="components/video-list-item/modal/video-list-item-modal.js"></script>
     <script src="components/video-list-item/video-list-item.js"></script>
     <script src="pages/admin/index/admin-controller.js"></script>
     <script src="pages/admin/users/index/users-controller.js"></script>
@@ -124,6 +125,7 @@ <h3>Javascript is deactivated. You must <a href="http://www.activatejavascript.o
     <script src="pages/favourites/index/favourites-controller.js"></script>
     <script src="pages/index/index/index.js"></script>
     <script src="pages/login/index/login-controller.js"></script>
+    <script src="pages/video/index/video-controller.js"></script>
     <script src="scripts/authentication.js"></script>
     <script src="scripts/factories/current-user.js"></script>
     <script src="scripts/factories/lodash.js"></script>

app/pages/admin/videos/index/videos-controller.js

@@ -8,7 +8,7 @@ angular.module('ndc')
             parent: 'admin'
         }));
     })
-    .controller('AdminVideosCtrl', function ($scope, VideoRepository, vimeoAPI, $modal) {
+    .controller('AdminVideosCtrl', function ($scope, VideoRepository, vimeoAPI) {
 
         $scope.existingVideos = [];
 

app/pages/index/index/index.js

@@ -9,8 +9,6 @@ angular.module('ndc')
     })
     .controller('IndexCtrl', function ($scope, CurrentUser, TagRepository, VideoRepository, $stateParams, $location, _, TagModel) {
 
-
-
         $scope.tags = []; //This variable holds selected tags
 
         $scope.User = CurrentUser;

app/pages/video/index/_video-page.scss

@@ -0,0 +1,73 @@
+.video-page  {
+
+}
+
+.modal {
+  .modal-dialog {
+    @include clearfix;
+
+    position: static;
+    top: 0;
+    width: 100%;
+    margin: 0;
+    margin-top: 70px;
+
+    .modal-body {
+      margin: 0 auto;
+    }
+
+    .close {
+      position: absolute;
+      top: -50px;
+      right: 10px;
+      font-size: 40px;
+      background: none;
+      box-shadow: none;
+      border: none;
+      color: #fff;
+    }
+
+    .modal-video {
+      // @include span-columns(6 of 10);
+
+      // @include media($tablet) {
+      @include span-columns(20 of 20);
+      // }
+    }
+
+    .modal-video-info {
+      // @include span-columns(4 of 10);
+      color: #fff;
+      padding: $content-gutter 0;
+
+      // @include media($tablet) {
+      @include span-columns(20 of 20);
+      // }
+
+      h2 {
+        margin-top: 0;
+      }
+    }
+
+    button.favorite {
+      float: left;
+      vertical-align: top;
+      margin-right: 10px;
+      margin-top: -5px;
+      background: none;
+      border: none;
+      box-shadow: none;
+      color: #fff;
+      font-size: 30px;
+      padding: 0;
+
+      i.fa-star {
+        color: $primary-color;
+      }
+    }
+  }
+}
+
+.modal-backdrop {
+  opacity: 0.8 !important;
+}

app/pages/video/index/modal.html

@@ -0,0 +1,17 @@
+<div class="modal-backdrop fade in">
+    <div class="modal-body modal-lg video-page">
+        <button type="button" class="close" ng-click="closeModal()">×</button>
+        <div class="modal-video">
+            <media-player-component ng-if="video" video="video"></media-player-component>
+        </div>
+        <div class="modal-video-info">
+            <h2>
+                {{video.title}}
+                <button class="favorite has-tooltip" data-toggle="tooltip" data-placement="bottom" title="Set favorite">
+                    <i class="fa fa-star-o"></i>
+                </button>
+            </h2>
+            <p>{{video.description}}</p>
+        </div>
+    </div>
+</div>

app/pages/video/index/video-controller.js

@@ -0,0 +1,21 @@
+'use strict';
+
+angular.module('ndc')
+    .config(function ($stateProvider, stateFactory) {
+        $stateProvider.state('videoDetails', stateFactory('Video', {
+            url: '/video/{id}',
+            views: {
+                'modal@': {
+                    templateUrl: 'pages/video/index/modal.html',
+                    controller: 'VideoCtrl'
+                }
+            }
+        }));
+    })
+    .controller('VideoCtrl', function ($scope, $stateParams, VideoRepository) {
+
+        VideoRepository.getById($stateParams.id).then(function (video) {
+            $scope.video = video;
+        });
+
+    });

app/styles/_components.scss

@@ -1,9 +1,7 @@
 // TODO: Shoudn't need to include config and neat-helpers here - inheritance bug?
 @import 'config';
 @import 'neat/app/assets/stylesheets/neat-helpers';
-
 @import '../components/navbar/navbar';
 @import '../components/media-player/media-player';
 @import '../components/video-list-item/video-list-item';
-@import '../components/video-list-item/modal/video-list-item-modal';
 @import '../components/navbar-mini-player/navbar-mini-player';

app/styles/_pages.scss

@@ -7,4 +7,5 @@
 @import '../pages/admin/users/index/users-page';
 @import '../pages/admin/videos/index/videos-page';
 @import '../pages/admin/videos/import/index/import-page';
-@import '../pages/admin/videos/import/index/import-page';
+@import '../pages/admin/videos/import/index/import-page';
+@import '../pages/video/index/video-page';

test/unit/spec/pages/video/index/video-controller.js

@@ -0,0 +1,23 @@
+'use strict';
+
+describe('Controller(/video): VideoCtrl', function () {
+
+    var VideoCtrl, scope;
+
+    beforeEach(function () {
+
+        module('ndc');
+
+        inject(function ($controller, $rootScope) {
+            scope = $rootScope.$new();
+            VideoCtrl = $controller('VideoCtrl', {
+                $scope: scope,
+                init: 'video'
+            });
+        });
+    });
+
+    it('should attach init data to scope', function () {
+        expect(scope.video).toEqual('video');
+    });
+});