optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[PlayerPanel] youtube overlayContents 안뜨는 현상 수정

Browse Source
This commit is contained in:
고동영
2024-06-28 14:09:05 +09:00
parent fd992c2a4a
commit 1871f17e1e
3 changed files with 133 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

216
com.twin.app.shoptime/src/components/VideoPlayer/TReactPlayer.jsx
View File

@@ -1,102 +1,138 @@
import React, { useCallback, useMemo, useRef } from "react";
import ReactPlayer from "react-player";
import handle from '@enact/core/handle';
import React, { useCallback, useRef, useMemo } from "react";
var handledMediaEventsMap =
['onReady', 'onStart', 'onPlay', 'onProgress', 'onDuration', 'onPause', 'onBuffer', 'onBufferEnd', 'onSeek', 'onEnded', 'onError'];
import handle from "@enact/core/handle";
export default function TReactPlayer({mediaEventsMap=handledMediaEventsMap, videoRef, url, ...rest}) {
var handledMediaEventsMap = [
"onReady",
"onStart",
"onPlay",
"onProgress",
"onDuration",
"onPause",
"onBuffer",
"onBufferEnd",
"onSeek",
"onEnded",
"onError",
];
export default function TReactPlayer({
mediaEventsMap = handledMediaEventsMap,
videoRef,
url,
overlayLoading,
setOverlayLoading,
...rest
}) {
const playerRef = useRef(null);
const handleEvent = useCallback((type)=> (ev)=> {
if(type === 'onReady'){
if(videoRef ){
const videoNode = playerRef.current.getInternalPlayer();
videoRef(videoNode);
if(videoNode.tagName && !Object.prototype.hasOwnProperty.call(videoNode, "proportionPlayed")){
Object.defineProperties(videoNode, {
'error': {
get: function() {
return videoNode.networkState === videoNode.NETWORK_NO_SOURCE;
}
},
'loading': {
get: function() {
return videoNode.readyState < videoNode.HAVE_ENOUGH_DATA;
}
},
'proportionLoaded': {
get: function() {
return videoNode.buffered.length &&videoNode.buffered.end(videoNode.buffered.length - 1) / videoNode.duration;
}
},
'proportionPlayed': {
get: function() {
return videoNode.currentTime / videoNode.duration;
}
}
});
}else if(!Object.prototype.hasOwnProperty.call(videoNode, "proportionPlayed")){//youtube
window.videoNode = videoNode;
videoNode.play = videoNode.playVideo;
videoNode.pause = videoNode.pauseVideo;
videoNode.seek = videoNode.seekTo;
Object.defineProperties(videoNode, {
'currentTime': {
get: function() {
return videoNode.getCurrentTime();
},
set: function(time){
videoNode.seekTo(time);
}
},
'duration':{
get: function() {
return videoNode.getDuration();
}
},
'paused':{
get: function() {
return videoNode.getPlayerState() !== 1;
}
},
'error': {
get: function() {
return !!videoNode?.playerInfo?.videoData?.errorCode;
}
},
'loading': {
get: function() {
return !videoNode?.playerInfo?.videoData?.isPlayable;
; //todo
}
},
'proportionLoaded': {
get: function() {
return videoNode?.playerInfo?.videoBytesLoaded >= 1; //todo
}
},
'proportionPlayed': {
get: function() {
return videoNode.getCurrentTime() / videoNode.getDuration();
}
}
});
}
}
handle.forward('onLoadStart', {type, ev}, rest);
}
handle.forward('onUpdate', {type, ev}, rest);
},[videoRef]);
const handleEvent = useCallback(
(type) => (ev) => {
if (type === "onReady") {
if (videoRef) {
if (!overlayLoading) {
setOverlayLoading(true);
}
const handledMediaEvents = useMemo(()=>{
const videoNode = playerRef.current.getInternalPlayer();
videoRef(videoNode);
if (
videoNode.tagName &&
!Object.prototype.hasOwnProperty.call(videoNode, "proportionPlayed")
) {
Object.defineProperties(videoNode, {
error: {
get: function () {
return videoNode.networkState === videoNode.NETWORK_NO_SOURCE;
},
},
loading: {
get: function () {
return videoNode.readyState < videoNode.HAVE_ENOUGH_DATA;
},
},
proportionLoaded: {
get: function () {
return (
videoNode.buffered.length &&
videoNode.buffered.end(videoNode.buffered.length - 1) /
videoNode.duration
);
},
},
proportionPlayed: {
get: function () {
return videoNode.currentTime / videoNode.duration;
},
},
});
} else if (
!Object.prototype.hasOwnProperty.call(videoNode, "proportionPlayed")
) {
//youtube
window.videoNode = videoNode;
videoNode.play = videoNode.playVideo;
videoNode.pause = videoNode.pauseVideo;
videoNode.seek = videoNode.seekTo;
Object.defineProperties(videoNode, {
currentTime: {
get: function () {
return videoNode.getCurrentTime();
},
set: function (time) {
videoNode.seekTo(time);
},
},
duration: {
get: function () {
return videoNode.getDuration();
},
},
paused: {
get: function () {
return videoNode.getPlayerState() !== 1;
},
},
error: {
get: function () {
return !!videoNode?.playerInfo?.videoData?.errorCode;
},
},
loading: {
get: function () {
return !videoNode?.playerInfo?.videoData?.isPlayable; //todo
},
},
proportionLoaded: {
get: function () {
return videoNode?.playerInfo?.videoBytesLoaded >= 1; //todo
},
},
proportionPlayed: {
get: function () {
return videoNode.getCurrentTime() / videoNode.getDuration();
},
},
});
}
}
handle.forward("onLoadStart", { type, ev }, rest);
}
handle.forward("onUpdate", { type, ev }, rest);
},
[videoRef, overlayLoading]
);
const handledMediaEvents = useMemo(() => {
const events = {};
for (let i=0; i< mediaEventsMap.length; i++) {
for (let i = 0; i < mediaEventsMap.length; i++) {
const eventName = mediaEventsMap[i];
events[eventName] = handleEvent(eventName);
}
return events;
},[handleEvent, mediaEventsMap]);
}, [handleEvent, mediaEventsMap]);
return (
<ReactPlayer
@@ -106,6 +142,6 @@ export default function TReactPlayer({mediaEventsMap=handledMediaEventsMap, vide
{...handledMediaEvents}
{...rest}
playsinline // Add playsinline attribute here
/>
/>
);
}
}