Better UX when attempting to record DRM-protected stream on firefox

- Creates flashcard anyway, but shows error message in audio field,
  instead of blocking mining altogether with an error dialog.

common/anki/anki.ts

@@ -103,7 +103,8 @@ export async function exportCard(card: CardModel, ankiSettings: AnkiSettings, ex
                   card.subtitle.end,
                   card.audio.playbackRate ?? 1,
                   card.audio.base64,
-                  card.audio.extension
+                  card.audio.extension,
+                  card.audio.error
               );
 
     return await anki.export(
@@ -240,7 +241,7 @@ export class Anki {
         const gui = mode === 'gui';
         const updateLast = mode === 'updateLast';
 
-        if (this.settingsProvider.audioField && audioClip && audioClip.isPlayable()) {
+        if (this.settingsProvider.audioField && audioClip && audioClip.error !== undefined) {
             const sanitizedName = this._sanitizeFileName(audioClip.name);
             const data = await audioClip.base64();
 

common/app/components/App.tsx

@@ -565,14 +565,14 @@ function App({ origin, logoUrl, settings, extension, fetcher, onSettingsChanged
             try {
                 const clip = AudioClip.fromCard(card, settings.audioPaddingStart, settings.audioPaddingEnd);
 
-                if (clip?.isPlayable()) {
+                if (clip?.error === undefined) {
                     if (settings.preferMp3) {
                         clip!.toMp3(mp3WorkerFactory).download();
                     } else {
                         clip!.download();
                     }
                 } else {
-                    handleError(t('ankiDialog.audioFileLinkLost'));
+                    handleError(t(clip.errorLocKey!));
                 }
             } catch (e) {
                 handleError(e);

common/app/components/CopyHistoryList.tsx

@@ -80,7 +80,7 @@ const useAudioAvailability = (item: CopyHistoryItem) => {
         const clip = AudioClip.fromCard(item, 0, 0);
 
         if (clip) {
-            setIsAudioAvailable(clip.isPlayable());
+            setIsAudioAvailable(clip.error === undefined);
         } else {
             setIsAudioAvailable(false);
         }

common/audio-clip/audio-clip.ts

@@ -1,6 +1,6 @@
 import Mp3Encoder from './mp3-encoder';
 
-import { CardModel, FileModel } from '@project/common';
+import { AudioErrorCode, CardModel, FileModel } from '@project/common';
 import { download } from '@project/common/util';
 import { isActiveBlobUrl } from '../blob-url';
 
@@ -27,7 +27,7 @@ interface AudioData {
     base64: () => Promise<string>;
     slice: (start: number, end: number) => AudioData;
     isSliceable: () => boolean;
-    isPlayable: () => boolean;
+    error?: AudioErrorCode;
 }
 
 function recorderConfiguration() {
@@ -47,18 +47,28 @@ class Base64AudioData implements AudioData {
     private readonly playbackRate: number;
     private readonly _base64: string;
     private readonly _extension: string;
+    private readonly _error?: AudioErrorCode;
 
     private playingAudio?: HTMLAudioElement;
     private stopAudioTimeout?: NodeJS.Timeout;
     private cachedBlob?: Blob;
 
-    constructor(baseName: string, start: number, end: number, playbackRate: number, base64: string, extension: string) {
+    constructor(
+        baseName: string,
+        start: number,
+        end: number,
+        playbackRate: number,
+        base64: string,
+        extension: string,
+        error: AudioErrorCode | undefined
+    ) {
         this._name = makeFileName(baseName, start);
         this._start = start;
         this._end = end;
         this.playbackRate = playbackRate;
         this._base64 = base64;
         this._extension = extension;
+        this._error = error;
     }
 
     get name(): string {
@@ -142,8 +152,8 @@ class Base64AudioData implements AudioData {
         return false;
     }
 
-    isPlayable() {
-        return true;
+    get error() {
+        return this._error;
     }
 }
 
@@ -404,12 +414,12 @@ class FileAudioData implements AudioData {
         return true;
     }
 
-    isPlayable() {
+    get error() {
         if (this.file.blobUrl) {
-            return isActiveBlobUrl(this.file.blobUrl);
+            return isActiveBlobUrl(this.file.blobUrl) ? undefined : AudioErrorCode.fileLinkLost;
         }
 
-        return false;
+        return undefined;
     }
 }
 
@@ -479,8 +489,8 @@ class Mp3AudioData implements AudioData {
         return this.data.isSliceable();
     }
 
-    isPlayable() {
-        return this.data.isPlayable();
+    get error() {
+        return this.data.error;
     }
 }
 
@@ -502,7 +512,8 @@ export default class AudioClip {
                 end + (card.audio.paddingEnd ?? 0),
                 card.audio.playbackRate ?? 1,
                 card.audio.base64,
-                card.audio.extension
+                card.audio.extension,
+                card.audio.error
             );
         }
 
@@ -525,7 +536,8 @@ export default class AudioClip {
         end: number,
         playbackRate: number,
         base64: string,
-        extension: string
+        extension: string,
+        error: AudioErrorCode | undefined
     ) {
         return new AudioClip(
             new Base64AudioData(
@@ -534,7 +546,8 @@ export default class AudioClip {
                 end,
                 playbackRate,
                 base64,
-                extension
+                extension,
+                error
             )
         );
     }
@@ -596,7 +609,20 @@ export default class AudioClip {
         return this.data.isSliceable();
     }
 
-    isPlayable() {
-        return this.data.isPlayable();
+    get error() {
+        return this.data.error;
+    }
+
+    get errorLocKey() {
+        if (this.data.error === undefined) {
+            return undefined;
+        }
+
+        switch (this.data.error) {
+            case AudioErrorCode.drmProtected:
+                return 'audioCaptureFailed.message';
+            case AudioErrorCode.fileLinkLost:
+                return 'ankiDialog.audioFileLinkLost';
+        }
     }
 }

common/components/AnkiDialog.tsx

@@ -2,7 +2,7 @@ import React, { MutableRefObject, useCallback, useState, useEffect, useMemo } fr
 import { useTranslation } from 'react-i18next';
 import makeStyles from '@material-ui/core/styles/makeStyles';
 import withStyles from '@material-ui/core/styles/withStyles';
-import { Image, SubtitleModel, CardModel } from '@project/common';
+import { Image, SubtitleModel, CardModel, AudioErrorCode } from '@project/common';
 import { AnkiSettings } from '@project/common/settings';
 import {
     humanReadableTime,
@@ -173,7 +173,7 @@ const useAudioHelperText = (audioClip?: AudioClip, onRerecord?: () => void) => {
 
     useEffect(() => {
         if (audioClip) {
-            const playable = audioClip.isPlayable();
+            const playable = audioClip.error === undefined;
             setAudioClipPlayable(playable);
 
             if (playable) {
@@ -183,7 +183,7 @@ const useAudioHelperText = (audioClip?: AudioClip, onRerecord?: () => void) => {
                     setAudioHelperText(undefined);
                 }
             } else {
-                setAudioHelperText(t('ankiDialog.audioFileLinkLost')!);
+                setAudioHelperText(t(audioClip.errorLocKey!)!);
             }
         }
     }, [audioClip, onRerecord, t]);
@@ -469,7 +469,7 @@ const AnkiDialog = ({
 
     const handlePlayAudio = useCallback(
         async (e: React.MouseEvent<HTMLDivElement>) => {
-            if (!audioClip?.isPlayable()) {
+            if (audioClip?.error !== undefined) {
                 return;
             }
 
@@ -649,7 +649,11 @@ const AnkiDialog = ({
         audioActionElement = (
             <Tooltip title={t('ankiDialog.rerecord')!}>
                 <span>
-                    <IconButton onClick={handleApplyTimestampIntervalToAudio} edge="end">
+                    <IconButton
+                        disabled={audioClip?.error !== undefined}
+                        onClick={handleApplyTimestampIntervalToAudio}
+                        edge="end"
+                    >
                         <FiberManualRecordIcon />
                     </IconButton>
                 </span>

common/src/model.ts

@@ -64,6 +64,11 @@ export interface ImageModel {
     readonly extension: 'jpeg';
 }
 
+export enum AudioErrorCode {
+    drmProtected = 1,
+    fileLinkLost = 2,
+}
+
 export interface AudioModel {
     readonly base64: string;
     readonly extension: 'webm' | 'mp3';
@@ -72,6 +77,7 @@ export interface AudioModel {
     readonly start?: number;
     readonly end?: number;
     readonly playbackRate?: number;
+    readonly error?: AudioErrorCode;
 }
 
 export interface AnkiUiState extends CardTextFieldValues {

extension/src/background.ts

@@ -114,7 +114,7 @@ const handlers: CommandHandler[] = [
     new VideoHeartbeatHandler(tabRegistry),
     new RecordMediaHandler(audioRecorder, imageCapturer, cardPublisher, settings),
     new RerecordMediaHandler(settings, audioRecorder, cardPublisher),
-    new StartRecordingMediaHandler(audioRecorder, imageCapturer, cardPublisher),
+    new StartRecordingMediaHandler(audioRecorder, imageCapturer, cardPublisher, settings),
     new StopRecordingMediaHandler(audioRecorder, imageCapturer, cardPublisher, settings),
     new TakeScreenshotHandler(imageCapturer, cardPublisher),
     new ToggleSubtitlesHandler(settings, tabRegistry),

extension/src/handlers/video/record-media-handler.ts

@@ -8,12 +8,13 @@ import {
     VideoToExtensionCommand,
     ExtensionToVideoCommand,
     ScreenshotTakenMessage,
-    RecordingFinishedMessage,
     CardModel,
+    AudioErrorCode,
 } from '@project/common';
 import { SettingsProvider } from '@project/common/settings';
 import { CardPublisher } from '../../services/card-publisher';
 import AudioRecorderService from '../../services/audio-recorder-service';
+import { DrmProtectedStreamError } from '../../services/audio-recorder-delegate';
 
 export default class RecordMediaHandler {
     private readonly _audioRecorder: AudioRecorderService;
@@ -90,14 +91,35 @@ export default class RecordMediaHandler {
         }
 
         if (audioPromise) {
-            const audioBase64 = await audioPromise;
-            audioModel = {
-                base64: audioBase64,
+            const {
+                audioPaddingStart: paddingStart,
+                audioPaddingEnd: paddingEnd,
+                playbackRate,
+            } = recordMediaCommand.message;
+            const baseAudioModel: AudioModel = {
+                base64: '',
                 extension: preferMp3 ? 'mp3' : 'webm',
-                paddingStart: recordMediaCommand.message.audioPaddingStart,
-                paddingEnd: recordMediaCommand.message.audioPaddingEnd,
-                playbackRate: recordMediaCommand.message.playbackRate,
+                paddingStart,
+                paddingEnd,
+                playbackRate,
             };
+
+            try {
+                const audioBase64 = await audioPromise;
+                audioModel = {
+                    ...baseAudioModel,
+                    base64: audioBase64,
+                };
+            } catch (e) {
+                if (!(e instanceof DrmProtectedStreamError)) {
+                    throw e;
+                }
+
+                audioModel = {
+                    ...baseAudioModel,
+                    error: AudioErrorCode.drmProtected,
+                };
+            }
         }
 
         if (imagePromise) {

extension/src/handlers/video/rerecord-media-handler.ts

@@ -1,16 +1,17 @@
 import {
+    AudioErrorCode,
     AudioModel,
     Command,
     ExtensionToVideoCommand,
     Message,
-    RecordingFinishedMessage,
     RerecordMediaMessage,
     ShowAnkiUiAfterRerecordMessage,
     VideoToExtensionCommand,
 } from '@project/common';
 import { CardPublisher } from '../../services/card-publisher';
 import { SettingsProvider } from '@project/common/settings';
 import AudioRecorderService from '../../services/audio-recorder-service';
+import { DrmProtectedStreamError } from '../../services/audio-recorder-delegate';
 
 export default class RerecordMediaHandler {
     private readonly _settingsProvider: SettingsProvider;
@@ -34,13 +35,8 @@ export default class RerecordMediaHandler {
     async handle(command: Command<Message>, sender: chrome.runtime.MessageSender) {
         const rerecordCommand = command as VideoToExtensionCommand<RerecordMediaMessage>;
         const preferMp3 = await this._settingsProvider.getSingle('preferMp3');
-        const audio: AudioModel = {
-            base64: await this._audioRecorder.startWithTimeout(
-                rerecordCommand.message.duration / rerecordCommand.message.playbackRate +
-                    rerecordCommand.message.audioPaddingEnd,
-                preferMp3,
-                { src: rerecordCommand.src, tabId: sender.tab?.id! }
-            ),
+        const baseAudioModel: AudioModel = {
+            base64: '',
             extension: preferMp3 ? 'mp3' : 'webm',
             paddingStart: rerecordCommand.message.audioPaddingStart,
             paddingEnd: rerecordCommand.message.audioPaddingEnd,
@@ -50,6 +46,28 @@ export default class RerecordMediaHandler {
                 rerecordCommand.message.duration / rerecordCommand.message.playbackRate,
             playbackRate: rerecordCommand.message.playbackRate,
         };
+        let audio: AudioModel;
+
+        try {
+            audio = {
+                ...baseAudioModel,
+                base64: await this._audioRecorder.startWithTimeout(
+                    rerecordCommand.message.duration / rerecordCommand.message.playbackRate +
+                        rerecordCommand.message.audioPaddingEnd,
+                    preferMp3,
+                    { src: rerecordCommand.src, tabId: sender.tab?.id! }
+                ),
+            };
+        } catch (e) {
+            if (!(e instanceof DrmProtectedStreamError)) {
+                throw e;
+            }
+
+            audio = {
+                ...baseAudioModel,
+                error: AudioErrorCode.drmProtected,
+            };
+        }
 
         this._cardPublisher.publish(
             {