Fix RTL issues

This commit is contained in:
mrjvs 2023-12-16 16:50:34 +01:00
parent cf4cb6f300
commit 6dea1fb3f6
4 changed files with 22 additions and 16 deletions

View File

@ -226,4 +226,8 @@ input[type=range].styled-slider.slider-progress::-ms-fill-lower {
[dir="rtl"] .transform {
/* Invert horizontal X offset on transform (Tailwind RTL plugin does the rest) */
transform: translate(calc(var(--tw-translate-x) * -1), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
}
}
[dir="ltr"] .transform {
/* default - otherwise it overwrites*/
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
}

View File

@ -158,7 +158,7 @@ export function ProgressBar() {
{/* Actual progress bar */}
<div
className="absolute top-0 left-0 h-full rounded-full bg-progress-filled flex justify-end items-center"
className="absolute top-0 dir-neutral:left-0 h-full rounded-full bg-progress-filled flex justify-end items-center"
style={{
width: `${
Math.max(

View File

@ -97,6 +97,7 @@ export function CaptionSetting(props: {
onTouchStart={dragMouseDown}
>
<div
dir="ltr"
className={[
"relative w-full h-1 bg-video-context-slider bg-opacity-25 rounded-full transition-[height] duration-100 group-hover/progress:h-1.5",
dragging ? "!h-1.5" : "",

View File

@ -60,18 +60,18 @@ export function ScrapingPart(props: ScrapingProps) {
(async () => {
const output = await startScraping(props.media);
if (!isMounted()) return;
// props.onResult?.(
// resultRef.current.sources,
// resultRef.current.sourceOrder
// );
// report(
// scrapePartsToProviderMetric(
// props.media,
// resultRef.current.sourceOrder,
// resultRef.current.sources
// )
// );
// props.onGetStream?.(output);
props.onResult?.(
resultRef.current.sources,
resultRef.current.sourceOrder
);
report(
scrapePartsToProviderMetric(
props.media,
resultRef.current.sourceOrder,
resultRef.current.sources
)
);
props.onGetStream?.(output);
})();
}, [startScraping, props, report, isMounted]);
@ -86,12 +86,13 @@ export function ScrapingPart(props: ScrapingProps) {
return (
<div
className="h-full w-full relative dir-neutral:origin-top-left flex dir-neutral:flex-row dir-neutral:items-start dir-neutral:justify-start"
className="h-full w-full relative dir-neutral:origin-top-left flex"
ref={containerRef}
>
<div
className={classNames({
"absolute transition-[transform,opacity] opacity-0": true,
"absolute transition-[transform,opacity] opacity-0 dir-neutral:left-0":
true,
"!opacity-100": renderedOnce,
})}
ref={listRef}