Merge pull request #1 from adaptlearning/feature/adapt-vimeo

Feature/adapt vimeo

README.md

@@ -1 +1,66 @@
-# adapt-vimeo
+# adapt-vimeo
+
+**Adapt Vimeo** is a *presentation component* for the Adapt Framework.
+
+## Installation
+
+TBC
+
+## Settings Overview
+
+The attributes listed below are used in *components.json* to configure **Adapt Vimeo Player**, and are properly formatted as JSON in [*example.json*](https://github.com/adaptlearning/adapt-contrib-vimeo/example.json).
+
+### Attributes
+
+[**core model attributes**](https://github.com/adaptlearning/adapt_framework/wiki/Core-model-attributes): These are inherited by every Adapt component. [Read more](https://github.com/adaptlearning/adapt_framework/wiki/Core-model-attributes).
+
+**_component** (string): This value must be: `vimeo`.
+
+**_classes** (string): CSS class name to be applied to **Vimeo** containing `div`. The class must be predefined in one of the Less files. Separate multiple classes with a space.
+
+**_layout** (string): This defines the horizontal position of the component in the block. Acceptable values are `full`, `left` or `right`.
+
+**instruction** (string): This optional text appears above the component. It is frequently used to
+guide the learner’s interaction with the component.
+
+**_setCompletionOn** (string): This determines when Adapt will register this component as having been completed by the user. Acceptable values are `inview` (triggered when the component is fully displayed within the viewport), `play` (triggered when playback is initiated), or `ended` (triggered when the video has reached the end of playback). 
+
+
+**_media** (object): The media configuration, containing values for **_source**, **_autoplay** and **_loop**
+
+>**_source** (string): The URL of the Vimeo video. This can be a direct link or an embed link
+
+>**_autoplay** (boolean): Attempt to autoplay the view. Not supported in all browsers
+
+>**_loop** (boolean): Automatically restart the video when it reaches the end
+
+
+**_transcript** (object):  The transcript attributes group contains values for **_inlineTranscript**, **_externalTranscript**, **inlineTranscriptButton**, **inlineTranscriptCloseButton**, **inlineTranscriptBody**, **transcriptLinkButton**, and **transcriptLink**.
+
+>**_setCompletionOnView** (boolean): This determines if Adapt will register this component as having been completed by the user when the inline transcript is opened. This is true by default.
+
+>**_inlineTranscript** (boolean): Determines whether the button that toggles the display of the inline transcript text will be displayed or not. 
+
+>**_externalTranscript** (boolean): Determines whether the button that links to the optional external transcript will be displayed or not.
+
+>**inlineTranscriptButton** (string): This text appears on the button that toggles the visibility of the inline transcript text. It is displayed when the inline transcript text is hidden. If no text is provided, the **transcriptLink** will be displayed on the button.
+
+>**inlineTranscriptCloseButton** (string): This text appears on the button that toggles the visibility of the inline transcript. It is displayed when the inline transcript text is visible. 
+
+>**inlineTranscriptBody** (string): This optional text appears below the video. If provided, its visibility is toggled by clicking the transcript button. It is hidden by default.
+
+>**transcriptLinkButton** (string): This text appears on the button that links to the optional external transcript. If no text is provided, the **transcriptLink** will be displayed on the button.
+
+>**transcriptLink** (string): File name (including path) of the optional external transcript. Path should be relative to the *src* folder (e.g., *course/en/pdf/video01_transcript.pdf*).  
+
+
+### Accessibility
+
+### Limitations
+
+No known limitations
+
+----------------------------
+**Version number:**  1.0.0
+**Framework versions:**  2.0
+**Author / maintainer:** Dan Storey

bower.json

@@ -0,0 +1,22 @@
+{
+  "name": "adapt-vimeo",
+  "version": "1.0.0",
+  "framework": ">=3.3.0",
+  "displayName": "Vimeo Player",
+  "component": "vimeo",
+  "description": "Vimeo Player for Adapt",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/adaptlearning/adapt-vimeo.git"
+  },
+  "homepage": "https://github.com/adaptlearning/adapt-vimeo",
+  "main": "/js/adapt-vimeo.js",
+  "authors": [
+    "Dan Storey <[email protected]>"
+  ],
+  "keywords": [
+    "adapt-plugin",
+    "adapt-component"
+  ],
+  "license": "GPLv3"
+}

example.json

@@ -0,0 +1,21 @@
+{
+    "_id": "c-35",
+    "_parentId": "b-20",
+    "_type": "component",
+    "_classes": "",
+    "_layout": "full",
+    "_component": "vimeo",
+    "title": "Component Title",
+    "displayTitle": "Component Title",
+    "body": "This is a vimeo component",
+    "instruction": "Click the button to play",
+    "_setCompletionOn": "play",
+    "_media": {
+        "_source": "//vimeo.com/319977833",
+        "_autoplay": false,
+        "_loop": false
+    },
+    "_pageLevelProgress": {
+        "_isEnabled": true
+    }
+}

js/TranscriptView.js

@@ -0,0 +1,69 @@
+define([
+    'core/js/adapt'
+], function(Adapt) {
+    return Backbone.View.extend({
+
+        isOpen: false,
+
+        template: 'vimeoTranscript',
+
+        className: 'media-transcript-container',
+
+        events: {
+            'click .media-inline-transcript-button': 'onToggleInlineTranscript',
+            'click .media-external-transcript-button': 'onExternalTranscriptClicked',
+            'click .js-skip-to-transcript': 'onSkipToTranscript'
+        },
+
+        initialize: function() {
+            this.render();
+        },
+
+        render: function() {
+            var template = Handlebars.templates[this.template];
+            this.$el.html(template(this.model));
+        },
+
+        onSkipToTranscript: function() {
+            this.$('.media-transcript-container button').a11y_focus();
+        },
+
+        /**
+         * Toggle opening and closing the transcript
+         * @param {Event} event
+         */
+        onToggleInlineTranscript: function(event) {
+            event && event.preventDefault();
+
+            var $transcriptBodyContainer = this.$('.media-inline-transcript-body-container');
+            var $button = this.$('.media-inline-transcript-button');
+            var $buttonText = this.$('.media-inline-transcript-button .transcript-text-container');
+            var slide = 'slideDown';
+            var text = this.model.inlineTranscriptCloseButton;
+
+            this.isOpen = !this.isOpen;
+
+            if (!this.isOpen) {
+                slide = 'slideUp';
+                text = this.model.inlineTranscriptButton
+            }
+
+            $transcriptBodyContainer.stop(true, true)[slide](function() {
+                Adapt.trigger('device:resize');
+            });
+            $button.attr('aria-expanded', this.isOpen);
+            $buttonText.html(text);
+
+
+            this.trigger('transcript:open');
+        },
+
+        /**
+         * Trigger the 'transcript:open' event when the external transcript button is clicked
+         * @param event
+         */
+        onExternalTranscriptClicked: function(event) {
+            this.trigger('transcript:open');
+        }
+    });
+});

js/VimeoView.js

@@ -0,0 +1,86 @@
+define([
+    'libraries/vimeo-player-2.8.0.min'
+], function(Player) {
+    return Backbone.View.extend({
+
+        template: 'vimeoVideo',
+
+        vimeoEvents: [
+            'play',
+            'pause',
+            'ended',
+            'timeupdate',
+            'seeking',
+            'seeked',
+            'error',
+            'loaded'
+        ],
+
+        className: 'vimeo-video',
+
+        initialize: function() {
+            this.setupPlayer();
+            this.setupResponsiveSizing();
+            this.setupEventListeners();
+        },
+
+        /**
+         * Instantiate the vimeo player with the options supplied
+         */
+        setupPlayer: function() {
+            var options = {
+                url: this.model._source,
+                autoplay: this.model._autoplay,
+                loop: this.model._loop
+            };
+
+            this.player = new Player(this.el, options);
+        },
+
+        /**
+         * Use the vimeo player's methods to determine the aspect ratio,
+         * and set the padding on this view's element accordingly
+         */
+        setupResponsiveSizing: function() {
+            var $el = this.$el;
+            var player = this.player;
+            var self = this;
+
+            player
+                .getVideoWidth()
+                .then(function(width) {
+                    self.videoWidth = width;
+                    return player.getVideoHeight();
+                })
+                .then(function(height) {
+                    self.videoHeight = height;
+                    var ratio = self.videoHeight / self.videoWidth * 100;
+                    $el.css({ paddingTop: ratio + '%' });
+                    self.trigger('ready');
+                });
+        },
+
+        /**
+         * Trigger the vimeo player's events on this view so that it can act as an abstraction of the player
+         */
+        setupEventListeners: function() {
+            this.vimeoEvents.forEach(function(eventType) {
+                this.player.on(eventType, function(data) {
+                    this.trigger(eventType, {
+                        type: eventType,
+                        data: data
+                    });
+                }.bind(this))
+            }, this);
+        },
+
+        /**
+         * Destroy the player instance before removal
+         */
+        remove: function() {
+            this.player.destroy();
+            Backbone.View.prototype.remove.call(this);
+        }
+
+    });
+});