app.js.coffee

window.App = angular.module('desidancevids',[
  'templates',
  'ui.router',
  'ngResource',
  'ui.bootstrap'
])

App.config ["$httpProvider", ($httpProvider) ->
  # Inject the CSRF token
  $httpProvider.defaults.headers.common['X-CSRF-Token'] = document.getElementsByName("csrf-token")[0].content
  # By default, angular sends "application/json, text/plain, */*" which rails
  # sees and focuses on the */* and sends html :-(
  $httpProvider.defaults.headers.common['Accept'] = "application/json"
]

App.config(['$stateProvider', '$urlRouterProvider', '$locationProvider',
  ($stateProvider, $urlRouterProvider, $locationProvider, $stateParams) ->
    $stateProvider
      .state('videos', {
        templateUrl: 'index.html',
      })
      .state('videos-home', {
        url: '/',
        templateUrl: 'video-list.html',
        parent: 'videos'
        controller: 'VideosController'
      })
      .state('videos-search', {
        url: '/search?terms',
        templateUrl: 'video-list.html',
        parent: 'videos'
        controller: 'VideosController'
      })
      .state('videos-new', {
        url: '/new',
        templateUrl: 'video-form.html',
        parent: 'videos'
        controller: 'VideosNewController'
      })

    $urlRouterProvider.otherwise('/');

    # Let's us use non # urls (/#/test vs /test)
    $locationProvider.html5Mode({
      enabled: true,
      requireBase: false
    })
])

App.factory 'Video', ['$resource', ($resource) ->

  allVideos = () ->
    $resource('/videos.json').query()

  search = (terms) ->
    $resource('/videos/search/:search_terms').query({search_terms: terms})

  create = (args) ->
    $resource('/videos.json').save(args)

  return {
    all: allVideos,
    search: search,
    create: create
  }
]

App.controller("VideosController", [ '$scope', '$state', '$location', 'Video', '$stateParams',
  ($scope, $state, $location, Video, $stateParams) ->

    $scope.search = (searchTerms) ->
      console.log('test')
      search_result = Video.search(searchTerms)
      search_result.$promise.then (videos) ->
        $scope.videos = videos
        # if searchTerms
        #   unless $scope.videos == videos
        #     $scope.videos = videos
        # else
        #   $scope.videos = Video.all()

    $scope.submitSearch = (searchTerms) ->
      if searchTerms
        $state.go('videos-search', {terms: searchTerms})
      else
        $state.go('videos-home')
    
    if $stateParams.terms
      $scope.searchTerms = $stateParams.terms
      $scope.search($stateParams.terms)
    else
      $scope.videos = Video.all()
])

App.controller("VideosNewController", [ '$scope', '$state', '$location', 'Video', '$stateParams', '$http'
  ($scope, $state, $location, Video, $stateParams, $http) ->

    $scope.youtubeRegex = /^http:\/\/(?:www\.)?youtube.com\/watch\?(?=.*v=\w+)(?:\S+)?$/

    $scope.createVideo = ->
      Video.create($scope.video).$promise.then(video) ->
        if (video.status != "no_content")
          console.log('ye')

    $scope.getSuggestions = (element, query) ->
      return $http.get('/videos/autocomplete.json', {
        params: {
          query: query,
          element: element
        }
      }).then (response) ->
        return response.data.suggestions

    # For the automatically updating tags
    $scope.$watch 'video.tag_list', ((newVal, oldVal) ->
      if !newVal
        return

      # The one liner first splits tags up using commas as a delimeter, and then remove all empty tags
      $scope.tags = newVal.split(',').map((e) -> e.trim()).filter((e) -> e != "")
    ), true

    # For the new page, to update the thumbnail
    $scope.$watch 'video.video_url', (newVal, oldVal) ->
      if (!newVal) 
        return
      
      matched = newVal.match(/^(?:https?:\/\/)?(?:www\.)?youtube\.com\/watch\?(?=.*v=((\w|-){11}))(?:\S+)?$/)
      if (!matched)
        return
      
      youtubeId = matched[1]
      $scope.video.thumbnail = "http://img.youtube.com/vi/#{youtubeId}/0.jpg"

])

index.html

<div>
  <div class="full-width search">
    <div class="container">
      <form ng-submit="submitSearch(searchTerms)">
        <input type="text" ng-model="searchTerms" ng-change="search(searchTerms)"/>
        <a href="" class="glyphicon glyphicon-search submit button" ui-sref="videos-search({terms: searchTerms })"></a>
        <a href="" class="glyphicon glyphicon-plus add-filter button" ui-sref="videos-new"></a>
      </form>
    </div>
  </div>

  <div class="container" ui-view>
    
  </div>
</div>

video-list.html

<div class="row cards video-list">
  
  <div class="message" ng-hide="videos.length">
    <p>No videos</p>
    <p>Try searching for something else</p>
  </div>

  <a ng-href="{{video.video_url}}" class="col-md-4 card-wrapper" ng-repeat="video in videos" ng-show="videos">
    <div class="card" style="background: url('{{video.thumbnail}}') center;">
      <div class="info-wrapper">
        <span class="info">
          {{video.team}}
        </span>
        <span class="info event">
          {{video.event}} {{video.season}}
        </span>
      </div>
    </div>
  </a>
</div>

videos_controller.js

App.controller("VideosController", [
  '$scope', '$state', '$location', 'Video', '$stateParams', function($scope, $state, $location, Video, $stateParams) {
    $scope.search = function(searchTerms) {
      var search_result;
      search_result = Video.search(searchTerms);
      search_result.$promise.then(function(videos) {
        $scope.videos = videos;
      });
    };
  }
]);