Player.js: Official support for AngularJS?

[navarroaxel]

I was looking for a cool module for using Vimeo with AngularJS but I didn't find nothing cool.
So, I have been working on this module for AngularJS: iron-vimeo-embed Size: 1.47Kb minified without gzip.

I really want an official support for AngularJS, I can work with you if you want. But I want a really cool official module for AngularJS.

[slavafomin]

We are also using our own implementation for Vimeo player directive. Would love to see the official version.

Here's our simple implementation:

directive.js

(function (angular) {

  'use strict';

  angular.module('app.directive.vimeoPlayer', [])
    .directive('vimeoPlayer', function ($timeout) {
      return {
        restrict: 'E',
        templateUrl: '/templates/application/directive/vimeo-player.html',
        scope: {
          videoId: '@',
          properties: '=',
          events: '='
        },
        link: function ($scope, $directiveElement) {
          if (!$scope.events) {
            return;
          }
          var frameElement = $directiveElement.find('iframe')[0];

          $(frameElement).load(function () {

            var playerApi = new Vimeo.Player(frameElement);

            angular.forEach($scope.events, function (eventHandler, eventName) {
              if ('function' !== typeof eventHandler) {
                return;
              }
              playerApi.on(eventName, function (event) {
                $timeout(function () {
                  $scope.events[eventName].call(playerApi, event);
                });
              });
            });

          });

        },
        controller: function (
          $scope,
          $sce,
          $httpParamSerializer
        ) {
          $scope.frameSrc = $sce.trustAsResourceUrl(
            '//player.vimeo.com/video/' + $scope.videoId +
            '?' + $httpParamSerializer($scope.properties)
          );
        }
      };
    })
  ;

})(angular);

vimeo-player.html

<iframe
    ng-src="{~ frameSrc ~}"
    frameborder="0"
    webkitallowfullscreen
    mozallowfullscreen
    allowfullscreen
></iframe>

Usage

<vimeo-player
    video-id="152245756"
    properties="video.properties"
    events="video.events"
></vimeo-player>

$scope.video = {
  properties: {
    autoplay: true
  },
  events: {
    loaded: function () {
      this.setVolume(1.0);
      this.getDuration().then(function (duration) {
        $scope.$apply(function () {
          $scope.videoDuration = Math.floor(duration / 60);
        });
      });
    },
    timeupdate: function (event) {
      if (event.percent >= 0.95) {
        $scope.videoFinished = true;
      }
    }
  }
};

[bdougherty]

This is a good idea, but none of us are really familiar with Angular. @slavafomin that's Angular 1 right? Does it make sense for us to use Angular 1 when 2 looks like it's close to being officially released?

[slavafomin]

Does it make sense for us to use Angular 1 when 2 looks like it's close to being officially released?

@bdougherty Yes, the 1.x is going to stay for some long time, you will probably want both versions.

This is a good idea, but none of us are really familiar with Angular.

I'm not ready to release the full-fledged module for Angular.js on my own, however, if you have a budget for such project — we can discuss it. I have some time to spare and it looks like an interesting project to me.

Here's my Angular.js integration for intl-tel-input plugin:
https://github.com/betsol/ng-intl-tel-input

We can do something similar for Vimeo player if you are interested.

[navarroaxel]

@bdougherty , That's is right, angular 1.x its still on track for some time, and I also would like to work in a 2.x version in a short future.

Going back to the point, my package iron-vimeo-embed is working, stable and implemented in some of my deployed web applications. I'm looking foward to your feedback on this package. If the Vimeo Team is interested, I can transfer it inside the vimeo repositories and I can continue implementing all the vimeo API in an angular native scripting.

@slavafomin Thanks for participate in this thread, I appreciate your interest! Could I ask you for your review and opinion on the package? Im really interested in opinions and enhancements recomendations

[slavafomin]

Thanks @navarroaxel , good work, however I would suggest you to:

1. Write a comprehensive documentation
2. Add a demo page through GitHub pages
3. Add support for npm and require (see webpack)
4. Implement some build system to produce production-ready minifed files
5. Add tests

You are also using default interpolation symbols ({{ and }}) in your built-in templates, however, this could break in projects which use some other interpolation symbols (We use {~ and ~} to resolve conflicts with nunjucks for example).

In general I would suggest to make your implementation more "transparent" to the original API. Just do enough to integrate the API to Angular environment, but allow the end user to use the API as it was intended by the authors. This will allow more stable integration between the original API and Angular module. Less Angular code is better here.

This is just from the top of my head. Good luck with you implementation, I will watch for your progress. Maybe we will use it ourselves when it will be mature enough.

Cheers!

[lgarro]

@bdougherty

Are there any implementation samples for an Angular2 , this looks good but mostly Angular 1.x

[bdougherty]

@lgarro not that I know of.

[charl-kruger]

the angular directive still works well, one issue is load has changed, needs to be $(frameElement).on('load', function () {

[payalcsureja]

An updated Angular1 directive with more controls to close/pause it from any buttons outside player with responsive css and close icon on top right corner of video to hide it.
https://gist.github.com/payalcsureja/4e0868485e0b3f2c6261968d2f466c92