mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
all subtitles should work now
This commit is contained in:
parent
662bdfb3f7
commit
eabcf06cb2
2 changed files with 38 additions and 11 deletions
|
@ -26,8 +26,8 @@ const MediaPlayer = () => {
|
||||||
|
|
||||||
const requestRef = useRef();
|
const requestRef = useRef();
|
||||||
const videoRef = createRef<HTMLVideoElement>();
|
const videoRef = createRef<HTMLVideoElement>();
|
||||||
const audioRef = createRef<HTMLVideoElement>();
|
|
||||||
const trackRef = createRef<HTMLTrackElement>();
|
const trackRef = createRef<HTMLTrackElement>();
|
||||||
|
const subtitleRef = createRef<HTMLParagraphElement>();
|
||||||
|
|
||||||
// end scene specific stuff
|
// end scene specific stuff
|
||||||
const endMediaPlayedCount = useStore((state) => state.endMediaPlayedCount);
|
const endMediaPlayedCount = useStore((state) => state.endMediaPlayedCount);
|
||||||
|
@ -38,6 +38,25 @@ const MediaPlayer = () => {
|
||||||
(state) => state.resetEndMediaPlayedCount
|
(state) => state.resetEndMediaPlayedCount
|
||||||
);
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleCueChange = (e: any) => {
|
||||||
|
const { track } = e.target;
|
||||||
|
const { activeCues } = track;
|
||||||
|
const text = [...activeCues].map(
|
||||||
|
(cue) => cue.getCueAsHTML().textContent
|
||||||
|
)[0];
|
||||||
|
if (subtitleRef.current && videoRef.current) {
|
||||||
|
if (!text || videoRef.current.currentTime === 0)
|
||||||
|
subtitleRef.current.textContent = text;
|
||||||
|
else subtitleRef.current.textContent = text;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (trackRef.current) {
|
||||||
|
trackRef.current.addEventListener("cuechange", handleCueChange);
|
||||||
|
}
|
||||||
|
}, [subtitleRef, trackRef, videoRef]);
|
||||||
|
|
||||||
const updateTime = useCallback(() => {
|
const updateTime = useCallback(() => {
|
||||||
(requestRef.current as any) = requestAnimationFrame(updateTime);
|
(requestRef.current as any) = requestAnimationFrame(updateTime);
|
||||||
if (videoRef.current) {
|
if (videoRef.current) {
|
||||||
|
@ -96,7 +115,6 @@ const MediaPlayer = () => {
|
||||||
}, [endMediaPlayedCount]);
|
}, [endMediaPlayedCount]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
console.log("here");
|
|
||||||
if (currentScene === "end") {
|
if (currentScene === "end") {
|
||||||
if (endMediaPlayedCount === 0) {
|
if (endMediaPlayedCount === 0) {
|
||||||
if (videoRef.current) {
|
if (videoRef.current) {
|
||||||
|
@ -142,11 +160,9 @@ const MediaPlayer = () => {
|
||||||
} else {
|
} else {
|
||||||
import("../../static/movie/" + mediaToPlay + "[0].webm").then(
|
import("../../static/movie/" + mediaToPlay + "[0].webm").then(
|
||||||
(media) => {
|
(media) => {
|
||||||
if (videoRef.current && audioRef.current) {
|
if (videoRef.current) {
|
||||||
videoRef.current.src = media.default;
|
videoRef.current.src = media.default;
|
||||||
audioRef.current.src = xa0006;
|
|
||||||
videoRef.current.load();
|
videoRef.current.load();
|
||||||
audioRef.current.load();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
@ -167,12 +183,12 @@ const MediaPlayer = () => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<video width="800" height="600" id="media" ref={videoRef}>
|
<video width="800" height="600" id="media" ref={videoRef} controls>
|
||||||
<track kind="captions" default />
|
|
||||||
</video>
|
|
||||||
<video width="800" height="600" id="audio" ref={audioRef}>
|
|
||||||
<track ref={trackRef} kind="captions" default />
|
<track ref={trackRef} kind="captions" default />
|
||||||
</video>
|
</video>
|
||||||
|
<div id={"subtitle-container"}>
|
||||||
|
<p ref={subtitleRef} id={"subtitle"} />
|
||||||
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
15
src/store.ts
15
src/store.ts
|
@ -122,7 +122,7 @@ export const useStore = create(
|
||||||
combine(
|
combine(
|
||||||
{
|
{
|
||||||
// scene data
|
// scene data
|
||||||
currentScene: "media",
|
currentScene: "main",
|
||||||
|
|
||||||
// game progress
|
// game progress
|
||||||
gameProgress: game_progress,
|
gameProgress: game_progress,
|
||||||
|
@ -134,7 +134,18 @@ export const useStore = create(
|
||||||
intro: true,
|
intro: true,
|
||||||
|
|
||||||
// nodes
|
// nodes
|
||||||
activeNode: site_a["17"]["1717"],
|
activeNode: {
|
||||||
|
...site_a["04"]["0422"],
|
||||||
|
matrixIndices: { matrixIdx: 7, rowIdx: 0, colIdx: 0 },
|
||||||
|
},
|
||||||
|
activeNodePos: [0, 0, 0],
|
||||||
|
activeNodeRot: [0, 0, 0],
|
||||||
|
activeNodeState: {
|
||||||
|
interactedWith: false,
|
||||||
|
exploding: false,
|
||||||
|
shrinking: false,
|
||||||
|
visible: true,
|
||||||
|
},
|
||||||
|
|
||||||
// lain
|
// lain
|
||||||
lainMoveState: "standing",
|
lainMoveState: "standing",
|
||||||
|
|
Loading…
Reference in a new issue