mediacms/static/js/playlist.js

!function(){"use strict";var e,t={463:function(e,t,a){a.d(t,{c:function(){return n}});var l=a(4571),i=a.n(l);function n(e,t){let a=i()(e,{});return""!==a.origin&&"null"!==a.origin&&a.origin||(a=i()(t+"/"+e.replace(/^\//g,""),{})),a.toString()}},826:function(e,t,a){var l=a(2985),i=a(9471),n=a(285),s=a(8790),r=a(5338),o=a(7460),c=a(7664),d=a(3706),m=a(2289),u=a(1838),p=a(8713),y=a.n(p),g=a(4737);function P(e){return i.createElement(g.k,{items:e.media,playlistId:e.playlistId,hidePlaylistOptions:e.hidePlaylistOptions,singleLinkContent:!0,hideDate:!0,hideViews:!0,hidePlaylistOrderNumber:!1,horizontalItemsOrientation:!0,itemsCountCallback:e.itemsCountCallback,itemsLoadCallback:e.itemsLoadCallback,pageItems:99999,inPlaylistPage:!0})}P.propTypes={media:y().array.isRequired,playlistId:y().string.isRequired,itemsCountCallback:y().func,itemsLoadCallback:y().func,hidePlaylistOptions:y().bool},P.defaultProps={hidePlaylistOptions:!0};class f extends i.PureComponent{constructor(e){super(e),this.state={media:e.media},this.containerRef=i.createRef(),this.onItemsLoad=this.onItemsLoad.bind(this)}onItemsLoad(){if(!this.props.loggedinUserPlaylist)return;const e=this.containerRef.current.querySelector(".items-list");if(!e)return;const t=this.props.id;function a(e){}function l(e){}const i=function(e){return this.state.media[e]}.bind(this),r=function(e){const t=[];let a=0;for(;a<e.length;)t.push(this.state.media[e[a]]),a+=1;this.setState({media:t},()=>{n.PlaylistPageActions.reorderedMediaInPlaylist(this.state.media)})}.bind(this);m.Ay.create(e,{onStart:function(t){e.classList.add("on-dragging")},onEnd:function(n){const o=[],c=e.querySelectorAll(".item-order-number div div");let d,m,p,y=0;for(;y<c.length;)d=parseInt(c[y].getAttribute("data-order"),10),m=y+1,m!==d&&(p=i(d-1).friendly_token,(0,u.putRequest)(s.ApiUrlContext._currentValue.playlists+"/"+t,{type:"ordering",ordering:m,media_friendly_token:p},{headers:{"X-CSRFToken":(0,u.csrfToken)()}},!1,a,l)),o.push(d-1),c[y].setAttribute("data-order",m),c[y].innerHTML=m,y+=1;e.classList.remove("on-dragging"),r(o)}})}render(){return i.createElement("div",{ref:this.containerRef,className:"playlist-videos-list"+(this.props.loggedinUserPlaylist?" draggable":"")},this.state.media.length?i.createElement(P,{itemsLoadCallback:this.onItemsLoad,playlistId:this.props.id,media:this.state.media,hidePlaylistOptions:!this.props.loggedinUserPlaylist}):null)}}var h=a(9479);if(window.MediaCMS.site.devEnv){const e=()=>{let e=null,t=null;const a=window.location.search.split("?")[1];return a&&a.split("&").forEach(a=>{0===a.indexOf("m=")?e=a.split("m=")[1]:0===a.indexOf("pl=")&&(t=a.split("pl=")[1])}),{mediaId:e,playlistId:t}},{playlistId:t}=e();t&&(window.MediaCMS.playlistId=t)}function v(e){if(!e.media||!e.media.length)return i.createElement("span",null,e.children);let t=e.media[0].url;return window.MediaCMS.site.devEnv&&-1<t.indexOf("view?")&&(t="/media.html?"+t.split("view?")[1]),t+="&pl="+e.id,e.media&&e.media.length?i.createElement("a",{href:t,title:""},e.children):i.createElement("span",null,e.children)}function b(e){const[t,a]=(0,i.useState)(null);return(0,i.useEffect)(()=>{if(e.thumb&&"string"==typeof e.thumb){const t=e.thumb.trim();a(""!==t?t:null)}else a(null)},[e.thumb]),i.createElement("div",{className:"playlist-thumb"+(t?"":" no-thumb"),style:{backgroundImage:'url("'+t+'")'}},i.createElement(v,{id:e.id,media:e.media},i.createElement("span",null,t?i.createElement("img",{src:t,alt:""}):null,i.createElement("span",{className:"play-all"},i.createElement("span",null,i.createElement("span",null,i.createElement("i",{className:"material-icons"},"play_arrow"),i.createElement("span",{className:"play-all-label"},"PLAY ALL")))))))}function E(e){return i.createElement("div",{className:"playlist-title"},i.createElement("h1",null,e.title))}function S(e){return i.createElement("div",{className:"playlist-meta"},i.createElement("div",{className:"playlist-videos-number"},e.totalItems," media"),e.dateLabel?i.createElement("div",{className:"playlist-last-update"},e.dateLabel):null)}function C(e){const[t,a,l]=(0,r.usePopup)(),[s,o]=(0,i.useState)("main");return i.createElement("div",{className:"playlist-options-wrap"+("main"===s?" playlist-options-main":"")},i.createElement(l,{contentRef:t},i.createElement(c.CircleIconButton,null,i.createElement(c.MaterialIcon,{type:"more_horiz"}))),i.createElement(a,{contentRef:t},i.createElement(c.NavigationContentApp,{pageChangeCallback:o,initPage:"main",focusFirstItemOnPageChange:!1,pages:(d=function(){n.PlaylistPageActions.removePlaylist(),t.current.toggle()},m=function(){t.current.toggle()},{main:i.createElement(c.PopupMain,null,i.createElement(c.NavigationMenuList,{items:[{itemType:"open-subpage",text:"Delete",icon:"delete",buttonAttr:{className:"change-page","data-page-id":"proceedPlaylistRemovalPopup"}}]})),proceedPlaylistRemovalPopup:i.createElement(c.PopupMain,null,i.createElement("div",{className:"popup-message"},i.createElement("span",{className:"popup-message-title"},"Playlist removal"),i.createElement("span",{className:"popup-message-main"},"You're willing to remove playlist permanently?")),i.createElement("hr",null),i.createElement("span",{className:"popup-message-bottom"},i.createElement("button",{className:"button-link cancel-playlist-removal",onClick:m},"CANCEL"),i.createElement("button",{className:"button-link proceed-playlist-removal",onClick:d},"PROCEED")))}),pageChangeSelector:".change-page",pageIdSelectorAttr:"data-page-id"})));var d,m}function N(e){const[t,a,l]=(0,r.usePopup)();function m(){t.current.toggle()}function u(e){setTimeout(function(){n.PageActions.addNotification("Playlist updated","playlistUpdateCompleted"),m()},100)}function p(){setTimeout(function(){n.PageActions.addNotification("Playlist update failed","playlistUpdateFailed"),m()},100)}function y(e){setTimeout(function(){n.PageActions.addNotification("Playlist removed. Redirecting...","playlistDelete"),setTimeout(function(){window.location.href=s.MemberContext._currentValue.pages.playlists},2e3)},100)}function g(e){setTimeout(function(){n.PageActions.addNotification("Playlist removal failed","playlistDeleteFail")},100)}return(0,i.useEffect)(()=>(o.PlaylistPageStore.on("playlist_update_completed",u),o.PlaylistPageStore.on("playlist_update_failed",p),o.PlaylistPageStore.on("playlist_removal_completed",y),o.PlaylistPageStore.on("playlist_removal_failed",g),()=>{o.PlaylistPageStore.removeListener("playlist_update_completed",u),o.PlaylistPageStore.removeListener("playlist_update_failed",p),o.PlaylistPageStore.removeListener("playlist_removal_completed",y),o.PlaylistPageStore.removeListener("playlist_removal_failed",g)}),[]),i.createElement("div",{className:"edit-playlist"},i.createElement(l,{contentRef:t},i.createElement(c.CircleIconButton,null,i.createElement(c.MaterialIcon,{type:"edit"}),i.createElement("span",null,"EDIT"))),i.createElement(a,{contentRef:t},i.createElement("div",{className:"popup-fullscreen"},i.createElement(c.PopupMain,null,i.createElement("span",{className:"popup-fullscreen-overlay"}),i.createElement("div",{className:"edit-playlist-form-wrap"},i.createElement("div",{className:"edit-playlist-popup-title"},"Edit playlist",i.createElement(c.CircleIconButton,{type:"button",onClick:m},i.createElement(c.MaterialIcon,{type:"close"}))),i.createElement(d.w,{date:(new Date).getTime(),id:o.PlaylistPageStore.get("playlistId"),onCancel:m,onPlaylistSave:function(){}}))))))}function _(e){return e.loggedinUserPlaylist?i.createElement("div",{className:"playlist-actions"},e.loggedinUserPlaylist?i.createElement(C,null):null):null}function k(e){return i.createElement("div",{className:"playlist-author"},i.createElement("div",null,i.createElement("div",{className:"playlist-author-thumb"},i.createElement("a",{href:e.link,title:e.name},e.thumb?i.createElement("span",{style:{backgroundImage:"url("+e.thumb+")"}},i.createElement("img",{src:e.thumb,alt:""})):i.createElement("span",null,i.createElement(c.MaterialIcon,{type:"person"})))),i.createElement("div",{className:"playlist-author-name"},i.createElement("a",{href:e.link,title:e.name},e.name)),e.loggedinUserPlaylist?i.createElement(N,null):null))}class I extends h.Y{constructor(e){super(e,"playlist-page"),this.state={thumb:o.PlaylistPageStore.get("thumb"),media:o.PlaylistPageStore.get("playlist-media"),savedPlaylist:o.PlaylistPageStore.get("saved-playlist"),loggedinUserPlaylist:o.PlaylistPageStore.get("logged-in-user-playlist"),title:o.PlaylistPageStore.get("title"),description:o.PlaylistPageStore.get("description")},this.onLoadPlaylistData=this.onLoadPlaylistData.bind(this),o.PlaylistPageStore.on("loaded_playlist_data",this.onLoadPlaylistData),this.onMediaRemovedFromPlaylist=this.onMediaRemovedFromPlaylist.bind(this),o.PlaylistPageStore.on("removed_media_from_playlist",this.onMediaRemovedFromPlaylist),this.onMediaReorderedInPlaylist=this.onMediaReorderedInPlaylist.bind(this),o.PlaylistPageStore.on("reordered_media_in_playlist",this.onMediaReorderedInPlaylist),this.onCompletePlaylistUpdate=this.onCompletePlaylistUpdate.bind(this),o.PlaylistPageStore.on("playlist_update_completed",this.onCompletePlaylistUpdate)}onCompletePlaylistUpdate(){this.setState({thumb:o.PlaylistPageStore.get("thumb"),title:o.PlaylistPageStore.get("title"),description:o.PlaylistPageStore.get("description")})}onLoadPlaylistData(){this.setState({thumb:o.PlaylistPageStore.get("thumb"),title:o.PlaylistPageStore.get("title"),description:o.PlaylistPageStore.get("description"),media:o.PlaylistPageStore.get("playlist-media"),savedPlaylist:o.PlaylistPageStore.get("saved-playlist"),loggedinUserPlaylist:o.PlaylistPageStore.get("logged-in-user-playlist")})}componentDidMount(){n.PlaylistPageActions.loadPlaylistData()}onMediaRemovedFromPlaylist(){this.setState({media:o.PlaylistPageStore.get("playlist-media"),thumb:o.PlaylistPageStore.get("thumb")})}onMediaReorderedInPlaylist(){this.setState({media:o.PlaylistPageStore.get("playlist-media"),thumb:o.PlaylistPageStore.get("thumb")})}pageContent(){const e=o.PlaylistPageStore.get("playlistId");return e?[i.createElement("div",{key:"playlistDetails",className:"playlist-details"},i.createElement(b,{id:e,thumb:this.state.thumb,media:this.state.media}),i.createElement(E,{title:this.state.title}),i.createElement(S,{totalItems:o.PlaylistPageStore.get("total-items"),dateLabel:o.PlaylistPageStore.get("date-label"),viewsCount:o.PlaylistPageStore.get("views-count")}),i.createElement(_,{loggedinUserPlaylist:this.state.loggedinUserPlaylist,savedPlaylist:this.state.savedPlaylist}),this.state.description?i.createElement("div",{className:"playlist-description"},this.state.description):null,i.createElement(k,{name:o.PlaylistPageStore.get("author-name"),link:o.PlaylistPageStore.get("author-link"),thumb:o.PlaylistPageStore.get("author-thumb"),loggedinUserPlaylist:this.state.loggedinUserPlaylist})),i.createElement(f,{key:"playlistMediaList_"+this.state.media.length,id:e,media:this.state.media,loggedinUserPlaylist:this.state.loggedinUserPlaylist})]:null}}(0,l.C)("page-playlist",I)},878:function(e,t,a){a.d(t,{c:function(){return c}});var l=a(9471),i=a(8713),n=a.n(i),s=a(6387),r=a(5321),o=a(2828);function c(e){const{thumbnail:t}=(0,s.useUser)(),a={"aria-label":"Account profile photo that opens list of options and settings pages links",className:"thumbnail"};switch(e.isButton?void 0!==e.onClick&&(a.onClick=e.onClick):a.type="span",e.size){case"small":case"large":a.className+=" "+e.size+"-thumb"}return l.createElement(r.i,a,t?l.createElement("img",{src:t,alt:""}):l.createElement(o.Z,{type:"person"}))}c.propTypes={isButton:n().bool,size:n().oneOf(["small","medium","large"]),onClick:n().func},c.defaultProps={isButton:!1,size:"medium"}},3818:function(e,t,a){a(9471);var l=a(8713),i=a.n(l);i().string,i().array.isRequired,i().string,i().number,i().number,i().number,i().func,i().func},6568:function(e,t,a){a.d(t,{x:function(){return s}});var l=a(9471),i=a(8713),n=a.n(i);function s(e){let t="spinner-loader";switch(e.size){case"tiny":case"x-small":case"small":case"large":case"x-large":t+=" "+e.size}return l.createElement("div",{className:t},l.createElement("svg",{className:"circular",viewBox:"25 25 50 50"},l.createElement("circle",{className:"path",cx:"50",cy:"50",r:"20",fill:"none",strokeWidth:"1.5",strokeMiterlimit:"10"})))}s.propTypes={size:n().oneOf(["tiny","x-small","small","medium","large","x-large"])},s.defaultProps={size:"medium"}},7664:function(e,t,a){a.d(t,{CircleIconButton:function(){return l.i},MaterialIcon:function(){return i.Z},NavigationContentApp:function(){return n.V},NavigationMenuList:function(){return s.S},Notifications:function(){return r.$},PopupMain:function(){return o.AP},PopupTop:function(){return o.cp},SpinnerLoader:function(){return c.x},UserThumbnail:function(){return d.c}});var l=a(5321),i=(a(7256),a(3135),a(2828)),n=a(5305),s=a(7201),r=a(6089),o=(a(3818),a(2901)),c=a(6568),d=a(878)}},a={};function l(e){var i=a[e];if(void 0!==i)return i.exports;var n=a[e]={exports:{}};return t[e].call(n.exports,n,n.exports,l),n.exports}l.m=t,e=[],l.O=function(t,a,i,n){if(!a){var s=1/0;for(d=0;d<e.length;d++){a=e[d][0],i=e[d][1],n=e[d][2];for(var r=!0,o=0;o<a.length;o++)(!1&n||s>=n)&&Object.keys(l.O).every(function(e){return l.O[e](a[o])})?a.splice(o--,1):(r=!1,n<s&&(s=n));if(r){e.splice(d--,1);var c=i();void 0!==c&&(t=c)}}return t}n=n||0;for(var d=e.length;d>0&&e[d-1][2]>n;d--)e[d]=e[d-1];e[d]=[a,i,n]},l.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(t,{a:t}),t},l.d=function(e,t){for(var a in t)l.o(t,a)&&!l.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:t[a]})},l.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),l.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.j=33,function(){var e={33:0};l.O.j=function(t){return 0===e[t]};var t=function(t,a){var i,n,s=a[0],r=a[1],o=a[2],c=0;if(s.some(function(t){return 0!==e[t]})){for(i in r)l.o(r,i)&&(l.m[i]=r[i]);if(o)var d=o(l)}for(t&&t(a);c<s.length;c++)n=s[c],l.o(e,n)&&e[n]&&e[n][0](),e[n]=0;return l.O(d)},a=self.webpackChunkmediacms_frontend=self.webpackChunkmediacms_frontend||[];a.forEach(t.bind(null,0)),a.push=t.bind(null,a.push.bind(a))}();var i=l.O(void 0,[276],function(){return l(826)});i=l.O(i)}();