[BUG] Can't see shuffle button next to the channel name in video pages about random-youtube-video HOT 9 CLOSED

Hi, this is definitely not normal. I've not encountered this before, but we may be able to find out what's causing this.
I assume you've already tried some of the following, but to make sure I'll list them anyways, as they may be able to resolve the problem immediately:

• Re-opening the browser
• Removing and re-installing the extension (your settings will be lost!)

If those two steps do not resolve the issue, please check the following to get some logs for me:

1. When on the "Manage Extensions" page of your browser (accessible by clicking on the puzzle piece icon on the top right -> Manage extensions), you can check if the extension has an "Errors" button/tab next to "Details" and "Remove". If it does, please paste the complete error message(s) into the issue here.
2. Similarly, please open up the service worker view by clicking on the link in the extension overview on the same page as before. If there are any errors in the Console tab of the window that opens, please paste them into the issue here.
3. Open up your browser's dev tools (You can use F12 to do so, or use the browser context menu -> Inspect). The extension prefixes all of its logs with [youtube-random-video]. Please go to a video page and reload the page (e.g. using F5). The extension should log some activities, at the very least a "CustomEvent". Please copy those logs (right click on an item -> Copy object) and paste them into the issue.

This should give me some idea of what the issue may be.
Let me know if there's any other problems or questions.

from random-youtube-video.

things i found in the Console tab under "service worker":

firebase-compat.js:9
It looks like you're using the development build of the Firebase JS SDK.
When deploying Firebase apps to production, it is advisable to only import
the individual SDK components you intend to use.

For the CDN builds, these are available in the following manner
(replace with the name of a component - i.e. auth, database, etc):

https://www.gstatic.com/firebasejs/5.0.0/firebase-.js

(anonymous) @ firebase-compat.js:9
DevTools failed to load source map: Could not load content for chrome-extension://kijgnjhogkjodpakfmhgleobifempckf/firebase/firebase-compat.js.map: System error: net::ERR_FILE_NOT_FOUND

things i found with inspect element on a video page searching for [youtube-random-video] under "CustomEvent":

[youtube-random-video]: CustomEventisTrusted: falsebubbles: truecancelBubble: falsecancelable: falsecomposed: truecurrentTarget: nulldefaultPrevented: falsedetail: {endpoint: {…}, pageType: 'watch', fromHistory: false, response: {…}, navigationDoneMs: 1676154920295.3}eventPhase: 0returnValue: truesrcElement: ytd-apptarget: ytd-apptimeStamp: 3174.300000011921type: "yt-navigate-finish"[[Prototype]]: CustomEvent
utils.js:10 [youtube-random-video]: CustomEventisTrusted: falsebubbles: truecancelBubble: falsecancelable: falsecomposed: truecurrentTarget: nulldefaultPrevented: falsedetail: {endpoint: {…}, pageType: 'channel', url: '/@MizkifDaily', reload: false}eventPhase: 0returnValue: truesrcElement: ytd-apptarget: ytd-apptimeStamp: 8247.699999988079type: "yt-navigate-start"[[Prototype]]: CustomEvent
utils.js:10 [youtube-random-video]: CustomEventisTrusted: falsebubbles: truecancelBubble: falsecancelable: falsecomposed: truecurrentTarget: nulldefaultPrevented: falsedetail: {endpoint: {…}, pageType: 'channel', fromHistory: false, response: {…}, navigationDoneMs: 1676154925742.4}eventPhase: 0returnValue: truesrcElement: ytd-apptarget: ytd-apptimeStamp: 8621.5type: "yt-navigate-finish"[[Prototype]]: CustomEvent
utils.js:10 [youtube-random-video]: CustomEventisTrusted: falsebubbles: truecancelBubble: falsecancelable: falsecomposed: truecurrentTarget: nulldefaultPrevented: falsedetail: {endpoint: {…}, pageType: 'watch', url: '/watch?v=X4_om3ip5xc', reload: false}eventPhase: 0returnValue: truesrcElement: ytd-apptarget: ytd-apptimeStamp: 11193.600000023842type: "yt-navigate-start"[[Prototype]]: CustomEvent
utils.js:10 [youtube-random-video]: CustomEventisTrusted: falsebubbles: truecancelBubble: falsecancelable: falsecomposed: truecurrentTarget: nulldefaultPrevented: falsedetail: {endpoint: {…}, pageType: 'watch', fromHistory: false, response: {…}, navigationDoneMs: 1676154928883.7}eventPhase: 0returnValue: truesrcElement: ytd-apptarget: ytd-apptimeStamp: 11762.800000011921type: "yt-navigate-finish"[[Prototype]]: CustomEvent

btw i also tried looking for the "errors" button in the extensions tab, but there doesn't seem to be one, although i did find an option called "collect errors" under the "details" button for the extension, so i activated it just to be sure but as of right now it's not giving me anything. hope this helps finding the issue in some way.

from random-youtube-video.

Thanks for that. From what I see, it looks like everything should be working. So we might have to dig a little deeper, by inspecting the page source to try and find if the button even exists and is perhaps only hidden.

To find if the button exists but is hidden, go to the Dev-Tools again while on a video page (F12) and go to the "Elements" tab. You can then search for the ID of the button element (focus the list of elements and press CTRL+F to open the search bar), which is youtube-random-video-shuffle-button-video (for channel pages, the ID is youtube-random-video-shuffle-button-channel if you want to check that).
If you don't get any results, we know that the button isn't being built at all, and I would need to look into why that is.
If you do get a result, please again copy the element and paste it into the issue, so that I can check what's going on.
Also, please paste the link to the video page that you're doing this on.

And even though I don't think it should be linked to the problem, please also share with me the link to your whatismybrowser (https://www.whatismybrowser.com/), which gives me some (anonymized) information on the browser you are using.

You may additionally try one of these two things to try and fix the problem on your end:

1. Clear the cookies for YouTube: Lock item left of the URL -> Cookies -> Remove. This might help in case YouTube is somehow blocking the button on the video pages.
2. Checking if the extension works when using a different browser; you can use Microsoft Edge for that, as you can also download Chrome extensions there. This is of course a suboptimal solution.

from random-youtube-video.

hey i just noticed the extension collected some errors so i thought i'd put them here since the first time you asked me i didn't have the option enabled.

first one:

// Builds the shuffle-buttons that are used by the extension

function buildShuffleButton(pageType, channelId) {
let buttonDivID = "youtube-random-video-shuffle-button";
let buttonDivExtraStyle = "";
let buttonDivOwner = null;
let buttonDivPrepend = true;

// Depending on the type of page we're on, we might need to change certain parts of the button
switch (pageType) {
	case "channel":
		buttonDivID = "youtube-random-video-shuffle-button-channel";
		buttonDivOwner = document.getElementById("inner-header-container").children.namedItem("buttons");
		break;
	case "video":
		buttonDivID = "youtube-random-video-shuffle-button-video";
		buttonDivExtraStyle = "margin-left: 8px;";
		buttonDivOwner = document.getElementById("above-the-fold").children.namedItem("top-row").children.namedItem("owner");
		buttonDivPrepend = false;
		break;
	default:
		console.warn(`Cannot build button: Unknown page type: ${pageType}`);
		return;
}

// If the button should not be visible but exists, hide it
if (document.getElementById(buttonDivID) && !channelId) {
	document.getElementById(buttonDivID).style.display = "none";
	console.log('No channelId found: Button should not be visible, hiding it.');
	return;
}

// If the button already exists, don't build it again
if (document.getElementById(buttonDivID) && channelId) {
	// Unhide the button if it was hidden
	document.getElementById(buttonDivID).style.display = "flex";

	// Update the channelId
	document.getElementById(buttonDivID).children[0].children[0].children[0].children.namedItem('channelId').innerHTML = channelId ?? "";

	return;
}

if (!channelId) {
	console.log("Cannot build button: No channelID found.");
	return;
}

// Create the button div & renderer
let buttonDiv = `
<div id="${buttonDivID}" class="style-scope ytd-c4-tabbed-header-renderer" style="align-items: center; display: flex; flex-direction: row; ${buttonDivExtraStyle}">
	<ytd-button-renderer class="style-scope ytd-c4-tabbed-header-renderer">
	</ytd-button-renderer>
</div>`;
buttonDiv = new DOMParser().parseFromString(buttonDiv, "text/html").body.firstChild;

// Depending on the page we're on, we wat to prepend or append the button to the owner
if (buttonDivPrepend) {
	buttonDivOwner.prepend(buttonDiv);
} else {
	buttonDivOwner.appendChild(buttonDiv);
}

// Wait for the button renderer to get the child elements defined by the element type (YouTube thing...)
var observer = new MutationObserver(function (mutations, me) {
	var shuffleButton = buttonDivOwner.children.namedItem(buttonDivID);
	if (shuffleButton.children.length > 0) {
		me.disconnect(); // Stop observing
		finalizeButton(pageType, channelId);
		return;
	}
});

// start observing
observer.observe(document, {
	childList: true,
	subtree: true
});

}

function finalizeButton(pageType, channelId) {
let buttonDivID = "youtube-random-video-shuffle-button";
let buttonDivOwner = null;

switch (pageType) {
	case "channel":
		buttonDivID = "youtube-random-video-shuffle-button-channel";
		buttonDivOwner = document.getElementById("inner-header-container").children.namedItem("buttons");
		break;
	case "video":
		buttonDivID = "youtube-random-video-shuffle-button-video";
		buttonDivOwner = document.getElementById("above-the-fold").children.namedItem("top-row").children.namedItem("owner");
		break;
	default:
		console.warn("Cannot build button: unknown page type: " + pageType);
		return;
}

let buttonText = " Shuffle";
let button = `
<button
	class="yt-spec-button-shape-next yt-spec-button-shape-next--tonal yt-spec-button-shape-next--mono yt-spec-button-shape-next--size-m"
	aria-label="Shuffle all videos">
		<span class="material-symbols-outlined">
			shuffle
		</span>
		<div class="cbox yt-spec-button-shape-next--button-text-content">
			<span class="yt-core-attributed-string yt-core-attributed-string--white-space-no-wrap" role="text">
				${buttonText}
			</span>
		</div>
		<yt-touch-feedback-shape style="border-radius: inherit;">
			<div class="yt-spec-touch-feedback-shape yt-spec-touch-feedback-shape--touch-response" aria-hidden="true">
				<div class="yt-spec-touch-feedback-shape__stroke" style></div>
				<div class="yt-spec-touch-feedback-shape__fill" style></div>
			</div>
		</yt-touch-feedback-shape>
		<span id="channelId" style="display: none">${channelId ?? ""}</span>
</button>`;
button = new DOMParser().parseFromString(button, "text/html").body.firstChild;

// Add the button to the page
buttonDivOwner.children.namedItem(buttonDivID).children[0].children[0].appendChild(button);

// Set references to the button and the text inside the button
shuffleButton = buttonDivOwner.children.namedItem(buttonDivID);
shuffleButtonTextElement = shuffleButton.children[0].children[0].children[0].children[1].children[0];

// Add the event listener that shuffles the videos to the button
shuffleButton.addEventListener("click", shuffleVideos);

}

second one:

// Builds the shuffle-buttons that are used by the extension

function buildShuffleButton(pageType, channelId) {
let buttonDivID = "youtube-random-video-shuffle-button";
let buttonDivExtraStyle = "";
let buttonDivOwner = null;
let buttonDivPrepend = true;

// Depending on the type of page we're on, we might need to change certain parts of the button
switch (pageType) {
	case "channel":
		buttonDivID = "youtube-random-video-shuffle-button-channel";
		buttonDivOwner = document.getElementById("inner-header-container").children.namedItem("buttons");
		break;
	case "video":
		buttonDivID = "youtube-random-video-shuffle-button-video";
		buttonDivExtraStyle = "margin-left: 8px;";
		buttonDivOwner = document.getElementById("above-the-fold").children.namedItem("top-row").children.namedItem("owner");
		buttonDivPrepend = false;
		break;
	default:
		console.warn(`Cannot build button: Unknown page type: ${pageType}`);
		return;
}

// If the button should not be visible but exists, hide it
if (document.getElementById(buttonDivID) && !channelId) {
	document.getElementById(buttonDivID).style.display = "none";
	console.log('No channelId found: Button should not be visible, hiding it.');
	return;
}

// If the button already exists, don't build it again
if (document.getElementById(buttonDivID) && channelId) {
	// Unhide the button if it was hidden
	document.getElementById(buttonDivID).style.display = "flex";

	// Update the channelId
	document.getElementById(buttonDivID).children[0].children[0].children[0].children.namedItem('channelId').innerHTML = channelId ?? "";

	return;
}

if (!channelId) {
	console.log("Cannot build button: No channelID found.");
	return;
}

// Create the button div & renderer
let buttonDiv = `
<div id="${buttonDivID}" class="style-scope ytd-c4-tabbed-header-renderer" style="align-items: center; display: flex; flex-direction: row; ${buttonDivExtraStyle}">
	<ytd-button-renderer class="style-scope ytd-c4-tabbed-header-renderer">
	</ytd-button-renderer>
</div>`;
buttonDiv = new DOMParser().parseFromString(buttonDiv, "text/html").body.firstChild;

// Depending on the page we're on, we wat to prepend or append the button to the owner
if (buttonDivPrepend) {
	buttonDivOwner.prepend(buttonDiv);
} else {
	buttonDivOwner.appendChild(buttonDiv);
}

// Wait for the button renderer to get the child elements defined by the element type (YouTube thing...)
var observer = new MutationObserver(function (mutations, me) {
	var shuffleButton = buttonDivOwner.children.namedItem(buttonDivID);
	if (shuffleButton.children.length > 0) {
		me.disconnect(); // Stop observing
		finalizeButton(pageType, channelId);
		return;
	}
});

// start observing
observer.observe(document, {
	childList: true,
	subtree: true
});

}

function finalizeButton(pageType, channelId) {
let buttonDivID = "youtube-random-video-shuffle-button";
let buttonDivOwner = null;

switch (pageType) {
	case "channel":
		buttonDivID = "youtube-random-video-shuffle-button-channel";
		buttonDivOwner = document.getElementById("inner-header-container").children.namedItem("buttons");
		break;
	case "video":
		buttonDivID = "youtube-random-video-shuffle-button-video";
		buttonDivOwner = document.getElementById("above-the-fold").children.namedItem("top-row").children.namedItem("owner");
		break;
	default:
		console.warn("Cannot build button: unknown page type: " + pageType);
		return;
}

let buttonText = " Shuffle";
let button = `
<button
	class="yt-spec-button-shape-next yt-spec-button-shape-next--tonal yt-spec-button-shape-next--mono yt-spec-button-shape-next--size-m"
	aria-label="Shuffle all videos">
		<span class="material-symbols-outlined">
			shuffle
		</span>
		<div class="cbox yt-spec-button-shape-next--button-text-content">
			<span class="yt-core-attributed-string yt-core-attributed-string--white-space-no-wrap" role="text">
				${buttonText}
			</span>
		</div>
		<yt-touch-feedback-shape style="border-radius: inherit;">
			<div class="yt-spec-touch-feedback-shape yt-spec-touch-feedback-shape--touch-response" aria-hidden="true">
				<div class="yt-spec-touch-feedback-shape__stroke" style></div>
				<div class="yt-spec-touch-feedback-shape__fill" style></div>
			</div>
		</yt-touch-feedback-shape>
		<span id="channelId" style="display: none">${channelId ?? ""}</span>
</button>`;
button = new DOMParser().parseFromString(button, "text/html").body.firstChild;

// Add the button to the page
buttonDivOwner.children.namedItem(buttonDivID).children[0].children[0].appendChild(button);

// Set references to the button and the text inside the button
shuffleButton = buttonDivOwner.children.namedItem(buttonDivID);
shuffleButtonTextElement = shuffleButton.children[0].children[0].children[0].children[1].children[0];

// Add the event listener that shuffles the videos to the button
shuffleButton.addEventListener("click", shuffleVideos);

}

from random-youtube-video.

Thanks, I saw this and will try to take a look at finding what caused this when possible!

from random-youtube-video.

Hi @arv6, so far I've unfortunately not been able to find out where the cause for this may be. So in case that you are still experiencing the issue and haven't done so, I would - as a workaround - recommend uninstalling and re-installing the extension, to perhaps clear some cached data or cookies that may be causing the issue on your end.

from random-youtube-video.

hi, sorry for the late response, but i finally figured out what caused this issue. whenever i have a tampermonkey script enabled for youtube the shuffle button doesn't appear. i don't know why it does that or why it took me so long to figure that out. anyways, it would be really nice if you managed to find a way to make it so that the shuffle button is showing even with tampermonkey enabled. thanks.

from random-youtube-video.

Interesting, thanks @arv6. Depending on what kind of scripts you have enabled it is possible that a script and the extension try to do similar things and one doesn't work. If I am to find out what causes this I would need to know which script is interfering with the extension.
You can troubleshoot this by disabling the scripts one by one and checking whether or not the extension works again.
If you let me know, perhaps I can replicate the issue and then try and get it fixed, though it is also possible that it won't be fixable that easily, or that a fix would add other complications. But of course I'll try.

Otherwise, the newest extension version now also adds a shuffle button to the popup, so you are able to use the extension even if the button isn't displayed on the video page itself.

from random-youtube-video.

Closed due to inactivity.

from random-youtube-video.