I have to add few lines on js functions but mixin not working.
app/design/frontend/Konect/base/Magento_ProductVideo/requirejs-config.js
var config = {
config: {
mixins: {
'Magento_ProductVideo/js/load-player': {
'Magento_ProductVideo/js/load-player-mixin': true
},
'Magento_ProductVideo/js/fotorama-add-video-events': {
'Magento_ProductVideo/js/fotorama-add-video-events-mixin': true
}
}
}
};app/design/frontend/Konect/base/Magento_ProductVideo/web/js/load-player-mixin.js
define([
'jquery',
'jquery/ui'
], function ($) {
'use strict';
$.widget('mage.videoVimeo', $.mage.productVideoLoader, {
/**
* Initialize the Vimeo widget
* @private
*/
_create: function () {
var timestamp,
additionalParams = '',
src;
this._initialize();
timestamp = new Date().getTime();
this._autoplay = true;
if (this._autoplay) {
additionalParams += '&autoplay=1&muted=1'; // Edited this line added '&muted=1'
console.log('loaded muted...');
}
if (this._loop) {
additionalParams += '&loop=1';
}
src='//player.vimeo.com/video/' +
this._code + '?api=1&player_id=vimeo' +
this._code +
timestamp +
additionalParams;
this.element.append(
$('<iframe/>')
.attr('frameborder', 0)
.attr('id', 'vimeo' + this._code + timestamp)
.attr('width', this._width)
.attr('height', this._height)
.attr('src', src)
.attr('webkitallowfullscreen', '')
.attr('mozallowfullscreen', '')
.attr('allowfullscreen', '')
);
this._player = window.$f(this.element.children(':first')[0]); // return an error: Uncaught TypeError: window.$f is not a function
// Froogaloop throws error without a registered ready event
this._player.addEvent('ready', function (id) { // return an error: Cannot read property 'addEvent' of undefined
$('#' + id).closest('.fotorama__stage__frame').addClass('fotorama__product-video--loaded');
});
},
});
return $.mage.videoVimeo;
});
On this file I want to add more parameter:
To this line: additionalParams += '&autoplay=1&muted=1'; // Edited this line added '&muted=1'
After static deploy I got an error on this two lines:
this._player = window.$f(this.element.children(':first')[0]); // return an error: Uncaught TypeError: window.$f is not a function
this._player.addEvent('ready', function (id) { // return an error: Cannot read property 'addEvent' of undefined
app/design/frontend/Konect/base/Magento_ProductVideo/web/js/fotorama-add-video-events-mixin.js
define([
'jquery',
'jquery/ui',
'catalogGallery',
'Magento_ProductVideo/js/load-player'
], function ($) {
'use strict';
return function(target){
//create AddFotoramaVideoEvents widget
$.widget('mage.AddFotoramaVideoEvents', target, {
PV: 'product-video',
/**
* Creates widget
* @private
*/
_create: function () {
$(this.element).on('gallery:loaded', $.proxy(function () {
this.fotoramaItem = $(this.element).find('.fotorama-item');
this._initialize();
}, this));
},
/**
*
* @private
*/
_initialize: function () {
this._loadVideoData();
if (this._checkForVideoExist()) {
this._checkFullscreen();
this._listenForFullscreen();
this._checkForVimeo();
this._isVideoBase();
this._initFotoramaVideo();
this._attachFotoramaEvents();
}
},
/**
* Attach
*
* @private
*/
_attachFotoramaEvents: function () {
this.fotoramaItem.on('fotorama:showend', $.proxy(function (e, fotorama) {
this._startPrepareForPlayer(e, fotorama);
$('.' + this.PV).productVideoLoader(); // Added this line to load video when video icon is clicked
}, this));
this.fotoramaItem.on('fotorama:show', $.proxy(function (e, fotorama) {
this._unloadVideoPlayer(fotorama.activeFrame.$stageFrame.parent(), fotorama, true);
}, this));
this.fotoramaItem.on('fotorama:fullscreenexit', $.proxy(function (e, fotorama) {
fotorama.activeFrame.$stageFrame.find('.' + this.PV).remove();
this._startPrepareForPlayer(e, fotorama);
}, this));
}
});
return $.mage.AddFotoramaVideoEvents;
}
});Just going to update this method:
_attachFotoramaEvents: function () {
And add this line
$('.' + this.PV).productVideoLoader(); // Added this line to load video when video icon is clicked.
I'm not sure what is missing or anything I have missed. Hope anyone can suggest what the best.
