+
+ );
+}
diff --git a/special-pages/pages/duckplayer/app/components/YouTubeError.module.css b/special-pages/pages/duckplayer/app/components/YouTubeError.module.css
new file mode 100644
index 0000000000..c040a7cf1f
--- /dev/null
+++ b/special-pages/pages/duckplayer/app/components/YouTubeError.module.css
@@ -0,0 +1,134 @@
+.error {
+ align-items: center;
+ background: rgba(0, 0, 0, 0.6);
+ display: grid;
+ height: 100%;
+ justify-items: center;
+}
+
+.error.desktop {
+ height: var(--frame-height);
+ overflow: hidden;
+ position: relative;
+ z-index: 1;
+}
+
+.error.mobile {
+ border-radius: var(--inner-radius);
+ height: 100%;
+ overflow: auto;
+
+ /* Prevents automatic text resizing */
+ text-size-adjust: 100%;
+ -webkit-text-size-adjust: 100%;
+
+ @media screen and (min-width: 600px) and (min-height: 600px) {
+ aspect-ratio: 16 / 9;
+ }
+}
+
+.desktop {
+ border-top-left-radius: var(--outer-radius);
+ border-top-right-radius: var(--outer-radius);
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 0;
+}
+
+.container {
+ column-gap: 24px;
+ display: flex;
+ flex-flow: row;
+ margin: 0;
+ max-width: 680px;
+ padding: 0 40px;
+ row-gap: 4px;
+}
+
+.mobile .container {
+ flex-flow: column;
+ padding: 0 24px;
+
+ @media screen and (min-height: 320px) {
+ margin: 16px 0;
+ }
+
+ @media screen and (min-width: 375px) and (min-height: 400px) {
+ margin: 36px 0;
+ }
+}
+
+.content {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ margin: 16px 0;
+
+ @media screen and (min-width: 600px) {
+ margin: 24px 0;
+ }
+}
+
+
+.icon {
+ align-self: center;
+ display: flex;
+ justify-content: center;
+
+ &::before {
+ content: ' ';
+ display: block;
+ background: url('../img/warning-96.data.svg') no-repeat;
+ height: 48px;
+ width: 48px;
+ }
+
+ @media screen and (max-width: 320px) {
+ display: none;
+ }
+
+ @media screen and (min-width: 600px) and (min-height: 600px) {
+ justify-content: start;
+
+ &::before {
+ background-image: url('../img/warning-128.data.svg');
+ height: 96px;
+ width: 128px;
+ }
+ }
+}
+
+.heading {
+ color: #fff;
+ font-size: 20px;
+ font-weight: 700;
+ line-height: calc(24 / 20);
+ margin: 0;
+}
+
+.messages {
+ color: #ccc;
+ font-size: 16px;
+ line-height: calc(24 / 16);
+}
+
+div.messages {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+
+ & p {
+ margin: 0;
+ }
+}
+
+p.messages {
+ margin: 0;
+}
+
+ul.messages {
+ li {
+ list-style: disc;
+ margin-left: 24px;
+ }
+}
+
diff --git a/special-pages/pages/duckplayer/app/features/error-detection.js b/special-pages/pages/duckplayer/app/features/error-detection.js
new file mode 100644
index 0000000000..6ce3ddbdd6
--- /dev/null
+++ b/special-pages/pages/duckplayer/app/features/error-detection.js
@@ -0,0 +1,144 @@
+import { YOUTUBE_ERROR_EVENT, YOUTUBE_ERRORS } from '../providers/YouTubeErrorProvider';
+
+/**
+ * @typedef {import("./iframe").IframeFeature} IframeFeature
+ * @typedef {import('../../types/duckplayer').YouTubeError} YouTubeError
+ * @typedef {import('../../types/duckplayer').DuckPlayerPageSettings['customError']} CustomErrorOptions
+ */
+
+/**
+ * Detects YouTube errors based on DOM queries
+ *
+ * @implements IframeFeature
+ */
+export class ErrorDetection {
+ /** @type {HTMLIFrameElement} */
+ iframe;
+
+ /** @type {CustomErrorOptions} */
+ options;
+
+ /**
+ * @param {CustomErrorOptions} options
+ */
+ constructor(options) {
+ this.options = options;
+ }
+
+ /**
+ * @param {HTMLIFrameElement} iframe
+ */
+ iframeDidLoad(iframe) {
+ this.iframe = iframe;
+
+ if (!this.options || !this.options.signInRequiredSelector) {
+ console.log('Missing Custom Error options');
+ return null;
+ }
+
+ const documentBody = iframe.contentWindow?.document?.body;
+ if (documentBody) {
+ // Check if iframe already contains error
+ if (this.checkForError(documentBody)) {
+ const error = this.getErrorType();
+ window.dispatchEvent(new CustomEvent(YOUTUBE_ERROR_EVENT, { detail: { error } }));
+
+ return null;
+ }
+
+ // Create a MutationObserver instance
+ const observer = new MutationObserver(this.handleMutation.bind(this));
+
+ // Start observing the iframe's document for changes
+ observer.observe(documentBody, {
+ childList: true,
+ subtree: true, // Observe all descendants of the body
+ });
+
+ return () => {
+ observer.disconnect();
+ };
+ }
+
+ return null;
+ }
+
+ /**
+ * Mutation handler that checks new nodes for error states
+ *
+ * @type {MutationCallback}
+ */
+ handleMutation(mutationsList) {
+ for (const mutation of mutationsList) {
+ if (mutation.type === 'childList') {
+ mutation.addedNodes.forEach((node) => {
+ if (this.checkForError(node)) {
+ console.log('A node with an error has been added to the document:', node);
+ const error = this.getErrorType();
+
+ window.dispatchEvent(new CustomEvent(YOUTUBE_ERROR_EVENT, { detail: { error } }));
+ }
+ });
+ }
+ }
+ }
+
+ /**
+ * Attempts to detect the type of error in the YouTube embed iframe
+ * @returns {YouTubeError}
+ */
+ getErrorType() {
+ const iframeWindow = /** @type {Window & { ytcfg: object }} */ (this.iframe.contentWindow);
+ let playerResponse;
+
+ try {
+ playerResponse = JSON.parse(iframeWindow.ytcfg?.get('PLAYER_VARS')?.embedded_player_response);
+ } catch (e) {
+ console.log('Could not parse player response', e);
+ }
+
+ if (typeof playerResponse === 'object') {
+ const {
+ previewPlayabilityStatus: { desktopLegacyAgeGateReason, status },
+ } = playerResponse;
+
+ // 1. Check for UNPLAYABLE status
+ if (status === 'UNPLAYABLE') {
+ // 1.1. Check for presence of desktopLegacyAgeGateReason
+ if (desktopLegacyAgeGateReason === 1) {
+ return YOUTUBE_ERRORS.ageRestricted;
+ }
+
+ // 1.2. Fall back to embed not allowed error
+ return YOUTUBE_ERRORS.noEmbed;
+ }
+
+ // 2. Check for sign-in support link
+ try {
+ if (this.options?.signInRequiredSelector && !!iframeWindow.document.querySelector(this.options.signInRequiredSelector)) {
+ return YOUTUBE_ERRORS.signInRequired;
+ }
+ } catch (e) {
+ console.log('Sign-in required query failed', e);
+ }
+ }
+
+ // 3. Fall back to unknown error
+ return YOUTUBE_ERRORS.unknown;
+ }
+
+ /**
+ * Analyses a node and its children to determine if it contains an error state
+ *
+ * @param {Node} [node]
+ */
+ checkForError(node) {
+ if (node?.nodeType === Node.ELEMENT_NODE) {
+ const element = /** @type {HTMLElement} */ (node);
+ // Check if element has the error class or contains any children with that class
+ return element.classList.contains('ytp-error') || !!element.querySelector('ytp-error');
+ }
+
+ return false;
+ }
+}
diff --git a/special-pages/pages/duckplayer/app/features/iframe.js b/special-pages/pages/duckplayer/app/features/iframe.js
index b252724b2a..c9c0fb0ef3 100644
--- a/special-pages/pages/duckplayer/app/features/iframe.js
+++ b/special-pages/pages/duckplayer/app/features/iframe.js
@@ -3,6 +3,7 @@ import { AutoFocus } from './autofocus.js';
import { ClickCapture } from './click-capture.js';
import { TitleCapture } from './title-capture.js';
import { MouseCapture } from './mouse-capture.js';
+import { ErrorDetection } from './error-detection.js';
/**
* Represents an individual piece of functionality in the iframe.
@@ -74,5 +75,11 @@ export function createIframeFeatures(settings) {
mouseCapture: () => {
return new MouseCapture();
},
+ /**
+ * @return {IframeFeature}
+ */
+ errorDetection: () => {
+ return new ErrorDetection(settings.customError);
+ },
};
}
diff --git a/special-pages/pages/duckplayer/app/img/warning-128.data.svg b/special-pages/pages/duckplayer/app/img/warning-128.data.svg
new file mode 100644
index 0000000000..b0392efdce
--- /dev/null
+++ b/special-pages/pages/duckplayer/app/img/warning-128.data.svg
@@ -0,0 +1,8 @@
+
diff --git a/special-pages/pages/duckplayer/app/img/warning-96.data.svg b/special-pages/pages/duckplayer/app/img/warning-96.data.svg
new file mode 100644
index 0000000000..af6bc6fbe9
--- /dev/null
+++ b/special-pages/pages/duckplayer/app/img/warning-96.data.svg
@@ -0,0 +1,7 @@
+
diff --git a/special-pages/pages/duckplayer/app/index.js b/special-pages/pages/duckplayer/app/index.js
index da81d0f8b9..a0722feffc 100644
--- a/special-pages/pages/duckplayer/app/index.js
+++ b/special-pages/pages/duckplayer/app/index.js
@@ -14,6 +14,9 @@ import { Fallback } from '../../../shared/components/Fallback/Fallback.jsx';
import { Components } from './components/Components.jsx';
import { MobileApp } from './components/MobileApp.jsx';
import { DesktopApp } from './components/DesktopApp.jsx';
+import { YouTubeErrorProvider } from './providers/YouTubeErrorProvider';
+
+/** @typedef {import('../types/duckplayer').YouTubeError} YouTubeError */
/**
* @param {import("../src/index.js").DuckplayerPage} messaging
@@ -55,7 +58,11 @@ export async function init(messaging, telemetry, baseEnvironment) {
.withFeatureState('pip', init.settings.pip)
.withFeatureState('autoplay', init.settings.autoplay)
.withFeatureState('focusMode', init.settings.focusMode)
- .withDisabledFocusMode(baseEnvironment.urlParams.get('focusMode'));
+ .withFeatureState('customError', init.settings.customError)
+ .withDisabledFocusMode(baseEnvironment.urlParams.get('focusMode'))
+ .withCustomError(baseEnvironment.urlParams.get('customError'));
+
+ const initialYouTubeError = /** @type {YouTubeError} */ (baseEnvironment.urlParams.get('youtubeError'));
console.log(settings);
@@ -79,27 +86,29 @@ export async function init(messaging, telemetry, baseEnvironment) {
+
+
+
+
+
+ {heading}
+ + {messages && variant === 'inline' && ( ++ {messages.map((item) => ( + {item} + ))} +
+ )} + + {messages && variant === 'paragraphs' && ( +
+ {messages.map((item) => (
+
+ )}
+
+ {messages && variant === 'list' && (
+ {item}
+ ))} +-
+ {messages.map((item) => (
+
- {item} + ))} +