search

nicknsy / jellyscrub

Smooth mouse-over video scrubbing previews for Jellyfin.
MIT License
670 stars 27 forks source link

Uncaught TypeError: customSliderBubble is null #4

Closed Pfuenzle closed 2 years ago

Pfuenzle commented 2 years ago

Hi, Im using Jellyfin version 10.8.1. I added the script tag to the index.html like in the README, and it loads like it should in the WebBrowser, but im unable to see any previews.

When looking in the console, following error message gets thrown every few miliseconds when scrubbing the timeline:

Uncaught TypeError: customSliderBubble is null
    sliderCallback <URL>/Trickplay/ClientScript:185
    containerCallback <URL>/Trickplay/ClientScript:164
    MutationCallback* <URL>/Trickplay/ClientScript:196
[ClientScript:185:21](<URL>/Trickplay/ClientScript)
    sliderCallback <URL>/Trickplay/ClientScript:185
    (Async: MutationCallback)
    containerCallback <URL>/Trickplay/ClientScript:164
    (Async: MutationCallback)
    <anonymous> <URL>/Trickplay/ClientScript:196

Is this a known error? I removed all themes and custom CSS but it still does not work.

Thanks a lot for this plugin :)

nicknsy commented 2 years ago

Hi, could you paste the contents of your index.html file?

Pfuenzle commented 2 years ago

Sure, here it is

<!doctype html><html class="preload"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover"><link rel="manifest" href="64d966784cd77b03a79c.json"><meta name="format-detection" content="telephone=no"><meta name="msapplication-tap-highlight" content="no"><meta http-equiv="X-UA-Compatibility" content="IE=Edge"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="mobile-web-app-capable" content="yes"><meta name="application-name" content="Jellyfin"><meta name="robots" content="noindex, nofollow, noarchive"><meta name="referrer" content="no-referrer"><meta property="og:title" content="Jellyfin"><meta property="og:site_name" content="Jellyfin"><meta property="og:url" content="http://jellyfin.org"><meta property="og:description" content="The Free Software Media System"><meta property="og:type" content="article"><meta id="themeColor" name="theme-color" content="#202020"><link rel="apple-touch-icon" sizes="180x180" href="f5bbb798cb2c65908633.png"><link href="6a2e2e6b4186720e5d4f.png" media="screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image"/><link href="eb8bef4f19b6ad227f46.png" media="screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" rel="apple-touch-startup-image"/><link href="3fa90c593184d5737eb3.png" media="screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image"/><link href="23a72f5d56f82554aeab.png" media="screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" rel="apple-touch-startup-image"/><link href="d28a57b1e61f9f0dabd9.png" media="screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" rel="apple-touch-startup-image"/><link href="16fc81178d1aee54f6cc.png" media="screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" rel="apple-touch-startup-image"/><link href="f94ebf203ea0c91a47c6.png" media="screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" rel="apple-touch-startup-image"/><link href="522fa270807b7b12a9ba.png" media="screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" rel="apple-touch-startup-image"/><link href="0df719b48efcaef953df.png" media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image"/><link href="0b37f660ac0f7f01ab41.png" media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" rel="apple-touch-startup-image"/><link href="d0e56683308a17dba86d.png" media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" rel="apple-touch-startup-image"/><link href="baafa93a783b76e667ec.png" media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" rel="apple-touch-startup-image"/><link href="379bab68d056910336f9.png" media="screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image"/><link href="d31413d3f03c0873ccbb.png" media="screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" rel="apple-touch-startup-image"/><link href="49d14d0eb7bcdf6f2d1b.png" media="screen and (device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image"/><link href="bbb3e6d43389ba0d436c.png" media="screen and (device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" rel="apple-touch-startup-image"/><link href="142d834c201895a46a01.png" media="screen and (device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image"/><link href="e62987a12a58b24f383a.png" media="screen and (device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" rel="apple-touch-startup-image"/><link href="3f3fe0fd3a0b637b5030.png" media="screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image"/><link href="a962662957ebbb8eb436.png" media="screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" rel="apple-touch-startup-image"/><link rel="shortcut icon" href="bc8d51405ec040305a87.ico"><meta name="msapplication-TileImage" content="39209dd2362c0db7c673.png"><meta name="msapplication-TileColor" content="#333333"><title>Jellyfin</title><style>.backgroundContainer-transparent:not(.withBackdrop),.transparentDocument{background:0 0!important;background-color:transparent!important}.mouseIdle,.mouseIdle a,.mouseIdle button,.mouseIdle input,.mouseIdle label,.mouseIdle select,.mouseIdle textarea{cursor:none!important}.preload{background-color:#101010}.hide,.mouseIdle .hide-mouse-idle,.mouseIdle-tv .hide-mouse-idle-tv{display:none!important}.mainDrawerHandle{position:fixed;top:0;left:0;bottom:0;z-index:1;width:.8em}@-webkit-keyframes fadein{from{opacity:0}to{opacity:1}}@keyframes fadein{from{opacity:0}to{opacity:1}}.splashLogo{-webkit-animation:fadein .5s;animation:fadein .5s;width:30%;height:30%;background-image:url(assets/img/icon-transparent.png);background-position:center center;background-repeat:no-repeat;background-size:contain;position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}@media screen and (min-device-width:992px){.splashLogo{background-image:url(assets/img/banner-light.png)}}</style><script defer="defer" src="main.jellyfin.bundle.js?25e75c2ecfc9231370eb"></script></head><body><div class="backdropContainer"></div><div class="backgroundContainer"></div><div class="mainDrawer hide"><div class="mainDrawer-scrollContainer scrollContainer focuscontainer-y"></div></div><div class="skinHeader focuscontainer-x"></div><div class="mainAnimatedPages skinBody"><div class="splashLogo"></div></div><div class="mainDrawerHandle"></div><script plugin="Jellyscrub" version="1.0.0.0" src="/Trickplay/ClientScript"></script></body></html>

But it doesnt seem to be too big of an issue, this only happens if no BIF is generated, as soon as its generated and downloaded, it works fine.



Also, not sure if this warrants another issue, but do you use the plugin with the default 10000 ms interval or more/less?

Because I set it to 5000, and now the thumbnails only span exactly half the video, e.g. the video is 60 minutes long, the thumbnail of a scene that happens at 00:30 is now present when scrobbling over 00:15, and the thumbnails of the movie credits that should be at the end are now at 00:30. On the second half, no thumbnails are present and only the last one from 00:30 gets shown.

So I guess some calculation is weird when diverting from the default 10000 ms (If this is too offtopic, I can make a new issue)

nicknsy commented 2 years ago

Yeah whoops, I only ever tested it at 10,000 and it looks like I forgot to pass the custom interval into the encoder that makes all the images. I've gone ahead and made a separate issue for that, which I'll fix tomorrow. For now you should revert back to 10,000 ms and regenerate any bif files.

As for the javascript error you were experiencing, what kind of media content are you trying to watch? Is it just normal movies/shows? Does the error happen right when you load the site, or only once you start watching media? I haven't run into that one yet so I'll have to test what's causing it.

Pfuenzle commented 2 years ago

Thanks a lot, sadly I did not have more time yesterday. The intervall is completely fixed now, thanks a lot! For the script errors, they appeared on every media where the thumbnails have not been generated yet, and only while scrobbling over the timeline. When the mouse moves away, its gone.

But with your new version it seems to be fixed by the nullchecks, so its fine :)