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

fix: Render media correctly in rtl languages (#1757)

Browse Source
This commit is contained in:
Dermot Duffy
2024-12-14 14:58:22 -08:00
committed by GitHub
parent dc5de02e02
commit cebd4b215b
10 changed files with 160 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/carousel.ts
+4 -2
View File
@@ -15,6 +15,7 @@ import {
CarouselController,
CarouselDirection,
} from '../utils/embla/carousel-controller';
import { getTextDirection } from '../utils/text-direction';
export type EmblaCarouselPlugins = CreatePluginType<
LoosePluginType,
@@ -85,13 +86,13 @@ export class FrigateCardCarousel extends LitElement {
protected render(): TemplateResult | void {
return html` <div class="embla">
<slot name="previous"></slot>
<slot name="left"></slot>
<div ${ref(this._refRoot)} class="embla__viewport">
<div class="embla__container">
<slot ${ref(this._refParent)}></slot>
</div>
</div>
<slot name="next"></slot>
<slot name="right"></slot>
</div>`;
}
@@ -108,6 +109,7 @@ export class FrigateCardCarousel extends LitElement {
transitionEffect: this.transitionEffect,
loop: this.loop,
plugins: this.plugins,
textDirection: getTextDirection(this),
},
);
} else if (changedProps.has('selected')) {
src/components/live/carousel.ts
+69 -44
View File
@@ -10,6 +10,7 @@ import { customElement, property, state } from 'lit/decorators.js';
import { guard } from 'lit/directives/guard.js';
import { createRef, Ref, ref } from 'lit/directives/ref.js';
import { CameraManager } from '../../camera-manager/manager.js';
import { CameraManagerCameraMetadata } from '../../camera-manager/types.js';
import {
ConditionsManagerEpoch,
getOverriddenConfig,
@@ -37,6 +38,7 @@ import { AutoLazyLoad } from '../../utils/embla/plugins/auto-lazy-load/auto-lazy
import AutoMediaLoadedInfo from '../../utils/embla/plugins/auto-media-loaded-info/auto-media-loaded-info.js';
import AutoSize from '../../utils/embla/plugins/auto-size/auto-size.js';
import { getStreamCameraID } from '../../utils/substream.js';
import { getTextDirection } from '../../utils/text-direction.js';
import { View } from '../../view/view.js';
import '../carousel';
import { EmblaCarouselPlugins } from '../carousel.js';
@@ -49,6 +51,16 @@ import { FrigateCardLiveProvider } from './provider.js';
const FRIGATE_CARD_LIVE_PROVIDER = 'frigate-card-live-provider';
interface CameraNeighbor {
id: string;
metadata?: CameraManagerCameraMetadata | null;
}
interface CameraNeighbors {
previous?: CameraNeighbor;
next?: CameraNeighbor;
}
@customElement('frigate-card-live-carousel')
export class FrigateCardLiveCarousel extends LitElement {
@property({ attribute: false })
@@ -315,31 +327,74 @@ export class FrigateCardLiveCarousel extends LitElement {
`;
}
protected _getCameraIDsOfNeighbors(): [string | null, string | null] {
protected _getSubstreamCameraID(cameraID: string, view?: View | null): string {
return view?.context?.live?.overrides?.get(cameraID) ?? cameraID;
}
protected _getCameraNeighbors(): CameraNeighbors | null {
const cameraIDs = this.cameraManager
? [...this.cameraManager?.getStore().getCameraIDsWithCapability('live')]
: [];
const view = this.viewManagerEpoch?.manager.getView();
if (this.viewFilterCameraID || cameraIDs.length <= 1 || !view || !this.hass) {
return [null, null];
return {};
}
const cameraID = this.viewFilterCameraID ?? view.camera;
const currentIndex = cameraIDs.indexOf(cameraID);
if (currentIndex < 0) {
return [null, null];
return {};
}
const prevID = cameraIDs[currentIndex > 0 ? currentIndex - 1 : cameraIDs.length - 1];
const nextID = cameraIDs[currentIndex + 1 < cameraIDs.length ? currentIndex + 1 : 0];
return [
cameraIDs[currentIndex > 0 ? currentIndex - 1 : cameraIDs.length - 1],
cameraIDs[currentIndex + 1 < cameraIDs.length ? currentIndex + 1 : 0],
];
return {
previous: {
id: prevID,
metadata: prevID
? this.cameraManager?.getCameraMetadata(
this._getSubstreamCameraID(prevID, view),
)
: null,
},
next: {
id: nextID,
metadata: nextID
? this.cameraManager?.getCameraMetadata(
this._getSubstreamCameraID(nextID, view),
)
: null,
},
};
}
protected _getSubstreamCameraID(cameraID: string, view?: View | null): string {
return view?.context?.live?.overrides?.get(cameraID) ?? cameraID;
protected _renderNextPrevious(
side: 'left' | 'right',
neighbors: CameraNeighbors | null,
): TemplateResult {
const textDirection = getTextDirection(this);
const neighbor =
(textDirection === 'ltr' && side === 'left') ||
(textDirection === 'rtl' && side === 'right')
? neighbors?.previous
: neighbors?.next;
return html`<frigate-card-next-previous-control
slot=${side}
.hass=${this.hass}
.side=${side}
.controlConfig=${this.overriddenLiveConfig?.controls.next_previous}
.label=${neighbor?.metadata?.title ?? ''}
.icon=${neighbor?.metadata?.icon}
?disabled=${!neighbor}
@click=${(ev) => {
this._setViewCameraID(neighbor?.id);
stopEventFromActivatingCardWideActions(ev);
}}
>
</frigate-card-next-previous-control>`;
}
protected render(): TemplateResult | void {
@@ -355,14 +410,8 @@ export class FrigateCardLiveCarousel extends LitElement {
}
const hasMultipleCameras = slides.length > 1;
const [prevID, nextID] = this._getCameraIDsOfNeighbors();
const neighbors = this._getCameraNeighbors();
const cameraMetadataPrevious = prevID
? this.cameraManager.getCameraMetadata(this._getSubstreamCameraID(prevID, view))
: null;
const cameraMetadataNext = nextID
? this.cameraManager.getCameraMetadata(this._getSubstreamCameraID(nextID, view))
: null;
const forcePTZVisibility =
!this._mediaHasLoaded ||
(!!this.viewFilterCameraID && this.viewFilterCameraID !== view.camera) ||
@@ -393,35 +442,11 @@ export class FrigateCardLiveCarousel extends LitElement {
this._mediaHasLoaded = false;
}}
>
<frigate-card-next-previous-control
slot="previous"
.hass=${this.hass}
.direction=${'previous'}
.controlConfig=${this.overriddenLiveConfig.controls.next_previous}
.label=${cameraMetadataPrevious?.title ?? ''}
.icon=${cameraMetadataPrevious?.icon}
?disabled=${prevID === null}
@click=${(ev) => {
this._setViewCameraID(prevID);
stopEventFromActivatingCardWideActions(ev);
}}
>
</frigate-card-next-previous-control>
${this._renderNextPrevious('left', neighbors)}
<!-- -->
${slides}
<frigate-card-next-previous-control
slot="next"
.hass=${this.hass}
.direction=${'next'}
.controlConfig=${this.overriddenLiveConfig.controls.next_previous}
.label=${cameraMetadataNext?.title ?? ''}
.icon=${cameraMetadataNext?.icon}
?disabled=${nextID === null}
@click=${(ev) => {
this._setViewCameraID(nextID);
stopEventFromActivatingCardWideActions(ev);
}}
>
</frigate-card-next-previous-control>
<!-- -->
${this._renderNextPrevious('right', neighbors)}
</frigate-card-carousel>
<frigate-card-ptz
.config=${this.overriddenLiveConfig.controls.ptz}
src/components/next-prev-control.ts
+4 -4
View File
@@ -10,7 +10,7 @@ import { createFetchThumbnailTask } from '../utils/thumbnail.js';
@customElement('frigate-card-next-previous-control')
export class FrigateCardNextPreviousControl extends LitElement {
@property({ attribute: false })
public direction?: 'next' | 'previous';
public side?: 'left' | 'right';
set controlConfig(controlConfig: NextPreviousControlConfig | undefined) {
if (controlConfig?.size) {
@@ -53,8 +53,8 @@ export class FrigateCardNextPreviousControl extends LitElement {
const classes = {
controls: true,
left: this.direction === 'previous',
right: this.direction === 'next',
left: this.side === 'left',
right: this.side === 'right',
thumbnails: !renderIcon,
icons: renderIcon,
button: renderIcon,
@@ -63,7 +63,7 @@ export class FrigateCardNextPreviousControl extends LitElement {
if (renderIcon) {
const icon =
!this.thumbnail || !this.icon || this._controlConfig.style === 'chevrons'
? this.direction === 'previous'
? this.side === 'left'
? 'mdi:chevron-left'
: 'mdi:chevron-right'
: this.icon;
src/components/viewer/carousel.ts
+41 -42
View File
@@ -34,6 +34,7 @@ import { AutoLazyLoad } from '../../utils/embla/plugins/auto-lazy-load/auto-lazy
import AutoMediaLoadedInfo from '../../utils/embla/plugins/auto-media-loaded-info/auto-media-loaded-info.js';
import AutoSize from '../../utils/embla/plugins/auto-size/auto-size.js';
import { ResolvedMediaCache } from '../../utils/ha/resolved-media.js';
import { getTextDirection } from '../../utils/text-direction.js';
import { ViewMedia } from '../../view/media.js';
import '../carousel';
import type { EmblaCarouselPlugins } from '../carousel.js';
@@ -306,6 +307,44 @@ export class FrigateCardViewerCarousel extends LitElement {
}
}
protected _renderNextPrevious(
side: 'left' | 'right',
neighbors?: MediaNeighbors | null,
): TemplateResult {
const scroll = (direction: 'previous' | 'next'): void => {
if (!neighbors || !this._media) {
return;
}
const newIndex =
(direction === 'previous' ? neighbors.previous?.index : neighbors.next?.index) ??
null;
if (newIndex !== null) {
this._setViewSelectedIndex(newIndex);
}
};
const textDirection = getTextDirection(this);
const scrollDirection =
(textDirection === 'ltr' && side === 'left') ||
(textDirection === 'rtl' && side === 'right')
? 'previous'
: 'next';
return html` <frigate-card-next-previous-control
slot=${side}
.hass=${this.hass}
.side=${side}
.controlConfig=${this.viewerConfig?.controls.next_previous}
.thumbnail=${neighbors?.[scrollDirection]?.media.getThumbnail() ?? undefined}
.label=${neighbors?.[scrollDirection]?.media.getTitle() ?? ''}
?disabled=${!neighbors?.[scrollDirection]}
@click=${(ev: Event) => {
scroll(scrollDirection);
stopEventFromActivatingCardWideActions(ev);
}}
></frigate-card-next-previous-control>`;
}
protected render(): TemplateResult | void {
const mediaCount = this._media?.length ?? 0;
if (!this._media || !mediaCount) {
@@ -324,18 +363,6 @@ export class FrigateCardViewerCarousel extends LitElement {
}
const neighbors = this._getMediaNeighbors();
const scroll = (direction: 'previous' | 'next'): void => {
if (!neighbors || !this._media) {
return;
}
const newIndex =
(direction === 'previous' ? neighbors.previous?.index : neighbors.next?.index) ??
null;
if (newIndex !== null) {
this._setViewSelectedIndex(newIndex);
}
};
const view = this.viewManagerEpoch?.manager.getView();
return html`
@@ -356,37 +383,9 @@ export class FrigateCardViewerCarousel extends LitElement {
this._player = null;
}}
>
${this.showControls
? html` <frigate-card-next-previous-control
slot="previous"
.hass=${this.hass}
.direction=${'previous'}
.controlConfig=${this.viewerConfig?.controls.next_previous}
.thumbnail=${neighbors?.previous?.media.getThumbnail() ?? undefined}
.label=${neighbors?.previous?.media.getTitle() ?? ''}
?disabled=${!neighbors?.previous}
@click=${(ev: Event) => {
scroll('previous');
stopEventFromActivatingCardWideActions(ev);
}}
></frigate-card-next-previous-control>`
: ''}
${this.showControls ? this._renderNextPrevious('left', neighbors) : ''}
${guard([this._media, view], () => this._getSlides())}
${this.showControls
? html` <frigate-card-next-previous-control
slot="next"
.hass=${this.hass}
.direction=${'next'}
.controlConfig=${this.viewerConfig?.controls.next_previous}
.thumbnail=${neighbors?.next?.media.getThumbnail() ?? undefined}
.label=${neighbors?.next?.media.getTitle() ?? ''}
?disabled=${!neighbors?.next}
@click=${(ev: Event) => {
scroll('next');
stopEventFromActivatingCardWideActions(ev);
}}
></frigate-card-next-previous-control>`
: ''}
${this.showControls ? this._renderNextPrevious('right', neighbors) : ''}
</frigate-card-carousel>
${view
? html` <frigate-card-ptz