Nomnom Pumpernickle Muffins

    ember-cli-youtube-modal

    0.0.11 • Public • Published

    Ember-cli-video-modal

    This README outlines the details of collaborating on this Ember addon.

    Installation

    • git clone this repository
    • npm install
    • bower install

    Running

    Running Tests

    • npm test (Runs ember try:testall to test your addon against multiple Ember versions)
    • ember test
    • ember test --server

    Building

    • ember build

    For more information on using ember-cli, visit http://ember-cli.com/.

    API / Configuration Options

    showVideoModal

    videoId

    width

    height

    customControls

    closeIcon

    durationDivider

    playIcon

    pauseIcon

    In your component, you have to configure some options, some required, others optional.

    {{youtube-modal
        showVideoModal = false
        videoId = "WgkQU32XSFQ"
        customControls = true
        startTime = 40
    }}

    How To Use Youtube-Modal

    Examples

    http://bleedforthisfilm.com http://gleasonmovie.com

    Initial Setup

    In your Ember app's root directory run

    npm install ember-cli-youtube-modal --save

    Once the addon is installed, the component {{modal-video}} will become available to your Ember App as a modal element containing an initialized YouTube player.

    But before you can use the addon, you must do some initial setup work In your component's parent controller, ideally in the application.js controller.

    First you define a showVideoModal property and set it to be false. This property deteremines whether or not the YouTube video modal is visible or not. By default you want it to be hidden unless some event triggers it to be visible.

    // controllers/application.js
    showVideoModal: false

    Then pass the property down to your {{modal-video}} component. I recommend you place your YouTube video modal component at the application root aka application.hbs.

    // application.hbs
    {{modal-video
        showVideoModal=showVideoModal
    }}

    Next you define a videoId property whose value is the id of your YouTube video.

    // controllers/application.js
    videoId: <Your YouTube Video ID>

    Then likewise pass the property down to your {{modal-video}} component.

    // application.hbs
    {{modal-video
        showVideoModal = showVideoModal  
        videoId=videoId
    }}

    That's it for the initial setup.

    How To Open And Play the YouTube-Modal video

    To open the modal and play the video after the page loads, you have to set showVideoModal to true in the init() function.

    // controllers/application.js
    init() {
        this._super(...arguments);
        // Opens the video modal
        this.set('showVideoModal', true);
    }

    If you want to click an element to open the YouTube modal, you can do this by setting showVideoModal to true in an action:

    actions: {
        openYouTubeModal() {
            // Make sure the `showVideoModal` property is accessible to your action!
            this.set('showVideoModal', true);
        }
    }

    Reuse (multiple YouTube modals)

    Let's say you have a videos route/page and on that page you want to display a gallery of thumbnails and each thumbnail opens up a corresponding YouTube modal. Well you're in luck because this addon provides a reusable modal component!

    In your videos.js route file, define your array of videos and pass it down as a model.

    ...
     
    // routes/videos.js
    let listOfVideos = [
        {
            "name": "gleason",
            "id": "WgkQU32XSFQ"
        },
        {
            "name": "mothersday",
            "id": "2BPr217zLps"
        },
        {
            "name": "bleedforthis",
            "id": "LiDO_sP00uk"
        }
    ];
     
    export default Ember.Route.extend({
     
        model() {
            return listOfVideos;
        }
     
    });
     

    Then in your videos.js controller file you have to inject into it the application.js controller and read its properties.

    // controllers/videos.js
    import Ember from 'ember';
     
    export default Ember.Controller.extend({
     
        applicationController: Ember.inject.controller('application'),
        daApplicationController: Ember.computed.reads('applicationController'),
     
    });

    Once you've injected the controller application.js into your videos.js controller file

    // controllers/videos.js
     

    Create a videos gallery component and pass to down to it the listOfVideos model and the openModal action read from the applications controller.

    // routes/videos.hbs
     
    {{videos-gallery
        videos=model
        openModal=(action "openModal")
    }}

    Define another openModal action in your videos-gallery component js file that will call the passed down openModal action.

    // components/videos-gallery.js
        actions: {
            openModal(id) {
                this.get('openModal')(id);
            }
        }

    Add the openModal action to whatever DOM element you want to trigger an opened modal. Pass to it the id of the video.

    // templates/componentsvideos-gallery.hbs
     
    {{#each videos as |video|}}
        <button {{action "openModal" video.id}}>Open {{video.name}}</button>
    {{/each}}
     

    That's it!

    Customize The YouTube Modal Controls

    If you, your designer, or your client don't like YouTube's default controls for whatever reason, then you're in luck because this addon gives you fully customizable controls.

    FIrst in your modal-video component, set customControls to be true

    {{!-- application.hbs --}}
    {{modal-video
        customControls = true
    }}

    Custom HTML

    {{!-- application.hbs --}} 
    {{modal-video
        customControls = true
     
        // The close modal icon
        closeIcon = '<Your Custom Text, HTML, or SVG>'
        // The element between the elapsed time and the total time
        durationDivider = '<Your Custom Text, HTML, or SVG>'
        // The play video icon
        playIcon = '<Your Custom Text, HTML, or SVG>'
        // The pause video icon
        pauseIcon = '<Your Custom Text, HTML, or SVG>'
    }}

    I've found this online html/xml compressor to be helpful.

    Further Customizations

    By default the Youtube video modal is fullscreen. If you want to customzie this look, you have to manually adjust the CSS and by setting the width and height properties in the modal-video component.

    Install

    npm i ember-cli-youtube-modal

    DownloadsWeekly Downloads

    14

    Version

    0.0.11

    License

    MIT

    Last publish

    Collaborators

    • iwilliams
    • 19tt94
    • ozywuli