)
}
+function SlidesNavigation(props){
function ThumbNavigationItem(props){
+ const slidesNavigationDisplay = props.gallery.map((g,index) => (
+
+ ))
React.useEffect(() => { if (props.gallery && props.gallery.length === props.slideIndex + 1){ props.onfinishedThumbsRender() } }, [props.gallery])
React.useEffect(() => {
if (window.galleryThumbs){
window.galleryThumbs.slideTo(props.currentSlide);
}
},[props.currentSlide])
+
+
+
+
+
let previewImageContainer;
if (props.item.type === "book"){
previewImageContainer = (
)
} else {
let bgImage;
if (props.item.type === "image"){
bgImage = props.item.url.split('/img')[0] + "/cache/120x80-1/img" + props.item.url.split('/img')[1];
} else if (props.item.type === "video"){
bgImage = props.item.url_thumb;
}
previewImageContainer =
+
+ {slidesNavigationDisplay}
+
props.onThumbItemClick(props.slideIndex)}
onTouchEnd={() => props.onThumbItemClick(props.slideIndex)}>
{previewImageContainer}
)
}
const rootElement = document.getElementById("product-media-slider-container");
ReactDOM.render(
, rootElement);
\ No newline at end of file
diff --git a/httpdocs/theme/react/product-media-slider/app/video-player.js b/httpdocs/theme/react/product-media-slider/app/video-player.js
index 3e2e9a5c3..8542aeb79 100644
--- a/httpdocs/theme/react/product-media-slider/app/video-player.js
+++ b/httpdocs/theme/react/product-media-slider/app/video-player.js
@@ -1,126 +1,145 @@
+import React, { useState } from 'react';
+import ReactPlayer from 'react-player'
+
+
+
+
+
+
+
import React from 'react';
import {
Player,
ControlBar,
BigPlayButton,
VolumeMenuButton,
LoadingSpinner,
CurrentTimeDisplay,
DurationDisplay } from 'video-react';
+
+function VideoPlayerWrapper(props){
+ console.log(props);
+ return (
+
+ )
+
+
+
+
class VideoPlayerWrapper extends React.Component {
constructor(props, context){
super(props, context);
let hostLocation = window.location.href;
if (!hostLocation.endsWith('/')) hostLocation += "/";
this.state = {
source:this.props.slide.url_preview,
width:this.props.width,
videoStarted:false,
videoStopped:false,
videoStartUrl:hostLocation + "startvideoajax?collection_id="+this.props.slide.collection_id+"&file_id="+this.props.slide.file_id,
videoStopUrl:hostLocation + "stopvideoajax?media_view_id="
}
this.onCinemaModeClick = this.onCinemaModeClick.bind(this);
this.play = this.play.bind(this);
this.pause = this.pause.bind(this);
}
componentDidMount() {
this.refs.player.subscribeToStateChange(this.handleStateChange.bind(this));
}
handleStateChange(state, prevState) {
this.setState({ player: state },function(){
if (this.state.player){
if (typeof this.state.player.videoWidth !== undefined) {
setTimeout(() => {
this.setState({videoRenderMask:false})
}, 1000);
}
if (this.state.player.hasStarted && this.state.videoStarted === false){
this.setState({videoStarted:true},function(){
const self = this;
$.ajax({url: this.state.videoStartUrl}).done(function(res) {
self.setState({videoStopUrl:self.state.videoStopUrl + res.MediaViewId})
});
});
}
if (this.state.player.paused && this.state.videoStarted === true && this.state.videoStopped === false){
this.setState({videoStopped:true},function(){
$.ajax({url: this.state.videoStopUrl}).done(function(res) {
// console.log(res)
});
});
}
if (state.isFullscreen === false && prevState.isFullscreen === true) this.props.onUpdateDimensions()
if (state.isFullscreen !== prevState.isFullscreen) this.props.onFullScreenToggle(state.isFullscreen)
}
});
}
shouldComponentUpdate(nextProps, nextState){
if (nextProps.playVideo === false) this.pause()
return true;
}
onCinemaModeClick(){
this.props.onCinemaModeClick()
}
play() {
this.refs.player.play();
}
pause() {
this.refs.player.pause();
}
render(){
let videoPlayerDisplay;
if (this.state.source){
let width = this.props.width;
if (this.props.cinemaMode === false){
if (this.state.player){
const dimensionsRatio = this.props.height / this.state.player.videoHeight;
if ((this.state.player.videoWidth * dimensionsRatio) < this.props.width) width = this.state.player.videoWidth * dimensionsRatio;
}
}
videoPlayerDisplay = (
)
}
let videoRenderMask =
if (this.state.videoRenderMask === false){ videoRenderMask = ''; }
return (
{videoRenderMask}
{videoPlayerDisplay}
)
}
}
export default VideoPlayerWrapper;
\ No newline at end of file
diff --git a/httpdocs/theme/react/product-media-slider/product-media-slider.js b/httpdocs/theme/react/product-media-slider/product-media-slider.js
index c21bb7108..55530fba2 100644
--- a/httpdocs/theme/react/product-media-slider/product-media-slider.js
+++ b/httpdocs/theme/react/product-media-slider/product-media-slider.js
@@ -1,1133 +1,1265 @@
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = "./app/product-media-slider.js");
/******/ })
/************************************************************************/
/******/ ({
+
+
+
+
+
+
+
+
/***/ "./app/book-reader.js":
/*!****************************!*\
!*** ./app/book-reader.js ***!
\****************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }\n\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); }\n\nfunction _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"] != null) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; }\n\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\n\n\nfunction BookReaderWrapper(props) {\n var _useState = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])(),\n _useState2 = _slicedToArray(_useState, 2),\n renditionState = _useState2[0],\n setRenditionState = _useState2[1];\n\n react__WEBPACK_IMPORTED_MODULE_0___default.a.useEffect(function () {\n var book = ePub(props.slide.url);\n var rendition = book.renderTo(\"book-container\", {\n flow: \"paginated\",\n width: props.width - 40,\n height: props.height - 40\n });\n setRenditionState(rendition);\n var displayed = rendition.display();\n book.ready.then(function (book) {\n console.log(book);\n /*let meta = book.package.metadata; // Metadata from the package json\r\n let toc = book.navigation.toc; // Table of Contents\r\n let landmarks = book.navigation.landmarks; // landmarks\r\n let spine = book.spine; // landmarks\r\n let cover = book.cover; // landmarks\r\n let resources = book.resources; // landmarks\r\n let pageList = book.pageList; // page list (if present)\r\n console.log(meta);\r\n console.log(toc);\r\n console.log(landmarks);\r\n console.log(spine);\r\n console.log(cover);\r\n console.log(resources);\r\n console.log(pageList);*/\n });\n }, []);\n\n function goPrev() {\n renditionState.prev();\n }\n\n function goNext() {\n renditionState.next();\n }\n\n return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n id: \"book-reader-wrapper\"\n }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n id: \"prev\",\n className: \"arrow\",\n onClick: goPrev\n }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"span\", {\n className: \"glyphicon glyphicon-chevron-left\"\n })), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n id: \"book-container\"\n }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n id: \"next\",\n className: \"arrow\",\n onClick: goNext\n }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"span\", {\n className: \"glyphicon glyphicon-chevron-right\"\n })));\n}\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (BookReaderWrapper);\n\n//# sourceURL=webpack:///./app/book-reader.js?");
/***/ }),
/***/ "./app/product-media-slider.js":
/*!*************************************!*\
!*** ./app/product-media-slider.js ***!
\*************************************/
/*! no exports provided */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ \"./node_modules/react-dom/index.js\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _video_player__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./video-player */ \"./app/video-player.js\");\nfunction _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }\n\nfunction _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance\"); }\n\nfunction _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === \"[object Arguments]\") return Array.from(iter); }\n\nfunction _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }\n\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }\n\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); }\n\nfunction _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"] != null) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; }\n\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\n\n\n\n\nfunction ProductMediaSlider() {\n /* Component */\n var _useState = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])(window.product),\n _useState2 = _slicedToArray(_useState, 2),\n product = _useState2[0],\n setProduct = _useState2[1];\n\n var galleryArray;\n\n if (product.embed_code !== null || product.image_small !== null) {\n var productMainSlide = product.embed_code !== null ? product.embed_code : product.image_small;\n galleryArray = [productMainSlide].concat(_toConsumableArray(window.galleryPicturesJson));\n }\n\n var _useState3 = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])(galleryArray),\n _useState4 = _slicedToArray(_useState3, 2),\n gallery = _useState4[0],\n setGallery = _useState4[1];\n\n var parentContainerElement = document.getElementById('product-title-div');\n\n var _useState5 = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])(parentContainerElement.offsetWidth),\n _useState6 = _slicedToArray(_useState5, 2),\n containerWidth = _useState6[0],\n setContainerWidth = _useState6[1];\n\n var _useState7 = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])(0),\n _useState8 = _slicedToArray(_useState7, 2),\n currentSlide = _useState8[0],\n setCurrentSlide = _useState8[1];\n\n var _useState9 = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])(containerWidth * gallery.length),\n _useState10 = _slicedToArray(_useState9, 2),\n sliderWidth = _useState10[0],\n setSliderWidth = _useState10[1];\n\n var _useState11 = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])(315),\n _useState12 = _slicedToArray(_useState11, 2),\n sliderHeight = _useState12[0],\n setSliderHeight = _useState12[1];\n\n var _useState13 = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])(containerWidth * currentSlide),\n _useState14 = _slicedToArray(_useState13, 2),\n sliderPosition = _useState14[0],\n setSliderPosition = _useState14[1];\n\n var _useState15 = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])(true),\n _useState16 = _slicedToArray(_useState15, 2),\n loading = _useState16[0],\n setLoading = _useState16[1];\n\n react__WEBPACK_IMPORTED_MODULE_0___default.a.useEffect(function () {\n initProductMediaSlider();\n }, []);\n react__WEBPACK_IMPORTED_MODULE_0___default.a.useEffect(function () {\n updateDimensions();\n }, [currentSlide]); // init product media slider\n\n function initProductMediaSlider() {\n window.addEventListener(\"resize\", updateDimensions);\n window.addEventListener(\"orientationchange\", updateDimensions);\n if (window.filesJson) checkForMediaFiles();else setLoading(false);\n } // check for media files\n\n\n function checkForMediaFiles() {\n var mediaGalleryItems = [];\n window.filesJson.forEach(function (f, index) {\n console.log(f);\n if (f.type.indexOf('video') > -1 || f.type.indexOf('audio') > -1) mediaGalleryItems.push(f.url_encoded);\n });\n\n if (mediaGalleryItems.length > 0) {\n var newGallery = [].concat(_toConsumableArray(gallery), [mediaGalleryItems]);\n setGallery(newGallery);\n }\n\n setLoading(false);\n } // update dimensions\n\n\n function updateDimensions() {\n var newContainerWidth = parentContainerElement.offsetWidth;\n setContainerWidth(newContainerWidth);\n setSliderWidth(containerWidth * gallery.length);\n setSliderPosition(containerWidth * currentSlide);\n }\n /* Render */\n // slider container style\n\n\n var sliderContainerStyle = {\n width: sliderWidth + 'px',\n height: sliderHeight + 'px' // slider wrapper style\n\n };\n var sliderWrapperStyle = {\n width: sliderWidth + 'px',\n left: '-' + sliderPosition + 'px',\n height: sliderHeight + 'px' // prev / next slide arrow values\n\n };\n var prevCurrentSlide = currentSlide > 0 ? currentSlide - 1 : gallery.length - 1;\n var nextCurrentSlide = currentSlide < gallery.length - 1 ? currentSlide + 1 : 0; // slides display\n\n var slidesDisplay;\n\n if (loading === false) {\n slidesDisplay = gallery.map(function (s, index) {\n return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(SlideItem, {\n key: index,\n slideIndex: index,\n slideUrl: s,\n currentSlide: currentSlide,\n containerWidth: containerWidth,\n onSetSlideHeight: function onSetSlideHeight(height) {\n return setSliderHeight(height);\n }\n });\n });\n }\n\n return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"main\", {\n id: \"media-slider\"\n }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n id: \"slider-container\",\n style: sliderContainerStyle\n }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"a\", {\n className: \"left carousel-control\",\n id: \"arrow-left\",\n onClick: function onClick() {\n return setCurrentSlide(prevCurrentSlide);\n }\n }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"span\", {\n className: \"glyphicon glyphicon-chevron-left\"\n })), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n id: \"slider-wrapper\",\n style: sliderWrapperStyle\n }, slidesDisplay), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"a\", {\n className: \"right carousel-control\",\n id: \"arrow-right\",\n onClick: function onClick() {\n return setCurrentSlide(nextCurrentSlide);\n }\n }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"span\", {\n className: \"glyphicon glyphicon-chevron-right\"\n }))), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(SlidesNavigation, {\n gallery: gallery,\n currentSlide: currentSlide,\n onChangeCurrentSlide: function onChangeCurrentSlide(e) {\n return setCurrentSlide(e);\n }\n }));\n}\n\nfunction SlideItem(props) {\n var _useState17 = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])(''),\n _useState18 = _slicedToArray(_useState17, 2),\n mediaType = _useState18[0],\n setMediaType = _useState18[1];\n\n react__WEBPACK_IMPORTED_MODULE_0___default.a.useEffect(function () {\n determineMediaType();\n }, []);\n react__WEBPACK_IMPORTED_MODULE_0___default.a.useEffect(function () {\n if (props.slideIndex === props.currentSlide) onSetParentSliderHeight();\n }, []);\n react__WEBPACK_IMPORTED_MODULE_0___default.a.useEffect(function () {\n if (props.slideIndex === props.currentSlide) onSetParentSliderHeight();\n }, [props.currentSlide]);\n\n function determineMediaType() {\n var initialMediaType;\n if (props.slideUrl.indexOf('