Add viewer ID tracking for embedded content progress aggregation

ContentViewer now generates unique viewer IDs and appends them to all
interaction events, allowing parent components to track which embedded
viewer emitted each event.

SafeHtml5RendererIndex uses this to aggregate progress from multiple
embedded viewers (e.g., videos in HTML5 content), combining scroll-based
progress with embedded viewer progress using dynamic weighting.

Author: rtibbles

kolibri/plugins/safe_html5_viewer/frontend/views/SafeHtml5RendererIndex.vue

@@ -14,7 +14,14 @@
       role="region"
       :aria-label="$tr('articleContent')"
     >
-      <SafeHTML :html="html" />
+      <SafeHTML
+        :html="html"
+        @startTracking="handleViewerStartTracking"
+        @stopTracking="handleViewerStopTracking"
+        @updateProgress="handleViewerUpdateProgress"
+        @addProgress="handleViewerAddProgress"
+        @finished="handleViewerFinished"
+      />
     </div>
   </div>
 
@@ -52,12 +59,50 @@
         html: null,
         scrollBasedProgress: 0,
         debouncedHandleScroll: null,
+        // Track embedded viewers for progress aggregation
+        // Using object instead of Map for Vue 2.7 reactivity
+        // Structure: { viewerId: { progress: number, complete: boolean } }
+        embeddedViewers: {},
+        // Guard to prevent emitting 'finished' multiple times
+        hasEmittedFinished: false,
       };
     },
     computed: {
       entry() {
         return (this.options && this.options.entry) || 'index.html';
       },
+      // Count of registered embedded viewers
+      viewerCount() {
+        return Object.keys(this.embeddedViewers).length;
+      },
+      // Aggregated progress using dynamic weighting
+      // If no embedded viewers: progress = scrollBasedProgress
+      // If viewers exist: progress = (scrollBasedProgress + avgViewerProgress) / 2
+      aggregatedProgress() {
+        if (this.viewerCount === 0) {
+          return this.scrollBasedProgress;
+        }
+
+        let totalViewerProgress = 0;
+        for (const viewer of Object.values(this.embeddedViewers)) {
+          totalViewerProgress += viewer.progress;
+        }
+        const avgViewerProgress = totalViewerProgress / this.viewerCount;
+
+        // Dynamic weighting: 50% scroll, 50% viewers
+        return (this.scrollBasedProgress + avgViewerProgress) / 2;
+      },
+      // Whether all sources are complete
+      allSourcesComplete() {
+        // All viewers must be complete
+        for (const viewer of Object.values(this.embeddedViewers)) {
+          if (!viewer.complete) {
+            return false;
+          }
+        }
+
+        return true;
+      },
     },
     async created() {
       const storageUrl = this.defaultFile.storage_url;
@@ -100,18 +145,67 @@
           }
         });
       },
+
+      // Handle startTracking from embedded viewers
+      handleViewerStartTracking(viewerId) {
+        if (viewerId && !this.embeddedViewers[viewerId]) {
+          this.$set(this.embeddedViewers, viewerId, { progress: 0, complete: false });
+        }
+      },
+
+      // Handle stopTracking from embedded viewers
+      handleViewerStopTracking(viewerId) {
+        if (viewerId) {
+          this.$delete(this.embeddedViewers, viewerId);
+        }
+      },
+
+      // Handle updateProgress from embedded viewers
+      handleViewerUpdateProgress(progress, viewerId) {
+        if (viewerId && this.embeddedViewers[viewerId]) {
+          this.$set(this.embeddedViewers, viewerId, {
+            ...this.embeddedViewers[viewerId],
+            progress: Math.min(1, Math.max(0, progress)),
+          });
+        }
+      },
+
+      // Handle addProgress from embedded viewers
+      handleViewerAddProgress(delta, viewerId) {
+        if (viewerId) {
+          const viewer = this.embeddedViewers[viewerId];
+          if (viewer) {
+            const newProgress = Math.min(1, Math.max(0, viewer.progress + delta));
+            this.$set(this.embeddedViewers, viewerId, {
+              ...viewer,
+              progress: newProgress,
+            });
+          }
+        }
+      },
+
+      // Handle finished from embedded viewers
+      handleViewerFinished(viewerId) {
+        if (viewerId && this.embeddedViewers[viewerId]) {
+          this.$set(this.embeddedViewers, viewerId, {
+            progress: 1,
+            complete: true,
+          });
+        }
+      },
+
       recordProgress() {
         let progress;
         if (this.forceDurationBasedProgress) {
           progress = this.durationBasedProgress;
         } else {
-          // Use scroll events to track progress
-          progress = this.scrollBasedProgress;
+          // Use aggregated progress from scroll + embedded viewers
+          progress = this.aggregatedProgress;
         }
         this.$emit('updateProgress', progress);
-
-        if (progress >= 1) {
+        if (progress >= 1 && this.allSourcesComplete && !this.hasEmittedFinished) {
           this.$emit('finished');
+          this.hasEmittedFinished = true;
         }
         this.pollProgress();
       },

kolibri/plugins/safe_html5_viewer/frontend/views/__tests__/SafeHtml5RendererIndex.spec.js

@@ -1,7 +1,16 @@
 import { render, screen, waitFor } from '@testing-library/vue';
 import { createTranslator } from 'kolibri/utils/i18n';
+// eslint-disable-next-line import-x/named
+import useContentViewer, { useContentViewerMock } from 'kolibri/composables/useContentViewer';
 import SafeHtml5RendererIndex from '../SafeHtml5RendererIndex.vue';
 
+// Mock kolibri to prevent initialization side effects
+jest.mock('kolibri', () => ({
+  canHandleElement: jest.fn(() => false),
+}));
+
+jest.mock('kolibri/composables/useContentViewer');
+
 const { articleContent$ } = createTranslator(
   SafeHtml5RendererIndex.name,
   SafeHtml5RendererIndex.$trs,
@@ -31,13 +40,9 @@ jest.mock('kolibri-zip', () => {
   }));
 });
 
-const DUMMY_HTML5_URL = 'mock://test.html';
 const renderComponent = (dataOverrides = {}) => {
   return render(SafeHtml5RendererIndex, {
-    data: () => ({
-      defaultFile: { storage_url: DUMMY_HTML5_URL },
-      ...dataOverrides,
-    }),
+    data: () => dataOverrides,
   });
 };
 
@@ -57,6 +62,12 @@ async function setupTableContainer(scrollWidth, clientWidth) {
 }
 
 describe('SafeHtml5RendererIndex', () => {
+  beforeEach(() => {
+    useContentViewer.mockImplementation(() =>
+      useContentViewerMock({ defaultFile: { storage_url: 'mock://test.html' } }),
+    );
+  });
+
   describe('first render', () => {
     it('smoke test', async () => {
       renderComponent();
@@ -79,9 +90,11 @@ describe('SafeHtml5RendererIndex', () => {
       renderComponent();
       await waitFor(() => {
         expect(screen.getByLabelText(articleContent$())).toBeInTheDocument();
-        expect(screen.getByText(HEADING)).toBeInTheDocument();
-        expect(screen.getByText(TABLE_CAPTION)).toBeInTheDocument();
-        CELLS.forEach(cell => expect(screen.getByText(cell)).toBeInTheDocument());
+        expect(screen.getByRole('heading', { name: HEADING, level: 1 })).toBeInTheDocument();
+        expect(screen.getByText(TABLE_CAPTION).tagName).toBe('CAPTION');
+        CELLS.forEach(cell => {
+          expect(screen.getByRole('cell', { name: cell })).toBeInTheDocument();
+        });
       });
     });
   });