feat: youtube banner

Author: gmorador-tribu

src/sidebar/components/HypothesisApp.tsx

@@ -5,7 +5,10 @@ import { useEffect, useMemo } from 'preact/hooks';
 import type { SidebarSettings } from '../../types/config';
 import { serviceConfig } from '../config/service-config';
 import { isThirdPartyService } from '../helpers/is-third-party-service';
-import { shouldAutoDisplayTutorial } from '../helpers/session';
+import {
+  shouldAutoDisplayTutorial,
+  shouldShowYoutubeDisclaimer,
+} from '../helpers/session';
 import { applyTheme } from '../helpers/theme';
 import { withServices } from '../service-context';
 import type { AuthService } from '../services/auth';
@@ -22,6 +25,7 @@ import SidebarView from './SidebarView';
 import StreamView from './StreamView';
 import ToastMessages from './ToastMessages';
 import TopBar from './TopBar';
+import YouTubeDisclaimerBanner from './YouTubeDisclaimerBanner';
 import SearchPanel from './search/SearchPanel';
 
 export type HypothesisAppProps = {
@@ -164,6 +168,9 @@ function HypothesisApp({
           isSidebar={isSidebar}
         />
       )}
+      {!isModalRoute && shouldShowYoutubeDisclaimer(settings, profile) && (
+        <YouTubeDisclaimerBanner />
+      )}
       <div className="container">
         <ToastMessages />
         <HelpPanel />

src/sidebar/components/YouTubeDisclaimerBanner.tsx

@@ -0,0 +1,44 @@
+import { Button } from '@hypothesis/frontend-shared';
+import classnames from 'classnames';
+
+import { withServices } from '../service-context';
+import type { SessionService } from '../services/session';
+
+/**
+ * Banner shown when the assignment includes embedded YouTube videos (LMS config
+ * `youtubeAssignment: true`). Informs the user about YouTube's data practices
+ * and offers a "Dismiss" button to hide it permanently (persisted in profile).
+ */
+function YouTubeDisclaimerBanner({ session }: { session: SessionService }) {
+  const handleDismiss = () => {
+    session.dismissYoutubeDisclaimer();
+  };
+
+  return (
+    <div
+      className={classnames(
+        'flex flex-col gap-3 p-4 bg-grey-1 border-b border-grey-3 text-color-text',
+        'text-sm',
+      )}
+      data-testid="youtube-disclaimer-banner"
+    >
+      <p className="m-0">
+        This activity includes embedded YouTube videos. Hypothesis does not
+        control whether YouTube displays ads or collects limited technical data
+        such as IP address or device information when videos are viewed. Your
+        institution may choose to disable the YouTube integration at any time.
+      </p>
+      <div>
+        <Button
+          onClick={handleDismiss}
+          variant="primary"
+          data-testid="youtube-disclaimer-dismiss"
+        >
+          Dismiss
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default withServices(YouTubeDisclaimerBanner, ['session']);

src/sidebar/components/test/YouTubeDisclaimerBanner-test.js

@@ -0,0 +1,49 @@
+import { mount } from '@hypothesis/frontend-testing';
+
+import { ServiceContext } from '../../service-context';
+import YouTubeDisclaimerBanner from '../YouTubeDisclaimerBanner';
+
+describe('YouTubeDisclaimerBanner', () => {
+  let fakeSessionService;
+
+  function createComponent() {
+    const injector = {
+      get: sinon.stub().withArgs('session').returns(fakeSessionService),
+    };
+    return mount(
+      <ServiceContext.Provider value={injector}>
+        <YouTubeDisclaimerBanner />
+      </ServiceContext.Provider>,
+    );
+  }
+
+  beforeEach(() => {
+    fakeSessionService = { dismissYoutubeDisclaimer: sinon.stub().resolves() };
+  });
+
+  it('displays the YouTube disclaimer text', () => {
+    const wrapper = createComponent();
+    const text = wrapper.text();
+    assert.include(text, 'This activity includes embedded YouTube videos');
+    assert.include(text, 'Hypothesis does not control whether YouTube');
+    assert.include(text, 'Your institution may choose to disable');
+  });
+
+  it('shows a Dismiss button', () => {
+    const wrapper = createComponent();
+    const dismissButton = wrapper.find(
+      'Button[data-testid="youtube-disclaimer-dismiss"]',
+    );
+    assert.equal(dismissButton.length, 1);
+    assert.include(dismissButton.text(), 'Dismiss');
+  });
+
+  it('calls session.dismissYoutubeDisclaimer when Dismiss is clicked', () => {
+    const wrapper = createComponent();
+    const dismissButton = wrapper.find(
+      'Button[data-testid="youtube-disclaimer-dismiss"]',
+    );
+    dismissButton.props().onClick();
+    assert.calledOnce(fakeSessionService.dismissYoutubeDisclaimer);
+  });
+});

src/sidebar/helpers/session.ts

@@ -42,3 +42,22 @@ export function shouldAutoDisplayTutorial(
 
   return true;
 }
+
+/**
+ * Return true if the YouTube disclaimer banner should be shown.
+ * Show when the assignment is a YouTube assignment (from LMS config) and the
+ * user has not yet dismissed the disclaimer (H backend sends show_youtube_gdpr_banner: true).
+ *
+ * @param settings - Sidebar settings (includes youtubeAssignment from embedder)
+ * @param profile - User profile from the API
+ * @return Whether to show the YouTube disclaimer banner
+ */
+export function shouldShowYoutubeDisclaimer(
+  settings: SidebarSettings,
+  profile: Profile,
+): boolean {
+  if (settings.youtubeAssignment !== true) {
+    return false;
+  }
+  return profile.preferences?.show_youtube_gdpr_banner === true;
+}

src/sidebar/helpers/test/session-test.js

@@ -81,4 +81,50 @@ describe('sidebar/helpers/session', () => {
       });
     });
   });
+
+  describe('shouldShowYoutubeDisclaimer', () => {
+    [
+      {
+        description:
+          'youtubeAssignment is true and H sends show_youtube_gdpr_banner true',
+        settings: { youtubeAssignment: true },
+        profile: { preferences: { show_youtube_gdpr_banner: true } },
+        expected: true,
+      },
+      {
+        description:
+          'youtubeAssignment is true and preference is undefined (no banner)',
+        settings: { youtubeAssignment: true },
+        profile: {},
+        expected: false,
+      },
+      {
+        description:
+          'youtubeAssignment is true but user has dismissed (H omits key)',
+        settings: { youtubeAssignment: true },
+        profile: { preferences: {} },
+        expected: false,
+      },
+      {
+        description: 'youtubeAssignment is false',
+        settings: { youtubeAssignment: false },
+        profile: { preferences: { show_youtube_gdpr_banner: true } },
+        expected: false,
+      },
+      {
+        description: 'youtubeAssignment is undefined',
+        settings: {},
+        profile: { preferences: { show_youtube_gdpr_banner: true } },
+        expected: false,
+      },
+    ].forEach(fixture => {
+      it(`returns ${fixture.expected} when ${fixture.description}`, () => {
+        const result = sessionUtil.shouldShowYoutubeDisclaimer(
+          fixture.settings,
+          fixture.profile,
+        );
+        assert.equal(result, fixture.expected);
+      });
+    });
+  });
 });

src/sidebar/services/session.ts

@@ -95,6 +95,19 @@ export class SessionService {
     this.update(updatedProfile);
   }
 
+  /**
+   * Store the preference server-side that the user dismissed the YouTube
+   * disclaimer banner and then update the local profile data.
+   * Uses show_youtube_gdpr_banner: false (H backend contract).
+   */
+  async dismissYoutubeDisclaimer() {
+    const updatedProfile = await this._api.profile.update(
+      {},
+      { preferences: { show_youtube_gdpr_banner: false } },
+    );
+    this.update(updatedProfile);
+  }
+
   /**
    * Persist the user's keyboard shortcut overrides server-side.
    */

src/sidebar/services/test/session-test.js

@@ -289,6 +289,37 @@ describe('SessionService', () => {
     });
   });
 
+  describe('#dismissYoutubeDisclaimer', () => {
+    beforeEach(() => {
+      fakeApi.profile.update.returns(
+        Promise.resolve({
+          preferences: {},
+        }),
+      );
+    });
+
+    it('calls H backend with show_youtube_gdpr_banner: false to persist dismiss', () => {
+      const session = createService();
+      session.dismissYoutubeDisclaimer();
+      assert.calledWith(
+        fakeApi.profile.update,
+        {},
+        {
+          preferences: { show_youtube_gdpr_banner: false },
+        },
+      );
+    });
+
+    it('updates the session with the response from the API', () => {
+      const session = createService();
+      const updatedProfile = { preferences: {} };
+      fakeApi.profile.update.resolves(updatedProfile);
+      return session.dismissYoutubeDisclaimer().then(() => {
+        assert.calledWith(fakeStore.updateProfile, updatedProfile);
+      });
+    });
+  });
+
   describe('#reload', () => {
     beforeEach(() => {
       // Load the initial profile data, as the client will do on startup.

src/types/api.ts

@@ -368,6 +368,8 @@ export type Profile = {
   preferences: {
     show_sidebar_tutorial?: boolean;
     shortcuts_preferences?: ShortcutsPreferences;
+    /** When true, user has not dismissed the YouTube GDPR banner (from H backend). */
+    show_youtube_gdpr_banner?: boolean;
   };
   features: Record<string, boolean>;
   user_info?: UserInfo;

src/types/config.ts

@@ -333,4 +333,10 @@ export type ConfigFromEmbedder = ConfigFromHost & {
 
   /** Configuration for menu items etc. related to LMS instructor dashboard */
   dashboard?: DashboardConfig;
+
+  /**
+   * When true, indicates the assignment content is a YouTube video.
+   * Set by the LMS when the document URL is a YouTube URL and YouTube is enabled.
+   */
+  youtubeAssignment?: boolean;
 };