0

I am writing a practice app in AngularJS where I am listing few youtube images and on click I am trying to play them in a Bootstrap Modal Dialog using the Sublime Youtube Video API. However, I am facing the below issues:

  1. Unless I use the $scope.apply() - when I click different youtube images, the change in the selection is not reflected and picked up by the jquery based sublime api, because sublime is trying to retrieve youtube videos before the AngularJS $scope values are updated.

    So, to resolve this I tried adding $scope.apply(). But if I am doing this, I am getting "Error: [$rootScope:inprog] $apply already in progress" in the console log.

    I think this is in some way related to the query asked here, where the discussion is about combining third party plugins with AngularJS and acting after the $scope changes are applied... However, being a novice in AngularJS I am finding it hard to figure out how to re-engineer my code! Could anyone guide where I am going wrong? or how I could go about rewriting the code?

  2. The first click on any of the images does NOT play anything. The subsequent clicks work fine. Trying to debug why this is...

Here is the code: (Since I am using sublime api for playing videos, I am not able to create a JS Fiddle for demo purposes - I am sorry)

Controller:

myApp.controller("PlayerCtrl",
  function PlayerCtrl($scope,$log,$sce,trailers)
  {
     $scope.videos = trailers;

     $scope.selectedVideo = {
        ytId: "",
        imgSrc:"",
        width:"320",
        height:"300",
        title:"",
        lang: "",
        relDate: "",
        rating: ""
      };

     $scope.openVideo = function(video){

      $scope.selectedVideo = video;
      $scope.$apply();

      sublime.ready(function(){ // jquery based sublime video api
        console.log("Video Selected = " + JSON.stringify(video));
        $("#tfModal").modal({}); // invoking bootstrap modal
        $('#tfModal').on('shown.bs.modal', function (e) {
          console.log('preparing...');
          sublime.prepare('tfVideo', function(player) {
            player.play();
          });
        })
        $('#tfModal').on('hidden.bs.modal', function (e) {
          console.log('un preparing...');
          sublime.unprepare('tfVideo');
        })
      });

    };
  }
);

Directives:

myApp.directive("trailerList", function(){
  var htmlTemplate = "<div class='col-md-4 col-sm-6 col-xs-12'>" +
    " <div class='row top-buffer'>" +
    " </div>" +
    "<div style='position:relative;'>" +
    "  <div class='fader'>" +
    "    <a href='#' ng-click='onClick(video)'>" +
    "      <img width='{{video.width}}' height='{{video.height}}' alt='{{video.title}}' style='position: relative; z-index: 1;' src='{{video.imgSrc}}'/>" +
    "      <img src='images/play.png' style='position: absolute;left:40%; top:40%;z-index: 10;'/>" +
    "    </a>" +
    "  </div>" +
    "</div>";

  return {
    restrct: 'AE',
    scope: {
      video : "=",
      onClick : "&"
    },
    template: htmlTemplate
  };
});

myApp.directive("modalLayer", function(){
  var htmlTemplate =
  "<!-- Modal -->" +
    "<div class='modal fade' id='tfModal' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>" +
    "  <div class='modal-dialog modal-dialog-center'>" +
    "    <div class='modal-content'>" +
    "        <div class='modal-header'>" +
    "          <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>" +
    "            &times;" +
    "          </button>" +
    "          <blockquote>" +
    "              <h4 class='modal-title' id='myModalLabel'>{{video.title}}</h4>" +
    "          </blockquote>" +
    "        </div>" +
    "        <div class='modal-body'>" +
    "          <p class='text-primary text-center'>{{title}}</p>" +
    "          <video id='tfVideo' data-youtube-id={{video.ytId}} height={{video.height}} width={{video.width}} title={{video.title}} preload='none'></video>" +
    "        </div>" +
    "        <div class='modal-footer'>" +
    "        </div>" +
    "    </div><!-- /.modal-content -->" +
    "  </div><!-- /.modal-dialog -->" +
    "</div><!-- /.modal -->"
  "</div>";

  return {
    restrct: 'E',
    scope: {
      video : "=",
    },
    template: htmlTemplate
  };
});

Factory:

myApp.factory('trailers',function(){
  var trailers = [
      {
        ytId: "6kw1UVovByw",
        imgSrc:"http://img.youtube.com/vi/6kw1UVovByw/0.jpg",
        width:"320",
        height:"300",
        title:"My Custom Title 1",
        lang: "English",
        relDate: "2013/17/11",
        rating: "3.5"
      },
      {
        ytId: "uWgDVz4NEO4",
        imgSrc:"http://img.youtube.com/vi/uWgDVz4NEO4/0.jpg",
        width:"320",
        height:"300",
        title:"My Custom Title 2",
        lang: "Hindi",
        relDate: "2013/17/11",
        rating: "3.5"
      }];
  return trailers;
});

In my HTML

<div trailer-list on-click="openVideo(video)" video="video" ng-repeat="video in videos | filter:languageFilter">
</div>

<div modal-layer video='selectedVideo'></div>

1 Answer 1

0

your controller already have $scope.$apply();

try to replace it as

$scope.openVideo = function(video){


  $scope.$apply(function(){
      $scope.selectedVideo = video;
      sublime.ready(function(){ // jquery based sublime video api
      console.log("Video Selected = " + JSON.stringify(video));
      $("#tfModal").modal({}); // invoking bootstrap modal
      $('#tfModal').on('shown.bs.modal', function (e) {
        console.log('preparing...');
        sublime.prepare('tfVideo', function(player) {
          player.play();
      });
    });
  });

  $('#tfModal').on('hidden.bs.modal', function (e) {
      console.log('un preparing...');
      sublime.unprepare('tfVideo');
    })


  }

replace your code IN $apply function.

1
  • Still the same outcome .. no change in doing it this way!
    – Satya
    Dec 25, 2013 at 13:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.