Youtube Channel Name/Title/Share header disappears after first video

[NiallBegley]

Hey there - first of all, I love vose.tv, I use it almost every day.

I noticed recently that the Youtube embedded channel icon/title/watch later/share header that shows when you hover over a video (shown below) disappears after you switch the video to anything other than the initial video.

This happens regardless of if the video progresses automatically after the first one finishes or if you manually move it to a new video. It also does come back if you go back to the first video in the playlist. Here's what it looks like once it disappears. Notice that the mouse is hovering over the video in the screenshot:

I tried this across 2 different windows machines on both Chrome and Edge and saw the same problem.

As a side issue unrelated to this, I thought I'd clone your repo and see if I could poke around and figure it out myself. After cloning, installing the dependencies, renaming the .env-sample file to .env and starting the server it looks like it can't find the client css file:

I hardcoded the main.css file to load from /src but after doing that I just get an error in the terminal while the browser hangs:

listening at http://localhost:3000 Recursive Videos Error TypeError: Cannot read property 'children' of undefined at children (C:\vose.tv\src\services/fetch-subreddit.js:63:22) at process._tickCallback (internal/process/next_tick.js:68:7) (node:4104) UnhandledPromiseRejectionWarning: TypeError: Cannot read property '0' of undefined at require.app.use (C:\vose.tv\src/main.server.js:90:24) at process._tickCallback (internal/process/next_tick.js:68:7) (node:4104) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 39) (node:4104) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that ar e not handled will terminate the Node.js process with a non-zero exit code.

Sorry, I know that's two separate things. I just didn't think the setup stuff was worth its own issue.

[simonlc]

Glad you you are enjoying it :)

Thank you so much for this bug report, I've noticed this too, and thought it was probably something youtube changed. I'll look into this tonight and see if I can find out why it's doing this.

As for the second question, it seems like the app is crashing for something else. Seems to be it's trying to read the data fetched from reddit but it's undefined? Idk, but I'm also curious as to which version of node you are using, I'm using node v10 on my server iirc, and v11 locally.

[simonlc]

I noticed in the code there is a hardcoded local development port. Try setting your port to 4004 instead of 3000, it should fix things if you still want to experiment.

[simonlc]

So I didn't get much progress today. I found out that for some reason the class 'ytp-hide-info-bar' gets added to the youtube player inside the iframe. If I remove the class in using the devtools, the bug seems to be solved and the title doesn't disappear anymore. The problem is I have no idea why this class gets added, or how to remove it, as it's on youtube's end. I believe this bug is as a result of something they changed on their end. I'll have to make a test case app to investigate further later this week.

If I can't identify the bug I'll have to simply reload the player on every video change. Not a huge deal, maybe I could temporarily do that tomorrow so it works right away.

[NiallBegley]

The port change to 4004 didn't seem to change anything - the css file not being found and the json parsing errors are still there. I'll check what version of node I'm using when I get back home and I'll keep poking around, I'm trying to learn more about react anyways!

[simonlc]

Didn't get time to look at the CSS thing yet, sorry. I did spend some time debugging the iframe api code, which is really hard since it's all minified. It's definitely on youtube's side. I'll have to refresh the player every time I think.

[simonlc]

Well I just made the player destroy and create itself on every video change, it's going to be slower to change now. I'm really sad about this to be honest.

[NiallBegley]

So I got the project up and running - it just seems to not play well with Windows but once I cloned the repo on a Linux machine it was up and running instantly.

Anyways, I don't think having to reload the player is that big of a deal - I'm not sure I would have even noticed the change if I wasn't on here.

Correct me if I'm wrong, but would it be possible to attach a new piece of javascript to the page that just shows the ytp-title class when the mouse hovers over the youtube player? It looks like the title bar is still there just whatever was controlling its display has been broken:

As soon as you override the display:none on that guy, the title shows up again. It's not an ideal solution, but I think it would work.

edit: Actually, it's less complicated than I thought because literally changing the following css class to disabled completely fixes the problem:

.ytp-hide-info-bar .ytp-gradient-top, .ytp-hide-info-bar .ytp-chrome-top .ytp-title, .ytp-hide-info-bar .ytp-chrome-top .ytp-playlist-menu-button, .ytp-hide-info-bar .ytp-chrome-top .ytp-watch-later-button, .ytp-hide-info-bar .ytp-chrome-top .ytp-share-button, .ytp-hide-info-bar .ytp-chrome-top .ytp-overflow-button {
    display: none;
}

Once you disable that in your browser, the behavior (showing when hovering, disappearing when no longer hovering) is completely restored.

[simonlc]

I think the only issue with that is because of CORS, changes to CSS or HTML in the iframe will be blocked. As for the build, the package.json assumes you have a unix environment, that could've been it.