7cbb7a54aa
* Remove ad-handling in videojs.jsx Primary impetus is to remove unnecessary IntersectionObserver usage, but it should be removed anyway because: - no longer relevant today with Adnimation's script. - we also globally hide floating ads now, so no more invisible divs. - the code is wrongly placed -- it's not the responsibility of the Videojs component. * use-lazy-loaded: skip if IntersectionObserver is not supported ## Issue Page not loading in older Safari (e.g. ipad air 2) ## Approach Instead of using a polyfill (which comes with implementation caveats), just not apply the lazy-loading for those old browsers. Not lazy-loading is better than not loading at all, plus this is way easier to test (even by just reading the code) than testing out the polyfill implementation's caveats. The cons is we would need the polyfill if we use it in other places in the future. ## Code Changes Factor out the src-setting code, and use it directly when IntersectionObserver is not found.
607 lines
19 KiB
JavaScript
607 lines
19 KiB
JavaScript
// @flow
|
|
import 'videojs-contrib-ads'; // must be loaded in this order
|
|
import 'videojs-ima'; // loads directly after contrib-ads
|
|
import 'videojs-vtt-thumbnails';
|
|
import 'video.js/dist/alt/video-js-cdn.min.css';
|
|
import './plugins/videojs-mobile-ui/plugin';
|
|
import '@silvermine/videojs-chromecast/dist/silvermine-videojs-chromecast.css';
|
|
import '@silvermine/videojs-airplay/dist/silvermine-videojs-airplay.css';
|
|
import * as ICONS from 'constants/icons';
|
|
import { VIDEO_PLAYBACK_RATES } from 'constants/player';
|
|
import * as OVERLAY from './overlays';
|
|
import Button from 'component/button';
|
|
import classnames from 'classnames';
|
|
import events from './videojs-events';
|
|
import eventTracking from 'videojs-event-tracking';
|
|
import functions from './videojs-functions';
|
|
import hlsQualitySelector from './plugins/videojs-hls-quality-selector/plugin';
|
|
import keyboardShorcuts from './videojs-shortcuts';
|
|
import LbryPlaybackRateMenuButton from './lbry-playback-rate';
|
|
import LbryVolumeBarClass from './lbry-volume-bar';
|
|
import Chromecast from './chromecast';
|
|
import playerjs from 'player.js';
|
|
import qualityLevels from 'videojs-contrib-quality-levels';
|
|
import React, { useEffect, useRef, useState } from 'react';
|
|
import i18n from './plugins/videojs-i18n/plugin';
|
|
import recsys from './plugins/videojs-recsys/plugin';
|
|
// import runAds from './ads';
|
|
import videojs from 'video.js';
|
|
import { useIsMobile } from 'effects/use-screensize';
|
|
import { platform } from 'util/platform';
|
|
import usePersistedState from 'effects/use-persisted-state';
|
|
|
|
require('@silvermine/videojs-chromecast')(videojs);
|
|
require('@silvermine/videojs-airplay')(videojs);
|
|
|
|
export type Player = {
|
|
// -- custom --
|
|
claimSrcOriginal: ?{ src: string, type: string },
|
|
claimSrcVhs: ?{ src: string, type: string },
|
|
isLivestream?: boolean,
|
|
// -- plugins ---
|
|
mobileUi: (any) => void,
|
|
chromecast: (any) => void,
|
|
overlay: (any) => void,
|
|
hlsQualitySelector: ?any,
|
|
i18n: (any) => void,
|
|
// -- base videojs --
|
|
controlBar: {
|
|
addChild: (string | any, ?any, ?number) => void,
|
|
getChild: (string) => void,
|
|
removeChild: (string) => void,
|
|
},
|
|
loadingSpinner: any,
|
|
autoplay: (any) => boolean,
|
|
tech: (?boolean) => { vhs: ?any },
|
|
currentTime: (?number) => number,
|
|
dispose: () => void,
|
|
duration: () => number,
|
|
ended: () => boolean,
|
|
error: () => any,
|
|
exitFullscreen: () => boolean,
|
|
getChild: (string) => any,
|
|
isFullscreen: () => boolean,
|
|
muted: (?boolean) => boolean,
|
|
on: (string, (any) => void) => void,
|
|
off: (string, (any) => void) => void,
|
|
one: (string, (any) => void) => void,
|
|
play: () => Promise<any>,
|
|
playbackRate: (?number) => number,
|
|
readyState: () => number,
|
|
requestFullscreen: () => boolean,
|
|
src: ({ src: string, type: string }) => ?string,
|
|
currentSrc: () => string,
|
|
userActive: (?boolean) => boolean,
|
|
volume: (?number) => number,
|
|
};
|
|
|
|
type Props = {
|
|
adUrl: ?string,
|
|
allowPreRoll: ?boolean,
|
|
autoplay: boolean,
|
|
claimId: ?string,
|
|
title: ?string,
|
|
channelTitle: string,
|
|
embedded: boolean,
|
|
internalFeatureEnabled: ?boolean,
|
|
isAudio: boolean,
|
|
poster: ?string,
|
|
replay: boolean,
|
|
shareTelemetry: boolean,
|
|
source: string,
|
|
sourceType: string,
|
|
startMuted: boolean,
|
|
userId: ?number,
|
|
defaultQuality: ?string,
|
|
onPlayerReady: (Player, any) => void,
|
|
playNext: () => void,
|
|
playPrevious: () => void,
|
|
toggleVideoTheaterMode: () => void,
|
|
claimRewards: () => void,
|
|
doAnalyticsView: (string, number) => void,
|
|
doAnalyticsBuffer: (string, any) => void,
|
|
uri: string,
|
|
claimValues: any,
|
|
isLivestreamClaim: boolean,
|
|
userClaimId: ?string,
|
|
activeLivestreamForChannel: any,
|
|
doToast: ({ message: string, linkText: string, linkTarget: string }) => void,
|
|
};
|
|
const VIDEOJS_VOLUME_PANEL_CLASS = 'VolumePanel';
|
|
|
|
const IS_IOS = platform.isIOS();
|
|
const IS_MOBILE = platform.isMobile();
|
|
|
|
const PLUGIN_MAP = {
|
|
eventTracking: eventTracking,
|
|
hlsQualitySelector: hlsQualitySelector,
|
|
qualityLevels: qualityLevels,
|
|
recsys: recsys,
|
|
i18n: i18n,
|
|
};
|
|
|
|
Object.entries(PLUGIN_MAP).forEach(([pluginName, plugin]) => {
|
|
if (!Object.keys(videojs.getPlugins()).includes(pluginName)) {
|
|
videojs.registerPlugin(pluginName, plugin);
|
|
}
|
|
});
|
|
|
|
// ****************************************************************************
|
|
// VideoJs
|
|
// ****************************************************************************
|
|
|
|
/*
|
|
properties for this component should be kept to ONLY those that if changed should REQUIRE an entirely new videojs element
|
|
*/
|
|
export default React.memo<Props>(function VideoJs(props: Props) {
|
|
const {
|
|
// adUrl, // TODO: this ad functionality isn't used, can be pulled out
|
|
// allowPreRoll,
|
|
autoplay,
|
|
claimId,
|
|
title,
|
|
channelTitle,
|
|
embedded,
|
|
// internalFeatureEnabled, // for people on the team to test new features internally
|
|
isAudio,
|
|
poster,
|
|
replay,
|
|
shareTelemetry,
|
|
source,
|
|
sourceType,
|
|
startMuted,
|
|
userId,
|
|
defaultQuality,
|
|
onPlayerReady,
|
|
playNext,
|
|
playPrevious,
|
|
toggleVideoTheaterMode,
|
|
claimValues,
|
|
doAnalyticsView,
|
|
doAnalyticsBuffer,
|
|
claimRewards,
|
|
uri,
|
|
userClaimId,
|
|
isLivestreamClaim,
|
|
activeLivestreamForChannel,
|
|
doToast,
|
|
} = props;
|
|
|
|
// used to notify about default quality setting
|
|
// if already has a quality set, no need to notify
|
|
const [initialQualityChange, setInitialQualityChange] = usePersistedState(
|
|
'initial-quality-change',
|
|
Boolean(defaultQuality)
|
|
);
|
|
|
|
const isMobile = useIsMobile();
|
|
|
|
const playerRef = useRef();
|
|
const containerRef = useRef();
|
|
const tapToUnmuteRef = useRef();
|
|
const tapToRetryRef = useRef();
|
|
const playerServerRef = useRef();
|
|
const volumePanelRef = useRef();
|
|
|
|
const keyDownHandlerRef = useRef();
|
|
const videoScrollHandlerRef = useRef();
|
|
const volumePanelScrollHandlerRef = useRef();
|
|
|
|
const { url: livestreamVideoUrl } = activeLivestreamForChannel || {};
|
|
const overrideNativeVhs = !platform.isIPhone();
|
|
const showQualitySelector = (!isLivestreamClaim && overrideNativeVhs) || livestreamVideoUrl;
|
|
|
|
// initiate keyboard shortcuts
|
|
const {
|
|
createKeyDownShortcutsHandler,
|
|
createVideoScrollShortcutsHandler,
|
|
createVolumePanelScrollShortcutsHandler,
|
|
} = keyboardShorcuts({
|
|
isMobile,
|
|
isLivestreamClaim,
|
|
toggleVideoTheaterMode,
|
|
playNext,
|
|
playPrevious,
|
|
});
|
|
|
|
const [reload, setReload] = useState('initial');
|
|
|
|
const { createVideoPlayerDOM } = functions({ isAudio });
|
|
|
|
const { unmuteAndHideHint, retryVideoAfterFailure, initializeEvents } = events({
|
|
tapToUnmuteRef,
|
|
tapToRetryRef,
|
|
setReload,
|
|
playerRef,
|
|
replay,
|
|
claimValues,
|
|
userId,
|
|
claimId,
|
|
embedded,
|
|
doAnalyticsView,
|
|
doAnalyticsBuffer,
|
|
claimRewards,
|
|
uri,
|
|
playerServerRef,
|
|
isLivestreamClaim,
|
|
channelTitle,
|
|
});
|
|
|
|
const videoJsOptions = {
|
|
preload: 'auto',
|
|
playbackRates: VIDEO_PLAYBACK_RATES,
|
|
responsive: true,
|
|
controls: true,
|
|
html5: {
|
|
vhs: {
|
|
overrideNative: overrideNativeVhs, // !videojs.browser.IS_ANY_SAFARI,
|
|
enableLowInitialPlaylist: false,
|
|
fastQualityChange: true,
|
|
useDtsForTimestampOffset: true,
|
|
},
|
|
},
|
|
liveTracker: {
|
|
trackingThreshold: 0,
|
|
liveTolerance: 10,
|
|
},
|
|
inactivityTimeout: 2000,
|
|
muted: startMuted,
|
|
plugins: { eventTracking: true, overlay: OVERLAY.OVERLAY_DATA },
|
|
controlBar: {
|
|
currentTimeDisplay: !isLivestreamClaim,
|
|
timeDivider: !isLivestreamClaim,
|
|
durationDisplay: !isLivestreamClaim,
|
|
remainingTimeDisplay: !isLivestreamClaim,
|
|
subsCapsButton: !IS_IOS,
|
|
},
|
|
techOrder: ['chromecast', 'html5'],
|
|
...Chromecast.getOptions(),
|
|
bigPlayButton: embedded, // only show big play button if embedded
|
|
liveui: isLivestreamClaim,
|
|
suppressNotSupportedError: true,
|
|
};
|
|
|
|
// TODO: would be nice to pull this out into functions file
|
|
// Initialize video.js
|
|
function initializeVideoPlayer(domElement) {
|
|
if (!domElement) return;
|
|
|
|
const vjs = videojs(domElement, videoJsOptions, async () => {
|
|
const player = playerRef.current;
|
|
const adapter = new playerjs.VideoJSAdapter(player);
|
|
|
|
// this seems like a weird thing to have to check for here
|
|
if (!player) return;
|
|
|
|
// runAds(internalFeatureEnabled, allowPreRoll, player, embedded);
|
|
|
|
LbryVolumeBarClass.replaceExisting(player);
|
|
LbryPlaybackRateMenuButton.replaceExisting(player);
|
|
|
|
// Add reloadSourceOnError plugin
|
|
player.reloadSourceOnError({ errorInterval: 10 });
|
|
|
|
// Initialize mobile UI.
|
|
player.mobileUi({
|
|
fullscreen: {
|
|
enterOnRotate: false,
|
|
},
|
|
touchControls: {
|
|
seekSeconds: 10,
|
|
},
|
|
});
|
|
|
|
player.i18n();
|
|
|
|
// Add quality selector to player
|
|
if (showQualitySelector) {
|
|
player.hlsQualitySelector({
|
|
displayCurrentQuality: true,
|
|
originalHeight: claimValues?.video?.height,
|
|
defaultQuality,
|
|
initialQualityChange,
|
|
setInitialQualityChange,
|
|
doToast,
|
|
});
|
|
}
|
|
|
|
// Add recsys plugin
|
|
if (shareTelemetry) {
|
|
player.recsys({
|
|
videoId: claimId,
|
|
userId: userId,
|
|
embedded: embedded,
|
|
});
|
|
}
|
|
|
|
// immediately show control bar while video is loading
|
|
player.userActive(true);
|
|
|
|
adapter.ready();
|
|
|
|
Chromecast.initialize(player);
|
|
player.airPlay();
|
|
});
|
|
|
|
// fixes #3498 (https://github.com/lbryio/lbry-desktop/issues/3498)
|
|
// summary: on firefox the focus would stick to the fullscreen button which caused buggy behavior with spacebar
|
|
vjs.on('fullscreenchange', () => document.activeElement && document.activeElement.blur());
|
|
|
|
return vjs;
|
|
}
|
|
|
|
// useEffect(() => {
|
|
// if (showQualitySelector) {
|
|
// // Add quality selector to player
|
|
// const player = playerRef.current;
|
|
// if (player) player.hlsQualitySelector({ displayCurrentQuality: true });
|
|
// }
|
|
// }, [showQualitySelector]);
|
|
|
|
useEffect(() => {
|
|
Chromecast.updateTitles(title, channelTitle);
|
|
}, [title, channelTitle]);
|
|
|
|
// This lifecycle hook is only called once (on mount), or when `isAudio` or `source` changes.
|
|
useEffect(() => {
|
|
(async function () {
|
|
let vjsPlayer;
|
|
const vjsParent = document.querySelector('.video-js-parent');
|
|
|
|
let canUseOldPlayer = window.oldSavedDiv && vjsParent;
|
|
const isLivestream = isLivestreamClaim && userClaimId;
|
|
// make an additional check and reinstantiate if switching between player types
|
|
// switching between types on iOS causes issues and this is a faster solution
|
|
if (vjsParent && window.player) {
|
|
const oldVideoType = window.player.isLivestream ? 'livestream' : 'video';
|
|
const switchFromLivestreamToVideo = oldVideoType === 'livestream' && !isLivestream;
|
|
const switchFromVideoToLivestream = oldVideoType === 'video' && isLivestream;
|
|
if (switchFromLivestreamToVideo || switchFromVideoToLivestream) {
|
|
canUseOldPlayer = false;
|
|
window.player.dispose();
|
|
}
|
|
}
|
|
|
|
// initialize videojs if it hasn't been done yet
|
|
if (!canUseOldPlayer) {
|
|
const vjsElement = createVideoPlayerDOM(containerRef.current);
|
|
vjsPlayer = initializeVideoPlayer(vjsElement);
|
|
if (!vjsPlayer) {
|
|
return;
|
|
}
|
|
|
|
// Add reference to player to global scope
|
|
window.player = vjsPlayer;
|
|
} else {
|
|
vjsPlayer = window.player;
|
|
}
|
|
|
|
// Add recsys plugin
|
|
if (shareTelemetry) {
|
|
vjsPlayer.recsys.options_ = {
|
|
videoId: claimId,
|
|
userId: userId,
|
|
embedded: embedded,
|
|
};
|
|
|
|
vjsPlayer.recsys.lastTimeUpdate = null;
|
|
vjsPlayer.recsys.currentTimeUpdate = null;
|
|
vjsPlayer.recsys.inPause = false;
|
|
vjsPlayer.recsys.watchedDuration = { total: 0, lastTimestamp: -1 };
|
|
}
|
|
|
|
if (!embedded) {
|
|
vjsPlayer.bigPlayButton && window.player.bigPlayButton.hide();
|
|
} else {
|
|
// $FlowIssue
|
|
vjsPlayer.bigPlayButton?.show();
|
|
}
|
|
|
|
// I think this is a callback function
|
|
const videoNode = containerRef.current && containerRef.current.querySelector('video, audio');
|
|
|
|
// add theatre and autoplay next button and initiate player events
|
|
onPlayerReady(vjsPlayer, videoNode);
|
|
|
|
// Set reference in component state
|
|
playerRef.current = vjsPlayer;
|
|
|
|
initializeEvents();
|
|
|
|
// volume control div, used for changing volume when scrolled over
|
|
// $FlowIssue
|
|
volumePanelRef.current = playerRef.current?.controlBar?.getChild(VIDEOJS_VOLUME_PANEL_CLASS)?.el();
|
|
|
|
const keyDownHandler = createKeyDownShortcutsHandler(playerRef, containerRef);
|
|
const videoScrollHandler = createVideoScrollShortcutsHandler(playerRef, containerRef);
|
|
const volumePanelHandler = createVolumePanelScrollShortcutsHandler(volumePanelRef, playerRef, containerRef);
|
|
window.addEventListener('keydown', keyDownHandler);
|
|
const containerDiv = containerRef.current;
|
|
containerDiv && containerDiv.addEventListener('wheel', videoScrollHandler);
|
|
if (volumePanelRef.current) volumePanelRef.current.addEventListener('wheel', volumePanelHandler);
|
|
|
|
keyDownHandlerRef.current = keyDownHandler;
|
|
videoScrollHandlerRef.current = videoScrollHandler;
|
|
volumePanelScrollHandlerRef.current = volumePanelHandler;
|
|
|
|
// $FlowIssue
|
|
vjsPlayer.controlBar?.show();
|
|
|
|
vjsPlayer.poster(poster);
|
|
|
|
vjsPlayer.el().childNodes[0].setAttribute('playsinline', '');
|
|
|
|
let contentUrl;
|
|
// TODO: pull this function into videojs-functions
|
|
// determine which source to use and load it
|
|
if (isLivestream) {
|
|
vjsPlayer.isLivestream = true;
|
|
vjsPlayer.addClass('livestreamPlayer');
|
|
vjsPlayer.src({ type: 'application/x-mpegURL', src: livestreamVideoUrl });
|
|
} else {
|
|
vjsPlayer.isLivestream = false;
|
|
vjsPlayer.removeClass('livestreamPlayer');
|
|
|
|
// change to m3u8 if applicable
|
|
const response = await fetch(source, { method: 'HEAD', cache: 'no-store' });
|
|
playerServerRef.current = response.headers.get('x-powered-by');
|
|
vjsPlayer.claimSrcOriginal = { type: sourceType, src: source };
|
|
|
|
if (response && response.redirected && response.url && response.url.endsWith('m3u8')) {
|
|
vjsPlayer.claimSrcVhs = { type: 'application/x-mpegURL', src: response.url };
|
|
vjsPlayer.src(vjsPlayer.claimSrcVhs);
|
|
|
|
contentUrl = response.url;
|
|
} else {
|
|
vjsPlayer.src(vjsPlayer.claimSrcOriginal);
|
|
}
|
|
}
|
|
|
|
// bugfix thumbnails showing up if new video doesn't have them
|
|
if (typeof vjsPlayer.vttThumbnails.detach === 'function') {
|
|
vjsPlayer.vttThumbnails.detach();
|
|
}
|
|
|
|
// initialize hover thumbnails
|
|
if (contentUrl) {
|
|
const trimmedPath = contentUrl.substring(0, contentUrl.lastIndexOf('/'));
|
|
const thumbnailPath = trimmedPath + '/stream_sprite.vtt';
|
|
|
|
// progress bar hover thumbnails
|
|
if (!IS_MOBILE) {
|
|
// if src is a function, it's already been initialized
|
|
if (typeof vjsPlayer.vttThumbnails.src === 'function') {
|
|
vjsPlayer.vttThumbnails.src(thumbnailPath);
|
|
} else {
|
|
// otherwise, initialize plugin
|
|
vjsPlayer.vttThumbnails({
|
|
src: thumbnailPath,
|
|
showTimestamp: true,
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
vjsPlayer.load();
|
|
|
|
if (canUseOldPlayer) {
|
|
// $FlowIssue
|
|
document.querySelector('.video-js-parent')?.append(window.oldSavedDiv);
|
|
}
|
|
|
|
// allow tap to unmute if no perms on iOS
|
|
if (autoplay && !embedded) {
|
|
const promise = vjsPlayer.play();
|
|
|
|
window.player.userActive(true);
|
|
|
|
if (promise !== undefined) {
|
|
promise
|
|
.then((_) => {
|
|
// $FlowIssue
|
|
vjsPlayer?.controlBar.el().classList.add('vjs-transitioning-video');
|
|
})
|
|
.catch((error) => {
|
|
const noPermissionError = typeof error === 'object' && error.name && error.name === 'NotAllowedError';
|
|
|
|
if (noPermissionError) {
|
|
if (IS_IOS) {
|
|
// autoplay not allowed, mute video, play and show 'tap to unmute' button
|
|
// $FlowIssue
|
|
vjsPlayer?.muted(true);
|
|
// $FlowIssue
|
|
vjsPlayer?.play();
|
|
// $FlowIssue
|
|
document.querySelector('.video-js--tap-to-unmute')?.style.setProperty('visibility', 'visible');
|
|
// $FlowIssue
|
|
document
|
|
.querySelector('.video-js--tap-to-unmute')
|
|
?.style.setProperty('display', 'inline', 'important');
|
|
} else {
|
|
// $FlowIssue
|
|
vjsPlayer?.bigPlayButton?.show();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
})();
|
|
|
|
// Cleanup
|
|
return () => {
|
|
window.removeEventListener('keydown', keyDownHandlerRef.current);
|
|
const containerDiv = containerRef.current;
|
|
// $FlowFixMe
|
|
containerDiv && containerDiv.removeEventListener('wheel', videoScrollHandlerRef.current);
|
|
|
|
if (volumePanelRef.current) {
|
|
volumePanelRef.current.removeEventListener('wheel', volumePanelScrollHandlerRef.current);
|
|
}
|
|
|
|
const chapterMarkers = document.getElementsByClassName('vjs-chapter-marker');
|
|
while (chapterMarkers.length > 0) {
|
|
// $FlowIssue
|
|
chapterMarkers[0].parentNode?.removeChild(chapterMarkers[0]);
|
|
}
|
|
|
|
const player = playerRef.current;
|
|
if (player) {
|
|
try {
|
|
window.cast.framework.CastContext.getInstance().getCurrentSession().endSession(false);
|
|
} catch {}
|
|
|
|
window.player.switchedFromDefaultQuality = false;
|
|
|
|
window.player.userActive(false);
|
|
window.player.pause();
|
|
|
|
if (IS_IOS) {
|
|
// $FlowIssue
|
|
window.player.controlBar?.playToggle?.hide();
|
|
}
|
|
|
|
// $FlowIssue
|
|
window.player?.controlBar?.getChild('ChaptersButton')?.hide();
|
|
|
|
// this solves an issue with portrait videos
|
|
// $FlowIssue
|
|
const videoDiv = window.player?.tech_?.el(); // video element
|
|
if (videoDiv) videoDiv.style.top = '0px';
|
|
|
|
window.player.controlBar.el().classList.add('vjs-transitioning-video');
|
|
|
|
window.oldSavedDiv = window.player.el();
|
|
|
|
window.player.trigger('playerClosed');
|
|
|
|
window.player.currentTime(0);
|
|
|
|
// stop streams running in background
|
|
window.player.loadTech_('html5', null);
|
|
|
|
window.player.claimSrcVhs = null;
|
|
}
|
|
};
|
|
}, [isAudio, source, reload, userClaimId, isLivestreamClaim]);
|
|
|
|
return (
|
|
<div className={classnames('video-js-parent', { 'video-js-parent--ios': IS_IOS })} ref={containerRef}>
|
|
<Button
|
|
label={__('Tap to unmute')}
|
|
button="link"
|
|
icon={ICONS.VOLUME_MUTED}
|
|
className="video-js--tap-to-unmute"
|
|
onClick={unmuteAndHideHint}
|
|
ref={tapToUnmuteRef}
|
|
/>
|
|
<Button
|
|
label={__('Retry')}
|
|
button="link"
|
|
icon={ICONS.REFRESH}
|
|
className="video-js--tap-to-unmute"
|
|
onClick={retryVideoAfterFailure}
|
|
ref={tapToRetryRef}
|
|
/>
|
|
</div>
|
|
);
|
|
});
|