mirror of
https://github.com/mediacms-io/mediacms.git
synced 2026-03-11 15:37:22 -04:00
Frontent dev env (#247)
* Added frontend development files/environment * More items-categories related removals * Improvements in pages templates (inc. static pages) * Improvements in video player * Added empty home page message + cta * Updates in media, playlist and management pages * Improvements in material icons font loading * Replaced media & playlists links in frontend dev-env * frontend package version update * chnaged frontend dev url port * static files update * Changed default position of theme switcher * enabled frontend docker container
This commit is contained in:
Yiannis Stergiou
GitHub
876
frontend/src/static/js/utils/stores/MediaPageStore.js
Normal file
876
frontend/src/static/js/utils/stores/MediaPageStore.js
Normal file
@@ -0,0 +1,876 @@
|
||||
import EventEmitter from 'events';
|
||||
import { exportStore, getRequest, postRequest, putRequest, deleteRequest, csrfToken } from '../helpers';
|
||||
import { config as mediacmsConfig } from '../settings/config.js';
|
||||
|
||||
import UrlParse from 'url-parse';
|
||||
|
||||
import PageStore from './PageStore.js';
|
||||
|
||||
function extractPlaylistId() {
|
||||
let playlistId = null;
|
||||
|
||||
const getParamsString = window.location.search;
|
||||
|
||||
if ('' !== getParamsString) {
|
||||
let tmp = getParamsString.split('?');
|
||||
|
||||
if (2 === tmp.length) {
|
||||
tmp = tmp[1].split('&');
|
||||
|
||||
let x;
|
||||
|
||||
let i = 0;
|
||||
while (i < tmp.length) {
|
||||
x = tmp[i].split('=');
|
||||
|
||||
if ('pl' === x[0]) {
|
||||
if (2 === x.length) {
|
||||
playlistId = x[1];
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
i += 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return playlistId;
|
||||
}
|
||||
|
||||
const MediaPageStoreData = {};
|
||||
|
||||
class MediaPageStore extends EventEmitter {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
this.mediacms_config = mediacmsConfig(window.MediaCMS);
|
||||
|
||||
this._MEDIA = null;
|
||||
|
||||
this.pagePlaylistId = null;
|
||||
this.pagePlaylistData = null;
|
||||
|
||||
MediaPageStoreData[
|
||||
Object.defineProperty(this, 'id', { value: 'MediaPageStoreData_' + Object.keys(MediaPageStoreData).length }).id
|
||||
] = {
|
||||
likedMedia: false,
|
||||
dislikedMedia: false,
|
||||
reported_times: 0,
|
||||
while: {
|
||||
deleteMedia: false,
|
||||
submitComment: false,
|
||||
deleteCommentId: null,
|
||||
},
|
||||
};
|
||||
|
||||
this.removeMediaResponse = this.removeMediaResponse.bind(this);
|
||||
this.removeMediaFail = this.removeMediaFail.bind(this);
|
||||
|
||||
this.submitCommentFail = this.submitCommentFail.bind(this);
|
||||
this.submitCommentResponse = this.submitCommentResponse.bind(this);
|
||||
|
||||
this.removeCommentFail = this.removeCommentFail.bind(this);
|
||||
this.removeCommentResponse = this.removeCommentResponse.bind(this);
|
||||
}
|
||||
|
||||
loadData() {
|
||||
if (!MediaPageStoreData[this.id].mediaId) {
|
||||
let urlParams = (function () {
|
||||
let ret = new UrlParse(window.location.href).query;
|
||||
if (!ret) {
|
||||
ret = [];
|
||||
} else {
|
||||
ret = ret.substring(1);
|
||||
ret.split('&');
|
||||
ret = ret.length ? ret.split('=') : [];
|
||||
}
|
||||
return ret;
|
||||
})();
|
||||
|
||||
if (urlParams.length) {
|
||||
let i = 0;
|
||||
while (i < urlParams.length) {
|
||||
if ('m' === urlParams[i]) {
|
||||
// NOTE: "m" => media id/token.
|
||||
MediaPageStoreData[this.id].mediaId = urlParams[i + 1];
|
||||
}
|
||||
i += 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!MediaPageStoreData[this.id].mediaId) {
|
||||
console.warn('Invalid media id:', MediaPageStoreData[this.id].mediaId);
|
||||
return false;
|
||||
}
|
||||
|
||||
this.mediaAPIUrl = this.mediacms_config.api.media + '/' + MediaPageStoreData[this.id].mediaId;
|
||||
this.dataResponse = this.dataResponse.bind(this);
|
||||
this.dataErrorResponse = this.dataErrorResponse.bind(this);
|
||||
getRequest(this.mediaAPIUrl, !1, this.dataResponse, this.dataErrorResponse);
|
||||
}
|
||||
|
||||
loadPlaylistData() {
|
||||
const playlistApiUrl = this.mediacms_config.api.playlists + '/' + this.pagePlaylistId;
|
||||
this.playlistDataResponse = this.playlistDataResponse.bind(this);
|
||||
this.playlistDataErrorResponse = this.playlistDataErrorResponse.bind(this);
|
||||
getRequest(playlistApiUrl, !1, this.playlistDataResponse, this.playlistDataErrorResponse);
|
||||
}
|
||||
|
||||
playlistDataResponse(response) {
|
||||
if (response && response.data) {
|
||||
let validPlaylistMedia = false;
|
||||
|
||||
let i = 0;
|
||||
while (i < response.data.playlist_media.length) {
|
||||
if (MediaPageStoreData[this.id].mediaId === response.data.playlist_media[i].friendly_token) {
|
||||
validPlaylistMedia = true;
|
||||
break;
|
||||
}
|
||||
|
||||
i += 1;
|
||||
}
|
||||
|
||||
if (validPlaylistMedia) {
|
||||
this.pagePlaylistData = response.data;
|
||||
} else {
|
||||
this.pagePlaylistId = null;
|
||||
}
|
||||
|
||||
this.emit('loaded_viewer_playlist_data');
|
||||
} else {
|
||||
this.pagePlaylistId = null;
|
||||
}
|
||||
|
||||
this.emit('loaded_page_playlist_data');
|
||||
}
|
||||
|
||||
playlistDataErrorResponse(response) {
|
||||
this.emit('loaded_viewer_playlist_error');
|
||||
this.emit('loaded_page_playlist_data');
|
||||
}
|
||||
|
||||
loadComments() {
|
||||
this.commentsAPIUrl = this.mediacms_config.api.media + '/' + MediaPageStoreData[this.id].mediaId + '/comments';
|
||||
this.commentsResponse = this.commentsResponse.bind(this);
|
||||
getRequest(this.commentsAPIUrl, !1, this.commentsResponse);
|
||||
}
|
||||
|
||||
loadPlaylists() {
|
||||
if (!this.mediacms_config.member.can.saveMedia) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.playlistsAPIUrl = this.mediacms_config.api.user.playlists + this.mediacms_config.member.username;
|
||||
|
||||
this.playlistsResponse = this.playlistsResponse.bind(this);
|
||||
|
||||
getRequest(this.playlistsAPIUrl, !1, this.playlistsResponse);
|
||||
}
|
||||
|
||||
dataResponse(response) {
|
||||
if (response && response.data) {
|
||||
MediaPageStoreData[this.id].data = response.data;
|
||||
MediaPageStoreData[this.id].reported_times = !!MediaPageStoreData[this.id].data.reported_times;
|
||||
|
||||
switch (this.get('media-type')) {
|
||||
case 'video':
|
||||
case 'audio':
|
||||
case 'image':
|
||||
this.emit('loaded_' + this.get('media-type') + '_data');
|
||||
break;
|
||||
}
|
||||
|
||||
this.emit('loaded_media_data');
|
||||
}
|
||||
|
||||
this.loadPlaylists();
|
||||
|
||||
if (this.mediacms_config.member.can.readComment) {
|
||||
this.loadComments();
|
||||
}
|
||||
}
|
||||
|
||||
dataErrorResponse(response) {
|
||||
if (void 0 !== response.type) {
|
||||
switch (response.type) {
|
||||
case 'network':
|
||||
case 'private':
|
||||
case 'unavailable':
|
||||
MediaPageStoreData[this.id].loadErrorType = response.type;
|
||||
MediaPageStoreData[this.id].loadErrorMessage =
|
||||
void 0 !== response.message ? response.message : "Αn error occurred while loading the media's data";
|
||||
this.emit('loaded_media_error');
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
commentsResponse(response) {
|
||||
if (response && response.data) {
|
||||
MediaPageStoreData[this.id].comments = response.data.count ? response.data.results : [];
|
||||
this.emit('comments_load');
|
||||
}
|
||||
}
|
||||
|
||||
playlistsResponse(response) {
|
||||
if (response && response.data) {
|
||||
let tmp_playlists = response.data.count ? response.data.results : [];
|
||||
|
||||
MediaPageStoreData[this.id].playlists = [];
|
||||
|
||||
let i = 0;
|
||||
let cntr = 0;
|
||||
|
||||
while (i < tmp_playlists.length) {
|
||||
(function (pos) {
|
||||
let _this = this;
|
||||
|
||||
if (tmp_playlists[pos].user === this.mediacms_config.member.username) {
|
||||
let playlistsIndex = MediaPageStoreData[_this.id].playlists.length;
|
||||
|
||||
MediaPageStoreData[_this.id].playlists[playlistsIndex] = {
|
||||
playlist_id: (function (_url_) {
|
||||
let ret = _url_.split('/');
|
||||
return 1 < ret.length ? ret[ret.length - 1] : null;
|
||||
})(tmp_playlists[pos].url),
|
||||
title: tmp_playlists[pos].title,
|
||||
description: tmp_playlists[pos].description,
|
||||
add_date: tmp_playlists[pos].add_date,
|
||||
};
|
||||
|
||||
getRequest(
|
||||
this.mediacms_config.site.url + '/' + tmp_playlists[pos].api_url.replace(/^\//g, ''),
|
||||
!1,
|
||||
function (resp) {
|
||||
if (!!resp && !!resp.data) {
|
||||
MediaPageStoreData[_this.id].playlists[playlistsIndex].media_list = [];
|
||||
|
||||
let f = 0;
|
||||
let arr;
|
||||
|
||||
while (f < resp.data.playlist_media.length) {
|
||||
arr = resp.data.playlist_media[f].url.split('m=');
|
||||
if (2 === arr.length) {
|
||||
MediaPageStoreData[_this.id].playlists[playlistsIndex].media_list.push(arr[1]);
|
||||
}
|
||||
f += 1;
|
||||
}
|
||||
}
|
||||
|
||||
cntr += 1;
|
||||
|
||||
if (cntr === tmp_playlists.length) {
|
||||
this.emit('playlists_load');
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
}.bind(this)(i));
|
||||
|
||||
i += 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
requestMediaLike() {
|
||||
if (!MediaPageStoreData[this.id].mediaId) {
|
||||
console.warn('Invalid media id:', MediaPageStoreData[this.id].mediaId);
|
||||
return false;
|
||||
}
|
||||
|
||||
const url = this.mediacms_config.api.media + '/' + MediaPageStoreData[this.id].mediaId + '/actions';
|
||||
|
||||
this.likeActionResponse = this.likeActionResponse.bind(this);
|
||||
|
||||
postRequest(
|
||||
url,
|
||||
{
|
||||
type: 'like',
|
||||
// `headers` are custom headers to be sent
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
'X-CSRFToken': csrfToken(),
|
||||
},
|
||||
},
|
||||
false,
|
||||
this.likeActionResponse,
|
||||
function () {
|
||||
this.emit('liked_media_failed_request');
|
||||
}.bind(this)
|
||||
);
|
||||
}
|
||||
|
||||
likeActionResponse(response) {
|
||||
if (response) {
|
||||
if (response instanceof Error) {
|
||||
} else if (response.data) {
|
||||
MediaPageStoreData[this.id].likedMedia = true;
|
||||
this.emit('liked_media');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
requestMediaDislike() {
|
||||
if (!MediaPageStoreData[this.id].mediaId) {
|
||||
console.warn('Invalid media id:', MediaPageStoreData[this.id].mediaId);
|
||||
return false;
|
||||
}
|
||||
|
||||
const url = this.mediacms_config.api.media + '/' + MediaPageStoreData[this.id].mediaId + '/actions';
|
||||
this.dislikeActionResponse = this.dislikeActionResponse.bind(this);
|
||||
postRequest(
|
||||
url,
|
||||
{
|
||||
type: 'dislike',
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
'X-CSRFToken': csrfToken(),
|
||||
},
|
||||
},
|
||||
false,
|
||||
this.dislikeActionResponse,
|
||||
function () {
|
||||
this.emit('disliked_media_failed_request');
|
||||
}.bind(this)
|
||||
);
|
||||
}
|
||||
|
||||
dislikeActionResponse(response) {
|
||||
if (response) {
|
||||
if (response instanceof Error) {
|
||||
} else if (response.data) {
|
||||
MediaPageStoreData[this.id].dislikedMedia = true;
|
||||
this.emit('disliked_media');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
requestMediaReport(descr) {
|
||||
if (!MediaPageStoreData[this.id].mediaId) {
|
||||
console.warn('Invalid media id:', MediaPageStoreData[this.id].mediaId);
|
||||
return false;
|
||||
}
|
||||
|
||||
const url = this.mediacms_config.api.media + '/' + MediaPageStoreData[this.id].mediaId + '/actions';
|
||||
this.reportActionResponse = this.reportActionResponse.bind(this);
|
||||
postRequest(
|
||||
url,
|
||||
{
|
||||
type: 'report',
|
||||
extra_info: descr,
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
'X-CSRFToken': csrfToken(),
|
||||
},
|
||||
},
|
||||
false,
|
||||
this.reportActionResponse,
|
||||
this.reportActionResponse
|
||||
);
|
||||
}
|
||||
|
||||
reportActionResponse(response) {
|
||||
if (response) {
|
||||
if (response instanceof Error) {
|
||||
} else if (response.data) {
|
||||
MediaPageStoreData[this.id].reported_times += 1;
|
||||
this.emit('reported_media');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
set(type, value) {
|
||||
switch (type) {
|
||||
case 'media-load-error-type':
|
||||
MediaPageStoreData[this.id].loadErrorType = value;
|
||||
break;
|
||||
case 'media-load-error-message':
|
||||
MediaPageStoreData[this.id].loadErrorMessage = value;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
get(type) {
|
||||
let tmp,
|
||||
activeItem,
|
||||
browserCache,
|
||||
i,
|
||||
r = null;
|
||||
switch (type) {
|
||||
case 'playlists':
|
||||
r = MediaPageStoreData[this.id].playlists || [];
|
||||
break;
|
||||
case 'media-load-error-type':
|
||||
r = void 0 !== MediaPageStoreData[this.id].loadErrorType ? MediaPageStoreData[this.id].loadErrorType : null;
|
||||
break;
|
||||
case 'media-load-error-message':
|
||||
r =
|
||||
void 0 !== MediaPageStoreData[this.id].loadErrorMessage ? MediaPageStoreData[this.id].loadErrorMessage : null;
|
||||
break;
|
||||
case 'media-comments':
|
||||
r = MediaPageStoreData[this.id].comments || [];
|
||||
break;
|
||||
case 'media-data':
|
||||
r = MediaPageStoreData[this.id].data || null;
|
||||
break;
|
||||
case 'media-id':
|
||||
r = MediaPageStoreData[this.id].mediaId;
|
||||
break;
|
||||
case 'media-url':
|
||||
r =
|
||||
void 0 !== MediaPageStoreData[this.id].data && void 0 !== MediaPageStoreData[this.id].data.url
|
||||
? MediaPageStoreData[this.id].data.url
|
||||
: 'N/A';
|
||||
break;
|
||||
case 'media-edit-subtitle-url':
|
||||
r =
|
||||
void 0 !== MediaPageStoreData[this.id].data &&
|
||||
'string' === typeof MediaPageStoreData[this.id].data.add_subtitle_url
|
||||
? MediaPageStoreData[this.id].data.add_subtitle_url
|
||||
: null;
|
||||
break;
|
||||
case 'media-likes':
|
||||
tmp = MediaPageStoreData[this.id].likedMedia ? 1 : 0;
|
||||
if (tmp) {
|
||||
r =
|
||||
void 0 !== MediaPageStoreData[this.id].data && void 0 !== MediaPageStoreData[this.id].data.likes
|
||||
? MediaPageStoreData[this.id].data.likes + tmp
|
||||
: tmp;
|
||||
} else {
|
||||
r =
|
||||
void 0 !== MediaPageStoreData[this.id].data && void 0 !== MediaPageStoreData[this.id].data.likes
|
||||
? MediaPageStoreData[this.id].data.likes
|
||||
: 'N/A';
|
||||
}
|
||||
break;
|
||||
case 'media-dislikes':
|
||||
tmp = MediaPageStoreData[this.id].dislikedMedia ? 1 : 0;
|
||||
if (tmp) {
|
||||
r =
|
||||
void 0 !== MediaPageStoreData[this.id].data && void 0 !== MediaPageStoreData[this.id].data.dislikes
|
||||
? MediaPageStoreData[this.id].data.dislikes + tmp
|
||||
: tmp;
|
||||
} else {
|
||||
r =
|
||||
void 0 !== MediaPageStoreData[this.id].data && void 0 !== MediaPageStoreData[this.id].data.dislikes
|
||||
? MediaPageStoreData[this.id].data.dislikes
|
||||
: 'N/A';
|
||||
}
|
||||
break;
|
||||
case 'media-summary':
|
||||
r =
|
||||
void 0 !== MediaPageStoreData[this.id].data && void 0 !== MediaPageStoreData[this.id].data.summary
|
||||
? MediaPageStoreData[this.id].data.summary
|
||||
: null;
|
||||
break;
|
||||
case 'media-categories':
|
||||
r =
|
||||
void 0 !== MediaPageStoreData[this.id].data && void 0 !== MediaPageStoreData[this.id].data.categories_info
|
||||
? MediaPageStoreData[this.id].data.categories_info
|
||||
: [];
|
||||
break;
|
||||
case 'media-tags':
|
||||
r =
|
||||
void 0 !== MediaPageStoreData[this.id].data && void 0 !== MediaPageStoreData[this.id].data.tags_info
|
||||
? MediaPageStoreData[this.id].data.tags_info
|
||||
: [];
|
||||
break;
|
||||
case 'media-type':
|
||||
r =
|
||||
void 0 !== MediaPageStoreData[this.id].data && void 0 !== MediaPageStoreData[this.id].data.media_type
|
||||
? MediaPageStoreData[this.id].data.media_type
|
||||
: null;
|
||||
break;
|
||||
case 'media-original-url':
|
||||
r =
|
||||
void 0 !== MediaPageStoreData[this.id].data && void 0 !== MediaPageStoreData[this.id].data.original_media_url
|
||||
? MediaPageStoreData[this.id].data.original_media_url
|
||||
: null;
|
||||
break;
|
||||
case 'media-thumbnail-url':
|
||||
r =
|
||||
void 0 !== MediaPageStoreData[this.id].data && void 0 !== MediaPageStoreData[this.id].data.thumbnail_url
|
||||
? MediaPageStoreData[this.id].data.thumbnail_url
|
||||
: null;
|
||||
break;
|
||||
case 'user-liked-media':
|
||||
r = MediaPageStoreData[this.id].likedMedia;
|
||||
break;
|
||||
case 'user-disliked-media':
|
||||
r = MediaPageStoreData[this.id].dislikedMedia;
|
||||
break;
|
||||
case 'media-author-thumbnail-url':
|
||||
r =
|
||||
void 0 !== MediaPageStoreData[this.id].data && void 0 !== MediaPageStoreData[this.id].data.author_thumbnail
|
||||
? this.mediacms_config.site.url +
|
||||
'/' +
|
||||
MediaPageStoreData[this.id].data.author_thumbnail.replace(/^\//g, '')
|
||||
: null;
|
||||
break;
|
||||
case 'playlist-data':
|
||||
r = this.pagePlaylistData;
|
||||
break;
|
||||
case 'playlist-id':
|
||||
r = this.pagePlaylistId;
|
||||
break;
|
||||
case 'playlist-next-media-url':
|
||||
if (!this.pagePlaylistData) {
|
||||
break;
|
||||
}
|
||||
|
||||
activeItem = 0;
|
||||
i = 0;
|
||||
while (i < this.pagePlaylistData.playlist_media.length) {
|
||||
if (MediaPageStoreData[this.id].mediaId === this.pagePlaylistData.playlist_media[i].friendly_token) {
|
||||
activeItem = i;
|
||||
break;
|
||||
}
|
||||
|
||||
i += 1;
|
||||
}
|
||||
|
||||
let nextItem = activeItem + 1;
|
||||
|
||||
if (nextItem === this.pagePlaylistData.playlist_media.length) {
|
||||
browserCache = PageStore.get('browser-cache');
|
||||
if (true === browserCache.get('loopPlaylist[' + this.pagePlaylistId + ']')) {
|
||||
nextItem = 0;
|
||||
}
|
||||
}
|
||||
|
||||
if (void 0 !== this.pagePlaylistData.playlist_media[nextItem]) {
|
||||
r = this.pagePlaylistData.playlist_media[nextItem].url + '&pl=' + this.pagePlaylistId;
|
||||
}
|
||||
|
||||
break;
|
||||
case 'playlist-previous-media-url':
|
||||
if (!this.pagePlaylistData) {
|
||||
break;
|
||||
}
|
||||
|
||||
activeItem = 0;
|
||||
i = 0;
|
||||
while (i < this.pagePlaylistData.playlist_media.length) {
|
||||
if (MediaPageStoreData[this.id].mediaId === this.pagePlaylistData.playlist_media[i].friendly_token) {
|
||||
activeItem = i;
|
||||
break;
|
||||
}
|
||||
|
||||
i += 1;
|
||||
}
|
||||
|
||||
let previousItem = activeItem - 1;
|
||||
|
||||
if (0 === activeItem) {
|
||||
previousItem = null;
|
||||
|
||||
browserCache = PageStore.get('browser-cache');
|
||||
|
||||
if (true === browserCache.get('loopPlaylist[' + this.pagePlaylistId + ']')) {
|
||||
previousItem = this.pagePlaylistData.playlist_media.length - 1;
|
||||
}
|
||||
}
|
||||
|
||||
if (void 0 !== this.pagePlaylistData.playlist_media[previousItem]) {
|
||||
r = this.pagePlaylistData.playlist_media[previousItem].url + '&pl=' + this.pagePlaylistId;
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
return r;
|
||||
}
|
||||
|
||||
isVideo() {
|
||||
return 'video' === this.get('media-type');
|
||||
}
|
||||
|
||||
onPlaylistCreationCompleted(response) {
|
||||
if (response && response.data) {
|
||||
this.emit('playlist_creation_completed', response.data);
|
||||
}
|
||||
}
|
||||
|
||||
onPlaylistCreationFailed() {
|
||||
this.emit('playlist_creation_failed');
|
||||
}
|
||||
|
||||
onPlaylistMediaAdditionCompleted(playlist_id, response) {
|
||||
if (response) {
|
||||
let i = 0;
|
||||
while (i < MediaPageStoreData[this.id].playlists.length) {
|
||||
if (playlist_id === MediaPageStoreData[this.id].playlists[i].playlist_id) {
|
||||
MediaPageStoreData[this.id].playlists[i].media_list.push(MediaPageStoreData[this.id].mediaId);
|
||||
break;
|
||||
}
|
||||
i += 1;
|
||||
}
|
||||
this.emit('media_playlist_addition_completed', playlist_id);
|
||||
}
|
||||
}
|
||||
|
||||
onPlaylistMediaAdditionFailed(playlist_id, response) {
|
||||
this.emit('media_playlist_addition_failed');
|
||||
}
|
||||
|
||||
onPlaylistMediaRemovalCompleted(playlist_id, response) {
|
||||
if (response) {
|
||||
let j, new_playlist_media;
|
||||
let i = 0;
|
||||
while (i < MediaPageStoreData[this.id].playlists.length) {
|
||||
if (playlist_id === MediaPageStoreData[this.id].playlists[i].playlist_id) {
|
||||
new_playlist_media = [];
|
||||
j = 0;
|
||||
while (j < MediaPageStoreData[this.id].playlists[i].media_list.length) {
|
||||
if (MediaPageStoreData[this.id].mediaId !== MediaPageStoreData[this.id].playlists[i].media_list[j]) {
|
||||
new_playlist_media.push(MediaPageStoreData[this.id].playlists[i].media_list[j]);
|
||||
}
|
||||
j += 1;
|
||||
}
|
||||
MediaPageStoreData[this.id].playlists[i].media_list = new_playlist_media;
|
||||
|
||||
break;
|
||||
}
|
||||
i += 1;
|
||||
}
|
||||
this.emit('media_playlist_removal_completed', playlist_id);
|
||||
}
|
||||
}
|
||||
|
||||
onPlaylistMediaRemovalFailed(playlist_id, response) {
|
||||
this.emit('media_playlist_removal_failed');
|
||||
}
|
||||
|
||||
actions_handler(action) {
|
||||
switch (action.type) {
|
||||
case 'LOAD_MEDIA_DATA':
|
||||
MediaPageStoreData[this.id].mediaId = window.MediaCMS.mediaId || MediaPageStoreData[this.id].mediaId;
|
||||
|
||||
this.pagePlaylistId = extractPlaylistId();
|
||||
|
||||
if (this.pagePlaylistId) {
|
||||
this.loadPlaylistData();
|
||||
this.loadData();
|
||||
} else {
|
||||
this.emit('loaded_page_playlist_data');
|
||||
this.loadData();
|
||||
}
|
||||
|
||||
break;
|
||||
case 'LIKE_MEDIA':
|
||||
if (!MediaPageStoreData[this.id].likedMedia && !MediaPageStoreData[this.id].dislikedMedia) {
|
||||
this.requestMediaLike();
|
||||
}
|
||||
break;
|
||||
case 'DISLIKE_MEDIA':
|
||||
if (!MediaPageStoreData[this.id].likedMedia && !MediaPageStoreData[this.id].dislikedMedia) {
|
||||
this.requestMediaDislike();
|
||||
}
|
||||
break;
|
||||
case 'REPORT_MEDIA':
|
||||
if (!MediaPageStoreData[this.id].reported_times) {
|
||||
if ('' !== action.reportDescription) {
|
||||
this.requestMediaReport(action.reportDescription);
|
||||
}
|
||||
}
|
||||
break;
|
||||
case 'COPY_SHARE_LINK':
|
||||
if (action.inputElement instanceof HTMLElement) {
|
||||
action.inputElement.select();
|
||||
document.execCommand('copy');
|
||||
this.emit('copied_media_link');
|
||||
}
|
||||
break;
|
||||
case 'COPY_EMBED_MEDIA_CODE':
|
||||
if (action.inputElement instanceof HTMLElement) {
|
||||
action.inputElement.select();
|
||||
document.execCommand('copy');
|
||||
this.emit('copied_embed_media_code');
|
||||
}
|
||||
break;
|
||||
case 'REMOVE_MEDIA':
|
||||
if (MediaPageStoreData[this.id].while.deleteMedia) {
|
||||
return;
|
||||
}
|
||||
MediaPageStoreData[this.id].while.deleteMedia = true;
|
||||
deleteRequest(
|
||||
this.mediaAPIUrl,
|
||||
{ headers: { 'X-CSRFToken': csrfToken() } },
|
||||
false,
|
||||
this.removeMediaResponse,
|
||||
this.removeMediaFail
|
||||
);
|
||||
break;
|
||||
case 'SUBMIT_COMMENT':
|
||||
if (MediaPageStoreData[this.id].while.submitComment) {
|
||||
return;
|
||||
}
|
||||
|
||||
MediaPageStoreData[this.id].while.submitComment = true;
|
||||
|
||||
postRequest(
|
||||
this.commentsAPIUrl,
|
||||
{ text: action.commentText },
|
||||
{ headers: { 'X-CSRFToken': csrfToken() } },
|
||||
false,
|
||||
this.submitCommentResponse,
|
||||
this.submitCommentFail
|
||||
);
|
||||
break;
|
||||
case 'DELETE_COMMENT':
|
||||
if (null !== MediaPageStoreData[this.id].while.deleteCommentId) {
|
||||
return;
|
||||
}
|
||||
|
||||
MediaPageStoreData[this.id].while.deleteCommentId = action.commentId;
|
||||
deleteRequest(
|
||||
this.commentsAPIUrl + '/' + action.commentId,
|
||||
{ headers: { 'X-CSRFToken': csrfToken() } },
|
||||
false,
|
||||
this.removeCommentResponse,
|
||||
this.removeCommentFail
|
||||
);
|
||||
break;
|
||||
case 'CREATE_PLAYLIST':
|
||||
postRequest(
|
||||
this.mediacms_config.api.playlists,
|
||||
{
|
||||
title: action.playlist_data.title,
|
||||
description: action.playlist_data.description,
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
'X-CSRFToken': csrfToken(),
|
||||
},
|
||||
},
|
||||
false,
|
||||
this.onPlaylistCreationCompleted.bind(this),
|
||||
this.onPlaylistCreationFailed.bind(this)
|
||||
);
|
||||
break;
|
||||
case 'ADD_MEDIA_TO_PLAYLIST':
|
||||
putRequest(
|
||||
this.mediacms_config.api.playlists + '/' + action.playlist_id,
|
||||
{
|
||||
type: 'add',
|
||||
media_friendly_token: action.media_id,
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
'X-CSRFToken': csrfToken(),
|
||||
},
|
||||
},
|
||||
false,
|
||||
this.onPlaylistMediaAdditionCompleted.bind(this, action.playlist_id),
|
||||
this.onPlaylistMediaAdditionFailed.bind(this, action.playlist_id)
|
||||
);
|
||||
break;
|
||||
case 'REMOVE_MEDIA_FROM_PLAYLIST':
|
||||
putRequest(
|
||||
this.mediacms_config.api.playlists + '/' + action.playlist_id,
|
||||
{
|
||||
type: 'remove',
|
||||
media_friendly_token: action.media_id,
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
'X-CSRFToken': csrfToken(),
|
||||
},
|
||||
},
|
||||
false,
|
||||
this.onPlaylistMediaRemovalCompleted.bind(this, action.playlist_id),
|
||||
this.onPlaylistMediaRemovalFailed.bind(this, action.playlist_id)
|
||||
);
|
||||
break;
|
||||
case 'APPEND_NEW_PLAYLIST':
|
||||
MediaPageStoreData[this.id].playlists.push(action.playlist_data);
|
||||
this.emit('playlists_load');
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
removeMediaResponse(response) {
|
||||
if (response && 204 === response.status) {
|
||||
this.emit('media_delete', MediaPageStoreData[this.id].mediaId);
|
||||
}
|
||||
}
|
||||
|
||||
removeMediaFail() {
|
||||
this.emit('media_delete_fail', MediaPageStoreData[this.id].mediaId);
|
||||
setTimeout(
|
||||
function (ins) {
|
||||
MediaPageStoreData[ins.id].while.deleteMedia = null;
|
||||
},
|
||||
100,
|
||||
this
|
||||
);
|
||||
}
|
||||
|
||||
removeCommentFail(err) {
|
||||
this.emit('comment_delete_fail', MediaPageStoreData[this.id].while.deleteCommentId);
|
||||
setTimeout(
|
||||
function (ins) {
|
||||
MediaPageStoreData[ins.id].while.deleteCommentId = null;
|
||||
},
|
||||
100,
|
||||
this
|
||||
);
|
||||
}
|
||||
|
||||
removeCommentResponse(response) {
|
||||
if (response && 204 === response.status) {
|
||||
let k;
|
||||
let newComments = [];
|
||||
for (k in MediaPageStoreData[this.id].comments) {
|
||||
if (MediaPageStoreData[this.id].comments.hasOwnProperty(k)) {
|
||||
if (MediaPageStoreData[this.id].while.deleteCommentId !== MediaPageStoreData[this.id].comments[k].uid) {
|
||||
newComments.push(MediaPageStoreData[this.id].comments[k]);
|
||||
}
|
||||
}
|
||||
}
|
||||
MediaPageStoreData[this.id].comments = newComments;
|
||||
newComments = null;
|
||||
|
||||
this.emit('comment_delete', MediaPageStoreData[this.id].while.deleteCommentId);
|
||||
}
|
||||
setTimeout(
|
||||
function (ins) {
|
||||
MediaPageStoreData[ins.id].while.deleteCommentId = null;
|
||||
},
|
||||
100,
|
||||
this
|
||||
);
|
||||
}
|
||||
|
||||
submitCommentFail(err) {
|
||||
this.emit('comment_submit_fail');
|
||||
setTimeout(
|
||||
function (ins) {
|
||||
MediaPageStoreData[ins.id].while.submitComment = false;
|
||||
},
|
||||
100,
|
||||
this
|
||||
);
|
||||
}
|
||||
|
||||
submitCommentResponse(response) {
|
||||
if (response && 201 === response.status && response.data && Object.keys(response.data)) {
|
||||
MediaPageStoreData[this.id].comments.push(response.data);
|
||||
this.emit('comment_submit', response.data.uid);
|
||||
}
|
||||
setTimeout(
|
||||
function (ins) {
|
||||
MediaPageStoreData[ins.id].while.submitComment = false;
|
||||
},
|
||||
100,
|
||||
this
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default exportStore(new MediaPageStore(), 'actions_handler');
|
||||
155
frontend/src/static/js/utils/stores/PageStore.js
Normal file
155
frontend/src/static/js/utils/stores/PageStore.js
Normal file
@@ -0,0 +1,155 @@
|
||||
import EventEmitter from 'events';
|
||||
import { BrowserCache } from '../classes/';
|
||||
import { BrowserEvents, exportStore } from '../helpers';
|
||||
import { config as mediaCmsConfig } from '../settings/config.js';
|
||||
|
||||
function uniqid() {
|
||||
let a = new Uint32Array(3);
|
||||
window.crypto.getRandomValues(a);
|
||||
return (
|
||||
performance.now().toString(36) +
|
||||
Array.from(a)
|
||||
.map((A) => A.toString(36))
|
||||
.join('')
|
||||
).replace(/./g, '' + Math.random() + Intl.DateTimeFormat().resolvedOptions().timeZone + Date.now());
|
||||
}
|
||||
|
||||
function Notifications(initialNotifications) {
|
||||
let stack = [];
|
||||
|
||||
function push(msg) {
|
||||
if ('string' === typeof msg) {
|
||||
stack.push([uniqid(), msg]);
|
||||
}
|
||||
}
|
||||
|
||||
function messages() {
|
||||
return [...stack];
|
||||
}
|
||||
|
||||
function clear() {
|
||||
stack = [];
|
||||
}
|
||||
|
||||
function size() {
|
||||
return stack.length;
|
||||
}
|
||||
|
||||
initialNotifications.map(push);
|
||||
|
||||
return {
|
||||
size,
|
||||
push,
|
||||
clear,
|
||||
messages,
|
||||
};
|
||||
}
|
||||
|
||||
let browserCache;
|
||||
|
||||
let page_config = null;
|
||||
let mediacms_config = null;
|
||||
|
||||
const mediacms_api_endpoint_url = (k) => mediacms_config.api[k] || null;
|
||||
|
||||
class PageStore extends EventEmitter {
|
||||
constructor(page) {
|
||||
super();
|
||||
|
||||
mediacms_config = mediaCmsConfig(window.MediaCMS);
|
||||
|
||||
browserCache = new BrowserCache(mediacms_config.site.id, 86400); // Keep cache data "fresh" for one day.
|
||||
|
||||
page_config = {
|
||||
mediaAutoPlay: browserCache.get('media-auto-play'),
|
||||
};
|
||||
|
||||
page_config.mediaAutoPlay = null !== page_config.mediaAutoPlay ? page_config.mediaAutoPlay : true;
|
||||
|
||||
this.browserEvents = BrowserEvents();
|
||||
this.browserEvents.doc(this.onDocumentVisibilityChange.bind(this));
|
||||
this.browserEvents.win(this.onWindowResize.bind(this), this.onWindowScroll.bind(this));
|
||||
|
||||
this.notifications = Notifications(
|
||||
void 0 !== window.MediaCMS && void 0 !== window.MediaCMS.notifications ? window.MediaCMS.notifications : []
|
||||
);
|
||||
}
|
||||
|
||||
onDocumentVisibilityChange() {
|
||||
this.emit('document_visibility_change');
|
||||
}
|
||||
|
||||
onWindowScroll() {
|
||||
this.emit('window_scroll');
|
||||
}
|
||||
|
||||
onWindowResize() {
|
||||
this.emit('window_resize');
|
||||
}
|
||||
|
||||
initPage(page) {
|
||||
page_config.currentPage = page;
|
||||
}
|
||||
|
||||
get(type) {
|
||||
let r;
|
||||
|
||||
switch (type) {
|
||||
case 'browser-cache':
|
||||
r = browserCache;
|
||||
break;
|
||||
case 'media-auto-play':
|
||||
r = page_config.mediaAutoPlay;
|
||||
break;
|
||||
case 'config-contents':
|
||||
r = mediacms_config.contents;
|
||||
break;
|
||||
case 'config-enabled':
|
||||
r = mediacms_config.enabled;
|
||||
break;
|
||||
case 'config-media-item':
|
||||
r = mediacms_config.media.item;
|
||||
break;
|
||||
case 'config-options':
|
||||
r = mediacms_config.options;
|
||||
break;
|
||||
case 'config-site':
|
||||
r = mediacms_config.site;
|
||||
break;
|
||||
case 'api-playlists':
|
||||
r = mediacms_api_endpoint_url(type.split('-')[1]);
|
||||
break;
|
||||
case 'notifications-size':
|
||||
r = this.notifications.size();
|
||||
break;
|
||||
case 'notifications':
|
||||
r = this.notifications.messages();
|
||||
this.notifications.clear();
|
||||
break;
|
||||
case 'current-page':
|
||||
r = page_config.currentPage;
|
||||
break;
|
||||
}
|
||||
return r;
|
||||
}
|
||||
|
||||
actions_handler(action) {
|
||||
switch (action.type) {
|
||||
case 'INIT_PAGE':
|
||||
this.initPage(action.page);
|
||||
this.emit('page_init');
|
||||
break;
|
||||
case 'TOGGLE_AUTO_PLAY':
|
||||
page_config.mediaAutoPlay = !page_config.mediaAutoPlay;
|
||||
browserCache.set('media-auto-play', page_config.mediaAutoPlay);
|
||||
this.emit('switched_media_auto_play');
|
||||
break;
|
||||
case 'ADD_NOTIFICATION':
|
||||
this.notifications.push(action.notification);
|
||||
this.emit('added_notification');
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default exportStore(new PageStore(), 'actions_handler');
|
||||
236
frontend/src/static/js/utils/stores/PlaylistPageStore.js
Normal file
236
frontend/src/static/js/utils/stores/PlaylistPageStore.js
Normal file
@@ -0,0 +1,236 @@
|
||||
import React from 'react';
|
||||
import EventEmitter from 'events';
|
||||
import { publishedOnDate, exportStore, getRequest, postRequest, deleteRequest, csrfToken } from '../helpers';
|
||||
|
||||
import { config as mediacmsConfig } from '../settings/config.js';
|
||||
|
||||
const PlaylistPageStoreData = {};
|
||||
|
||||
class PlaylistPageStore extends EventEmitter {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
this.mediacms_config = mediacmsConfig(window.MediaCMS);
|
||||
|
||||
PlaylistPageStoreData[
|
||||
Object.defineProperty(this, 'id', {
|
||||
value: 'PlaylistPageStoreData_' + Object.keys(PlaylistPageStoreData).length,
|
||||
}).id
|
||||
] = {
|
||||
playlistId: null,
|
||||
data: {},
|
||||
};
|
||||
|
||||
this.data = {
|
||||
savedPlaylist: false,
|
||||
publishDate: new Date(2018, 3, 14, 1, 13, 22, 0),
|
||||
publishDateLabel: null,
|
||||
};
|
||||
|
||||
this.onPlaylistUpdateCompleted = this.onPlaylistUpdateCompleted.bind(this);
|
||||
this.onPlaylistUpdateFailed = this.onPlaylistUpdateFailed.bind(this);
|
||||
|
||||
this.onPlaylistRemovalCompleted = this.onPlaylistRemovalCompleted.bind(this);
|
||||
this.onPlaylistRemovalFailed = this.onPlaylistRemovalFailed.bind(this);
|
||||
}
|
||||
|
||||
loadData() {
|
||||
if (!PlaylistPageStoreData[this.id].playlistId) {
|
||||
console.warn('Invalid playlist id:', PlaylistPageStoreData[this.id].playlistId);
|
||||
return false;
|
||||
}
|
||||
|
||||
this.playlistAPIUrl = this.mediacms_config.api.playlists + '/' + PlaylistPageStoreData[this.id].playlistId;
|
||||
|
||||
this.dataResponse = this.dataResponse.bind(this);
|
||||
this.dataErrorResponse = this.dataErrorResponse.bind(this);
|
||||
getRequest(this.playlistAPIUrl, !1, this.dataResponse, this.dataErrorResponse);
|
||||
}
|
||||
|
||||
dataResponse(response) {
|
||||
if (response && response.data) {
|
||||
PlaylistPageStoreData[this.id].data = response.data;
|
||||
this.emit('loaded_playlist_data');
|
||||
}
|
||||
}
|
||||
|
||||
dataErrorResponse(response) {
|
||||
this.emit('loaded_playlist_error');
|
||||
|
||||
if (void 0 !== response.type) {
|
||||
/*switch( response.type ){
|
||||
case "network":
|
||||
case "private":
|
||||
case "unavailable":
|
||||
MediaPageStoreData[this.id].loadErrorType = response.type;
|
||||
MediaPageStoreData[this.id].loadErrorMessage = void 0 !== response.message ? response.message : "Αn error occurred while loading the media's data";
|
||||
this.emit('loaded_media_error');
|
||||
break;
|
||||
}*/
|
||||
}
|
||||
}
|
||||
|
||||
get(type) {
|
||||
switch (type) {
|
||||
case 'playlistId':
|
||||
return PlaylistPageStoreData[this.id].playlistId || null;
|
||||
break;
|
||||
case 'logged-in-user-playlist':
|
||||
return (
|
||||
!this.mediacms_config.member.is.anonymous &&
|
||||
PlaylistPageStoreData[this.id].data.user === this.mediacms_config.member.username
|
||||
);
|
||||
case 'playlist-media':
|
||||
return PlaylistPageStoreData[this.id].data.playlist_media || [];
|
||||
case 'visibility':
|
||||
return 'public';
|
||||
case 'visibility-icon':
|
||||
switch (this.get('visibility')) {
|
||||
case 'unlisted':
|
||||
return <i className="material-icons">insert_link</i>;
|
||||
case 'private':
|
||||
return <i className="material-icons">lock</i>;
|
||||
}
|
||||
return null;
|
||||
case 'total-items':
|
||||
return PlaylistPageStoreData[this.id].data.playlist_media.length || 0;
|
||||
case 'views-count':
|
||||
return 'N/A';
|
||||
case 'title':
|
||||
return PlaylistPageStoreData[this.id].data.title || null;
|
||||
case 'edit-link':
|
||||
return '#';
|
||||
case 'thumb':
|
||||
if (
|
||||
PlaylistPageStoreData[this.id].data.playlist_media &&
|
||||
PlaylistPageStoreData[this.id].data.playlist_media.length
|
||||
) {
|
||||
return PlaylistPageStoreData[this.id].data.playlist_media[0].thumbnail_url;
|
||||
}
|
||||
return null;
|
||||
case 'description':
|
||||
return PlaylistPageStoreData[this.id].data.description || null;
|
||||
case 'author-username':
|
||||
return PlaylistPageStoreData[this.id].data.user || null; // TODO: Recheck this, is this same with 'author-name'?
|
||||
case 'author-name':
|
||||
return PlaylistPageStoreData[this.id].data.user || null;
|
||||
case 'author-link':
|
||||
return PlaylistPageStoreData[this.id].data.user
|
||||
? this.mediacms_config.site.url + '/user/' + PlaylistPageStoreData[this.id].data.user
|
||||
: null;
|
||||
case 'author-thumb':
|
||||
if (!PlaylistPageStoreData[this.id].data.user_thumbnail_url) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
this.mediacms_config.site.url +
|
||||
'/' +
|
||||
PlaylistPageStoreData[this.id].data.user_thumbnail_url.replace(/^\//g, '')
|
||||
);
|
||||
|
||||
case 'saved-playlist':
|
||||
return this.data.savedPlaylist;
|
||||
case 'date-label':
|
||||
if (!PlaylistPageStoreData[this.id].data || !PlaylistPageStoreData[this.id].data.add_date) {
|
||||
return null;
|
||||
}
|
||||
this.data.publishDateLabel =
|
||||
this.data.publishDateLabel ||
|
||||
'Created on ' + publishedOnDate(new Date(PlaylistPageStoreData[this.id].data.add_date), 3);
|
||||
return this.data.publishDateLabel;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
onPlaylistUpdateCompleted(response) {
|
||||
if (response && response.data) {
|
||||
PlaylistPageStoreData[this.id].data.title = response.data.title;
|
||||
PlaylistPageStoreData[this.id].data.description = response.data.description;
|
||||
this.emit('playlist_update_completed', response.data);
|
||||
}
|
||||
}
|
||||
|
||||
onPlaylistUpdateFailed() {
|
||||
this.emit('playlist_update_failed');
|
||||
}
|
||||
|
||||
onPlaylistRemovalCompleted(response) {
|
||||
if (response && void 0 !== response.status && 403 !== response.status) {
|
||||
this.emit('playlist_removal_completed', response);
|
||||
} else {
|
||||
this.onPlaylistRemovalFailed();
|
||||
}
|
||||
}
|
||||
|
||||
onPlaylistRemovalFailed() {
|
||||
this.emit('playlist_removal_failed');
|
||||
}
|
||||
|
||||
actions_handler(action) {
|
||||
switch (action.type) {
|
||||
case 'LOAD_PLAYLIST_DATA':
|
||||
PlaylistPageStoreData[this.id].playlistId =
|
||||
window.MediaCMS.playlistId ||
|
||||
(function (url) {
|
||||
var arr = url.split('/');
|
||||
return arr.length ? arr[arr.length - 1] : null;
|
||||
})(window.location.href);
|
||||
this.loadData();
|
||||
break;
|
||||
case 'TOGGLE_SAVE':
|
||||
this.data.savedPlaylist = !this.data.savedPlaylist;
|
||||
this.emit('saved-updated');
|
||||
break;
|
||||
case 'UPDATE_PLAYLIST':
|
||||
postRequest(
|
||||
this.playlistAPIUrl,
|
||||
{
|
||||
title: action.playlist_data.title,
|
||||
description: action.playlist_data.description,
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
'X-CSRFToken': csrfToken(),
|
||||
},
|
||||
},
|
||||
false,
|
||||
this.onPlaylistUpdateCompleted,
|
||||
this.onPlaylistUpdateFailed
|
||||
);
|
||||
break;
|
||||
case 'REMOVE_PLAYLIST':
|
||||
deleteRequest(
|
||||
this.playlistAPIUrl,
|
||||
{
|
||||
headers: {
|
||||
'X-CSRFToken': csrfToken(),
|
||||
},
|
||||
},
|
||||
false,
|
||||
this.onPlaylistRemovalCompleted,
|
||||
this.onPlaylistRemovalFailed
|
||||
);
|
||||
break;
|
||||
case 'PLAYLIST_MEDIA_REORDERED':
|
||||
PlaylistPageStoreData[this.id].data.playlist_media = action.playlist_media;
|
||||
this.emit('reordered_media_in_playlist');
|
||||
break;
|
||||
case 'MEDIA_REMOVED_FROM_PLAYLIST':
|
||||
const new_playlist_media = [];
|
||||
let i = 0;
|
||||
while (i < PlaylistPageStoreData[this.id].data.playlist_media.length) {
|
||||
if (action.media_id !== PlaylistPageStoreData[this.id].data.playlist_media[i].url.split('=')[1]) {
|
||||
new_playlist_media.push(PlaylistPageStoreData[this.id].data.playlist_media[i]);
|
||||
}
|
||||
i += 1;
|
||||
}
|
||||
PlaylistPageStoreData[this.id].data.playlist_media = new_playlist_media;
|
||||
|
||||
this.emit('removed_media_from_playlist');
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default exportStore(new PlaylistPageStore(), 'actions_handler');
|
||||
76
frontend/src/static/js/utils/stores/PlaylistViewStore.js
Executable file
76
frontend/src/static/js/utils/stores/PlaylistViewStore.js
Executable file
@@ -0,0 +1,76 @@
|
||||
import EventEmitter from 'events';
|
||||
import { exportStore } from '../helpers';
|
||||
import PageStore from './PageStore';
|
||||
import MediaPageStore from './MediaPageStore';
|
||||
|
||||
class PlaylistViewStore extends EventEmitter {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
this.data = {
|
||||
playlistId: null,
|
||||
enabledLoop: null,
|
||||
enabledShuffle: null,
|
||||
savedPlaylist: false,
|
||||
response: null,
|
||||
};
|
||||
|
||||
this.browserCache = PageStore.get('browser-cache');
|
||||
}
|
||||
|
||||
get(type) {
|
||||
switch (type) {
|
||||
case 'logged-in-user-playlist':
|
||||
// TODO: Continue here.
|
||||
return false;
|
||||
case 'enabled-loop':
|
||||
if (null === this.data.playlistId) {
|
||||
this.data.playlistId = MediaPageStore.get('playlist-id');
|
||||
this.data.enabledLoop = this.browserCache.get('loopPlaylist[' + this.data.playlistId + ']');
|
||||
this.data.enabledLoop = null === this.data.enabledLoop ? true : this.data.enabledLoop;
|
||||
}
|
||||
return this.data.enabledLoop;
|
||||
case 'enabled-shuffle':
|
||||
if (null === this.data.playlistId) {
|
||||
this.data.playlistId = MediaPageStore.get('playlist-id');
|
||||
this.data.enabledShuffle = this.browserCache.get('shufflePlaylist[' + this.data.playlistId + ']');
|
||||
this.data.enabledShuffle = null === this.data.enabledShuffle ? false : this.data.enabledShuffle;
|
||||
}
|
||||
return this.data.enabledShuffle;
|
||||
case 'saved-playlist':
|
||||
return this.data.savedPlaylist;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
actions_handler(action) {
|
||||
switch (action.type) {
|
||||
case 'TOGGLE_LOOP':
|
||||
if (null === this.data.playlistId) {
|
||||
this.data.playlistId = MediaPageStore.get('playlist-id');
|
||||
this.data.enabledLoop = this.browserCache.get('loopPlaylist[' + this.data.playlistId + ']');
|
||||
this.data.enabledLoop = null === this.data.enabledLoop ? true : this.data.enabledLoop;
|
||||
}
|
||||
this.data.enabledLoop = !this.data.enabledLoop;
|
||||
this.browserCache.set('loopPlaylist[' + this.data.playlistId + ']', this.data.enabledLoop);
|
||||
this.emit('loop-repeat-updated');
|
||||
break;
|
||||
case 'TOGGLE_SHUFFLE':
|
||||
if (null === this.data.playlistId) {
|
||||
this.data.playlistId = MediaPageStore.get('playlist-id');
|
||||
this.data.enabledShuffle = this.browserCache.get('shufflePlaylist[' + this.data.playlistId + ']');
|
||||
this.data.enabledShuffle = null === this.data.enabledShuffle ? false : this.data.enabledShuffle;
|
||||
}
|
||||
this.data.enabledShuffle = !this.data.enabledShuffle;
|
||||
this.browserCache.set('shufflePlaylist[' + this.data.playlistId + ']', this.data.enabledShuffle);
|
||||
this.emit('shuffle-updated');
|
||||
break;
|
||||
case 'TOGGLE_SAVE':
|
||||
this.data.savedPlaylist = !this.data.savedPlaylist;
|
||||
this.emit('saved-updated');
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default exportStore(new PlaylistViewStore(), 'actions_handler');
|
||||
106
frontend/src/static/js/utils/stores/ProfilePageStore.js
Executable file
106
frontend/src/static/js/utils/stores/ProfilePageStore.js
Executable file
@@ -0,0 +1,106 @@
|
||||
import EventEmitter from 'events';
|
||||
import { exportStore, getRequest, deleteRequest, csrfToken } from '../helpers';
|
||||
|
||||
import { config as mediacmsConfig } from '../settings/config.js';
|
||||
|
||||
class ProfilePageStore extends EventEmitter {
|
||||
constructor() {
|
||||
super();
|
||||
this.mediacms_config = mediacmsConfig(window.MediaCMS);
|
||||
this.authorData = null;
|
||||
this.authorQuery = void 0;
|
||||
this.onDataLoad = this.onDataLoad.bind(this);
|
||||
this.onDataLoadFail = this.onDataLoadFail.bind(this);
|
||||
this.removeProfileResponse = this.removeProfileResponse.bind(this);
|
||||
this.removeProfileFail = this.removeProfileFail.bind(this);
|
||||
this.removingProfile = false;
|
||||
}
|
||||
|
||||
removeProfileResponse(response) {
|
||||
if (response && 204 === response.status) {
|
||||
this.emit('profile_delete', this.authorData.username);
|
||||
}
|
||||
}
|
||||
|
||||
removeProfileFail() {
|
||||
this.emit('profile_delete_fail', this.authorData.username);
|
||||
setTimeout(
|
||||
function (ins) {
|
||||
this.removingProfile = false;
|
||||
},
|
||||
100,
|
||||
this
|
||||
);
|
||||
}
|
||||
|
||||
get(type) {
|
||||
switch (type) {
|
||||
case 'author-data':
|
||||
return this.authorData;
|
||||
case 'author-query':
|
||||
if (void 0 === this.authorQuery) {
|
||||
this.authorQuery = null;
|
||||
|
||||
let getArgs = window.location.search;
|
||||
|
||||
if (getArgs && '' !== getArgs) {
|
||||
getArgs = getArgs.split('?')[1].split('=');
|
||||
|
||||
let i = 0;
|
||||
while (i < getArgs.length) {
|
||||
if ('aq' === getArgs[i]) {
|
||||
this.authorQuery = getArgs[i + 1] || null;
|
||||
break;
|
||||
}
|
||||
|
||||
i += 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return this.authorQuery;
|
||||
}
|
||||
}
|
||||
|
||||
onDataLoad(response) {
|
||||
if (response && response.data) {
|
||||
this.authorData = response.data;
|
||||
this.authorData.id = this.authorData.username;
|
||||
this.authorData.name = '' !== this.authorData.name ? this.authorData.name : this.authorData.username;
|
||||
this.emit('load-author-data');
|
||||
}
|
||||
}
|
||||
|
||||
onDataLoadFail(response) {
|
||||
// TODO: Continue here.
|
||||
}
|
||||
|
||||
actions_handler(action) {
|
||||
switch (action.type) {
|
||||
case 'REMOVE_PROFILE':
|
||||
if (this.removingProfile) {
|
||||
return;
|
||||
}
|
||||
this.removingProfile = true;
|
||||
let deleteAPIurl = this.mediacms_config.api.users + '/' + this.authorData.username;
|
||||
deleteRequest(
|
||||
deleteAPIurl,
|
||||
{ headers: { 'X-CSRFToken': csrfToken() } },
|
||||
false,
|
||||
this.removeProfileResponse,
|
||||
this.removeProfileFail
|
||||
);
|
||||
break;
|
||||
case 'LOAD_AUTHOR_DATA':
|
||||
getRequest(
|
||||
this.mediacms_config.api.users + '/' + window.MediaCMS.profileId,
|
||||
!1,
|
||||
this.onDataLoad,
|
||||
this.onDataLoadFail
|
||||
);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default exportStore(new ProfilePageStore(), 'actions_handler');
|
||||
102
frontend/src/static/js/utils/stores/SearchFieldStore.js
Executable file
102
frontend/src/static/js/utils/stores/SearchFieldStore.js
Executable file
@@ -0,0 +1,102 @@
|
||||
import EventEmitter from 'events';
|
||||
import { exportStore, getRequest } from '../helpers';
|
||||
import { config as mediacmsConfig } from '../settings/config.js';
|
||||
|
||||
function getUrlVars() {
|
||||
var vars = {};
|
||||
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function (m, key, value) {
|
||||
vars[key] = value;
|
||||
});
|
||||
return vars;
|
||||
}
|
||||
|
||||
const SearchFieldStoreData = {};
|
||||
|
||||
class SearchFieldStore extends EventEmitter {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
this.mediacms_config = mediacmsConfig(window.MediaCMS);
|
||||
|
||||
const urlvars = getUrlVars();
|
||||
const query = urlvars['q'];
|
||||
const categories = urlvars['c'];
|
||||
const tags = urlvars['t'];
|
||||
|
||||
SearchFieldStoreData[
|
||||
Object.defineProperty(this, 'id', {
|
||||
value: 'SearchFieldStoreData_' + Object.keys(SearchFieldStoreData).length,
|
||||
}).id
|
||||
] = {
|
||||
searchQuery: query ? decodeURIComponent(query).replace(/\+/g, ' ') : '',
|
||||
categoriesQuery: categories ? decodeURIComponent(categories).replace(/\+/g, ' ') : '',
|
||||
tagsQuery: tags ? decodeURIComponent(tags).replace(/\+/g, ' ') : '',
|
||||
predictions: [],
|
||||
};
|
||||
this.dataResponse = this.dataResponse.bind(this);
|
||||
}
|
||||
|
||||
dataResponse(response) {
|
||||
if (response && response.data) {
|
||||
let i = 0;
|
||||
|
||||
SearchFieldStoreData[this.id].predictions = [];
|
||||
|
||||
while (i < response.data.length) {
|
||||
SearchFieldStoreData[this.id].predictions[i] = response.data[i].title;
|
||||
i += 1;
|
||||
}
|
||||
|
||||
this.emit(
|
||||
'load_predictions',
|
||||
SearchFieldStoreData[this.id].requestedQuery,
|
||||
SearchFieldStoreData[this.id].predictions
|
||||
);
|
||||
|
||||
if (SearchFieldStoreData[this.id].pendingRequested) {
|
||||
SearchFieldStoreData[this.id].requestedQuery = SearchFieldStoreData[this.id].pendingRequested.query;
|
||||
|
||||
getRequest(SearchFieldStoreData[this.id].pendingRequested.url, !1, this.dataResponse);
|
||||
|
||||
SearchFieldStoreData[this.id].pendingRequested = null;
|
||||
} else {
|
||||
SearchFieldStoreData[this.id].requestedQuery = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
get(type) {
|
||||
switch (type) {
|
||||
case 'search-query':
|
||||
return SearchFieldStoreData[this.id].searchQuery;
|
||||
case 'search-categories':
|
||||
return SearchFieldStoreData[this.id].categoriesQuery;
|
||||
case 'search-tags':
|
||||
return SearchFieldStoreData[this.id].tagsQuery;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
actions_handler(action) {
|
||||
switch (action.type) {
|
||||
case 'REQUEST_PREDICTIONS':
|
||||
let q = action.query;
|
||||
let u = this.mediacms_config.api.search.titles + q;
|
||||
|
||||
if (SearchFieldStoreData[this.id].requestedQuery) {
|
||||
if (SearchFieldStoreData[this.id].requestedQuery.q !== q) {
|
||||
SearchFieldStoreData[this.id].pendingRequested = { query: q, url: u };
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
SearchFieldStoreData[this.id].requestedQuery = q;
|
||||
|
||||
getRequest(u, !1, this.dataResponse);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default exportStore(new SearchFieldStore(), 'actions_handler');
|
||||
96
frontend/src/static/js/utils/stores/VideoViewerStore.js
Executable file
96
frontend/src/static/js/utils/stores/VideoViewerStore.js
Executable file
@@ -0,0 +1,96 @@
|
||||
import EventEmitter from 'events';
|
||||
import { exportStore } from '../helpers/';
|
||||
import { BrowserCache } from '../classes/';
|
||||
|
||||
import { config as mediacmsConfig } from '../settings/config.js';
|
||||
|
||||
let browserCache;
|
||||
|
||||
const _StoreData = {};
|
||||
|
||||
class VideoPlayerStore extends EventEmitter {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
this.mediacms_config = mediacmsConfig(window.MediaCMS);
|
||||
|
||||
browserCache = new BrowserCache(this.mediacms_config.site.id, 86400); // Keep cache data "fresh" for one day.
|
||||
|
||||
_StoreData.inTheaterMode = browserCache.get('in-theater-mode');
|
||||
_StoreData.inTheaterMode = null !== _StoreData.inTheaterMode ? _StoreData.inTheaterMode : !1;
|
||||
|
||||
_StoreData.playerVolume = browserCache.get('player-volume');
|
||||
_StoreData.playerVolume =
|
||||
null === _StoreData.playerVolume ? 1 : Math.max(Math.min(Number(_StoreData.playerVolume), 1), 0);
|
||||
|
||||
_StoreData.playerSoundMuted = browserCache.get('player-sound-muted');
|
||||
_StoreData.playerSoundMuted = null !== _StoreData.playerSoundMuted ? _StoreData.playerSoundMuted : !1;
|
||||
|
||||
_StoreData.videoQuality = browserCache.get('video-quality');
|
||||
_StoreData.videoQuality = null !== _StoreData.videoQuality ? _StoreData.videoQuality : 'Auto';
|
||||
|
||||
_StoreData.videoPlaybackSpeed = browserCache.get('video-playback-speed');
|
||||
_StoreData.videoPlaybackSpeed = null !== _StoreData.videoPlaybackSpeed ? _StoreData.videoPlaybackSpeed : !1;
|
||||
}
|
||||
|
||||
get(type) {
|
||||
let r = null;
|
||||
switch (type) {
|
||||
case 'player-volume':
|
||||
r = _StoreData.playerVolume;
|
||||
break;
|
||||
case 'player-sound-muted':
|
||||
r = _StoreData.playerSoundMuted;
|
||||
break;
|
||||
case 'in-theater-mode':
|
||||
r = _StoreData.inTheaterMode;
|
||||
break;
|
||||
case 'video-data':
|
||||
r = _StoreData.videoData;
|
||||
break;
|
||||
case 'video-quality':
|
||||
r = _StoreData.videoQuality;
|
||||
break;
|
||||
case 'video-playback-speed':
|
||||
r = _StoreData.videoPlaybackSpeed;
|
||||
break;
|
||||
}
|
||||
return r;
|
||||
}
|
||||
|
||||
actions_handler(action) {
|
||||
switch (action.type) {
|
||||
case 'TOGGLE_VIEWER_MODE':
|
||||
_StoreData.inTheaterMode = !_StoreData.inTheaterMode;
|
||||
this.emit('changed_viewer_mode');
|
||||
break;
|
||||
case 'SET_VIEWER_MODE':
|
||||
_StoreData.inTheaterMode = action.inTheaterMode;
|
||||
browserCache.set('in-theater-mode', _StoreData.inTheaterMode);
|
||||
this.emit('changed_viewer_mode');
|
||||
break;
|
||||
case 'SET_PLAYER_VOLUME':
|
||||
_StoreData.playerVolume = action.playerVolume;
|
||||
browserCache.set('player-volume', action.playerVolume);
|
||||
this.emit('changed_player_volume');
|
||||
break;
|
||||
case 'SET_PLAYER_SOUND_MUTED':
|
||||
_StoreData.playerSoundMuted = action.playerSoundMuted;
|
||||
browserCache.set('player-sound-muted', action.playerSoundMuted);
|
||||
this.emit('changed_player_sound_muted');
|
||||
break;
|
||||
case 'SET_VIDEO_QUALITY':
|
||||
_StoreData.videoQuality = action.quality;
|
||||
browserCache.set('video-quality', action.quality);
|
||||
this.emit('changed_video_quality');
|
||||
break;
|
||||
case 'SET_VIDEO_PLAYBACK_SPEED':
|
||||
_StoreData.videoPlaybackSpeed = action.playbackSpeed;
|
||||
browserCache.set('video-playback-speed', action.playbackSpeed);
|
||||
this.emit('changed_video_playback_speed');
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default exportStore(new VideoPlayerStore(), 'actions_handler');
|
||||
17
frontend/src/static/js/utils/stores/index.ts
Normal file
17
frontend/src/static/js/utils/stores/index.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
import MediaPageStore from './MediaPageStore';
|
||||
import PageStore from './PageStore';
|
||||
import PlaylistPageStore from './PlaylistPageStore';
|
||||
import PlaylistViewStore from './PlaylistViewStore';
|
||||
import ProfilePageStore from './ProfilePageStore';
|
||||
import SearchFieldStore from './SearchFieldStore';
|
||||
import VideoViewerStore from './VideoViewerStore';
|
||||
|
||||
export {
|
||||
MediaPageStore,
|
||||
PageStore,
|
||||
PlaylistPageStore,
|
||||
PlaylistViewStore,
|
||||
ProfilePageStore,
|
||||
SearchFieldStore,
|
||||
VideoViewerStore,
|
||||
}
|
||||
Reference in New Issue
Block a user