diff --git a/app/code/Magento/ProductVideo/Block/Adminhtml/Product/Edit/NewVideo.php b/app/code/Magento/ProductVideo/Block/Adminhtml/Product/Edit/NewVideo.php
index 6be990b549ceaed78dd80e8a6078d97167e16c5f..fbc2132db4999b1ee5993bb86656f4f43142f606 100644
--- a/app/code/Magento/ProductVideo/Block/Adminhtml/Product/Edit/NewVideo.php
+++ b/app/code/Magento/ProductVideo/Block/Adminhtml/Product/Edit/NewVideo.php
@@ -12,6 +12,11 @@ use Magento\Framework\Data\Form\Element\Fieldset;
*/
class NewVideo extends \Magento\Backend\Block\Widget\Form\Generic
{
+ /**
+ * @var \Magento\ProductVideo\Helper\Media
+ */
+ protected $mediaHelper;
+
/**
* @var \Magento\Framework\Json\EncoderInterface
*/
@@ -19,6 +24,7 @@ class NewVideo extends \Magento\Backend\Block\Widget\Form\Generic
/**
* @param \Magento\Backend\Block\Template\Context $context
+ * @param \Magento\ProductVideo\Helper\Media $mediaHelper
* @param \Magento\Framework\Json\EncoderInterface $jsonEncoder
* @param \Magento\Framework\Registry $registry
* @param \Magento\Framework\Data\FormFactory $formFactory
@@ -29,9 +35,11 @@ class NewVideo extends \Magento\Backend\Block\Widget\Form\Generic
\Magento\Framework\Registry $registry,
\Magento\Framework\Data\FormFactory $formFactory,
\Magento\Framework\Json\EncoderInterface $jsonEncoder,
+ \Magento\ProductVideo\Helper\Media $mediaHelper,
array $data = []
) {
parent::__construct($context, $registry, $formFactory, $data);
+ $this->mediaHelper = $mediaHelper;
$this->jsonEncoder = $jsonEncoder;
$this->setUseContainer(true);
}
@@ -171,6 +179,11 @@ class NewVideo extends \Magento\Backend\Block\Widget\Form\Generic
$this->setForm($form);
}
+ /**
+ * Get html id
+ *
+ * @return mixed
+ */
public function getHtmlId()
{
if (null === $this->getData('id')) {
@@ -180,6 +193,8 @@ class NewVideo extends \Magento\Backend\Block\Widget\Form\Generic
}
/**
+ * Get widget options
+ *
* @return string
*/
public function getWidgetOptions()
@@ -189,6 +204,7 @@ class NewVideo extends \Magento\Backend\Block\Widget\Form\Generic
'saveVideoUrl' => $this->getUrl('catalog/product_gallery/upload'),
'saveRemoteVideoUrl' => $this->getUrl('product_video/product_gallery/retrieveImage'),
'htmlId' => $this->getHtmlId(),
+ 'youTubeApiKey' => $this->mediaHelper->getYouTubeApiKey()
]
);
}
@@ -214,8 +230,9 @@ class NewVideo extends \Magento\Backend\Block\Widget\Form\Generic
*/
protected function addMediaRoleAttributes(Fieldset $fieldset)
{
+ $fieldset->addField('roleLabel', 'note', ['text' => __('Role')]);
$mediaRoles = $this->getProduct()->getMediaAttributes();
- asort($mediaRoles);
+ ksort($mediaRoles);
foreach ($mediaRoles as $mediaRole) {
$fieldset->addField(
'video_' . $mediaRole->getAttributeCode(),
diff --git a/app/code/Magento/ProductVideo/Helper/Media.php b/app/code/Magento/ProductVideo/Helper/Media.php
index 5d7abc74aedc180cdd055c6571564fcefe39a012..657c81f3aaedeac0506cdf976f216b610a318f4a 100644
--- a/app/code/Magento/ProductVideo/Helper/Media.php
+++ b/app/code/Magento/ProductVideo/Helper/Media.php
@@ -7,6 +7,7 @@
namespace Magento\ProductVideo\Helper;
use Magento\Framework\App\Area;
+use Magento\Framework\App\Helper\Context;
use Magento\Framework\View\ConfigInterface;
use Magento\Framework\View\DesignInterface;
@@ -40,6 +41,11 @@ class Media extends \Magento\Framework\App\Helper\AbstractHelper
*/
const MEDIA_TYPE_CONFIG_NODE = 'videos';
+ /**
+ * Configuration path
+ */
+ const XML_PATH_YOUTUBE_API_KEY = 'catalog/product_video/youtube_api_key';
+
/**
* @var ConfigInterface
*/
@@ -60,11 +66,14 @@ class Media extends \Magento\Framework\App\Helper\AbstractHelper
/**
* @param ConfigInterface $configInterface
* @param DesignInterface $designInterface
+ * @param Context $context
*/
public function __construct(
ConfigInterface $configInterface,
- DesignInterface $designInterface
+ DesignInterface $designInterface,
+ Context $context
) {
+ parent::__construct($context);
$this->viewConfig = $configInterface;
$this->currentTheme = $designInterface->getDesignTheme();
$this->initConfig();
@@ -139,4 +148,14 @@ class Media extends \Magento\Framework\App\Helper\AbstractHelper
return $videoAttributes[self::NODE_CONFIG_VIDEO_AUTO_RESTART];
}
}
+
+ /**
+ * Retrieve YouTube API key
+ *
+ * @return string
+ */
+ public function getYouTubeApiKey()
+ {
+ return $this->scopeConfig->getValue(self::XML_PATH_YOUTUBE_API_KEY);
+ }
}
diff --git a/app/code/Magento/ProductVideo/Test/Unit/Block/Adminhtml/Product/Edit/NewVideoTest.php b/app/code/Magento/ProductVideo/Test/Unit/Block/Adminhtml/Product/Edit/NewVideoTest.php
index 55fe3af0f92a436b1757a96005a84a3992cd1e14..e07d3144baa89d6cdb5c93e99f18b71e32980042 100644
--- a/app/code/Magento/ProductVideo/Test/Unit/Block/Adminhtml/Product/Edit/NewVideoTest.php
+++ b/app/code/Magento/ProductVideo/Test/Unit/Block/Adminhtml/Product/Edit/NewVideoTest.php
@@ -86,7 +86,8 @@ class NewVideoTest extends \PHPUnit_Framework_TestCase
$value = [
'saveVideoUrl' => $saveVideoUrl,
'saveRemoteVideoUrl' => $saveRemoteVideoUrl,
- 'htmlId' => 'id_' . $rand
+ 'htmlId' => 'id_' . $rand,
+ 'youTubeApiKey' => null
];
$this->jsonEncoderMock->expects($this->once())->method('encode')->with(
$value
diff --git a/app/code/Magento/ProductVideo/etc/adminhtml/system.xml b/app/code/Magento/ProductVideo/etc/adminhtml/system.xml
new file mode 100644
index 0000000000000000000000000000000000000000..f475ab5b70d54cb2a671e5cf41c0b1b1116f7d4b
--- /dev/null
+++ b/app/code/Magento/ProductVideo/etc/adminhtml/system.xml
@@ -0,0 +1,19 @@
+<?xml version="1.0"?>
+<!--
+/**
+ * Copyright © 2015 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
+ <system>
+ <section id="catalog">
+ <group id="product_video" translate="label" type="text" sortOrder="350" showInDefault="1" showInWebsite="1" showInStore="1">
+ <label>Product Video</label>
+ <field id="youtube_api_key" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
+ <label>YouTube API key</label>
+ </field>
+ </group>
+ </section>
+ </system>
+</config>
diff --git a/app/code/Magento/ProductVideo/view/adminhtml/layout/catalog_product_new.xml b/app/code/Magento/ProductVideo/view/adminhtml/layout/catalog_product_new.xml
index eff4727524c00cbcde913abfb8ca5395199165e7..000134b212f98a4452f89a9efb848d9797a06486 100755
--- a/app/code/Magento/ProductVideo/view/adminhtml/layout/catalog_product_new.xml
+++ b/app/code/Magento/ProductVideo/view/adminhtml/layout/catalog_product_new.xml
@@ -7,7 +7,6 @@
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
- <css src="Magento_ProductVideo::css/productvideo.css"/>
<link src="Magento_ProductVideo::js/get-video-information.js"/>
</head>
<body>
diff --git a/app/code/Magento/ProductVideo/view/adminhtml/templates/product/edit/slideout/form.phtml b/app/code/Magento/ProductVideo/view/adminhtml/templates/product/edit/slideout/form.phtml
index 6e2418f119622fbf9f5d352bca0afea590eae6c0..50d5324fc43e6b5fadb082b61c5dceee79bed424 100644
--- a/app/code/Magento/ProductVideo/view/adminhtml/templates/product/edit/slideout/form.phtml
+++ b/app/code/Magento/ProductVideo/view/adminhtml/templates/product/edit/slideout/form.phtml
@@ -17,7 +17,7 @@
});
});
</script>
- <div id="video-player-preview-location">
+ <div id="video-player-preview-location" class="video-player-sidebar">
<div class="video-player-container"></div>
<div class="video-information title">
<label><?php /* @escapeNotVerified */ echo __('Title:') ?> </label><span></span>
diff --git a/app/code/Magento/ProductVideo/view/adminhtml/web/css/productvideo.css b/app/code/Magento/ProductVideo/view/adminhtml/web/css/productvideo.css
deleted file mode 100755
index e2aa3047a68925dd1d7bd50909d12024ac67abc8..0000000000000000000000000000000000000000
--- a/app/code/Magento/ProductVideo/view/adminhtml/web/css/productvideo.css
+++ /dev/null
@@ -1,261 +0,0 @@
- /**
- * Copyright © 2015 Magento. All rights reserved.
- * See COPYING.txt for license details.
- */
-.image.video-placeholder {
- position: relative;
- display: inline-block;
- text-decoration: none;
-}
-
-.image.video-placeholder:before {
- background: url(../images/gallery-sprite.png) no-repeat left bottom;
- content: '';
- position: absolute;
- height: 49px;
- width: 49px;
- left: 50%;
- top: 18px;
- margin-left: -24px;
- opacity: 0.7;
- z-index: 1;
-}
-
-.video-placeholder .image-placeholder-text {
- font-weight: 400;
-}
-
-.admin__field.field-video_image .admin__field-control,
-.admin__field.field-video_small_image .admin__field-control,
-.admin__field.field-video_thumbnail .admin__field-control,
-.admin__field.field-video_swatch_image .admin__field-control,
-.admin__field.field-new_video_disabled .admin__field-control {
- width: 82px;
- margin-left: calc((100%) * .33333333 - 30px);
-}
-
-.admin__field.field-video_image .admin__field-control input,
-.admin__field.field-video_small_image .admin__field-control input,
-.admin__field.field-video_thumbnail .admin__field-control input,
-.admin__field.field-video_swatch_image .admin__field-control input,
-.admin__field.field-new_video_disabled .admin__field-control input {
- float: right;
-}
-
-.admin__field.field-video_image .admin__field-label,
-.admin__field.field-video_small_image .admin__field-label,
-.admin__field.field-video_thumbnail .admin__field-label,
-.admin__field.field-video_swatch_image .admin__field-label,
-.admin__field.field-new_video_disabled .admin__field-label {
- width: 200px;
- position: absolute;
- margin-left: calc((100%) * .33333333 - 30px + 90px);
- left: 0px;
-}
-
-.admin__field.field-video_image .admin__field-label:before,
-.admin__field.field-video_small_image .admin__field-label:before,
-.admin__field.field-video_thumbnail .admin__field-label:before,
-.admin__field.field-video_swatch_image .admin__field-label:before,
-.admin__field.field-new_video_disabled .admin__field-label:before {
- content: none;
-}
-
-.admin__field.field-video_image .admin__field-label span,
-.admin__field.field-video_small_image .admin__field-label span,
-.admin__field.field-video_thumbnail .admin__field-label span,
-.admin__field.field-video_swatch_image .admin__field-label span,
-.admin__field.field-new_video_disabled .admin__field-label span {
- float: left;
-}
-
-.admin__field.field-video_image,
-.admin__field.field-video_small_image,
-.admin__field.field-video_thumbnail,
-.admin__field.field-video_swatch_image {
- margin-bottom: 20px !important;
-}
-
-.admin__field.field-new_video_disabled {
- margin-top: 32px !important;
-}
-
-.admin__field.field-video_image .admin__field-control {
- position: relative;
-}
-
-.admin__field.field-video_image .admin__field-control:after {
- content: 'Role';
- position: absolute;
- color: #000;
- width: 34px;
- height: 20px;
- left: 1px;
- top: -2px;
- font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
- font-size: 1.4rem;
- font-weight: 600;
-}
-
-.preview_hidden_image_input_button {
- display: none;
-}
-
-.video-item {
- position: relative;
-}
-
-.video-item:after {
- content: '';
- position: absolute;
- bottom: 0;
- right: 0;
- background: url(../images/gallery-sprite.png) bottom left;
- width: 49px;
- height: 40px;
- z-index: 3;
- left: 0;
- top: 10px;
- margin: auto;
-}
-
-.mage-new-video-dialog #new_video_form {
- width: 65%;
- float: left;
-}
-
-.mage-new-video-dialog #video-player-preview-location {
- width: 34.99999%;
- float: left;
-}
-
-.video-player-container {
- width: 100%;
- height: 20vw;
- margin-bottom: 30px;
- border: 1px solid #e3e3e3;
- position: relative;
-}
-
-.video-player-container:after {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- margin: auto;
- width: 93px;
- height: 60px;
- background: url(../images/camera.png) no-repeat center;
- z-index: 1;
-}
-
-.video-information {
- margin-bottom: 7px;
- display: none;
-}
-
-.video-information:after {
- content: " "; /* Older browser do not support empty content */
- visibility: hidden;
- display: block;
- height: 0;
- clear: both;
-}
-
-.video-information label {
- font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
- font-size: 1.4rem;
- font-weight: 600;
- display: block;
- width: 25%;
- float: left;
- text-align: right;
-}
-
-.video-information span {
- font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
- font-size: 1.4rem;
- font-weight: 300;
- display: block;
- width: 74.9999%;
- float: left;
- padding-left: 20px;
-}
-
-.product-video {
- width: 100%;
- z-index: 20;
- height: 100%;
- position: relative;
-}
-
-.image.video-placeholder > button[data-role="add-video-button"],
-.image.video-placeholder > button {
- width: 100%;
- height: 100%;
- border: 0;
- background: transparent;
- z-index: 10;
- position: relative;
-}
-
-.add-video-button-container {
- float: right;
- margin-bottom: 10px;
-}
-
-.admin__field.field.field-new_video_screenshot {
- margin-bottom: 5px;
-}
-
-.admin__field.field.field-new_video_screenshot_preview {
- margin-bottom: 50px;
-}
-
-.image .action-make-base:after {
- -webkit-font-smoothing: antialiased;
- font-size: 1.8rem;
- line-height: inherit;
- color: #9e9e9e;
- content: '\e63b';
- font-family: 'Admin Icons';
- vertical-align: middle;
- display: inline-block;
- font-weight: normal;
- overflow: hidden;
- speak: none;
- text-align: center;
- position: absolute;
- top: -7px;
- left: -4px;
-}
-
-.image .action-make-base:hover:after {
- color: #7d7d7d;
-}
-
-.admin__scope-old .gallery .image .action-make-base {
- border: 0;
- width: 0;
- height: 0;
- position: absolute;
- margin: 0;
- bottom: 9px;
- right: 9px;
- left: auto;
- background: transparent;
-}
-
-.image .action-make-base span {
- display: none;
-}
-
-.admin__scope-old .base-image .image-label {
- display: block;
-}
-
-.image.base-image:hover .image-label {
- display: none;
-}
diff --git a/app/code/Magento/ProductVideo/view/adminhtml/web/js/get-video-information.js b/app/code/Magento/ProductVideo/view/adminhtml/web/js/get-video-information.js
index d692aaf4eccf6c56a26f9bbd3e0dea29a125f874..52171f1537a254ef6b19645419a8951bd0b39083 100644
--- a/app/code/Magento/ProductVideo/view/adminhtml/web/js/get-video-information.js
+++ b/app/code/Magento/ProductVideo/view/adminhtml/web/js/get-video-information.js
@@ -322,7 +322,10 @@ require([
$.widget('mage.videoData', {
options: {
- youtubeKey: 'AIzaSyDwqDWuw1lra-LnpJL2Mr02DYuFmkuRSns' //sample data, change later!
+ youtubeKey: '',
+ noKeyErrorTxt: 'You have not entered youtube API key. ' +
+ 'No information about youtube video will be retrieved.',
+ eventSource: '' //where is data going from - focus out or click on button
},
_REQUEST_VIDEO_INFORMATION_TRIGGER: 'update_video_information',
@@ -337,6 +340,11 @@ require([
* @private
*/
_init: function () {
+ if (!this.options.youtubeKey && this.options.eventSource === 'click') {
+ alert({
+ content: this.options.noKeyErrorTxt
+ });
+ }
this._onRequestHandler();
},
@@ -365,18 +373,58 @@ require([
}
/**
+ *
+ * @param {Object} data
* @private
*/
function _onYouTubeLoaded(data) {
var tmp,
uploadedFormatted,
- respData;
+ respData,
+ createErrorMessage;
+
+ /**
+ * Create errors message
+ *
+ * @returns {String}
+ */
+ createErrorMessage = function () {
+ var error = data.error,
+ errors = error.errors,
+ i,
+ errLength = errors.length,
+ tmpError,
+ errReason,
+ errorsMessage = [];
+
+ for (i = 0; i < errLength; i++) {
+ tmpError = errors[i];
+ errReason = tmpError.reason;
+
+ if (['keyInvalid'].indexOf(errReason) !== -1) {
+ errorsMessage.push('Youtube API key is an invalid');
+
+ break;
+ }
- if (data.items.length < 1) {
+ errorsMessage.push(tmpError.message);
+ }
+
+ return 'Video can\'t be shown by reason: ' + $.unique(errorsMessage).join(', ');
+ };
+
+ if (data.error && data.error.code === 400) {
+ this._onRequestError(createErrorMessage());
+
+ return;
+ }
+
+ if (!data.items || data.items.length < 1) {
this._onRequestError('Video not found');
return;
}
+
tmp = data.items[0];
uploadedFormatted = tmp.snippet.publishedAt.replace('T', ' ').replace(/\..+/g, '');
respData = {
@@ -429,8 +477,17 @@ require([
googleapisUrl = 'https://www.googleapis.com/youtube/v3/videos?id=' +
id +
'&part=snippet,contentDetails,statistics,status&key=' +
- this.options.youtubeKey;
- $.get(googleapisUrl, $.proxy(_onYouTubeLoaded, this));
+ this.options.youtubeKey + '&alt=json&callback=?';
+ $.getJSON(googleapisUrl,
+ {
+ format: 'json'
+ },
+ $.proxy(_onYouTubeLoaded, self)
+ ).fail(
+ function () {
+ self._onRequestError('Video not found');
+ }
+ );
} else if (type === 'vimeo') {
$.getJSON('http://www.vimeo.com/api/v2/video/' + id + '.json?callback=?',
{
@@ -493,7 +550,8 @@ require([
_validateURL: function (href, forceVideo) {
var id,
type,
- ampersandPosition;
+ ampersandPosition,
+ vimeoRegex;
if (typeof href !== 'string') {
return href;
@@ -518,7 +576,10 @@ require([
type = 'youtube';
} else if (href.host.match(/vimeo\.com/)) {
type = 'vimeo';
- id = href.pathname.replace(/^\/(video\/)?/, '').replace(/\/.*/, '');
+ vimeoRegex = new RegExp(['https?:\\/\\/(?:www\\.)?vimeo.com\\/(?:channels\\/(?:\\w+\\/)',
+ '?|groups\\/([^\\/]*)\\/videos\\/|album\\/(\\d+)\\/video\\/|)(\\d+)(?:$|\\/|\\?)'
+ ].join(''));
+ id = href.href.match(vimeoRegex)[3];
}
if ((!id || !type) && forceVideo) {
diff --git a/app/code/Magento/ProductVideo/view/adminhtml/web/js/new-video-dialog.js b/app/code/Magento/ProductVideo/view/adminhtml/web/js/new-video-dialog.js
index 980ac3a2e4ddb814ba445a8e873d12a5846e7982..e5efb668b51e946a2ae44b0ef3c629b0ed8630e8 100644
--- a/app/code/Magento/ProductVideo/view/adminhtml/web/js/new-video-dialog.js
+++ b/app/code/Magento/ProductVideo/view/adminhtml/web/js/new-video-dialog.js
@@ -93,7 +93,7 @@ define([
$(this.options.metaData.DOM.uploader).html(
'<a href="https://youtube.com/channel/' +
this.options.metaData.data.uploaderUrl +
- '">' +
+ '" target="_blank">' +
this.options.metaData.data.uploader +
'</a>'
);
@@ -102,7 +102,7 @@ define([
$(this.options.metaData.DOM.uploader).html(
'<a href="' +
this.options.metaData.data.uploaderUrl +
- '">' + this.options.metaData.data.uploader +
+ '" target="_blank">' + this.options.metaData.data.uploader +
'</a>');
}
$('.' + this.options.videoClass).productVideoLoader();
@@ -243,7 +243,10 @@ define([
this._on(events);
- this._videoUrlWidget = $(this._videoUrlSelector).videoData();
+ this._videoUrlWidget = $(this._videoUrlSelector).videoData({
+ youtubeKey: this.options.youTubeApiKey,
+ eventSource: 'focusout'
+ });
this._videoInformationGetBtn = $(this._videoInformationBtnSelector);
this._videoInformationGetUrlField = $(this._videoUrlSelector);
this._videoInformationGetEditBtn = $(this._editVideoBtnSelector);
@@ -262,7 +265,10 @@ define([
_onGetVideoInformationClick: function () {
this._onlyVideoPlayer = false;
this._isEditPage = false;
- this._videoInformationGetUrlField.videoData();
+ this._videoInformationGetUrlField.videoData({
+ youtubeKey: this.options.youTubeApiKey,
+ eventSource: 'click'
+ });
this._videoUrlWidget.trigger('update_video_information');
},
@@ -271,7 +277,10 @@ define([
* @private
*/
_onGetVideoInformationFocusOut: function () {
- this._videoInformationGetUrlField.videoData();
+ this._videoInformationGetUrlField.videoData({
+ youtubeKey: this.options.youTubeApiKey,
+ eventSource: 'focusout'
+ });
this._videoUrlWidget.trigger('update_video_information');
},
@@ -282,7 +291,10 @@ define([
_onGetVideoInformationEditClick: function () {
this._onlyVideoPlayer = true;
this._isEditPage = true;
- this._videoInformationGetUrlField.videoData();
+ this._videoInformationGetUrlField.videoData({
+ youtubeKey: this.options.youTubeApiKey,
+ eventSource: 'click'
+ });
this._videoUrlWidget.trigger('update_video_information');
},
diff --git a/app/code/Magento/ProductVideo/view/frontend/layout/catalog_product_view.xml b/app/code/Magento/ProductVideo/view/frontend/layout/catalog_product_view.xml
index a8fd6ae7725fbd2078aae76c822a2bcfc48fde12..18417e1619da5d56717ce8602c53bf6359d44ac5 100644
--- a/app/code/Magento/ProductVideo/view/frontend/layout/catalog_product_view.xml
+++ b/app/code/Magento/ProductVideo/view/frontend/layout/catalog_product_view.xml
@@ -7,7 +7,8 @@
-->
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
- <css src="Magento_ProductVideo::css/product-video.css"/>
+ <link src="Magento_ProductVideo::js/fotorama-add-video-events.js"/>
+ <link src="Magento_ProductVideo::js/load-player.js"/>
</head>
<body>
<referenceContainer name="product.info.media">
diff --git a/app/code/Magento/ProductVideo/view/frontend/web/css/product-video.css b/app/code/Magento/ProductVideo/view/frontend/web/css/product-video.css
deleted file mode 100644
index 0198f8c98ecb9fe70db81e8259a78cc554f4488f..0000000000000000000000000000000000000000
--- a/app/code/Magento/ProductVideo/view/frontend/web/css/product-video.css
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * Copyright © 2015 Magento. All rights reserved.
- * See COPYING.txt for license details.
- */
-
-.fotorama-video-container.video-unplayed:after {
- content: '';
- position: absolute;
- bottom: 0;
- right: 0;
- background: url(../img/gallery-sprite.png) bottom right;
- width: 100px;
- height: 100px;
- left: 0;
- top: 12px;
- margin: auto;
-}
-.fotorama-video-container .magnify-lens {
- display: none !important;
-}
-.fotorama-video-container.video-unplayed:hover img {
- opacity: 0.6;
-}
-.fotorama-video-container.video-unplayed:hover:after {
- transform: scale(1.25);
-}
-.video-thumb-icon:after {
- content: '';
- position: absolute;
- bottom: 0;
- right: 0;
- background: url(../img/gallery-sprite.png) bottom left;
- width: 49px;
- height: 40px;
- left: 0;
- top: 10px;
- margin: auto;
-}
-.video-timing {
- width: auto;
- height: 30px;
- background: rgba(0, 0, 0, 0.75);
- padding: 0 17px;
- color: #fff;
- position: absolute;
- right: 0;
- line-height: 2;
- transition: 0.3s;
- bottom: -30px;
-}
-.video-timing.fadeIn {
- bottom: 0;
-}
-.product-video {
- position: absolute;
- top: 0;
- width: 100%;
- height: 85%;
- margin-top: 15%;
-}
-.product-video iframe {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: 9999;
-}
-.fotorama__arr.hidden-video {
- z-index: -1;
-}
-.fotorama__video-close {
- bottom: 89%;
- top: auto;
-}
diff --git a/app/code/Magento/ProductVideo/view/frontend/web/js/fotorama-add-video-events.js b/app/code/Magento/ProductVideo/view/frontend/web/js/fotorama-add-video-events.js
index 8b8f92f5b447b99b22ca364dd5c58e7c148f36a7..3fa62c44903df5eb4163bd8ca9b0aceaccec1ac4 100644
--- a/app/code/Magento/ProductVideo/view/frontend/web/js/fotorama-add-video-events.js
+++ b/app/code/Magento/ProductVideo/view/frontend/web/js/fotorama-add-video-events.js
@@ -28,16 +28,15 @@ define([
function parseURL(href, forceVideo) {
var id,
type,
- ampersandPosition;
+ ampersandPosition,
+ vimeoRegex;
/**
* Get youtube ID
- * @param {String} srchref
+ * @param {String} srcid
* @returns {{}}
*/
- function _getYoutubeId(srchref) {
- var srcid = srchref.search.split('v=')[1];
-
+ function _getYoutubeId(srcid) {
if (srcid) {
ampersandPosition = srcid.indexOf('&');
@@ -69,7 +68,10 @@ define([
type = 'youtube';
} else if (href.host.match(/vimeo\.com/)) {
type = 'vimeo';
- id = href.pathname.replace(/^\/(video\/)?/, '').replace(/\/.*/, '');
+ vimeoRegex = new RegExp(['https?:\\/\\/(?:www\\.)?vimeo.com\\/(?:channels\\/(?:\\w+\\/)',
+ '?|groups\\/([^\\/]*)\\/videos\\/|album\\/(\\d+)\\/video\\/|)(\\d+)(?:$|\\/|\\?)'
+ ].join(''));
+ id = href.href.match(vimeoRegex)[3];
}
if ((!id || !type) && forceVideo) {
@@ -283,7 +285,6 @@ define([
_isVideoBase: function () {
var allVideoData = this.options.VideoData,
videoItem,
- videoSettings,
allVideoDataKeys,
key,
i;
@@ -293,10 +294,9 @@ define([
for (i = 0; i < allVideoDataKeys.length; i++) {
key = allVideoDataKeys[i];
videoItem = allVideoData[key];
- videoSettings = allVideoData[videoItem];
if (
- videoSettings.mediaType === this.VID && videoSettings.isBase &&
+ videoItem.mediaType === this.VID && videoItem.isBase &&
this.options.VideoSettings[0].playIfBase
) {
this.Base = true;
diff --git a/app/design/adminhtml/Magento/backend/Magento_ProductVideo/web/css/source/_module.less b/app/design/adminhtml/Magento/backend/Magento_ProductVideo/web/css/source/_module.less
new file mode 100644
index 0000000000000000000000000000000000000000..7f4e8a590acf9c902b378a441875ac8994a5af14
--- /dev/null
+++ b/app/design/adminhtml/Magento/backend/Magento_ProductVideo/web/css/source/_module.less
@@ -0,0 +1,236 @@
+/**
+ * Copyright © 2015 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+.image.video-placeholder {
+ display: inline-block;
+ position: relative;
+ text-decoration: none;
+ &:before {
+ background: url(../Magento_ProductVideo/images/gallery-sprite.png) no-repeat left bottom;
+ content: '';
+ height: 49px;
+ left: 50%;
+ margin-left: -24px;
+ opacity: 0.7;
+ position: absolute;
+ top: 18px;
+ width: 49px;
+ z-index: 1;
+ }
+ .image-placeholder-text {
+ font-weight: 400;
+ }
+}
+
+//re-arrange checkboxes fields in slideout video panel (base, small image etc)
+.admin__field {
+ &.field-video_image,
+ &.field-video_small_image,
+ &.field-video_thumbnail,
+ &.field-video_swatch_image,
+ &.field-new_video_disabled {
+ .admin__field-control {
+ #mix-grid .column(3, @field-grid__columns);
+ float: left;
+ margin-left: 80px;
+ position: relative;
+ input {
+ float: right;
+ }
+ }
+ .admin__field-label {
+ left: 0;
+ margin-left: 35%;
+ padding-left: 45px;
+ position: absolute;
+ width: 250px;
+ &:before {
+ content: none;
+ }
+ span {
+ float: left;
+ }
+ }
+ }
+ &.field-new_video_disabled {
+ margin-top: 32px;
+ }
+ &.field.field-new_video_screenshot {
+ margin-bottom: 5px;
+ }
+ &.field.field-new_video_screenshot_preview {
+ margin-bottom: 50px;
+ }
+ &.field-roleLabel {
+ height: 0;
+ .admin__field-control {
+ #mix-grid .column(3, @field-grid__columns);
+ float: left;
+ margin-left: 80px;
+ position: relative;
+ .control-value {
+ color: @color-black;
+ font-family: 'Open Sans', @font-family__sans-serif;
+ font-size: @font-size__s + 0.2;
+ font-weight: @font-weight__semibold;
+ float: right;
+ position: relative;
+ right: 50px;
+ top: 21px;
+ }
+ }
+ }
+}
+
+.admin__scope-old {
+ .fieldset .admin__field {
+ &.field-video_image,
+ &.field-video_small_image,
+ &.field-video_thumbnail,
+ &.field-video_swatch_image {
+ margin-bottom: 20px;
+ }
+ }
+ .gallery .image .action-make-base,
+ .images .image .action-make-base {
+ .lib-button(
+ @_button-background: transparent,
+ @_button-border: none,
+ @_button-background-hover: transparent,
+ @_button-border-hover: none,
+ @_button-background-active: transparent,
+ @_button-border-active: none,
+ @_button-font-content: '\e63b',
+ @_button-icon-use: true,
+ @_button-icon-font: 'Admin Icons',
+ @_button-icon-font-text-hide: true,
+ @_button-icon-font-size: @font-size__xl,
+ @_button-icon-font-color: @color-gray62,
+ @_button-icon-font-color-hover: @color-gray52,
+ @_button-icon-font-color-active: @color-gray52,
+ @_button-margin: 0
+ );
+ bottom: 9px;
+ left: auto;
+ position: absolute;
+ right: 9px;
+ width: 0 !important;
+ &:before {
+ left: 16px;
+ position: absolute;
+ top: -2px;
+ }
+ }
+ .base-image .image-label {
+ display: block;
+ }
+}
+
+.preview_hidden_image_input_button {
+ display: none;
+}
+
+.video-item {
+ position: relative;
+ &:after {
+ background: url(../Magento_ProductVideo/images/gallery-sprite.png) bottom left;
+ bottom: 0;
+ content: '';
+ height: 40px;
+ left: 0;
+ margin: auto;
+ position: absolute;
+ right: 0;
+ top: 10px;
+ width: 49px;
+ z-index: 3;
+ }
+}
+
+//style slideout panel add video
+.mage-new-video-dialog {
+ form.admin__scope-old {
+ float: left;
+ width: 65%;
+ }
+ .video-player-sidebar {
+ width: 34.99999%;
+ float: left;
+ }
+ .video-player-container {
+ width: 100%;
+ height: 20vw;
+ margin-bottom: 30px;
+ border: 1px solid #e3e3e3;
+ position: relative;
+ &:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ margin: auto;
+ width: 93px;
+ height: 60px;
+ background: url(../Magento_ProductVideo/images/camera.png) no-repeat center;
+ z-index: 1;
+ }
+ }
+ .video-information {
+ margin-bottom: 7px;
+ display: none;
+ &:after {
+ content: "";
+ visibility: hidden;
+ display: block;
+ height: 0;
+ clear: both;
+ }
+ label {
+ font-family: 'Open Sans', @font-family__sans-serif;
+ font-size: @font-size__s + 0.2;
+ font-weight: @font-weight__semibold;
+ display: block;
+ width: 25%;
+ float: left;
+ text-align: right;
+ }
+ span {
+ font-family: 'Open Sans', @font-family__sans-serif;
+ font-size: @font-size__s + 0.2;
+ font-weight: @font-weight__light;
+ display: block;
+ width: 74.9999%;
+ float: left;
+ padding-left: 20px;
+ }
+ }
+ .product-video {
+ width: 100%;
+ z-index: 20;
+ height: 100%;
+ position: relative;
+ }
+}
+
+.image.video-placeholder > button[data-role="add-video-button"],
+.image.video-placeholder > button {
+ background: transparent;
+ border: 0;
+ height: 100%;
+ position: relative;
+ width: 100%;
+ z-index: 10;
+}
+
+.add-video-button-container {
+ float: right;
+ margin-bottom: 10px;
+}
+
+.image.base-image:hover .image-label {
+ display: none;
+}
diff --git a/app/design/frontend/Magento/blank/Magento_ProductVideo/web/css/source/_module.less b/app/design/frontend/Magento/blank/Magento_ProductVideo/web/css/source/_module.less
new file mode 100644
index 0000000000000000000000000000000000000000..d51b978a97e0f74dad2a83121c0b331830e6a051
--- /dev/null
+++ b/app/design/frontend/Magento/blank/Magento_ProductVideo/web/css/source/_module.less
@@ -0,0 +1,70 @@
+/**
+ * Copyright © 2015 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+.fotorama-video-container {
+ &:after {
+ background: url(../Magento_ProductVideo/img/gallery-sprite.png) bottom right;
+ bottom: 0;
+ content: '';
+ height: 100px;
+ left: 0;
+ margin: auto;
+ position: absolute;
+ right: 0;
+ top: 12px;
+ width: 100px;
+ }
+ .magnify-lens {
+ display: none !important;
+ }
+ &.video-unplayed {
+ &:hover {
+ img {
+ opacity: 0.6;
+ }
+ &:after {
+ transform: scale(1.25);
+ }
+ }
+ }
+}
+
+.video-thumb-icon:after {
+ background: url(../Magento_ProductVideo/img/gallery-sprite.png) bottom left;
+ bottom: 0;
+ content: '';
+ height: 40px;
+ left: 0;
+ margin: auto;
+ position: absolute;
+ right: 0;
+ top: 10px;
+ width: 49px;
+}
+
+.product-video {
+ height: 85%;
+ margin-top: 15%;
+ position: absolute;
+ top: 0;
+ width: 100%;
+ iframe {
+ height: 100%;
+ left: 0;
+ position: absolute;
+ top: 0;
+ width: 100%;
+ z-index: 9999;
+ }
+}
+
+.fotorama__arr.hidden-video {
+ z-index: -1;
+}
+
+.fotorama__video-close {
+ bottom: 89%;
+ top: auto;
+}
diff --git a/dev/tests/functional/tests/app/Magento/ProductVideo/Test/Block/Adminhtml/Product/Edit/Tab/ImagesAndVideos.php b/dev/tests/functional/tests/app/Magento/ProductVideo/Test/Block/Adminhtml/Product/Edit/Tab/ImagesAndVideos.php
index efbf9ac19ef2cadf83593911322353f99b0a5a3d..c490b2dbaf13b2cfaba9787a46afa4fc6fc22f7a 100755
--- a/dev/tests/functional/tests/app/Magento/ProductVideo/Test/Block/Adminhtml/Product/Edit/Tab/ImagesAndVideos.php
+++ b/dev/tests/functional/tests/app/Magento/ProductVideo/Test/Block/Adminhtml/Product/Edit/Tab/ImagesAndVideos.php
@@ -20,7 +20,7 @@ class ImagesAndVideos extends Tab
*
* @var string
*/
- protected $addVideoButton = '#product_info_tabs_images-and-videos_content #add_video_button';
+ protected $addVideoButton = '#product_info_tabs_image-management_content #add_video_button';
/**
* Video dialog CSS locator.
diff --git a/dev/tests/functional/tests/app/Magento/ProductVideo/Test/Block/Adminhtml/Product/ProductForm.xml b/dev/tests/functional/tests/app/Magento/ProductVideo/Test/Block/Adminhtml/Product/ProductForm.xml
index 94e28feef713c0c1e8a6746f2f6749d02fd73e8b..5a3c8fbe3fd8a2ad7b6aa3e97d29357ef2a9a0a5 100755
--- a/dev/tests/functional/tests/app/Magento/ProductVideo/Test/Block/Adminhtml/Product/ProductForm.xml
+++ b/dev/tests/functional/tests/app/Magento/ProductVideo/Test/Block/Adminhtml/Product/ProductForm.xml
@@ -8,7 +8,7 @@
<tabs>
<images-and-videos>
<class>\Magento\ProductVideo\Test\Block\Adminhtml\Product\Edit\Tab\ImagesAndVideos</class>
- <selector>#product_info_tabs_images-and-videos</selector>
+ <selector>#product_info_tabs_image-management</selector>
<strategy>css selector</strategy>
<fields>
<position />
diff --git a/dev/tests/functional/tests/app/Magento/ProductVideo/Test/Repository/ConfigData.xml b/dev/tests/functional/tests/app/Magento/ProductVideo/Test/Repository/ConfigData.xml
new file mode 100755
index 0000000000000000000000000000000000000000..5227236ce505b0b23ac486f1b3cffcf509cbe6e4
--- /dev/null
+++ b/dev/tests/functional/tests/app/Magento/ProductVideo/Test/Repository/ConfigData.xml
@@ -0,0 +1,27 @@
+<?xml version="1.0"?>
+<!--
+/**
+ * Copyright © 2015 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../vendor/magento/mtf/Magento/Mtf/Repository/etc/repository.xsd">
+ <repository class="Magento\Config\Test\Repository\ConfigData">
+ <dataset name="youtube_api_key">
+ <field name="catalog/product_video/youtube_api_key" xsi:type="array">
+ <item name="scope" xsi:type="string">default</item>
+ <item name="scope_id" xsi:type="number">0</item>
+ <item name="label" xsi:type="string"/>
+ <item name="value" xsi:type="string">AIzaSyDwqDWuw1lra-LnpJL2Mr02DYuFmkuRSns</item>
+ </field>
+ </dataset>
+ <dataset name="youtube_api_key_rollback">
+ <field name="catalog/product_video/youtube_api_key" xsi:type="array">
+ <item name="scope" xsi:type="string">default</item>
+ <item name="scope_id" xsi:type="number">0</item>
+ <item name="label" xsi:type="string"/>
+ <item name="value" xsi:type="string"/>
+ </field>
+ </dataset>
+ </repository>
+</config>
diff --git a/dev/tests/functional/tests/app/Magento/ProductVideo/Test/TestCase/UpdateSimpleProductEntityTest.xml b/dev/tests/functional/tests/app/Magento/ProductVideo/Test/TestCase/UpdateSimpleProductEntityTest.xml
index 6a151535f05f02ed372dbe0fec9671a6235b4840..74f73a10f81e37277a67c839ac9318704cda1712 100755
--- a/dev/tests/functional/tests/app/Magento/ProductVideo/Test/TestCase/UpdateSimpleProductEntityTest.xml
+++ b/dev/tests/functional/tests/app/Magento/ProductVideo/Test/TestCase/UpdateSimpleProductEntityTest.xml
@@ -34,6 +34,7 @@
<data name="product/data/media_gallery/images/0/video_url" xsi:type="string">https://youtu.be/WMp2PvU2qi8</data>
<data name="product/data/media_gallery/images/0/video_title" xsi:type="string">Foo Test 1</data>
<data name="product/data/media_gallery/images/0/video_description" xsi:type="string">This is a test "Foo Test 1"</data>
+ <data name="configData" xsi:type="string">youtube_api_key</data>
<constraint name="Magento\ProductVideo\Test\Constraint\AssertVideoCategoryView" />
<constraint name="Magento\ProductVideo\Test\Constraint\AssertVideoProductView" />
<constraint name="Magento\Catalog\Test\Constraint\AssertProductForm" />
@@ -50,18 +51,19 @@
<constraint name="Magento\Catalog\Test\Constraint\AssertProductForm" />
</variation>
<variation name="AddVideoToPCFTestVariation3">
- <data name="initialProduct/dataset" xsi:type="string">product_with_category</data>
- <data name="product/data/sku" xsi:type="string">simple_product_with_category_%isolation%</data>
+ <data name="initialProduct/dataset" xsi:type="string">product_with_category</data>
+ <data name="product/data/sku" xsi:type="string">simple_product_with_category_%isolation%</data>
<data name="product/data/sku" xsi:type="string">sku_simple_product_with_video_%isolation%</data>
<data name="product/data/media_gallery/images/0/video_url" xsi:type="string">https://youtu.be/WMp2PvU2qi8</data>
<data name="product/data/media_gallery/images/0/video_title" xsi:type="string">Foo Test 1</data>
+ <data name="configData" xsi:type="string">youtube_api_key</data>
<constraint name="Magento\ProductVideo\Test\Constraint\AssertVideoCategoryView" />
<constraint name="Magento\ProductVideo\Test\Constraint\AssertVideoProductView" />
<constraint name="Magento\Catalog\Test\Constraint\AssertProductForm" />
</variation>
<variation name="AddVideoToPCFTestVariation4">
- <data name="initialProduct/dataset" xsi:type="string">product_with_category</data>
- <data name="product/data/sku" xsi:type="string">simple_product_with_category_%isolation%</data>
+ <data name="initialProduct/dataset" xsi:type="string">product_with_category</data>
+ <data name="product/data/sku" xsi:type="string">simple_product_with_category_%isolation%</data>
<data name="product/data/media_gallery/images/0/video_url" xsi:type="string">https://vimeo.com/21776334</data>
<data name="product/data/media_gallery/images/0/video_title" xsi:type="string">Foo Test 2</data>
<constraint name="Magento\ProductVideo\Test\Constraint\AssertVideoCategoryView" />
@@ -73,6 +75,7 @@
<data name="initialProduct/dataset" xsi:type="string">product_with_video_youtube</data>
<data name="product/data/sku" xsi:type="string">sku_simple_product_with_video_%isolation%</data>
<data name="product/data/media_gallery/images/0/video_url" xsi:type="string">https://youtu.be/bpOSxM0rNPM</data>
+ <data name="configData" xsi:type="string">youtube_api_key</data>
<constraint name="Magento\Catalog\Test\Constraint\AssertProductForm" />
</variation>
<variation name="UpdateVideoInPCFTestVariation2">
@@ -97,6 +100,7 @@
<data name="productVideo/data/media_gallery/images/0/video_url" xsi:type="string">https://youtu.be/bpOSxM0rNPM</data>
<data name="productVideo/data/media_gallery/images/0/video_title" xsi:type="string">Edit Test</data>
<data name="productVideo/data/media_gallery/images/0/video_description" xsi:type="string">This is an edit test</data>
+ <data name="configData" xsi:type="string">youtube_api_key</data>
<constraint name="Magento\Catalog\Test\Constraint\AssertProductForm" />
</variation>
<variation name="GetVideoInfoTestVariation1">
@@ -105,6 +109,7 @@
<data name="product/data/sku" xsi:type="string">simple_product_with_category_%isolation%</data>
<data name="product/data/media_gallery/images/0/video_url" xsi:type="string">https://youtu.be/WMp2PvU2qi8</data>
<data name="video/video_title" xsi:type="string">Foo Fighters - Congregation</data>
+ <data name="configData" xsi:type="string">youtube_api_key</data>
<constraint name="Magento\ProductVideo\Test\Constraint\AssertGetVideoInfoDataIsCorrect" />
</variation>
<variation name="GetVideoInfoTestVariation2">