https://www.viagra.com/-/media/base-themes/components-theme/scripts/component-video.js

1/* global MediaElementPlayer:false */
2/**
3 * Component Video
4 * @module Video
5 * @param  {jQuery} $ Instance of jQuery
6 * @return {Object} List of Video component methods
7 */
8XA.component.video = (function($, document) {
9    /**
10     * This object stores all public api methods
11     * @type {Object.<Methods>}
12     * @memberOf module:Video
13     * */
14    var api = {};
15    /**
16     * Sets class name to video element depending 
17     * on video width size. </br>
18        <p>"video-small" - if videoWidth < 481 && videoWidth >= 321</p>
19        <p>"hide-controls" - if videoWidth < 321</p>
20     * @memberOf module:Video
21     * @method
22     * @param {jQuery.<Element>} video Video element
23     */
24    function checkSize(video) {
25        var videoWidth = video.width();
26        video.removeClass("video-small hide-controls");
27
28        if (videoWidth < 481 && videoWidth >= 321) {
29            video.addClass("video-small");
30        } else if (videoWidth < 321) {
31            video.addClass("hide-controls");
32        }
33    }
34
35    /**
36     * Initializes video component and creates instance of 
37     * [MediaElementPlayer]{@link https://www.mediaelementjs.com/} that 
38     * handles all work with video player.
39     * @memberOf module:Video
40     * @method
41     * @param {jQuery.<Element>} video Video element
42     * @param {Object} properties Video element properties
43     * @return undefined;
44     * 
45     */
46    function initVideo(video, properties) {
47        var content = video.find("video");
48
49        if (!content.length) {
50            return;
51        }
52       
53        var callback = function(mediaElement) {
54            mediaElement.movieName = "Movie";
55
56            $(mediaElement).on("ended", function() {
57                if (properties.fromPlaylist) {
58                    $(properties.playlist).trigger("change-video");
59                }
60            });
61            $(mediaElement)
62                .closest(".component-content")
63                .find(".video-init")
64                .hide();
65        };
66        // Possible youtube imageQuality values: `default`, `hqdefault`, `mqdefault`, `sddefault` and `maxresdefault`
67        $.extend(properties, {
68            plugins: ["youtube", "flash", "silverlight"],
69            silverlightName: "silverlightmediaelement.xap",
70            classPrefix: "mejs-",
71            success: callback,
72            stretching: "auto",
73            pluginPath: "../other/",
74            youtube: {
75                imageQuality: 'hqdefault' 
76          }
77        });
78
79        content.each(function(key) {
80            var $elem = $(content[key]),
81                _this = this;
82            if ($elem.attr("poster")) {
83                var initBtn = $elem.parent().find(".video-init");
84                $elem.add(initBtn).on("click", function() {
85                    properties.success = (function(arg) {
86                        return function() {
87                            try {
88                                arguments[0].load();
89                                arguments[0].play();
90                            } catch (e) {
91                                /* eslint-disable */
92                                console.warn("Error while loading video");
93                                /* eslint-enable  */
94                            }
95
96                            return arg.apply(this, arguments);
97                        };
98                    })(properties.success);
99                    initBtn.hide();
100                    new MediaElementPlayer(_this, properties);
101                });
102            } else {
103                new MediaElementPlayer(content[key], properties);
104            }
105        });
106        return;
107    }
108    /**
109     * This method is called by 
110     * [Playlist.replaceSource]{@link module:Playlist.Playlist.replaceSource}
111     * and extends properties of video component.
112     * @memberOf module:Video
113     * @method
114     * @param {jQuery} video Root DOM element of video component wrapped by jQuery
115     * @param {Object} playlist set by playlist component
116     * @alias module:Video.initVideoFromPlaylist
117     */
118    api.initVideoFromPlaylist = function(video, playlist) {
119        var properties = $(video).data("properties");
120
121        $.extend(properties, {
122            fromPlaylist: true,
123            playlist: playlist
124        });
125
126        return initVideo(video, properties);
127    };
128    /**
129     * For each video component run
130     * [initVideo]{@link module:Video.initVideo}

130, [checkSize]{@link module:Video.checkSize}
131     * methods and add [checkSize]{@link module:Video.checkSize} as a callback for
132     * eventListener to <b>window.resize</b>
133     * @memberOf module:Video
134     * @method
135     * @param {jQuery} component Root DOM element of video component wrapped by jQuery
136     * @param {Object} prop Properties set in data attribute
137     *  of video component
138     * @alias module:Video.initInstance
139     */
140    api.initInstance = function(component, prop) {
141        var $component = $(component);
142        initVideo($component, prop);
143        checkSize($component);
144
145        $(window).resize(function() {
146            checkSize($component);
147        });
148    };
149    /**
150     * Finds all Video components that are not yet initialized and in a loop for each of them
151     * runs ["initInstance"]{@link module:Video.initInstance} method.
152     * If component has property "playlist installed" it calls
153     * [XA.component.playlist.init]{@link module:Playlist.init}
154     * @memberOf module:Video
155     * @alias module:Video.init
156     */
157    api.init = function() {
158        if (XA.component.hasOwnProperty("playlist")) {
159            XA.component.playlist.init();
160        }
161
162        var video = $(".video.component:not(.initialized)");
163
164        video.each(function() {
165            var properties = $(this).data("properties");
166
167            api.initInstance(this, properties);
168
169            $(this).addClass("initialized");
170        });
171
172        $(document).on("mozfullscreenchange", function() {
173            setTimeout(function() {
174                $(window).resize();
175            }, 200); //mozilla bug fix
176        });
177    };
178
179    return api;
180})(jQuery, document);
181
182XA.register("video", XA.component.video);