You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Hello, I've read around and tried to create my own button. It served the purpose of helping me to click on the next episode of an anime series in my project by increasing the index.
But the problem is it always keeps creating the new same button every time because I set it to create a new one every time, so I set up a bit and create an if check to check. If it already exists that button, I'll skip it and won't create it again.
But the problem is it keeps holding the old value of my index. I've tried to create an else situation where if it already exists I try to .handleClick it but the problem is still the same, it keeps taking an old value.
I have an AnimeWatch component, it'll pass down the index to the VideoJSHook component.
From then, I tried to create a custom button for it.
Here's the code:
I received the props from AnimeWatch in VideoPlayer , then from VideoPlayer I pass it to playerRef in the same component
const usePlayer = ({ src, controls, autoplay, anime, info, index }) => {
const navigate = useNavigate()
useEffect(() => {
// ABOVE CODE FOR VIDEO, SHORTEN
// GO TO NEXT EPISODE BY INCREASE INDEX OF QUERY PARAMETER
if (index < info.length - 1) {
if (
vjsPlayer.getChild("controlBar").childNameIndex_.MyButton2 === undefined
) {
var MyButton2 = videojs.extend(Button, {
constructor: function () {
Button.apply(this, arguments)
this.addClass("go-next-btn")
this.controlText("Next episode")
/* initialize button */
},
handleClick: () => {
/* do increase index on click */
navigate(`?index=${Number(index) + 1}`)
},
})
videojs.registerComponent("MyButton2", MyButton2)
vjsPlayer.getChild("controlBar").addChild("MyButton2", {})
document.querySelector(
".go-next-btn .vjs-icon-placeholder"
).innerHTML = `MySVG-shorten-because-too-long`
}
}
// BELOW ARE FOR DISPOSE PLAYER
setPlayer(vjsPlayer)
return () => {
if (player !== null) {
player.dispose()
}
}
}, [index])
useEffect(() => {
if (player !== null) {
player.src({ src })
}
}, [src])
return videoRef
}
Please tell me more if you need me to provide more. But I'm afraid I can't create it in Code Sandbox or anything like that because the code is quite long and I can't quite sure I can handle it to reproduce the problem again.
UPDATE:
This is video shows how it's working right now.
I put
console.log("Pass down to where the index is checking length: ", index)
console.log("---------------")
at index < info.length - 1 comparison
Then console.log("Goes here if it's the first time the button were created") if it does run the first time ever to create the button.
Then I console.log("Handle click to increase the index: ", Number(index) + 1) inside the handleClick to see the index every time I clicked it.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Hello, I've read around and tried to create my own button. It served the purpose of helping me to click on the next episode of an anime series in my project by increasing the index.
But the problem is it always keeps creating the new same button every time because I set it to create a new one every time, so I set up a bit and create an
if check
to check. If it already exists that button, I'll skip it and won't create it again.But the problem is it keeps holding the old value of my index. I've tried to create an
else
situation where if it already exists I try to.handleClick
it but the problem is still the same, it keeps taking an old value.I have an
AnimeWatch
component, it'll pass down theindex
to theVideoJSHook
component.From then, I tried to create a custom button for it.
Here's the code:
I received the props from
AnimeWatch
inVideoPlayer
, then fromVideoPlayer
I pass it toplayerRef
in the same componentPass the props to
usePlayer
Please tell me more if you need me to provide more. But I'm afraid I can't create it in
Code Sandbox
or anything like that because the code is quite long and I can't quite sure I can handle it to reproduce the problem again.UPDATE:
This is video shows how it's working right now.
I put
at
index < info.length - 1
comparisonThen
console.log("Goes here if it's the first time the button were created")
if it does run the first time ever to create the button.Then I
console.log("Handle click to increase the index: ", Number(index) + 1)
inside the handleClick to see theindex
every time I clicked it.2022-02-01.12-58-35_Trim.mp4
Beta Was this translation helpful? Give feedback.
All reactions