flan/advanced-camera-card
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Always respect the returned MIME type (#2473)

Browse Source 
- Closes #2449
This commit is contained in:
Dermot Duffy
2026-06-30 17:45:12 -07:00
committed by dermotduffy
parent 591f466b92
commit 31d0c9322f
10 changed files with 88 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/camera-manager/frigate/media.ts
-10
View File
@@ -6,7 +6,6 @@ import {
EventViewMedia,
RecordingViewMedia,
ReviewViewMedia,
VideoContentType,
ViewMedia,
ViewMediaType,
} from '../../view/item';
@@ -60,9 +59,6 @@ export class FrigateEventViewMedia extends ViewMedia implements EventViewMedia {
// progress.
return !this.getEndTime();
}
public getVideoContentType(): VideoContentType | null {
return VideoContentType.HLS;
}
public getID(): string {
return this._event.id;
}
@@ -141,9 +137,6 @@ export class FrigateRecordingViewMedia extends ViewMedia implements RecordingVie
// progress.
return !this.getEndTime();
}
public getVideoContentType(): VideoContentType | null {
return VideoContentType.HLS;
}
public getContentID(): string | null {
return this._contentID;
}
@@ -186,9 +179,6 @@ export class FrigateReviewViewMedia extends ViewMedia implements ReviewViewMedia
public inProgress(): boolean | null {
return !this.getEndTime();
}
public getVideoContentType(): VideoContentType | null {
return VideoContentType.HLS;
}
public getContentID(): string | null {
return this._contentID;
}
src/components/viewer/provider.ts
+17 -15
View File
@@ -22,13 +22,14 @@ import { ViewerConfig } from '../../config/schema/viewer.js';
import { canonicalizeHAURL } from '../../ha/canonical-url.js';
import { isHARelativeURL } from '../../ha/is-ha-relative-url.js';
import { ResolvedMediaCache, resolveMedia } from '../../ha/resolved-media.js';
import { HomeAssistant } from '../../ha/types.js';
import { HomeAssistant, ResolvedMedia } from '../../ha/types.js';
import { localize } from '../../localize/localize.js';
import '../../patches/ha-hls-player.js';
import viewerProviderStyle from '../../scss/viewer-provider.scss';
import { MediaPlayer, MediaPlayerController, MediaPlayerElement } from '../../types.js';
import { classifyMimeType } from '../../utils/mime-type.js';
import { ViewItemClassifier } from '../../view/item-classifier.js';
import { VideoContentType, ViewMedia } from '../../view/item.js';
import { ViewMedia } from '../../view/item.js';
import { UnifiedQueryTransformer } from '../../view/unified-query-transformer.js';
import '../image-player.js';
import { renderNotificationBlockFromText } from '../notification/block.js';
@@ -62,23 +63,23 @@ export class AdvancedCameraCardViewerProvider extends LitElement implements Medi
private _refProvider: Ref<MediaPlayerElement> = createRef();
private _lazyLoadController: LazyLoadController = new LazyLoadController(this);
private _resolvedMediaURL: string | null = null;
private _resolvedMedia: ResolvedMedia | null = null;
private _signedURLController = new SignedURLController(this, () => {
if (!this.hass || !this._resolvedMediaURL) {
if (!this.hass || !this._resolvedMedia) {
return {};
}
// HA-relative URLs need no proxying or signing.
if (isHARelativeURL(this._resolvedMediaURL)) {
if (isHARelativeURL(this._resolvedMedia.url)) {
return {
endpoint: { endpoint: canonicalizeHAURL(this.hass, this._resolvedMediaURL) },
endpoint: { endpoint: canonicalizeHAURL(this.hass, this._resolvedMedia.url) },
};
}
const cameraID = this.media?.getCameraID();
const camera = cameraID ? this.cameraManager?.getStore().getCamera(cameraID) : null;
return {
hass: this.hass,
endpoint: { endpoint: this._resolvedMediaURL },
endpoint: { endpoint: this._resolvedMedia.url },
proxyConfig: camera?.getMediaProxyConfig(),
};
});
@@ -128,19 +129,18 @@ export class AdvancedCameraCardViewerProvider extends LitElement implements Medi
private async _resolveURL(): Promise<void> {
const contentID = this.media?.getContentID();
if (!contentID || !this.hass || !this._lazyLoadController?.isLoaded()) {
this._resolvedMediaURL = null;
this._resolvedMedia = null;
return;
}
// Clear immediately so the SignedURLController doesn't see a stale URL
// from the previous media item during the async gap.
this._resolvedMediaURL = null;
this._resolvedMedia = null;
const resolved =
this._resolvedMedia =
this.resolvedMediaCache?.get(contentID) ??
(await resolveMedia(this.hass, contentID, this.resolvedMediaCache));
this._resolvedMediaURL = resolved?.url ?? null;
(await resolveMedia(this.hass, contentID, this.resolvedMediaCache)) ??
null;
this.requestUpdate();
}
@@ -251,9 +251,11 @@ export class AdvancedCameraCardViewerProvider extends LitElement implements Medi
// Note: crossorigin="anonymous" is required on <video> below in order to
// allow screenshot of motionEye videos which currently go cross-origin.
const mediaID = this.media.getID() ?? undefined;
const { isHLS, isVideo } = classifyMimeType(this._resolvedMedia?.mime_type);
return this._renderContainer(html`
${ViewItemClassifier.isVideo(this.media)
? this.media.getVideoContentType() === VideoContentType.HLS
${isVideo
? isHLS
? html`<advanced-camera-card-ha-hls-player
${ref(this._refProvider)}
allow-exoplayer
src/ha/browse-media/item.ts
-4
View File
@@ -5,7 +5,6 @@ import { FolderConfig } from '../../config/schema/folders';
import { formatDateAndTime } from '../../utils/basic';
import {
EventViewMedia,
VideoContentType,
ViewFolder,
ViewMedia,
ViewMediaSourceOptions,
@@ -78,9 +77,6 @@ export class BrowseMediaEventViewMedia extends ViewMedia implements EventViewMed
public getEndTime(): Date | null {
return this._browseMedia._metadata?.endDate ?? null;
}
public getVideoContentType(): VideoContentType | null {
return this._mediaType === ViewMediaType.Clip ? VideoContentType.MP4 : null;
}
public getID(): string {
return this._id;
}
src/utils/mime-type.ts
+19
View File
@@ -0,0 +1,19 @@
interface MimeTypeClassification {
isHLS: boolean;
isVideo: boolean;
}
/**
* Classifies a MIME type for player selection.
*
* RFC 6838 declares MIME types case-insensitive (e.g. Frigate emits
* `application/x-mpegURL`), so input is normalized before comparison.
*/
export const classifyMimeType = (mimeType?: string): MimeTypeClassification => {
const normalized = mimeType?.toLowerCase();
const isHLS =
normalized === 'application/vnd.apple.mpegurl' ||
normalized === 'application/x-mpegurl';
const isVideo = isHLS || !!normalized?.startsWith('video/');
return { isHLS, isVideo };
};
src/view/item.ts
-8
View File
@@ -10,11 +10,6 @@ export enum ViewMediaType {
Review = 'review',
}
export enum VideoContentType {
MP4 = 'mp4',
HLS = 'hls',
}
export interface ViewMediaSourceOptions {
cameraID?: string;
folder?: FolderConfig;
@@ -40,9 +35,6 @@ export class ViewMedia {
public getMediaType(): ViewMediaType {
return this._mediaType;
}
public getVideoContentType(): VideoContentType | null {
return null;
}
public getID(): string | null {
return null;
}
tests/camera-manager/frigate/media.test.ts
-33
View File
@@ -74,17 +74,6 @@ describe('FrigateEventViewMedia', () => {
expect(media.inProgress()).toBe(false);
});
it('should get video content type as HLS', () => {
const media = new FrigateEventViewMedia(
ViewMediaType.Clip,
'camera',
createFrigateEvent(),
'content_id',
'thumbnail',
);
expect(media.getVideoContentType()).toBe('hls');
});
it('should get ID', () => {
const event = createFrigateEvent({
id: 'test-event-id',
@@ -384,18 +373,6 @@ describe('FrigateRecordingViewMedia', () => {
expect(media.inProgress()).toBe(false);
});
it('should get video content type as HLS', () => {
const media = new FrigateRecordingViewMedia(
ViewMediaType.Recording,
'camera',
createFrigateRecording(),
'id',
'content_id',
'title',
);
expect(media.getVideoContentType()).toBe('hls');
});
it('should get content ID', () => {
const media = new FrigateRecordingViewMedia(
ViewMediaType.Recording,
@@ -476,16 +453,6 @@ describe('FrigateReviewViewMedia', () => {
expect(media.inProgress()).toBe(false);
});
it('should get video content type as HLS', () => {
const media = new FrigateReviewViewMedia(
'camera',
createFrigateReview(),
'content_id',
'thumb',
);
expect(media.getVideoContentType()).toBe('hls');
});
it('should get content ID', () => {
const media = new FrigateReviewViewMedia(
'camera',
tests/camera-manager/reolink/engine-reolink.test.ts
-1
View File
@@ -1017,7 +1017,6 @@ describe('ReolinkCameraManagerEngine', () => {
expect(media?.[0].getCameraID()).toBe('office');
expect(media?.[0].getStartTime()).toEqual(new Date('2024-11-04T21:00:00'));
expect(media?.[0].getEndTime()).toEqual(new Date('2024-11-04T22:00:00'));
expect(media?.[0].getVideoContentType()).toBe('mp4');
expect(media?.[0].getID()).toBe('office/2024-11-04 21:00:00');
expect(media?.[0].getContentID()).toBe(
'media-source://reolink/FILE|01J8XHYTNH77WE3C654K03KX1F|0|sub|Rec_20241105_052353_211_S.mp4',
tests/ha/browse-media/item.test.ts
+1 -18
View File
@@ -5,7 +5,7 @@ import {
BrowseMediaViewFolder,
} from '../../../src/ha/browse-media/item';
import { formatDateAndTime } from '../../../src/utils/basic';
import { VideoContentType, ViewMediaType } from '../../../src/view/item';
import { ViewMediaType } from '../../../src/view/item';
import {
createBrowseMedia,
createFolder,
@@ -103,23 +103,6 @@ describe('BrowseMediaEventViewMedia', () => {
});
});
describe('should get video content type', () => {
it('should get video content type for clip', () => {
const browseMedia = createRichBrowseMedia();
const viewMedia = new BrowseMediaEventViewMedia(ViewMediaType.Clip, browseMedia);
expect(viewMedia.getVideoContentType()).toBe(VideoContentType.MP4);
});
it('should get null for snapshot', () => {
const browseMedia = createBrowseMedia();
const viewMedia = new BrowseMediaEventViewMedia(
ViewMediaType.Snapshot,
browseMedia,
);
expect(viewMedia.getVideoContentType()).toBeNull();
});
});
it('should get content ID', () => {
const browseMedia = createBrowseMedia({
media_content_id: 'media_content_id',
tests/utils/mime-type.test.ts
+50
View File
@@ -0,0 +1,50 @@
import { describe, expect, it } from 'vitest';
import { classifyMimeType } from '../../src/utils/mime-type';
describe('classifyMimeType', () => {
it('classifies undefined as neither video nor HLS', () => {
expect(classifyMimeType(undefined)).toEqual({ isHLS: false, isVideo: false });
});
it('classifies an empty string as neither video nor HLS', () => {
expect(classifyMimeType('')).toEqual({ isHLS: false, isVideo: false });
});
it('classifies application/vnd.apple.mpegurl as HLS and video', () => {
expect(classifyMimeType('application/vnd.apple.mpegurl')).toEqual({
isHLS: true,
isVideo: true,
});
});
it('classifies application/x-mpegurl as HLS and video', () => {
expect(classifyMimeType('application/x-mpegurl')).toEqual({
isHLS: true,
isVideo: true,
});
});
it('treats HLS mime types as case-insensitive', () => {
expect(classifyMimeType('application/x-mpegURL')).toEqual({
isHLS: true,
isVideo: true,
});
expect(classifyMimeType('APPLICATION/VND.APPLE.MPEGURL')).toEqual({
isHLS: true,
isVideo: true,
});
});
it('classifies video/* as video but not HLS', () => {
expect(classifyMimeType('video/mp4')).toEqual({ isHLS: false, isVideo: true });
expect(classifyMimeType('VIDEO/WEBM')).toEqual({ isHLS: false, isVideo: true });
});
it('classifies non-video mime types as neither', () => {
expect(classifyMimeType('image/jpeg')).toEqual({ isHLS: false, isVideo: false });
expect(classifyMimeType('application/json')).toEqual({
isHLS: false,
isVideo: false,
});
});
});
tests/view/item.test.ts
+1 -16
View File
@@ -1,21 +1,7 @@
import { beforeEach, describe, expect, it, vi } from 'vitest';
import {
VideoContentType,
ViewFolder,
ViewMedia,
ViewMediaType,
} from '../../src/view/item';
import { ViewFolder, ViewMedia, ViewMediaType } from '../../src/view/item';
import { createFolder, TestViewMedia } from '../test-utils';
describe('VideoContentType', () => {
it('MP4', () => {
expect(VideoContentType.MP4).toBe('mp4');
});
it('HLS', () => {
expect(VideoContentType.HLS).toBe('hls');
});
});
describe('ViewMedia', () => {
beforeEach(() => {
vi.useRealTimers();
@@ -27,7 +13,6 @@ describe('ViewMedia', () => {
});
expect(media.getCameraID()).toBe('camera');
expect(media.getMediaType()).toBe('clip');
expect(media.getVideoContentType()).toBeNull();
expect(media.getID()).toBeNull();
expect(media.getStartTime()).toBeNull();
expect(media.getEndTime()).toBeNull();