From 0bd0eeb0e6b930667caaefbb6d8310ab72ec5d7e Mon Sep 17 00:00:00 2001 From: aleensd Date: Thu, 21 Nov 2024 15:05:09 +0200 Subject: [PATCH] add tooltip --- .../static/js/components/_shared/ToolTip.jsx | 51 +++++++++++++++++++ .../static/js/components/_shared/ToolTip.scss | 20 ++++++++ .../js/components/media-viewer/ImageViewer.js | 4 ++ static/css/media.css | 1 + static/js/media.js | 2 +- 5 files changed, 77 insertions(+), 1 deletion(-) create mode 100644 frontend/src/static/js/components/_shared/ToolTip.jsx create mode 100644 frontend/src/static/js/components/_shared/ToolTip.scss diff --git a/frontend/src/static/js/components/_shared/ToolTip.jsx b/frontend/src/static/js/components/_shared/ToolTip.jsx new file mode 100644 index 0000000..816d274 --- /dev/null +++ b/frontend/src/static/js/components/_shared/ToolTip.jsx @@ -0,0 +1,51 @@ +import React, { useEffect, useRef, useState } from 'react'; +import './ToolTip.scss'; + +function Tooltip({ children, content, title, position = 'right', classNames = '' }) { + const [active, setActive] = useState(false); + const [tooltipDimensions, setTooltipDimensions] = useState({ + height: 0, + width: 0, + }); + + const popUpRef = useRef(null); + + const showTip = () => { + setActive(true); + }; + + const hideTip = () => { + setActive(false); + }; + + useEffect(() => { + if (active && popUpRef.current) { + setTooltipDimensions({ + height: popUpRef.current.clientHeight || 0, + width: popUpRef.current.clientWidth || 0, + }); + } + }, [active]); + + const tooltipPositionStyles = { + right: { left: '100%', marginLeft: '10px', top: '-50%' }, + left: { right: '100%', marginRight: '10px', top: '-50%' }, + top: { left: '50%', top: `-${tooltipDimensions.height + 10}px`, transform: 'translateX(-50%)' }, + center: { top: '50%', left: '50%', translate: 'x-[-50%]' }, + 'bottom-left': { left: `-${tooltipDimensions.width - 20}px`, top: '100%', marginTop: '10px' }, + }; + + return ( +
+ {active && ( +
+ {title &&
{title}
} +
{content}
+
+ )} + {children} +
+ ); +} + +export default Tooltip; diff --git a/frontend/src/static/js/components/_shared/ToolTip.scss b/frontend/src/static/js/components/_shared/ToolTip.scss new file mode 100644 index 0000000..8457cd9 --- /dev/null +++ b/frontend/src/static/js/components/_shared/ToolTip.scss @@ -0,0 +1,20 @@ +.tooltip-box { + position: absolute; + padding: 10px; + z-index: 100; + background: #fff; + border-radius: 8px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); +} + +.tooltip-title { + color: #333; + font-size: 14px; + margin-bottom: 5px; +} + +.tooltip-content { + color: #666; + font-size: 12px; +} + diff --git a/frontend/src/static/js/components/media-viewer/ImageViewer.js b/frontend/src/static/js/components/media-viewer/ImageViewer.js index a806ca5..ab5e472 100755 --- a/frontend/src/static/js/components/media-viewer/ImageViewer.js +++ b/frontend/src/static/js/components/media-viewer/ImageViewer.js @@ -1,6 +1,7 @@ import React, { useContext, useEffect, useState } from 'react'; import { SiteContext } from '../../utils/contexts/'; import { MediaPageStore } from '../../utils/stores/'; +import Tooltip from '../_shared/ToolTip'; export default function ImageViewer() { const site = useContext(SiteContext); @@ -85,7 +86,10 @@ export default function ImageViewer() { return !image ? null : (
+ + {MediaPageStore.get('media-data').title setIsModalOpen(true)} /> + {/* {slideshowItems &&
{slideshowItems.map((i)=>
  • {i.poster_url}
    • )}
    } */} {isModalOpen && slideshowItems && (
    setIsModalOpen(false)}> diff --git a/static/css/media.css b/static/css/media.css index 32fbf3f..dabda27 100644 --- a/static/css/media.css +++ b/static/css/media.css @@ -1,4 +1,5 @@ .player-container{overflow:hidden;background:#000} +.tooltip-box{position:absolute;padding:10px;z-index:100;background:#fff;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;-webkit-box-shadow:0 2px 10px rgba(0,0,0,.1);-moz-box-shadow:0 2px 10px rgba(0,0,0,.1);box-shadow:0 2px 10px rgba(0,0,0,.1)}.tooltip-title{color:#333;font-size:14px;margin-bottom:5px}.tooltip-content{color:#666;font-size:12px} .vjs-marker{position:absolute;left:0;bottom:0em;opacity:1;height:100%;-o-transition:opacity .2s ease;transition:opacity .2s ease;-webkit-transition:opacity .2s ease;-moz-transition:opacity .2s ease;z-index:100}.vjs-marker:hover{cursor:pointer;-webkit-transform:scale(1.3, 1.3);-moz-transform:scale(1.3, 1.3);-o-transform:scale(1.3, 1.3);-ms-transform:scale(1.3, 1.3);transform:scale(1.3, 1.3)}.vjs-tip{visibility:hidden;display:block;opacity:.8;padding:5px;font-size:10px;position:absolute;bottom:14px;z-index:100000}.vjs-tip .vjs-tip-arrow{background:url(data:image/gif;base64,R0lGODlhCQAJAIABAAAAAAAAACH5BAEAAAEALAAAAAAJAAkAAAIRjAOnwIrcDJxvwkplPtchVQAAOw==) no-repeat top left;bottom:0;left:50%;margin-left:-4px;background-position:bottom left;position:absolute;width:9px;height:5px}.vjs-tip .vjs-tip-inner{border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;padding:5px 8px 4px 8px;background-color:#000;color:#fff;max-width:200px;text-align:center}.vjs-break-overlay{visibility:hidden;position:absolute;z-index:100000;top:0}.vjs-break-overlay .vjs-break-overlay-text{padding:9px;text-align:center} .comments-form-inner .form .form-textarea-wrap{border-color:var(--comments-textarea-wrapper-border-color)}.comments-form-inner .form .form-textarea-wrap:after{background-color:var(--comments-textarea-wrapper-after-bg-color)}.comments-form-inner .form .form-textarea,.comments-form-inner .form .form-textarea__input,.comments-form-inner .form .form-textarea__suggestions__list{color:var(--comments-textarea-text-color)}.comments-form-inner .form .form-textarea:placeholder,.comments-form-inner .form .form-textarea__input:placeholder,.comments-form-inner .form .form-textarea__suggestions__list:placeholder{color:var(--comments-textarea-text-placeholder-color)}.comments-form-inner .form .form-textarea__suggestions__list{background-color:var(--body-bg-color)}.comments-form-inner .form strong{background-color:var(--comment-text-mentions-background-color-highlight)}.comments-list-inner{border-color:var(--comments-list-inner-border-color)}.comment-author{color:var(--comment-author-text-color)}.comment-author a{color:var(--comment-author-text-color)}.comment-date{color:var(--comment-date-text-color);-webkit-text-decoration-color:var(--comment-date-text-color);-moz-text-decoration-color:var(--comment-date-text-color);text-decoration-color:var(--comment-date-text-color)}.comment-date a{color:var(--comment-date-text-color);-webkit-text-decoration-color:var(--comment-date-text-color);-moz-text-decoration-color:var(--comment-date-text-color);text-decoration-color:var(--comment-date-text-color)}.comment-date a:hover{color:var(--comment-date-hover-text-color);-webkit-text-decoration-color:var(--comment-date-hover-text-color);-moz-text-decoration-color:var(--comment-date-hover-text-color);text-decoration-color:var(--comment-date-hover-text-color)}.comment-text{color:var(--comment-text-color)}.comment-actions button:focus{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.comment-actions .circle-icon-button{background-color:var(--body-bg-color)}.comment-actions .material-icons:hover,.comment-actions .material-icons:focus{color:var(--comment-actions-material-icon-text-color)}.comment-actions .likes-num,.comment-actions .dislikes-num{color:var(--comment-actions-likes-num-text-color)}.comment-actions .reply-comment>button{color:var(--comment-actions-reply-button-text-color);background:none}.comment-actions .reply-comment>button:hover,.comment-actions .reply-comment>button:focus{color:var(--comment-actions-reply-button-hover-text-color)}.comment-actions .reply-comment>button:hover .material-icons,.comment-actions .reply-comment>button:focus .material-icons{color:var(--comment-actions-reply-button-hover-text-color)}.comment-actions .remove-comment .popup-message-bottom button.cancel-comment-removal{color:var(--comment-actions-cancel-removal-button-text-color)}.comment-actions .remove-comment .popup-message-bottom button.cancel-comment-removal:hover,.comment-actions .remove-comment .popup-message-bottom button.cancel-comment-removal:focus{color:var(--comment-actions-cancel-removal-button-hover-text-color)}.comment-actions .remove-comment .popup-message-bottom button.cancel-comment-removal:hover .material-icons,.comment-actions .remove-comment .popup-message-bottom button.cancel-comment-removal:focus .material-icons{color:var(--comment-actions-cancel-removal-button-hover-text-color)}.comments-form{position:relative;margin:0 0 1.5rem}.comments-form-inner{min-height:40px}.comments-form-inner .thumbnail{position:absolute;top:0;left:0;margin:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.comments-form-inner .form{position:relative;width:100%;padding-left:56px}.comments-form-inner .form .form-textarea-wrap{position:relative;display:block;padding:0 0 .3em;border-style:solid;border-width:0 0 1px}.comments-form-inner .form .form-textarea-wrap:after{content:" ";display:block;visibility:hidden;opacity:0;position:absolute;bottom:-1px;left:0;width:100%;height:2px;-webkit-transition:opacity .2s;-o-transition:opacity .2s;-moz-transition:opacity .2s;transition:opacity .2s}.comments-form-inner .form .form-textarea-wrap.focused:after{visibility:visible;opacity:1}.comments-form-inner .form .form-textarea,.comments-form-inner .form .form-textarea__input{position:relative;resize:none;display:block;min-width:100%;width:100%;max-width:100%;margin:0;padding:0;outline:0;border-style:solid;border:0;min-height:20px;height:auto;text-decoration:none;overflow-y:hidden;overflow-wrap:break-word;word-break:break-word;vertical-align:baseline;background-color:rgba(0,0,0,0);background-color:transparent;font-size:15px;font-weight:400;line-height:21px}.comments-form-inner .form .form-textarea:placeholder,.comments-form-inner .form .form-textarea__input:placeholder{font-size:15px;font-weight:300}.comments-form-inner .form .form-textarea:focus,.comments-form-inner .form .form-textarea__input:focus{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.comments-form-inner .form a.form-textarea-wrap{text-decoration:none}.comments-form-inner .form a.form-textarea-wrap:focus{outline:1px dotted rgba(10,10,10,.5)}.comments-form-inner .form a.form-textarea-wrap .form-textarea,.comments-form-inner .form a.form-textarea-wrap .form-textarea__input{opacity:.5}.comments-form-inner .form .form-buttons{margin-top:8px;text-align:right}.comments-form-inner .form .form-buttons a,.comments-form-inner .form .form-buttons button{display:inline-block;padding:12px 16px 10px;margin-left:8px;line-height:1;font-weight:400;color:#fff;text-decoration:none;border:0;-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px}.comments-form-inner .form .form-buttons a.disabled,.comments-form-inner .form .form-buttons button.disabled{opacity:.2}.comments-list{white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word}.comments-list-inner{border-bottom-width:1px;border-bottom-style:solid;padding-top:16px;margin-bottom:8px;padding-left:16px;padding-right:16px}@media screen and (min-width: 640px){.comments-list-inner{padding-left:0;padding-right:0}}@media screen and (min-width: 1008px){.comments-list-inner{padding-top:24px;margin-bottom:0;border-bottom:0;border-top-width:1px;border-top-style:solid}}.comments-list-inner h2{display:inline-block;font-size:16px;font-weight:400;line-height:20px;margin:0 2rem 1.5rem 0}.comments-list-inner .disabled-comments-msg{display:block;text-align:center;font-size:14px;margin-bottom:1rem}.ratings-container+.comments-list .comments-list-inner{margin-top:-16px;border-top-width:0}.comment-replies-inner{display:inline-block}.comment{position:relative;width:100%;display:inline-block;margin-bottom:1rem}.comment-inner{position:relative}.comment-author-thumb{position:absolute;top:0;left:0;width:40px;height:40px;display:inline-block;overflow:hidden;-webkit-border-radius:9999px;-moz-border-radius:9999px;border-radius:9999px}.comment-author-thumb img{width:100%;height:100%;display:block}.comment-content{position:relative;width:auto;margin:0 0 0 56px;display:inline-block}.comment-content .toggle-more{padding:0;margin:8px 0 0 0;font-size:14px;font-weight:500;line-height:16px;overflow-wrap:break-word;border:0}.comment-meta{display:block;margin-bottom:2px}.comment-author{display:inline-block;font-size:13px;font-weight:500;line-height:18px;margin:0 4px 2px 0}.comment-author a{text-decoration:none}.comment-date{display:inline-block;font-size:13px;line-height:18px}.comment-date a{text-transform:none}.comment-text{font-size:14px;line-height:20px;overflow-wrap:break-word;word-break:break-word;white-space:pre-wrap;overflow:hidden;max-height:100px}@media screen and (min-width: 1008px){.comment-text{max-height:80px}}@media screen and (min-width: 1216px){.comment-text{max-height:60px}}.comment-text.show-all{max-height:100%}.comment-text strong{font-weight:500}.comment-text a{text-decoration:none}.comment-text a:hover{text-decoration:underline}.comment-text p{display:inline-block;width:100%;padding:0;margin:.5rem 0}.comment-text p:empty{display:none}.comment-actions{position:relative;display:inline-block;width:100%;margin-top:4px;color:#909090}.comment-actions .circle-icon-button{display:inline-block;vertical-align:middle;width:2rem;height:2rem}.comment-actions .material-icons{color:#909090;font-size:16px;margin-bottom:2px}.comment-actions .comment-action{display:inline-block}.comment-actions .comment-action~*{margin-left:8px}.comment-actions .likes-num,.comment-actions .dislikes-num{font-size:13px;line-height:18px}.comment-actions .reply-comment>button,.comment-actions .remove-comment>button{padding:8px 16px;font-size:13px;font-weight:500;font-weight:400;line-height:15px;border:0;-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px}.comment-actions .remove-comment{position:relative;width:auto;margin-top:.5rem}.comment-actions .remove-comment>button{color:#fff}.comment-actions .remove-comment .popup{position:absolute;bottom:100%;left:0;margin-bottom:8px}.comment-actions .remove-comment .popup .popup-message-bottom button{position:relative;width:auto;padding:0;border:0}.comment-actions .remove-comment .popup .popup-message-bottom button.cancel-comment-removal,.comment-actions .remove-comment .popup .popup-message-bottom button.proceed-comment-removal{background-color:transparent;background-color:rgba(0,0,0,0)}.comment-actions .remove-comment .popup .popup-message-bottom button.proceed-comment-removal{float:right}.comment-actions .remove-comment .popup .popup-message-bottom button.cancel-comment-removal{float:left} .playlist-form-field.playlist-title.focused:after,.playlist-form-field.playlist-description.focused:after{background-color:var(--playlist-form-title-focused-bg-color)}.playlist-privacy{border-color:var(--playlist-privacy-border-color)}.playlist-form-wrap .playlist-form-actions button.cancel-btn{color:var(--playlist-form-cancel-button-text-color)}.playlist-form-wrap .playlist-form-actions button.cancel-btn:hover,.playlist-form-wrap .playlist-form-actions button.cancel-btn:focus{color:var(--playlist-form-cancel-button-hover-text-color)}.playlist-form-wrap textarea,.playlist-form-wrap input[type=text]{color:var(--playlist-form-field-text-color);border-color:var(--playlist-form-field-border-color)}.playlist-form-wrap textarea:focus,.playlist-form-wrap input[type=text]:focus{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.playlist-form-field.playlist-title,.playlist-form-field.playlist-description{position:relative}.playlist-form-field.playlist-title.focused:after,.playlist-form-field.playlist-description.focused:after{content:"";position:absolute;bottom:-1px;width:100%;height:2px;display:block}.playlist-form-field.playlist-title.invalid:after,.playlist-form-field.playlist-description.invalid:after{content:"";position:absolute;bottom:-1px;width:100%;height:2px;display:block;background-color:rgba(255,0,0,.8)}.playlist-privacy{padding-bottom:12px;border-style:solid;border-width:0 0 1px}.playlist-form-wrap .playlist-form-field{position:relative;margin:0 24px;margin-top:16px}.playlist-form-wrap .playlist-form-label{display:block;font-size:12px;line-height:20px;letter-spacing:.132px}.playlist-form-wrap .playlist-form-actions{position:relative;display:inline-block;width:100%;float:left;margin-top:4px;padding:8px}.playlist-form-wrap .playlist-form-actions button{height:40px;padding:10px 16px;font-size:14px;line-height:20px;letter-spacing:.007px;font-weight:500;border-width:0;background:none;position:relative;width:auto;float:left}.playlist-form-wrap .playlist-form-actions button.create-btn{float:right;color:var(--theme-color, var(--default-theme-color))}.playlist-form-wrap label,.playlist-form-wrap textarea,.playlist-form-wrap input[type=text]{display:block;width:100%}.playlist-form-wrap textarea{min-width:100%;max-width:100%;min-height:21px;height:24px;line-height:21px;overflow-y:hidden;overflow-wrap:break-word;vertical-align:baseline;resize:none}.playlist-form-wrap textarea,.playlist-form-wrap input[type=text]{padding:0px 0 2px 0;font-size:14px;line-height:20px;border-width:0 0 1px;background:none;outline:0}.playlist-form-wrap textarea::-webkit-input-placeholder, .playlist-form-wrap input[type=text]::-webkit-input-placeholder{color:#909090;opacity:1}.playlist-form-wrap textarea:-moz-placeholder, .playlist-form-wrap input[type=text]:-moz-placeholder{color:#909090;opacity:1}.playlist-form-wrap textarea::-moz-placeholder, .playlist-form-wrap input[type=text]::-moz-placeholder{color:#909090;opacity:1}.playlist-form-wrap textarea:-ms-input-placeholder, .playlist-form-wrap input[type=text]:-ms-input-placeholder{color:#909090;opacity:1}.playlist-form-wrap textarea::-ms-input-placeholder, .playlist-form-wrap input[type=text]::-ms-input-placeholder{color:#909090;opacity:1}.playlist-form-wrap textarea::placeholder,.playlist-form-wrap input[type=text]::placeholder{color:#909090;opacity:1}.playlist-form-wrap textarea:-ms-input-placeholder,.playlist-form-wrap input[type=text]:-ms-input-placeholder{color:#909090}.playlist-form-wrap textarea::-ms-input-placeholder,.playlist-form-wrap input[type=text]::-ms-input-placeholder{color:#909090}.playlist-form-wrap input[type=radio]{margin-right:16px;vertical-align:middle}.playlist-form-wrap label{padding:4px 0;font-size:14px;line-height:21px;cursor:pointer} diff --git a/static/js/media.js b/static/js/media.js index 0410966..56c35fd 100644 --- a/static/js/media.js +++ b/static/js/media.js @@ -1 +1 @@ -!function(){var e,t={3683:function(e,t,n){"use strict";var r=n(2541),a=(n(2322),n(9268),n(9006),n(5090),n(5101),n(3080),n(2004),n(8407),n(6394),n(8288),n(5677),n(2129),n(4655),n(5466)),i=n(3613),o=n(8578);function l(){return a.createElement("div",{className:"player-container viewer-attachment-container"},a.createElement("div",{className:"player-container-inner"},a.createElement("span",null,a.createElement("span",null,a.createElement("i",{className:"material-icons"},"insert_drive_file")))))}var s=n(3074),u=n.n(s),c=n(8009),d=n.n(c),m=n(473),f=n(541),p=n(9722);function y(e){var t=null,n=e.split(".");if(n.length)switch(n=n[n.length-1]){case"webm":t="audio/webm";break;case"flac":t="audio/flac";break;case"wave":t="audio/wave";break;case"wav":t="audio/wav";break;case"ogg":case"ogg":t="audio/ogg";break;case"mp3":case"mpeg":t="audio/mpeg"}return t}var h=n(1283);function g(e){return(g="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function v(e,t){for(var n=0;n');var n=null,r=null;!this.props.inEmbed&&o.MediaPageStore.get("playlist-id")?(n=o.MediaPageStore.get("playlist-next-media-url"),r=o.MediaPageStore.get("playlist-previous-media-url")):n=o.MediaPageStore.get("media-data").related_media.length&&!this.props.inEmbed?o.MediaPageStore.get("media-data").related_media[0].url:null,this.AudioPlayerData.instance=new(d())(this.refs.AudioElem,{sources:this.videoSources,poster:this.videoPoster,autoplay:!this.props.inEmbed,bigPlayButton:!0,controlBar:{fullscreen:!1,theaterMode:!1,next:!!n,previous:!!r},cornerLayers:{topLeft:e,topRight:this.upNextLoaderView?this.upNextLoaderView.html():null,bottomLeft:this.recommendedMedia?this.recommendedMedia.html():null,bottomRight:t}},{volume:o.VideoViewerStore.get("player-volume"),soundMuted:o.VideoViewerStore.get("player-sound-muted")},null,null,this.onAudioPlayerStateUpdate.bind(this),this.onClickNextButton.bind(this),this.onClickPreviousButton.bind(this)),this.upNextLoaderView&&(this.upNextLoaderView.setVideoJsPlayerElem(this.AudioPlayerData.instance.player.el_),this.onUpdateMediaAutoPlay()),this.refs.AudioElem.parentNode.focus(),this.AudioPlayerData.instance.player.one("play",function(){this.audioStartedPlaying=!0}.bind(this)),this.recommendedMedia&&(this.recommendedMedia.initWrappers(this.AudioPlayerData.instance.player.el_),this.AudioPlayerData.instance.player.one("pause",this.recommendedMedia.init),this.AudioPlayerData.instance.player.on("fullscreenchange",this.recommendedMedia.onResize),o.PageStore.on("window_resize",this.recommendedMedia.onResize),o.VideoViewerStore.on("changed_viewer_mode",this.recommendedMedia.onResize)),this.AudioPlayerData.instance.player.one("ended",this.onAudioEnd)}}.bind(this),50)}},{key:"initialDocumentFocus",value:function(){this.refs.AudioElem.parentNode&&(this.refs.AudioElem.parentNode.focus(),setTimeout(function(){this.AudioPlayerData.instance.player.play()}.bind(this),50)),window.removeEventListener("focus",this.initialDocumentFocus),this.initialDocumentFocus=null}},{key:"onClickNextButton",value:function(){var e;o.MediaPageStore.get("playlist-id")?null===(e=o.MediaPageStore.get("playlist-next-media-url"))&&(e=o.MediaPageStore.get("media-data").related_media[0].url):this.props.inEmbed||(e=o.MediaPageStore.get("media-data").related_media[0].url),window.location.href=e}},{key:"onClickPreviousButton",value:function(){var e;o.MediaPageStore.get("playlist-id")?null===(e=o.MediaPageStore.get("playlist-previous-media-url"))&&(e=o.MediaPageStore.get("media-data").related_media[0].url):this.props.inEmbed||(e=o.MediaPageStore.get("media-data").related_media[0].url),window.location.href=e}},{key:"onUpdateMediaAutoPlay",value:function(){this.upNextLoaderView&&(o.PageStore.get("media-auto-play")?this.upNextLoaderView.showTimerView(this.AudioPlayerData.instance.isEnded()):this.upNextLoaderView.hideTimerView())}},{key:"onAudioPlayerStateUpdate",value:function(e){this.updatePlayerVolume(e.volume,e.soundMuted)}},{key:"onAudioRestart",value:function(){this.recommendedMedia&&(this.recommendedMedia.updateDisplayType("inline"),this.AudioPlayerData.instance.player.one("pause",this.recommendedMedia.init),this.AudioPlayerData.instance.player.one("ended",this.onAudioEnd))}},{key:"onAudioEnd",value:function(){if(this.recommendedMedia&&(this.recommendedMedia.updateDisplayType("full"),this.AudioPlayerData.instance.player.one("playing",this.onAudioRestart)),!this.props.inEmbed&&o.MediaPageStore.get("playlist-id")){var e=document.querySelector(".video-player .more-media"),t=document.querySelector(".video-player .vjs-actions-anim");this.upNextLoaderView.cancelTimer();var n=o.MediaPageStore.get("playlist-next-media-url");return n&&(e&&(e.style.display="none"),t&&(t.style.display="none"),window.location.href=n),void this.upNextLoaderView.hideTimerView()}this.upNextLoaderView&&(o.PageStore.get("media-auto-play")?(this.upNextLoaderView.startTimer(),this.AudioPlayerData.instance.player.one("play",function(){this.upNextLoaderView.cancelTimer()}.bind(this))):this.upNextLoaderView.cancelTimer())}},{key:"updatePlayerVolume",value:function(e,t){o.VideoViewerStore.get("player-volume")!==e&&f.VideoViewerActions.set_player_volume(e),o.VideoViewerStore.get("player-sound-muted")!==t&&f.VideoViewerActions.set_player_sound_muted(t)}},{key:"wrapperClick",value:function(e){e.target.parentNode===this.refs.videoPlayerWrap&&(this.AudioPlayerData.instance.player.ended()||(!this.AudioPlayerData.instance.player.hasStarted_||this.AudioPlayerData.instance.player.paused()?this.AudioPlayerData.instance.player.play():this.AudioPlayerData.instance.player.pause()))}},{key:"render",value:function(){return a.createElement("div",{className:"player-container audio-player-container"},a.createElement("div",{className:"player-container-inner"},a.createElement("div",{className:"video-player",ref:"videoPlayerWrap",onClick:this.wrapperClick},a.createElement("audio",{tabIndex:"1",ref:"AudioElem",className:"video-js vjs-mediacms native-dimensions"}))))}}])&&v(t.prototype,n),u}(a.PureComponent);function k(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,a,i=[],o=!0,l=!1;try{for(n=n.call(e);!(o=(r=n.next()).done)&&(i.push(r.value),!t||i.length!==t);o=!0);}catch(e){l=!0,a=e}finally{try{o||null==n.return||n.return()}finally{if(l)throw a}}return i}}(e,t)||function(e,t){if(e){if("string"==typeof e)return _(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?_(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);nshareShare';a+='',this.cornerLayers={topLeft:e,topRight:this.upNextLoaderView?this.upNextLoaderView.html():null,bottomLeft:this.recommendedMedia?this.recommendedMedia.html():null,bottomRight:this.props.inEmbed?a:null},this.setState({displayPlayer:!0},(function(){setTimeout((function(){var e=document.querySelector(".share-video-btn"),t=document.querySelector(".share-options-wrapper"),n=document.querySelector(".share-options-inner");e&&e.addEventListener("click",(function(e){(0,m.addClassname)(document.querySelector(".video-js.vjs-mediacms"),"vjs-visible-share-options")})),t&&t.addEventListener("click",(function(e){e.target!==n&&e.target!==t||(0,m.removeClassname)(document.querySelector(".video-js.vjs-mediacms"),"vjs-visible-share-options")}))}),1e3)}))}}},{key:"componentWillUnmount",value:function(){this.unsetRecommendedMedia()}},{key:"initRecommendedMedia",value:function(){null!==this.recommendedMedia&&(this.props.inEmbed||this.recommendedMedia.init(),this.playerInstance.player.on("fullscreenchange",this.recommendedMedia.onResize),o.PageStore.on("window_resize",this.recommendedMedia.onResize),o.VideoViewerStore.on("changed_viewer_mode",this.recommendedMedia.onResize))}},{key:"unsetRecommendedMedia",value:function(){null!==this.recommendedMedia&&(this.playerInstance.player.off("fullscreenchange",this.recommendedMedia.onResize),o.PageStore.removeListener("window_resize",this.recommendedMedia.onResize),o.VideoViewerStore.removeListener("changed_viewer_mode",this.recommendedMedia.onResize),this.recommendedMedia.destroy())}},{key:"onClickNext",value:function(){var e;o.MediaPageStore.get("playlist-id")?null===(e=o.MediaPageStore.get("playlist-next-media-url"))&&(e=this.props.data.related_media[0].url):this.props.inEmbed||(e=this.props.data.related_media[0].url),window.location.href=e}},{key:"onClickPrevious",value:function(){var e;o.MediaPageStore.get("playlist-id")?null===(e=o.MediaPageStore.get("playlist-previous-media-url"))&&(e=this.props.data.related_media[0].url):this.props.inEmbed||(e=this.props.data.related_media[0].url),window.location.href=e}},{key:"onStateUpdate",value:function(e){o.VideoViewerStore.get("in-theater-mode")!==e.theaterMode&&f.VideoViewerActions.set_viewer_mode(e.theaterMode),o.VideoViewerStore.get("player-volume")!==e.volume&&f.VideoViewerActions.set_player_volume(e.volume),o.VideoViewerStore.get("player-sound-muted")!==e.soundMuted&&f.VideoViewerActions.set_player_sound_muted(e.soundMuted),o.VideoViewerStore.get("video-quality")!==e.quality&&f.VideoViewerActions.set_video_quality(e.quality),o.VideoViewerStore.get("video-playback-speed")!==e.playbackSpeed&&f.VideoViewerActions.set_video_playback_speed(e.playbackSpeed)}},{key:"onPlayerInit",value:function(e,t){this.playerElem=t,this.playerInstance=e,this.upNextLoaderView&&(this.upNextLoaderView.setVideoJsPlayerElem(this.playerInstance.player.el_),this.onUpdateMediaAutoPlay()),this.props.inEmbed||this.playerElem.parentNode.focus(),null!==this.recommendedMedia&&(this.recommendedMedia.initWrappers(this.playerElem.parentNode),this.props.inEmbed&&(this.playerInstance.player.one("pause",this.recommendedMedia.init),this.initRecommendedMedia())),this.playerInstance.player.one("ended",this.onVideoEnd)}},{key:"onVideoRestart",value:function(){null!==this.recommendedMedia&&(this.recommendedMedia.updateDisplayType("inline"),this.props.inEmbed&&this.playerInstance.player.one("pause",this.recommendedMedia.init),this.playerInstance.player.one("ended",this.onVideoEnd))}},{key:"onVideoEnd",value:function(){if(null!==this.recommendedMedia&&(this.props.inEmbed||this.initRecommendedMedia(),this.recommendedMedia.updateDisplayType("full"),this.playerInstance.player.one("playing",this.onVideoRestart)),!this.props.inEmbed&&o.MediaPageStore.get("playlist-id")){var e=document.querySelector(".video-player .more-media"),t=document.querySelector(".video-player .vjs-actions-anim");this.upNextLoaderView.cancelTimer();var n=o.MediaPageStore.get("playlist-next-media-url");return n&&(e&&(e.style.display="none"),t&&(t.style.display="none"),window.location.href=n),void this.upNextLoaderView.hideTimerView()}this.upNextLoaderView&&(o.PageStore.get("media-auto-play")?(this.upNextLoaderView.startTimer(),this.playerInstance.player.one("play",function(){this.upNextLoaderView.cancelTimer()}.bind(this))):this.upNextLoaderView.cancelTimer())}},{key:"onUpdateMediaAutoPlay",value:function(){this.upNextLoaderView&&(o.PageStore.get("media-auto-play")?this.upNextLoaderView.showTimerView(this.playerInstance.isEnded()):this.upNextLoaderView.hideTimerView())}},{key:"render",value:function(){var e=this,t=null,n=null;!this.props.inEmbed&&o.MediaPageStore.get("playlist-id")?(t=o.MediaPageStore.get("playlist-next-media-url"),n=o.MediaPageStore.get("playlist-previous-media-url")):t=this.props.data.related_media.length&&!this.props.inEmbed?this.props.data.related_media[0].url:null;var r=this.props.data.sprites_url?{url:this.props.siteUrl+"/"+this.props.data.sprites_url.replace(/^\//g,""),frame:{width:160,height:90,seconds:10}}:null;return a.createElement("div",{key:(this.props.inEmbed?"embed-":"")+"player-container",className:"player-container"+(this.videoSources.length?"":" player-container-error"),style:this.props.containerStyles,ref:"playerContainer"},a.createElement("div",{className:"player-container-inner",ref:"playerContainerInner",style:this.props.containerStyles},this.state.displayPlayer&&null!==o.MediaPageStore.get("media-load-error-type")?a.createElement(N.hJ,{errorMessage:o.MediaPageStore.get("media-load-error-message")}):null,this.state.displayPlayer&&null==o.MediaPageStore.get("media-load-error-type")?a.createElement("div",{className:"video-player",ref:"videoPlayerWrapper",key:"videoPlayerWrapper"},a.createElement(i.SiteConsumer,null,(function(i){return a.createElement(N.Y7,{playerVolume:e.browserCache.get("player-volume"),playerSoundMuted:e.browserCache.get("player-sound-muted"),videoQuality:e.browserCache.get("video-quality"),videoPlaybackSpeed:parseInt(e.browserCache.get("video-playback-speed"),10),inTheaterMode:e.browserCache.get("in-theater-mode"),siteId:i.id,siteUrl:i.url,info:e.videoInfo,cornerLayers:e.cornerLayers,sources:e.videoSources,poster:e.videoPoster,previewSprite:r,subtitlesInfo:e.props.data.subtitles_info,enableAutoplay:!e.props.inEmbed,inEmbed:e.props.inEmbed,hasTheaterMode:!e.props.inEmbed,hasNextLink:!!t,hasPreviousLink:!!n,errorMessage:o.MediaPageStore.get("media-load-error-message"),onClickNextCallback:e.onClickNext,onClickPreviousCallback:e.onClickPrevious,onStateUpdateCallback:e.onStateUpdate,onPlayerInitCallback:e.onPlayerInit})}))):null))}}])&&I(t.prototype,n),u}(a.PureComponent);function D(e){for(var t=null,n=[],r=location.search.substr(1).split("&"),a=0;a=0&&n.currentTime(D("time")),1==D("autoplay")&&n.play(),void t.disconnect()})).observe(document,{childList:!0,subtree:!0}),n(9808);var U,B,F=n(2546),q=n(4234),z=(n(7441),n(6453),n(7390),n(4669),n(9511)),H=n(3064),W=(n(4486),n(6429),n(1283));function $(e){return($="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function Q(e){return function(e){if(Array.isArray(e))return G(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||Z(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function Y(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,a,i=[],o=!0,l=!1;try{for(n=n.call(e);!(o=(r=n.next()).done)&&(i.push(r.value),!t||i.length!==t);o=!0);}catch(e){l=!0,a=e}finally{try{o||null==n.return||n.return()}finally{if(l)throw a}}return i}}(e,t)||Z(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function Z(e,t){if(e){if("string"==typeof e)return G(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?G(e,t):void 0}}function G(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n1)&&(t.style.display="none"),t.style.left=g(e)+"%",e.duration)t.style.width=e.duration/d.duration()*100+"%",t.style.marginLeft="0px";else{var r=i(t);t.style.marginLeft=r.width/2+"px"}}function b(e){f&&(p=o,f.style.visibility="hidden"),c=o;var t=[];e.forEach((function(e){var n=u[e];if(n){delete s[n.key],t.push(e);var r=d.el().querySelector(".vjs-marker[data-marker-key='"+n.key+"']");r&&r.parentNode.removeChild(r)}}));try{t.reverse(),t.forEach((function(e){u.splice(e,1)}))}catch(e){W.log(e)}y()}function S(){if(l.breakOverlay.display&&!(c<0)){var e=d.currentTime(),t=u[c],n=l.markerTip.time(t);e>=n&&e<=n+l.breakOverlay.displayTime?(p!==c&&(p=c,f&&(f.querySelector(".vjs-break-overlay-text").innerHTML=l.breakOverlay.text(t))),f&&(f.style.visibility="visible")):(p=o,f&&(f.style.visibility="hidden"))}}function w(){!function(){if(u.length){var t=function(e){return e=l.markerTip.time(u[c])&&n=l.markerTip.time(u[i])&&n
    "}),d.el().querySelector(".vjs-progress-holder").appendChild(m)),d.markers.removeAll(),h(l.markers),l.breakOverlay.display&&(f=n.default.createEl("div",{className:"vjs-break-overlay",innerHTML:"
    "}),Object.keys(l.breakOverlay.style).forEach((function(e){f&&(f.style[e]=l.breakOverlay.style[e])})),d.el().appendChild(f),p=o),w(),d.on("timeupdate",w),d.off("loadedmetadata")})),d.markers={getMarkers:function(){return u},next:function(){for(var e=d.currentTime(),t=0;te){d.currentTime(n);break}}},prev:function(){for(var e=d.currentTime(),t=u.length-1;t>=0;t--){var n=l.markerTip.time(u[t]);if(n+.5")})})),c?a.createElement("button",{className:"toggle-more",onClick:function(){s(!l)}},l?"Show less":"Read more"):null,i.MemberContext._currentValue.can.deleteComment?a.createElement(X,{comment_id:e.comment_id}):null)))}ee.propTypes={comment_id:u().oneOfType([u().string,u().number]).isRequired,media_id:u().oneOfType([u().string,u().number]).isRequired,text:u().string,author_name:u().string,author_link:u().string,author_thumb:u().string,publish_date:u().oneOfType([u().string,u().number]),likes:u().number,dislikes:u().number},ee.defaultProps={author_name:"",author_link:"#",publish_date:0,likes:0,dislikes:0};var te=function(e){var t=e.commentsLength;return a.createElement(a.Fragment,null,!i.MemberContext._currentValue.can.readComment||o.MediaPageStore.get("media-data").enable_comments?null:a.createElement("span",{className:"disabled-comments-msg"},J.disabledCommentsMsg),i.MemberContext._currentValue.can.readComment&&(o.MediaPageStore.get("media-data").enable_comments||i.MemberContext._currentValue.can.editMedia)?a.createElement("h2",null,t?1e.length)&&(t=e.length);for(var n=0,r=new Array(t);ne.length)&&(t=e.length);for(var n=0,r=new Array(t);ne.length)&&(t=e.length);for(var n=0,r=new Array(t);ne.length)&&(t=e.length);for(var n=0,r=new Array(t);ne.length)&&(t=e.length);for(var n=0,r=new Array(t);ne.length)&&(t=e.length);for(var n=0,r=new Array(t);ne.length)&&(t=e.length);for(var n=0,r=new Array(t);ne.length)&&(t=e.length);for(var n=0,r=new Array(t);n'}),a.createElement("div",{className:"iframe-config"},a.createElement("div",{className:"iframe-config-options-title"},"Embed options"),a.createElement("div",{className:"iframe-config-option"},a.createElement("div",{className:"option-content"},a.createElement("div",{className:"ratio-options"},a.createElement("div",{className:"options-group"},a.createElement("label",{style:{minHeight:"36px"}},a.createElement("input",{type:"checkbox",checked:h,onChange:function(){var e=!h,t=b.split(":"),n=t[0],r=t[1];g(e),M(e?"px":_),I(e?"px":O),N(e?parseInt(E*r/n,10):C),z(e?[{key:"px",label:"px"}]:[{key:"px",label:"px"},{key:"percent",label:"%"}])}}),"Keep aspect ratio")),h?a.createElement("div",{className:"options-group"},a.createElement("select",{ref:r,onChange:function(){var e=r.current.value,t=e.split(":"),n=t[0],a=t[1];S(e),N(h?parseInt(E*a/n,10):C)},value:b},a.createElement("optgroup",{label:"Horizontal orientation"},a.createElement("option",{value:"16:9"},"16:9"),a.createElement("option",{value:"4:3"},"4:3"),a.createElement("option",{value:"3:2"},"3:2")),a.createElement("optgroup",{label:"Vertical orientation"},a.createElement("option",{value:"9:16"},"9:16"),a.createElement("option",{value:"3:4"},"3:4"),a.createElement("option",{value:"2:3"},"2:3")))):null),a.createElement("br",null),a.createElement("div",{className:"options-group"},a.createElement(q.NumericInputWithUnit,{valueCallback:function(e){e=""===e?0:e;var t=b.split(":"),n=t[0],r=t[1];P(e),N(h?parseInt(e*r/n,10):C)},unitCallback:function(e){M(e)},label:"Width",defaultValue:parseInt(E,10),defaultUnit:_,minValue:1,maxValue:99999,units:F})),a.createElement("div",{className:"options-group"},a.createElement(q.NumericInputWithUnit,{valueCallback:function(e){e=""===e?0:e;var t=b.split(":"),n=t[0],r=t[1];N(e),P(h?parseInt(e*n/r,10):E)},unitCallback:function(e){I(e)},label:"Height",defaultValue:parseInt(C,10),defaultUnit:O,minValue:1,maxValue:99999,units:F})))))),a.createElement("div",{ref:c,className:"on-right-bottom"},a.createElement("button",{onClick:function(){f.MediaPageActions.copyEmbedMediaCode(u.current.querySelector("textarea"))}},"COPY")))))}Ne.propTypes={playlistId:u().string,isChecked:u().bool,title:u().string},Ne.defaultProps={isChecked:!1,title:""},xe.propTypes={triggerPopupClose:u().func},n(8833),n(815),n(9174),Re.propTypes={triggerPopupClose:u().func},n(5777);var je=n(3458);function De(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,a,i=[],o=!0,l=!1;try{for(n=n.call(e);!(o=(r=n.next()).done)&&(i.push(r.value),!t||i.length!==t);o=!0);}catch(e){l=!0,a=e}finally{try{o||null==n.return||n.return()}finally{if(l)throw a}}return i}}(e,t)||function(e,t){if(e){if("string"==typeof e)return Ue(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?Ue(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function Ue(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);nwindow.innerWidth-80?window.innerWidth-80:null}}function ze(e){var t=(0,a.useRef)(null),n=(0,a.useRef)(null),r=o.MediaPageStore.get("media-url"),l=De((0,a.useState)(null),2),s=l[0],u=l[1],c=De((0,a.useState)({prev:!1,next:!1}),2),d=c[0],m=c[1],p=De((0,a.useState)(qe()),2),y=p[0],h=p[1],g=De((0,a.useState)(function(){var e=function(){for(var e=i.ShareOptionsContext._currentValue,t=o.MediaPageStore.get("media-url"),n=o.MediaPageStore.get("media-data").title,r={},a=0;a=1?n+":"+r+":"+a:r+":"+a)),function(){o.PageStore.removeListener("window_resize",x),o.MediaPageStore.removeListener("copied_media_link",O),u(null)}}),[]),a.createElement("div",{ref:t,style:null!==y.maxPopupWidth?{maxWidth:y.maxPopupWidth+"px"}:null},a.createElement("div",{className:"scrollable-content",style:null!==y.maxFormContentHeight?{maxHeight:y.maxFormContentHeight+"px"}:null},a.createElement("div",{className:"share-popup-title"},"Share media"),g.length?a.createElement("div",{className:"share-options"},d.prev?a.createElement(Fe,{onClick:function(){s.previousSlide(),I()}}):null,a.createElement("div",{ref:n,className:"share-options-inner"},g),d.next?a.createElement(Be,{onClick:function(){s.nextSlide(),I()}}):null):null),a.createElement("div",{className:"copy-field"},a.createElement("div",null,a.createElement("input",{type:"text",readOnly:!0,value:C}),a.createElement("button",{onClick:function(){f.MediaPageActions.copyShareLink(t.current.querySelector(".copy-field input"))}},"COPY"))),a.createElement("div",{className:"start-at"},a.createElement("label",null,a.createElement("input",{type:"checkbox",name:"start-at-checkbox",id:"id-start-at-checkbox",checked:_,onChange:function(){var e;M(!_),e=_?r:r+"&t="+Math.trunc(b),N(e)}}),"Start at ",E)))}function He(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,a,i=[],o=!0,l=!1;try{for(n=n.call(e);!(o=(r=n.next()).done)&&(i.push(r.value),!t||i.length!==t);o=!0);}catch(e){l=!0,a=e}finally{try{o||null==n.return||n.return()}finally{if(l)throw a}}return i}}(e,t)||function(e,t){if(e){if("string"==typeof e)return We(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?We(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function We(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);ne.length)&&(t=e.length);for(var n=0,r=new Array(t);n=this.props.views?"view":"views"):null,a.createElement("div",{className:"media-actions"},a.createElement("div",null,i.MemberContext._currentValue.can.likeMedia?a.createElement(ge,null):null,i.MemberContext._currentValue.can.dislikeMedia?a.createElement(pe,null):null,i.MemberContext._currentValue.can.shareMedia?a.createElement(Ge,{isVideo:!1}):null,!i.MemberContext._currentValue.is.anonymous&&i.MemberContext._currentValue.can.saveMedia&&-1=this.props.views?(0,m.translateString)("view"):(0,m.translateString)("views")):null,a.createElement("div",{className:"media-actions"},a.createElement("div",null,i.MemberContext._currentValue.can.likeMedia?a.createElement(ge,null):null,i.MemberContext._currentValue.can.dislikeMedia?a.createElement(pe,null):null,i.MemberContext._currentValue.can.shareMedia?a.createElement(Ge,{isVideo:!0}):null,!i.MemberContext._currentValue.is.anonymous&&i.MemberContext._currentValue.can.saveMedia&&-1e.length)&&(t=e.length);for(var n=0,r=new Array(t);ne.length)&&(t=e.length);for(var n=0,r=new Array(t);ne.length)&&(t=e.length);for(var n=0,r=new Array(t);ne.length)&&(t=e.length);for(var n=0,r=new Array(t);ne?t:e,void 0!==n&&ne.length)&&(t=e.length);for(var n=0,r=new Array(t);n div");g&&(g.innerHTML=V.summary)}}function B(e){if(void 0!==e&&void 0!==e.type)switch(e.type){case"network":case"private":case"unavailable":i(e.type),h(void 0!==e.message?e.message:"Αn error occurred while loading the media's data")}}return null!==R&&(L=t.media+"/"+R),(0,r.useEffect)((function(){null!==L&&(0,u.getRequest)(L,!1,U,B)}),[]),w.length?r.createElement("div",{className:"video-player"},r.createElement(m.Y7,{siteId:n.id,siteUrl:n.url,info:k,sources:w,poster:v,previewSprite:x,subtitlesInfo:A,enableAutoplay:!1,inEmbed:!1,hasTheaterMode:!1,hasNextLink:!1,hasPreviousLink:!1,errorMessage:y})):null}h.propTypes={pageLink:i().string.isRequired}},8204:function(e,t,n){"use strict";n.d(t,{T:function(){return m}}),n(5101),n(3080),n(2004),n(8407),n(6394),n(8288),n(5677),n(2129),n(4655);var r=n(5466),a=n(541),i=n(6191),o=n(4234);function l(e){return(l="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function s(e,t){for(var n=0;ne.length)&&(t=e.length);for(var n=0,r=new Array(t);n=a;)i*=r,a*=r,e+=1;return ee.length)&&(t=e.length);for(var n=0,r=new Array(t);ne.length)&&(t=e.length);for(var n=0,r=new Array(t);n=i)&&Object.keys(r.O).every((function(e){return r.O[e](n[s])}))?n.splice(s--,1):(l=!1,i0&&e[u-1][2]>i;u--)e[u]=e[u-1];e[u]=[n,a,i]},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,{a:t}),t},r.d=function(e,t){for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.j=411,function(){var e={411:0};r.O.j=function(t){return 0===e[t]};var t=function(t,n){var a,i,o=n[0],l=n[1],s=n[2],u=0;for(a in l)r.o(l,a)&&(r.m[a]=l[a]);if(s)var c=s(r);for(t&&t(n);u');var n=null,r=null;!this.props.inEmbed&&o.MediaPageStore.get("playlist-id")?(n=o.MediaPageStore.get("playlist-next-media-url"),r=o.MediaPageStore.get("playlist-previous-media-url")):n=o.MediaPageStore.get("media-data").related_media.length&&!this.props.inEmbed?o.MediaPageStore.get("media-data").related_media[0].url:null,this.AudioPlayerData.instance=new(d())(this.refs.AudioElem,{sources:this.videoSources,poster:this.videoPoster,autoplay:!this.props.inEmbed,bigPlayButton:!0,controlBar:{fullscreen:!1,theaterMode:!1,next:!!n,previous:!!r},cornerLayers:{topLeft:e,topRight:this.upNextLoaderView?this.upNextLoaderView.html():null,bottomLeft:this.recommendedMedia?this.recommendedMedia.html():null,bottomRight:t}},{volume:o.VideoViewerStore.get("player-volume"),soundMuted:o.VideoViewerStore.get("player-sound-muted")},null,null,this.onAudioPlayerStateUpdate.bind(this),this.onClickNextButton.bind(this),this.onClickPreviousButton.bind(this)),this.upNextLoaderView&&(this.upNextLoaderView.setVideoJsPlayerElem(this.AudioPlayerData.instance.player.el_),this.onUpdateMediaAutoPlay()),this.refs.AudioElem.parentNode.focus(),this.AudioPlayerData.instance.player.one("play",function(){this.audioStartedPlaying=!0}.bind(this)),this.recommendedMedia&&(this.recommendedMedia.initWrappers(this.AudioPlayerData.instance.player.el_),this.AudioPlayerData.instance.player.one("pause",this.recommendedMedia.init),this.AudioPlayerData.instance.player.on("fullscreenchange",this.recommendedMedia.onResize),o.PageStore.on("window_resize",this.recommendedMedia.onResize),o.VideoViewerStore.on("changed_viewer_mode",this.recommendedMedia.onResize)),this.AudioPlayerData.instance.player.one("ended",this.onAudioEnd)}}.bind(this),50)}},{key:"initialDocumentFocus",value:function(){this.refs.AudioElem.parentNode&&(this.refs.AudioElem.parentNode.focus(),setTimeout(function(){this.AudioPlayerData.instance.player.play()}.bind(this),50)),window.removeEventListener("focus",this.initialDocumentFocus),this.initialDocumentFocus=null}},{key:"onClickNextButton",value:function(){var e;o.MediaPageStore.get("playlist-id")?null===(e=o.MediaPageStore.get("playlist-next-media-url"))&&(e=o.MediaPageStore.get("media-data").related_media[0].url):this.props.inEmbed||(e=o.MediaPageStore.get("media-data").related_media[0].url),window.location.href=e}},{key:"onClickPreviousButton",value:function(){var e;o.MediaPageStore.get("playlist-id")?null===(e=o.MediaPageStore.get("playlist-previous-media-url"))&&(e=o.MediaPageStore.get("media-data").related_media[0].url):this.props.inEmbed||(e=o.MediaPageStore.get("media-data").related_media[0].url),window.location.href=e}},{key:"onUpdateMediaAutoPlay",value:function(){this.upNextLoaderView&&(o.PageStore.get("media-auto-play")?this.upNextLoaderView.showTimerView(this.AudioPlayerData.instance.isEnded()):this.upNextLoaderView.hideTimerView())}},{key:"onAudioPlayerStateUpdate",value:function(e){this.updatePlayerVolume(e.volume,e.soundMuted)}},{key:"onAudioRestart",value:function(){this.recommendedMedia&&(this.recommendedMedia.updateDisplayType("inline"),this.AudioPlayerData.instance.player.one("pause",this.recommendedMedia.init),this.AudioPlayerData.instance.player.one("ended",this.onAudioEnd))}},{key:"onAudioEnd",value:function(){if(this.recommendedMedia&&(this.recommendedMedia.updateDisplayType("full"),this.AudioPlayerData.instance.player.one("playing",this.onAudioRestart)),!this.props.inEmbed&&o.MediaPageStore.get("playlist-id")){var e=document.querySelector(".video-player .more-media"),t=document.querySelector(".video-player .vjs-actions-anim");this.upNextLoaderView.cancelTimer();var n=o.MediaPageStore.get("playlist-next-media-url");return n&&(e&&(e.style.display="none"),t&&(t.style.display="none"),window.location.href=n),void this.upNextLoaderView.hideTimerView()}this.upNextLoaderView&&(o.PageStore.get("media-auto-play")?(this.upNextLoaderView.startTimer(),this.AudioPlayerData.instance.player.one("play",function(){this.upNextLoaderView.cancelTimer()}.bind(this))):this.upNextLoaderView.cancelTimer())}},{key:"updatePlayerVolume",value:function(e,t){o.VideoViewerStore.get("player-volume")!==e&&f.VideoViewerActions.set_player_volume(e),o.VideoViewerStore.get("player-sound-muted")!==t&&f.VideoViewerActions.set_player_sound_muted(t)}},{key:"wrapperClick",value:function(e){e.target.parentNode===this.refs.videoPlayerWrap&&(this.AudioPlayerData.instance.player.ended()||(!this.AudioPlayerData.instance.player.hasStarted_||this.AudioPlayerData.instance.player.paused()?this.AudioPlayerData.instance.player.play():this.AudioPlayerData.instance.player.pause()))}},{key:"render",value:function(){return a.createElement("div",{className:"player-container audio-player-container"},a.createElement("div",{className:"player-container-inner"},a.createElement("div",{className:"video-player",ref:"videoPlayerWrap",onClick:this.wrapperClick},a.createElement("audio",{tabIndex:"1",ref:"AudioElem",className:"video-js vjs-mediacms native-dimensions"}))))}}])&&v(t.prototype,n),u}(a.PureComponent);function k(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,a,i=[],o=!0,l=!1;try{for(n=n.call(e);!(o=(r=n.next()).done)&&(i.push(r.value),!t||i.length!==t);o=!0);}catch(e){l=!0,a=e}finally{try{o||null==n.return||n.return()}finally{if(l)throw a}}return i}}(e,t)||function(e,t){if(e){if("string"==typeof e)return M(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?M(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function M(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);ne.length)&&(t=e.length);for(var n=0,r=new Array(t);nshareShare';a+='',this.cornerLayers={topLeft:e,topRight:this.upNextLoaderView?this.upNextLoaderView.html():null,bottomLeft:this.recommendedMedia?this.recommendedMedia.html():null,bottomRight:this.props.inEmbed?a:null},this.setState({displayPlayer:!0},(function(){setTimeout((function(){var e=document.querySelector(".share-video-btn"),t=document.querySelector(".share-options-wrapper"),n=document.querySelector(".share-options-inner");e&&e.addEventListener("click",(function(e){(0,m.addClassname)(document.querySelector(".video-js.vjs-mediacms"),"vjs-visible-share-options")})),t&&t.addEventListener("click",(function(e){e.target!==n&&e.target!==t||(0,m.removeClassname)(document.querySelector(".video-js.vjs-mediacms"),"vjs-visible-share-options")}))}),1e3)}))}}},{key:"componentWillUnmount",value:function(){this.unsetRecommendedMedia()}},{key:"initRecommendedMedia",value:function(){null!==this.recommendedMedia&&(this.props.inEmbed||this.recommendedMedia.init(),this.playerInstance.player.on("fullscreenchange",this.recommendedMedia.onResize),o.PageStore.on("window_resize",this.recommendedMedia.onResize),o.VideoViewerStore.on("changed_viewer_mode",this.recommendedMedia.onResize))}},{key:"unsetRecommendedMedia",value:function(){null!==this.recommendedMedia&&(this.playerInstance.player.off("fullscreenchange",this.recommendedMedia.onResize),o.PageStore.removeListener("window_resize",this.recommendedMedia.onResize),o.VideoViewerStore.removeListener("changed_viewer_mode",this.recommendedMedia.onResize),this.recommendedMedia.destroy())}},{key:"onClickNext",value:function(){var e;o.MediaPageStore.get("playlist-id")?null===(e=o.MediaPageStore.get("playlist-next-media-url"))&&(e=this.props.data.related_media[0].url):this.props.inEmbed||(e=this.props.data.related_media[0].url),window.location.href=e}},{key:"onClickPrevious",value:function(){var e;o.MediaPageStore.get("playlist-id")?null===(e=o.MediaPageStore.get("playlist-previous-media-url"))&&(e=this.props.data.related_media[0].url):this.props.inEmbed||(e=this.props.data.related_media[0].url),window.location.href=e}},{key:"onStateUpdate",value:function(e){o.VideoViewerStore.get("in-theater-mode")!==e.theaterMode&&f.VideoViewerActions.set_viewer_mode(e.theaterMode),o.VideoViewerStore.get("player-volume")!==e.volume&&f.VideoViewerActions.set_player_volume(e.volume),o.VideoViewerStore.get("player-sound-muted")!==e.soundMuted&&f.VideoViewerActions.set_player_sound_muted(e.soundMuted),o.VideoViewerStore.get("video-quality")!==e.quality&&f.VideoViewerActions.set_video_quality(e.quality),o.VideoViewerStore.get("video-playback-speed")!==e.playbackSpeed&&f.VideoViewerActions.set_video_playback_speed(e.playbackSpeed)}},{key:"onPlayerInit",value:function(e,t){this.playerElem=t,this.playerInstance=e,this.upNextLoaderView&&(this.upNextLoaderView.setVideoJsPlayerElem(this.playerInstance.player.el_),this.onUpdateMediaAutoPlay()),this.props.inEmbed||this.playerElem.parentNode.focus(),null!==this.recommendedMedia&&(this.recommendedMedia.initWrappers(this.playerElem.parentNode),this.props.inEmbed&&(this.playerInstance.player.one("pause",this.recommendedMedia.init),this.initRecommendedMedia())),this.playerInstance.player.one("ended",this.onVideoEnd)}},{key:"onVideoRestart",value:function(){null!==this.recommendedMedia&&(this.recommendedMedia.updateDisplayType("inline"),this.props.inEmbed&&this.playerInstance.player.one("pause",this.recommendedMedia.init),this.playerInstance.player.one("ended",this.onVideoEnd))}},{key:"onVideoEnd",value:function(){if(null!==this.recommendedMedia&&(this.props.inEmbed||this.initRecommendedMedia(),this.recommendedMedia.updateDisplayType("full"),this.playerInstance.player.one("playing",this.onVideoRestart)),!this.props.inEmbed&&o.MediaPageStore.get("playlist-id")){var e=document.querySelector(".video-player .more-media"),t=document.querySelector(".video-player .vjs-actions-anim");this.upNextLoaderView.cancelTimer();var n=o.MediaPageStore.get("playlist-next-media-url");return n&&(e&&(e.style.display="none"),t&&(t.style.display="none"),window.location.href=n),void this.upNextLoaderView.hideTimerView()}this.upNextLoaderView&&(o.PageStore.get("media-auto-play")?(this.upNextLoaderView.startTimer(),this.playerInstance.player.one("play",function(){this.upNextLoaderView.cancelTimer()}.bind(this))):this.upNextLoaderView.cancelTimer())}},{key:"onUpdateMediaAutoPlay",value:function(){this.upNextLoaderView&&(o.PageStore.get("media-auto-play")?this.upNextLoaderView.showTimerView(this.playerInstance.isEnded()):this.upNextLoaderView.hideTimerView())}},{key:"render",value:function(){var e=this,t=null,n=null;!this.props.inEmbed&&o.MediaPageStore.get("playlist-id")?(t=o.MediaPageStore.get("playlist-next-media-url"),n=o.MediaPageStore.get("playlist-previous-media-url")):t=this.props.data.related_media.length&&!this.props.inEmbed?this.props.data.related_media[0].url:null;var r=this.props.data.sprites_url?{url:this.props.siteUrl+"/"+this.props.data.sprites_url.replace(/^\//g,""),frame:{width:160,height:90,seconds:10}}:null;return a.createElement("div",{key:(this.props.inEmbed?"embed-":"")+"player-container",className:"player-container"+(this.videoSources.length?"":" player-container-error"),style:this.props.containerStyles,ref:"playerContainer"},a.createElement("div",{className:"player-container-inner",ref:"playerContainerInner",style:this.props.containerStyles},this.state.displayPlayer&&null!==o.MediaPageStore.get("media-load-error-type")?a.createElement(I.hJ,{errorMessage:o.MediaPageStore.get("media-load-error-message")}):null,this.state.displayPlayer&&null==o.MediaPageStore.get("media-load-error-type")?a.createElement("div",{className:"video-player",ref:"videoPlayerWrapper",key:"videoPlayerWrapper"},a.createElement(i.SiteConsumer,null,(function(i){return a.createElement(I.Y7,{playerVolume:e.browserCache.get("player-volume"),playerSoundMuted:e.browserCache.get("player-sound-muted"),videoQuality:e.browserCache.get("video-quality"),videoPlaybackSpeed:parseInt(e.browserCache.get("video-playback-speed"),10),inTheaterMode:e.browserCache.get("in-theater-mode"),siteId:i.id,siteUrl:i.url,info:e.videoInfo,cornerLayers:e.cornerLayers,sources:e.videoSources,poster:e.videoPoster,previewSprite:r,subtitlesInfo:e.props.data.subtitles_info,enableAutoplay:!e.props.inEmbed,inEmbed:e.props.inEmbed,hasTheaterMode:!e.props.inEmbed,hasNextLink:!!t,hasPreviousLink:!!n,errorMessage:o.MediaPageStore.get("media-load-error-message"),onClickNextCallback:e.onClickNext,onClickPreviousCallback:e.onClickPrevious,onStateUpdateCallback:e.onStateUpdate,onPlayerInitCallback:e.onPlayerInit})}))):null))}}])&&R(t.prototype,n),u}(a.PureComponent);function F(e){for(var t=null,n=[],r=location.search.substr(1).split("&"),a=0;a=0&&n.currentTime(F("time")),1==F("autoplay")&&n.play(),void t.disconnect()})).observe(document,{childList:!0,subtree:!0}),n(9808);var q,z,H=n(2546),W=n(4234),$=(n(7441),n(6453),n(7390),n(4669),n(9511)),Q=n(3064),Y=(n(4486),n(6429),n(1283));function Z(e){return(Z="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function G(e){return function(e){if(Array.isArray(e))return X(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||K(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function J(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,a,i=[],o=!0,l=!1;try{for(n=n.call(e);!(o=(r=n.next()).done)&&(i.push(r.value),!t||i.length!==t);o=!0);}catch(e){l=!0,a=e}finally{try{o||null==n.return||n.return()}finally{if(l)throw a}}return i}}(e,t)||K(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function K(e,t){if(e){if("string"==typeof e)return X(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?X(e,t):void 0}}function X(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n1)&&(t.style.display="none"),t.style.left=g(e)+"%",e.duration)t.style.width=e.duration/d.duration()*100+"%",t.style.marginLeft="0px";else{var r=i(t);t.style.marginLeft=r.width/2+"px"}}function b(e){f&&(p=o,f.style.visibility="hidden"),c=o;var t=[];e.forEach((function(e){var n=u[e];if(n){delete s[n.key],t.push(e);var r=d.el().querySelector(".vjs-marker[data-marker-key='"+n.key+"']");r&&r.parentNode.removeChild(r)}}));try{t.reverse(),t.forEach((function(e){u.splice(e,1)}))}catch(e){Y.log(e)}y()}function S(){if(l.breakOverlay.display&&!(c<0)){var e=d.currentTime(),t=u[c],n=l.markerTip.time(t);e>=n&&e<=n+l.breakOverlay.displayTime?(p!==c&&(p=c,f&&(f.querySelector(".vjs-break-overlay-text").innerHTML=l.breakOverlay.text(t))),f&&(f.style.visibility="visible")):(p=o,f&&(f.style.visibility="hidden"))}}function w(){!function(){if(u.length){var t=function(e){return e=l.markerTip.time(u[c])&&n=l.markerTip.time(u[i])&&n
    "}),d.el().querySelector(".vjs-progress-holder").appendChild(m)),d.markers.removeAll(),h(l.markers),l.breakOverlay.display&&(f=n.default.createEl("div",{className:"vjs-break-overlay",innerHTML:"
    "}),Object.keys(l.breakOverlay.style).forEach((function(e){f&&(f.style[e]=l.breakOverlay.style[e])})),d.el().appendChild(f),p=o),w(),d.on("timeupdate",w),d.off("loadedmetadata")})),d.markers={getMarkers:function(){return u},next:function(){for(var e=d.currentTime(),t=0;te){d.currentTime(n);break}}},prev:function(){for(var e=d.currentTime(),t=u.length-1;t>=0;t--){var n=l.markerTip.time(u[t]);if(n+.5")})})),c?a.createElement("button",{className:"toggle-more",onClick:function(){s(!l)}},l?"Show less":"Read more"):null,i.MemberContext._currentValue.can.deleteComment?a.createElement(ne,{comment_id:e.comment_id}):null)))}re.propTypes={comment_id:u().oneOfType([u().string,u().number]).isRequired,media_id:u().oneOfType([u().string,u().number]).isRequired,text:u().string,author_name:u().string,author_link:u().string,author_thumb:u().string,publish_date:u().oneOfType([u().string,u().number]),likes:u().number,dislikes:u().number},re.defaultProps={author_name:"",author_link:"#",publish_date:0,likes:0,dislikes:0};var ae=function(e){var t=e.commentsLength;return a.createElement(a.Fragment,null,!i.MemberContext._currentValue.can.readComment||o.MediaPageStore.get("media-data").enable_comments?null:a.createElement("span",{className:"disabled-comments-msg"},ee.disabledCommentsMsg),i.MemberContext._currentValue.can.readComment&&(o.MediaPageStore.get("media-data").enable_comments||i.MemberContext._currentValue.can.editMedia)?a.createElement("h2",null,t?1e.length)&&(t=e.length);for(var n=0,r=new Array(t);ne.length)&&(t=e.length);for(var n=0,r=new Array(t);ne.length)&&(t=e.length);for(var n=0,r=new Array(t);ne.length)&&(t=e.length);for(var n=0,r=new Array(t);ne.length)&&(t=e.length);for(var n=0,r=new Array(t);ne.length)&&(t=e.length);for(var n=0,r=new Array(t);ne.length)&&(t=e.length);for(var n=0,r=new Array(t);ne.length)&&(t=e.length);for(var n=0,r=new Array(t);n'}),a.createElement("div",{className:"iframe-config"},a.createElement("div",{className:"iframe-config-options-title"},"Embed options"),a.createElement("div",{className:"iframe-config-option"},a.createElement("div",{className:"option-content"},a.createElement("div",{className:"ratio-options"},a.createElement("div",{className:"options-group"},a.createElement("label",{style:{minHeight:"36px"}},a.createElement("input",{type:"checkbox",checked:h,onChange:function(){var e=!h,t=b.split(":"),n=t[0],r=t[1];g(e),_(e?"px":M),I(e?"px":O),N(e?parseInt(E*r/n,10):C),q(e?[{key:"px",label:"px"}]:[{key:"px",label:"px"},{key:"percent",label:"%"}])}}),"Keep aspect ratio")),h?a.createElement("div",{className:"options-group"},a.createElement("select",{ref:r,onChange:function(){var e=r.current.value,t=e.split(":"),n=t[0],a=t[1];S(e),N(h?parseInt(E*a/n,10):C)},value:b},a.createElement("optgroup",{label:"Horizontal orientation"},a.createElement("option",{value:"16:9"},"16:9"),a.createElement("option",{value:"4:3"},"4:3"),a.createElement("option",{value:"3:2"},"3:2")),a.createElement("optgroup",{label:"Vertical orientation"},a.createElement("option",{value:"9:16"},"9:16"),a.createElement("option",{value:"3:4"},"3:4"),a.createElement("option",{value:"2:3"},"2:3")))):null),a.createElement("br",null),a.createElement("div",{className:"options-group"},a.createElement(W.NumericInputWithUnit,{valueCallback:function(e){e=""===e?0:e;var t=b.split(":"),n=t[0],r=t[1];P(e),N(h?parseInt(e*r/n,10):C)},unitCallback:function(e){_(e)},label:"Width",defaultValue:parseInt(E,10),defaultUnit:M,minValue:1,maxValue:99999,units:F})),a.createElement("div",{className:"options-group"},a.createElement(W.NumericInputWithUnit,{valueCallback:function(e){e=""===e?0:e;var t=b.split(":"),n=t[0],r=t[1];N(e),P(h?parseInt(e*n/r,10):E)},unitCallback:function(e){I(e)},label:"Height",defaultValue:parseInt(C,10),defaultUnit:O,minValue:1,maxValue:99999,units:F})))))),a.createElement("div",{ref:c,className:"on-right-bottom"},a.createElement("button",{onClick:function(){f.MediaPageActions.copyEmbedMediaCode(u.current.querySelector("textarea"))}},"COPY")))))}Ie.propTypes={playlistId:u().string,isChecked:u().bool,title:u().string},Ie.defaultProps={isChecked:!1,title:""},Te.propTypes={triggerPopupClose:u().func},n(8833),n(815),n(9174),Ue.propTypes={triggerPopupClose:u().func},n(5777);var Be=n(3458);function Fe(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,a,i=[],o=!0,l=!1;try{for(n=n.call(e);!(o=(r=n.next()).done)&&(i.push(r.value),!t||i.length!==t);o=!0);}catch(e){l=!0,a=e}finally{try{o||null==n.return||n.return()}finally{if(l)throw a}}return i}}(e,t)||function(e,t){if(e){if("string"==typeof e)return qe(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?qe(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function qe(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);nwindow.innerWidth-80?window.innerWidth-80:null}}function $e(e){var t=(0,a.useRef)(null),n=(0,a.useRef)(null),r=o.MediaPageStore.get("media-url"),l=Fe((0,a.useState)(null),2),s=l[0],u=l[1],c=Fe((0,a.useState)({prev:!1,next:!1}),2),d=c[0],m=c[1],p=Fe((0,a.useState)(We()),2),y=p[0],h=p[1],g=Fe((0,a.useState)(function(){var e=function(){for(var e=i.ShareOptionsContext._currentValue,t=o.MediaPageStore.get("media-url"),n=o.MediaPageStore.get("media-data").title,r={},a=0;a=1?n+":"+r+":"+a:r+":"+a)),function(){o.PageStore.removeListener("window_resize",x),o.MediaPageStore.removeListener("copied_media_link",O),u(null)}}),[]),a.createElement("div",{ref:t,style:null!==y.maxPopupWidth?{maxWidth:y.maxPopupWidth+"px"}:null},a.createElement("div",{className:"scrollable-content",style:null!==y.maxFormContentHeight?{maxHeight:y.maxFormContentHeight+"px"}:null},a.createElement("div",{className:"share-popup-title"},"Share media"),g.length?a.createElement("div",{className:"share-options"},d.prev?a.createElement(He,{onClick:function(){s.previousSlide(),I()}}):null,a.createElement("div",{ref:n,className:"share-options-inner"},g),d.next?a.createElement(ze,{onClick:function(){s.nextSlide(),I()}}):null):null),a.createElement("div",{className:"copy-field"},a.createElement("div",null,a.createElement("input",{type:"text",readOnly:!0,value:C}),a.createElement("button",{onClick:function(){f.MediaPageActions.copyShareLink(t.current.querySelector(".copy-field input"))}},"COPY"))),a.createElement("div",{className:"start-at"},a.createElement("label",null,a.createElement("input",{type:"checkbox",name:"start-at-checkbox",id:"id-start-at-checkbox",checked:M,onChange:function(){var e;_(!M),e=M?r:r+"&t="+Math.trunc(b),N(e)}}),"Start at ",E)))}function Qe(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,a,i=[],o=!0,l=!1;try{for(n=n.call(e);!(o=(r=n.next()).done)&&(i.push(r.value),!t||i.length!==t);o=!0);}catch(e){l=!0,a=e}finally{try{o||null==n.return||n.return()}finally{if(l)throw a}}return i}}(e,t)||function(e,t){if(e){if("string"==typeof e)return Ye(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?Ye(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function Ye(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);ne.length)&&(t=e.length);for(var n=0,r=new Array(t);n=this.props.views?"view":"views"):null,a.createElement("div",{className:"media-actions"},a.createElement("div",null,i.MemberContext._currentValue.can.likeMedia?a.createElement(Se,null):null,i.MemberContext._currentValue.can.dislikeMedia?a.createElement(ge,null):null,i.MemberContext._currentValue.can.shareMedia?a.createElement(Xe,{isVideo:!1}):null,!i.MemberContext._currentValue.is.anonymous&&i.MemberContext._currentValue.can.saveMedia&&-1=this.props.views?(0,m.translateString)("view"):(0,m.translateString)("views")):null,a.createElement("div",{className:"media-actions"},a.createElement("div",null,i.MemberContext._currentValue.can.likeMedia?a.createElement(Se,null):null,i.MemberContext._currentValue.can.dislikeMedia?a.createElement(ge,null):null,i.MemberContext._currentValue.can.shareMedia?a.createElement(Xe,{isVideo:!0}):null,!i.MemberContext._currentValue.is.anonymous&&i.MemberContext._currentValue.can.saveMedia&&-1e.length)&&(t=e.length);for(var n=0,r=new Array(t);ne.length)&&(t=e.length);for(var n=0,r=new Array(t);ne.length)&&(t=e.length);for(var n=0,r=new Array(t);ne.length)&&(t=e.length);for(var n=0,r=new Array(t);ne?t:e,void 0!==n&&ne.length)&&(t=e.length);for(var n=0,r=new Array(t);n div");g&&(g.innerHTML=R.summary)}}function B(e){if(void 0!==e&&void 0!==e.type)switch(e.type){case"network":case"private":case"unavailable":i(e.type),h(void 0!==e.message?e.message:"Αn error occurred while loading the media's data")}}return null!==V&&(L=t.media+"/"+V),(0,r.useEffect)((function(){null!==L&&(0,u.getRequest)(L,!1,U,B)}),[]),w.length?r.createElement("div",{className:"video-player"},r.createElement(m.Y7,{siteId:n.id,siteUrl:n.url,info:k,sources:w,poster:v,previewSprite:x,subtitlesInfo:A,enableAutoplay:!1,inEmbed:!1,hasTheaterMode:!1,hasNextLink:!1,hasPreviousLink:!1,errorMessage:y})):null}h.propTypes={pageLink:i().string.isRequired}},8204:function(e,t,n){"use strict";n.d(t,{T:function(){return m}}),n(5101),n(3080),n(2004),n(8407),n(6394),n(8288),n(5677),n(2129),n(4655);var r=n(5466),a=n(541),i=n(6191),o=n(4234);function l(e){return(l="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function s(e,t){for(var n=0;ne.length)&&(t=e.length);for(var n=0,r=new Array(t);n=a;)i*=r,a*=r,e+=1;return ee.length)&&(t=e.length);for(var n=0,r=new Array(t);ne.length)&&(t=e.length);for(var n=0,r=new Array(t);n=i)&&Object.keys(r.O).every((function(e){return r.O[e](n[s])}))?n.splice(s--,1):(l=!1,i0&&e[u-1][2]>i;u--)e[u]=e[u-1];e[u]=[n,a,i]},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,{a:t}),t},r.d=function(e,t){for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.j=411,function(){var e={411:0};r.O.j=function(t){return 0===e[t]};var t=function(t,n){var a,i,o=n[0],l=n[1],s=n[2],u=0;for(a in l)r.o(l,a)&&(r.m[a]=l[a]);if(s)var c=s(r);for(t&&t(n);u