import React, { useRef, useState, useEffect } from 'react';
import { ShareOptionsContext } from '../../utils/contexts/';
import { PageStore, MediaPageStore } from '../../utils/stores/';
import { PageActions, MediaPageActions } from '../../utils/actions/';
import ItemsInlineSlider from '../item-list/includes/itemLists/ItemsInlineSlider';
import { CircleIconButton } from '../_shared/';
function shareOptionsList() {
const socialMedia = ShareOptionsContext._currentValue;
const mediaUrl = MediaPageStore.get('media-url');
const mediaTitle = MediaPageStore.get('media-data').title;
const ret = {};
let i = 0;
while (i < socialMedia.length) {
switch (socialMedia[i]) {
case 'embed':
if ('video' === MediaPageStore.get('media-data').media_type) {
ret[socialMedia[i]] = {};
}
break;
case 'email':
ret[socialMedia[i]] = {
title: 'Email',
shareUrl: 'mailto:?body=' + mediaUrl,
};
break;
case 'fb':
ret[socialMedia[i]] = {
title: 'Facebook',
shareUrl: 'https://www.facebook.com/sharer.php?u=' + mediaUrl,
};
break;
case 'tw':
ret[socialMedia[i]] = {
title: 'Twitter',
shareUrl: 'https://twitter.com/intent/tweet?url=' + mediaUrl,
};
break;
case 'reddit':
ret[socialMedia[i]] = {
title: 'reddit',
shareUrl: 'https://reddit.com/submit?url=' + mediaUrl + '&title=' + mediaTitle,
};
break;
case 'tumblr':
ret[socialMedia[i]] = {
title: 'Tumblr',
shareUrl: 'https://www.tumblr.com/widgets/share/tool?canonicalUrl=' + mediaUrl + '&title=' + mediaTitle,
};
break;
case 'pinterest':
ret[socialMedia[i]] = {
title: 'Pinterest',
shareUrl: 'http://pinterest.com/pin/create/link/?url=' + mediaUrl,
};
break;
case 'vk':
ret[socialMedia[i]] = {
title: 'ВКонтакте',
shareUrl: 'http://vk.com/share.php?url=' + mediaUrl + '&title=' + mediaTitle,
};
break;
case 'linkedin':
ret[socialMedia[i]] = {
title: 'LinkedIn',
shareUrl: 'https://www.linkedin.com/shareArticle?mini=true&url=' + mediaUrl,
};
break;
case 'mix':
ret[socialMedia[i]] = {
title: 'Mix',
shareUrl: 'https://mix.com/add?url=' + mediaUrl,
};
break;
case 'whatsapp':
ret[socialMedia[i]] = {
title: 'WhatsApp',
shareUrl: 'whatsapp://send?text=' + mediaUrl,
};
break;
case 'telegram':
ret[socialMedia[i]] = {
title: 'Telegram',
shareUrl: 'https://t.me/share/url?url=' + mediaUrl + '&text=' + mediaTitle,
};
break;
}
i += 1;
}
return ret;
}
function ShareOptions() {
const shareOptions = shareOptionsList();
const compList = [];
for (let k in shareOptions) {
if (shareOptions.hasOwnProperty(k)) {
if (k === 'embed') {
compList.push(
);
} else if (k === 'whatsapp') {
compList.push(
);
} else if (k === 'email') {
compList.push(
);
} else {
compList.push(
);
}
}
}
return compList;
}
function NextSlideButton({ onClick }) {
return (
keyboard_arrow_right
);
}
function PreviousSlideButton({ onClick }) {
return (
keyboard_arrow_left
);
}
function updateDimensions() {
return {
maxFormContentHeight: window.innerHeight - (56 + 4 * 24 + 44),
maxPopupWidth: 518 > window.innerWidth - 2 * 40 ? window.innerWidth - 2 * 40 : null,
};
}
function getTimestamp() {
const videoPlayer = document.getElementsByTagName("video");
return videoPlayer[0]?.currentTime;
}
function ToHHMMSS (timeInt) {
let sec_num = parseInt(timeInt, 10);
let hours = Math.floor(sec_num / 3600);
let minutes = Math.floor((sec_num - (hours * 3600)) / 60);
let seconds = sec_num - (hours * 3600) - (minutes * 60);
if (hours < 10) {hours = "0"+hours;}
if (minutes < 10) {minutes = "0"+minutes;}
if (seconds < 10) {seconds = "0"+seconds;}
return hours >= 1 ? hours + ':' + minutes + ':' + seconds : minutes + ':' + seconds;
}
export function MediaShareOptions(props) {
const containerRef = useRef(null);
const shareOptionsInnerRef = useRef(null);
const mediaUrl = MediaPageStore.get('media-url');
const [inlineSlider, setInlineSlider] = useState(null);
const [sliderButtonsVisible, setSliderButtonsVisible] = useState({ prev: false, next: false });
const [dimensions, setDimensions] = useState(updateDimensions());
const [shareOptions] = useState(ShareOptions());
const [timestamp, setTimestamp] = useState(0);
const [formattedTimestamp, setFormattedTimestamp] = useState(0);
const [startAtSelected, setStartAtSelected] = useState(false);
const [shareMediaLink, setShareMediaLink] = useState(mediaUrl);
function onWindowResize() {
setDimensions(updateDimensions());
}
function onClickCopyMediaLink() {
MediaPageActions.copyShareLink(containerRef.current.querySelector('.copy-field input'));
}
function onCompleteCopyMediaLink() {
// FIXME: Without delay throws conflict error [ Uncaught Error: Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch. ].
setTimeout(function () {
PageActions.addNotification('Link copied to clipboard', 'clipboardLinkCopy');
}, 100);
}
function updateSlider() {
inlineSlider.scrollToCurrentSlide();
updateSliderButtonsView();
}
function updateSliderButtonsView() {
setSliderButtonsVisible({
prev: inlineSlider.hasPreviousSlide(),
next: inlineSlider.hasNextSlide(),
});
}
function updateStartAtCheckbox() {
setStartAtSelected(!startAtSelected);
updateShareMediaLink();
}
function updateShareMediaLink()
{
const newLink = startAtSelected ? mediaUrl : mediaUrl + "&t=" + Math.trunc(timestamp);
setShareMediaLink(newLink);
}
function nextSlide() {
inlineSlider.nextSlide();
updateSlider();
}
function prevSlide() {
inlineSlider.previousSlide();
updateSlider();
}
useEffect(() => {
setInlineSlider(new ItemsInlineSlider(shareOptionsInnerRef.current, '.sh-option'));
}, [shareOptions]);
useEffect(() => {
if (inlineSlider) {
inlineSlider.updateDataStateOnResize(shareOptions.length, true, true);
updateSlider();
}
}, [dimensions, inlineSlider]);
useEffect(() => {
PageStore.on('window_resize', onWindowResize);
MediaPageStore.on('copied_media_link', onCompleteCopyMediaLink);
const localTimestamp = getTimestamp();
setTimestamp(localTimestamp);
setFormattedTimestamp(ToHHMMSS(localTimestamp));
return () => {
PageStore.removeListener('window_resize', onWindowResize);
MediaPageStore.removeListener('copied_media_link', onCompleteCopyMediaLink);
setInlineSlider(null);
};
}, []);
return (
Share media
{shareOptions.length ? (
{sliderButtonsVisible.prev ?
: null}
{shareOptions}
{sliderButtonsVisible.next ?
: null}
) : null}
);
}