From 0f994ccb5bee6ad2acf7329843d6cb123f875d34 Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Sat, 2 Jul 2022 15:50:52 -0400 Subject: [PATCH 01/66] Initial support for RTL layouts --- src/assets/css/librarybrowser.scss | 78 ++++++++++++++++++- src/components/cardbuilder/card.scss | 4 + src/components/cardbuilder/cardBuilder.js | 13 ++-- src/components/itemHelper.js | 2 +- src/components/listview/listview.scss | 6 +- src/components/loading/loading.js | 2 +- src/components/mediainfo/mediainfo.js | 14 ++-- src/components/mediainfo/mediainfo.scss | 9 +++ src/controllers/dashboard/dashboard.js | 2 +- src/controllers/dashboard/library.js | 2 +- src/controllers/playback/video/index.js | 4 +- .../emby-scrollbuttons.scss | 5 ++ src/elements/emby-select/emby-select.scss | 13 ++++ src/elements/emby-slider/emby-slider.js | 14 +++- src/elements/emby-slider/emby-slider.scss | 20 +++++ src/scripts/datetime.js | 10 ++- src/scripts/globalize.js | 15 +++- src/scripts/site.js | 1 + src/styles/rtl.scss | 23 ++++++ 19 files changed, 212 insertions(+), 25 deletions(-) create mode 100644 src/styles/rtl.scss diff --git a/src/assets/css/librarybrowser.scss b/src/assets/css/librarybrowser.scss index af3eacadaf..d251bde1c1 100644 --- a/src/assets/css/librarybrowser.scss +++ b/src/assets/css/librarybrowser.scss @@ -141,6 +141,10 @@ height: 1.7em; align-items: center; flex-shrink: 1; + + [dir='rtl'] & { + margin: 0 0.5em 0 0; + } } .pageTitleWithDefaultLogo { @@ -162,6 +166,10 @@ background-size: contain; background-repeat: no-repeat; width: 13.2em; + + [dir='rtl'] & { + background-position: right center; + } } .skinHeader { @@ -213,11 +221,20 @@ font-weight: 400 !important; margin: 0 !important; border-radius: 0 !important; + + [dir='rtl'] & { + padding: 0.9em 2.4em 0.9em 0 !important; + } } .navMenuOptionIcon { margin-right: 1.2em; flex-shrink: 0; + + [dir='rtl'] & { + margin-right: unset; + margin-left: 1.2em; + } } .navMenuOptionText { @@ -226,8 +243,15 @@ } .sidebarHeader { - padding-left: 1.2em; margin: 1em 0 0.5em; + + [dir='ltr'] & { + padding-left: 1.2em; + } + + [dir='rtl'] & { + padding-right: 1.2em; + } } .dashboardDocument .skinBody { @@ -484,6 +508,19 @@ margin-left: 0; } } + + [dir="rtl"] & { + padding-right: 32.45vw; + padding-left: 2%; + + .layout-desktop &, + .layout-tv & { + .emby-scroller { + margin-left: unset; + margin-right: 0; + } + } + } } .detailSectionContent a { @@ -655,6 +692,18 @@ display: block; padding-left: 32.45vw; } + + [dir="rtl"] & { + .layout-mobile & { + padding: 0.5rem 0 0 5%; + } + + .layout-desktop &, + .layout-tv & { + padding-right: 32.45vw; + padding-left: unset; + } + } } .layout-desktop .detailRibbon { @@ -685,6 +734,10 @@ text-align: left; min-width: 0; max-width: 100%; + + [dir="rtl"] & { + text-align: right; + } } .detailPageSecondaryContainer { @@ -746,6 +799,19 @@ width: 25vw; transform: translateY(-50%); } + + [dir="rtl"] & { + left: unset; + + .layout-mobile &, + .layout-tv & { + right: 5%; + } + + .layout-desktop & { + right: 3.3%; + } + } } .detailPagePrimaryContent { @@ -1146,10 +1212,20 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards { .padded-left { padding-left: 3.3%; + + [dir="rtl"] & { + padding-right: 3.3%; + padding-left: unset; + } } .padded-right { padding-right: 3.3%; + + [dir="rtl"] & { + padding-right: unset; + padding-left: 3.3%; + } } .padded-top { diff --git a/src/components/cardbuilder/card.scss b/src/components/cardbuilder/card.scss index ffd395a733..4163b9d8ed 100644 --- a/src/components/cardbuilder/card.scss +++ b/src/components/cardbuilder/card.scss @@ -303,6 +303,10 @@ button::-moz-focus-inner { overflow: hidden; text-overflow: ellipsis; text-align: left; + + [dir="rtl"] & { + text-align: right; + } } .dialog .cardText { diff --git a/src/components/cardbuilder/cardBuilder.js b/src/components/cardbuilder/cardBuilder.js index be0df0e512..4d42366590 100644 --- a/src/components/cardbuilder/cardBuilder.js +++ b/src/components/cardbuilder/cardBuilder.js @@ -11,7 +11,7 @@ import imageLoader from '../images/imageLoader'; import itemHelper from '../itemHelper'; import focusManager from '../focusManager'; import indicators from '../indicators/indicators'; -import globalize from '../../scripts/globalize'; +import globalize, { getCurrentDateTimeLocale } from '../../scripts/globalize'; import layoutManager from '../layoutManager'; import dom from '../../scripts/dom'; import browser from '../../scripts/browser'; @@ -909,19 +909,20 @@ import { appRouter } from '../appRouter'; } if (options.showYear || options.showSeriesYear) { + const productionYear = item.ProductionYear?.toLocaleString(getCurrentDateTimeLocale(), {useGrouping: false}); if (item.Type === 'Series') { if (item.Status === 'Continuing') { - lines.push(globalize.translate('SeriesYearToPresent', item.ProductionYear || '')); + lines.push(globalize.translate('SeriesYearToPresent', productionYear || '')); } else { if (item.EndDate && item.ProductionYear) { - const endYear = datetime.parseISO8601Date(item.EndDate).getFullYear(); - lines.push(item.ProductionYear + ((endYear === item.ProductionYear) ? '' : (' - ' + endYear))); + const endYear = datetime.parseISO8601Date(item.EndDate).getFullYear().toLocaleString(getCurrentDateTimeLocale(), {useGrouping: false}); + lines.push(productionYear + ((endYear === item.ProductionYear) ? '' : (' - ' + endYear))); } else { - lines.push(item.ProductionYear || ''); + lines.push(productionYear || ''); } } } else { - lines.push(item.ProductionYear || ''); + lines.push(productionYear || ''); } } diff --git a/src/components/itemHelper.js b/src/components/itemHelper.js index 030b6d7fcf..eba77649ce 100644 --- a/src/components/itemHelper.js +++ b/src/components/itemHelper.js @@ -27,7 +27,7 @@ export function getDisplayName(item, options = {}) { let nameSeparator = ' - '; if (options.includeParentInfo !== false) { - number = 'S' + item.ParentIndexNumber + ':E' + number; + number = 'S' + item.ParentIndexNumber.toLocaleString() + ':E' + number.toLocaleString(); } else { nameSeparator = '. '; } diff --git a/src/components/listview/listview.scss b/src/components/listview/listview.scss index a6d1fc7efa..4bf98767fb 100644 --- a/src/components/listview/listview.scss +++ b/src/components/listview/listview.scss @@ -13,6 +13,10 @@ padding: 0.25em 0.25em 0.25em 0.5em; cursor: pointer; overflow: hidden; + + [dir='rtl'] & { + text-align: right; + } } .listItem-withContentWrapper { @@ -211,7 +215,7 @@ width: 1em !important; height: 1em !important; font-size: 143%; - padding: 0 0.25em 0 0; + margin: 0 0.25em 0 0; } .listItemIcon:not(.listItemIcon-transparent) { diff --git a/src/components/loading/loading.js b/src/components/loading/loading.js index 66b4be421a..0a3815c01c 100644 --- a/src/components/loading/loading.js +++ b/src/components/loading/loading.js @@ -18,7 +18,7 @@ export function show() { elem.classList.add('docspinner'); elem.classList.add('mdl-spinner'); - elem.innerHTML = ''; + elem.innerHTML = ''; document.body.appendChild(elem); diff --git a/src/components/mediainfo/mediainfo.js b/src/components/mediainfo/mediainfo.js index f21bc8f666..2172329d89 100644 --- a/src/components/mediainfo/mediainfo.js +++ b/src/components/mediainfo/mediainfo.js @@ -1,6 +1,6 @@ import escapeHtml from 'escape-html'; import datetime from '../../scripts/datetime'; -import globalize from '../../scripts/globalize'; +import globalize, { getCurrentDateTimeLocale } from '../../scripts/globalize'; import { appRouter } from '../appRouter'; import itemHelper from '../itemHelper'; import indicators from '../indicators/indicators'; @@ -111,6 +111,8 @@ import '../../elements/emby-button/emby-button'; const showFolderRuntime = item.Type === 'MusicAlbum' || item.MediaType === 'MusicArtist' || item.Type === 'Playlist' || item.MediaType === 'Playlist' || item.MediaType === 'MusicGenre'; + const dateTimeLocale = getCurrentDateTimeLocale(); + if (showFolderRuntime) { count = item.SongCount || item.ChildCount; @@ -175,16 +177,16 @@ import '../../elements/emby-button/emby-button'; if (options.year !== false && item.ProductionYear && item.Type === 'Series') { if (item.Status === 'Continuing') { - miscInfo.push(globalize.translate('SeriesYearToPresent', item.ProductionYear)); + miscInfo.push(globalize.translate('SeriesYearToPresent', item.ProductionYear.toLocaleString(dateTimeLocale, {useGrouping: false}))); } else if (item.ProductionYear) { - text = item.ProductionYear; + text = item.ProductionYear.toLocaleString(dateTimeLocale, {useGrouping: false}); if (item.EndDate) { try { - const endYear = datetime.parseISO8601Date(item.EndDate).getFullYear(); + const endYear = datetime.parseISO8601Date(item.EndDate).getFullYear().toLocaleString(dateTimeLocale, {useGrouping: false}); if (endYear !== item.ProductionYear) { - text += `-${datetime.parseISO8601Date(item.EndDate).getFullYear()}`; + text += `-${endYear}`; } } catch (e) { console.error('error parsing date:', item.EndDate); @@ -245,7 +247,7 @@ import '../../elements/emby-button/emby-button'; miscInfo.push(item.ProductionYear); } else if (item.PremiereDate) { try { - text = datetime.parseISO8601Date(item.PremiereDate).getFullYear(); + text = datetime.parseISO8601Date(item.PremiereDate).getFullYear().toLocaleString(dateTimeLocale, {useGrouping: false}); miscInfo.push(text); } catch (e) { console.error('error parsing date:', item.PremiereDate); diff --git a/src/components/mediainfo/mediainfo.scss b/src/components/mediainfo/mediainfo.scss index 508c9d96ad..4c43f41fea 100644 --- a/src/components/mediainfo/mediainfo.scss +++ b/src/components/mediainfo/mediainfo.scss @@ -1,6 +1,10 @@ .mediaInfoItem { margin: 0 1em 0 0; padding: 0; + + [dir="rtl"] & { + margin: 0 0 0 1em; + } } .mediaInfoText { @@ -26,6 +30,11 @@ .mediaInfoItem:last-child { margin-right: 0; + + [dir='rtl'] & { + margin-right: unset; + margin-left: 0; + } } .starRatingContainer { diff --git a/src/controllers/dashboard/dashboard.js b/src/controllers/dashboard/dashboard.js index a6fe46b295..fcf5255a94 100644 --- a/src/controllers/dashboard/dashboard.js +++ b/src/controllers/dashboard/dashboard.js @@ -280,7 +280,7 @@ import confirm from '../../components/confirm/confirm'; html += clientImage; } - html += '
'; + html += '
'; html += '
' + escapeHtml(session.DeviceName) + '
'; html += '
' + escapeHtml(DashboardPage.getAppSecondaryText(session)) + '
'; html += '
'; diff --git a/src/controllers/dashboard/library.js b/src/controllers/dashboard/library.js index 8a43d7b690..df8be24712 100644 --- a/src/controllers/dashboard/library.js +++ b/src/controllers/dashboard/library.js @@ -343,7 +343,7 @@ import cardBuilder from '../../components/cardbuilder/cardBuilder'; html += ' '; html += '
'; } else if (virtualFolder.Locations.length && virtualFolder.Locations.length === 1) { - html += "
"; + html += "
"; html += virtualFolder.Locations[0]; html += '
'; } else { diff --git a/src/controllers/playback/video/index.js b/src/controllers/playback/video/index.js index d5da82b740..d6598dca3e 100644 --- a/src/controllers/playback/video/index.js +++ b/src/controllers/playback/video/index.js @@ -10,7 +10,7 @@ import itemHelper from '../../../components/itemHelper'; import mediaInfo from '../../../components/mediainfo/mediainfo'; import focusManager from '../../../components/focusManager'; import { Events } from 'jellyfin-apiclient'; -import globalize from '../../../scripts/globalize'; +import globalize, { getCurrentDateTimeLocale } from '../../../scripts/globalize'; import { appHost } from '../../../components/apphost'; import layoutManager from '../../../components/layoutManager'; import * as userSettings from '../../../scripts/settings/userSettings'; @@ -216,7 +216,7 @@ import { setBackdropTransparency, TRANSPARENCY_LEVEL } from '../../../components let title = itemName; if (item.PremiereDate) { try { - const year = datetime.parseISO8601Date(item.PremiereDate).getFullYear(); + const year = datetime.parseISO8601Date(item.PremiereDate).getFullYear().toLocaleString(getCurrentDateTimeLocale(), {useGrouping: false}); title += ` (${year})`; } catch (e) { console.error(e); diff --git a/src/elements/emby-scrollbuttons/emby-scrollbuttons.scss b/src/elements/emby-scrollbuttons/emby-scrollbuttons.scss index 5af739bac1..a50424a644 100644 --- a/src/elements/emby-scrollbuttons/emby-scrollbuttons.scss +++ b/src/elements/emby-scrollbuttons/emby-scrollbuttons.scss @@ -10,6 +10,11 @@ z-index: 1; color: #fff; display: flex; + + [dir='rtl'] & { + left: 0; + right: unset; + } } .emby-scrollbuttons-button > .material-icons { diff --git a/src/elements/emby-select/emby-select.scss b/src/elements/emby-select/emby-select.scss index 32aec69c46..dfac666023 100644 --- a/src/elements/emby-select/emby-select.scss +++ b/src/elements/emby-select/emby-select.scss @@ -18,6 +18,10 @@ outline: none !important; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%; + + [dir="rtl"] & { + padding: 0.5em 0.5em 0.5em 1.9em; + } } .emby-select[disabled] { @@ -36,6 +40,10 @@ .selectContainer-inline > .emby-select { padding: 0.3em 1.9em 0.3em 0.5em; font-size: inherit; + + [dir="rtl"] & { + padding: 0.3em 0.5em 0.3em 1.9em; + } } .selectContainer-inline > .emby-select[disabled] { @@ -96,6 +104,11 @@ top: 0.2em; color: inherit; pointer-events: none; + + [dir="rtl"] & { + right: unset; + left: 0.3em; + } } .selectContainer-inline > .selectArrowContainer { diff --git a/src/elements/emby-slider/emby-slider.js b/src/elements/emby-slider/emby-slider.js index 0bb20270e6..7cab8d5dc2 100644 --- a/src/elements/emby-slider/emby-slider.js +++ b/src/elements/emby-slider/emby-slider.js @@ -5,6 +5,7 @@ import keyboardnavigation from '../../scripts/keyboardNavigation'; import './emby-slider.scss'; import 'webcomponents.js/webcomponents-lite'; import '../emby-input/emby-input'; +import { getIsRTL } from '../../scripts/globalize'; /* eslint-disable indent */ @@ -32,6 +33,10 @@ import '../emby-input/emby-input'; let fraction = (clientX - rect.left) / rect.width; + if (getIsRTL()) { + fraction = (rect.width - (clientX - rect.left)) / rect.width; + } + // Snap to step const valueRange = range.max - range.min; if (range.step !== 'any' && valueRange !== 0) { @@ -111,6 +116,9 @@ import '../emby-input/emby-input'; const bubbleRect = bubble.getBoundingClientRect(); let bubblePos = bubbleTrackRect.width * value / 100; + if (getIsRTL()) { + bubblePos = bubbleTrackRect.width - bubblePos; + } bubblePos = Math.min(Math.max(bubblePos, bubbleRect.width / 2), bubbleTrackRect.width - bubbleRect.width / 2); bubble.style.left = bubblePos + 'px'; @@ -411,7 +419,11 @@ import '../emby-input/emby-input'; function setRange(elem, startPercent, endPercent) { const style = elem.style; - style.left = Math.max(startPercent, 0) + '%'; + if (getIsRTL()) { + style.right = Math.max(startPercent, 0) + '%'; + } else { + style.left = Math.max(startPercent, 0) + '%'; + } const widthPercent = endPercent - startPercent; style.width = Math.max(Math.min(widthPercent, 100), 0) + '%'; diff --git a/src/elements/emby-slider/emby-slider.scss b/src/elements/emby-slider/emby-slider.scss index f7503d4fd5..0aa6204ca5 100644 --- a/src/elements/emby-slider/emby-slider.scss +++ b/src/elements/emby-slider/emby-slider.scss @@ -154,6 +154,12 @@ left: 0; position: absolute; padding: 0 0.54em; /* half of slider thumb size */ + + [dir="rtl"] & { + left: unset; + right: 0; + padding: 0 0 0 0.54em; + } } .mdl-slider-background-flex { @@ -167,6 +173,11 @@ overflow: hidden; border: 0; padding: 0; + + [dir="rtl"] & { + left: unset; + right: 0; + } } .mdl-slider-background-flex-inner { @@ -182,6 +193,11 @@ top: 0; bottom: 0; background-color: #00a4dc; + + [dir="rtl"] & { + left: unset; + right: 0; + } } .mdl-slider-background-lower-clear { @@ -212,6 +228,10 @@ left: 0; right: 0; margin: 0 0.54em; /* half of slider thumb size */ + + [dir="rtl"] & { + margin: 0 0 0 0.54em; + } } .sliderBubble { diff --git a/src/scripts/datetime.js b/src/scripts/datetime.js index 0a014b1de4..691d2802f5 100644 --- a/src/scripts/datetime.js +++ b/src/scripts/datetime.js @@ -84,7 +84,7 @@ import globalize from './globalize'; hours = Math.floor(hours); if (hours) { - parts.push(hours); + parts.push(hours.toLocaleString()); } ticks -= (hours * ticksPerHour); @@ -95,7 +95,9 @@ import globalize from './globalize'; ticks -= (minutes * ticksPerMinute); if (minutes < 10 && hours) { - minutes = '0' + minutes; + minutes = (0).toLocaleString() + minutes.toLocaleString(); + } else { + minutes = minutes.toLocaleString(); } parts.push(minutes); @@ -103,7 +105,9 @@ import globalize from './globalize'; seconds = Math.floor(seconds); if (seconds < 10) { - seconds = '0' + seconds; + seconds = (0).toLocaleString() + seconds.toLocaleString(); + } else { + seconds = seconds.toLocaleString(); } parts.push(seconds); diff --git a/src/scripts/globalize.js b/src/scripts/globalize.js index 3953ac9d50..201db1153b 100644 --- a/src/scripts/globalize.js +++ b/src/scripts/globalize.js @@ -10,6 +10,7 @@ import { currentSettings as userSettings } from './settings/userSettings'; const allTranslations = {}; let currentCulture; let currentDateTimeCulture; + let isRTL = false; export function getCurrentLocale() { return currentCulture; @@ -38,6 +39,10 @@ import { currentSettings as userSettings } from './settings/userSettings'; return fallbackCulture; } + export function getIsRTL() { + return isRTL; + } + export function updateCurrentCulture() { let culture; try { @@ -46,6 +51,13 @@ import { currentSettings as userSettings } from './settings/userSettings'; console.error('no language set in user settings'); } culture = culture || getDefaultLanguage(); + isRTL = culture === 'ar' || culture === 'fa' || culture === 'ur_PK' || culture === 'he'; + + if (isRTL) { + document.getElementsByTagName('body')[0].setAttribute('dir', 'rtl'); + } else { + document.getElementsByTagName('body')[0].setAttribute('dir', 'ltr'); + } currentCulture = normalizeLocaleName(culture); @@ -257,7 +269,8 @@ export default { getCurrentLocale, getCurrentDateTimeLocale, register, - updateCurrentCulture + updateCurrentCulture, + getIsRTL }; /* eslint-enable indent */ diff --git a/src/scripts/site.js b/src/scripts/site.js index edf2dab2cd..0a69aca00e 100644 --- a/src/scripts/site.js +++ b/src/scripts/site.js @@ -100,6 +100,7 @@ function onGlobalizeInit() { import('../assets/css/fonts.scss'); } + import('../styles/rtl.scss'); import('../assets/css/librarybrowser.scss'); loadPlugins().then(function () { diff --git a/src/styles/rtl.scss b/src/styles/rtl.scss new file mode 100644 index 0000000000..436effb3a1 --- /dev/null +++ b/src/styles/rtl.scss @@ -0,0 +1,23 @@ +.chevron_right, +.chevron_left, +.arrow_back, +.play_arrow, +.playlist_add, +.video_library, +.shuffle, +.input, +.live_tv, +.dvr, +.play_circle_filled, +.shopping_cart, +.vpn_key, +.skip_next, +.skip_previous, +.fast_forward, +.fast_rewind, +.undo, +.redo { + [dir='rtl'] & { + transform: scale(-1, 1); + } +} From c0b4d7258928cc695cb929dff7fafeb2a9836617 Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Sat, 2 Jul 2022 16:31:15 -0400 Subject: [PATCH 02/66] Removed translation for Season and Episode numbers. Should be done in another way. --- src/components/itemHelper.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/itemHelper.js b/src/components/itemHelper.js index eba77649ce..030b6d7fcf 100644 --- a/src/components/itemHelper.js +++ b/src/components/itemHelper.js @@ -27,7 +27,7 @@ export function getDisplayName(item, options = {}) { let nameSeparator = ' - '; if (options.includeParentInfo !== false) { - number = 'S' + item.ParentIndexNumber.toLocaleString() + ':E' + number.toLocaleString(); + number = 'S' + item.ParentIndexNumber + ':E' + number; } else { nameSeparator = '. '; } From bac7d6467eef9a9031ec23eddb86b4a31151c68e Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Sat, 2 Jul 2022 17:49:00 -0400 Subject: [PATCH 03/66] Fixed Cards for RTL --- src/components/cardbuilder/card.scss | 15 +++++++++++++++ src/components/indicators/indicators.js | 4 ++-- src/components/indicators/indicators.scss | 5 +++++ 3 files changed, 22 insertions(+), 2 deletions(-) diff --git a/src/components/cardbuilder/card.scss b/src/components/cardbuilder/card.scss index 4163b9d8ed..c3858252b2 100644 --- a/src/components/cardbuilder/card.scss +++ b/src/components/cardbuilder/card.scss @@ -406,6 +406,11 @@ button::-moz-focus-inner { display: flex; align-items: center; contain: layout style; + + [dir="rtl"] & { + right: unset; + left: 0.225em; + } } .cardProgramAttributeIndicators { @@ -415,6 +420,11 @@ button::-moz-focus-inner { display: flex; text-transform: uppercase; font-size: 92%; + + [dir="rtl"] & { + left: unset; + right: 0; + } } .programAttributeIndicator { @@ -435,6 +445,11 @@ button::-moz-focus-inner { position: absolute; bottom: 0; right: 0; + + [dir="rtl"] & { + right: unset; + left: 0; + } } .cardOverlayButtonIcon { diff --git a/src/components/indicators/indicators.js b/src/components/indicators/indicators.js index 6fc483c3fd..6b6b635c64 100644 --- a/src/components/indicators/indicators.js +++ b/src/components/indicators/indicators.js @@ -84,7 +84,7 @@ export function getPlayedIndicatorHtml(item) { if (enablePlayedIndicator(item)) { const userData = item.UserData || {}; if (userData.UnplayedItemCount) { - return '
' + userData.UnplayedItemCount + '
'; + return '
' + userData.UnplayedItemCount.toLocaleString() + '
'; } if (userData.PlayedPercentage && userData.PlayedPercentage >= 100 || (userData.Played)) { @@ -99,7 +99,7 @@ export function getChildCountIndicatorHtml(item, options) { const minCount = options && options.minCount ? options.minCount : 0; if (item.ChildCount && item.ChildCount > minCount) { - return '
' + item.ChildCount + '
'; + return '
' + item.ChildCount.toLocaleString() + '
'; } return ''; diff --git a/src/components/indicators/indicators.scss b/src/components/indicators/indicators.scss index e4e7985817..20eaec4cb7 100644 --- a/src/components/indicators/indicators.scss +++ b/src/components/indicators/indicators.scss @@ -10,6 +10,11 @@ top: 0; left: 0; bottom: 0; + + [dir="rtl"] & { + left: unset; + right: 0; + } } .indicator { From 6a0a03d563efc1b946bcee1422ca4e0afae90926 Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Sat, 2 Jul 2022 17:50:52 -0400 Subject: [PATCH 04/66] Fixed loading spinner --- src/components/loading/loading.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/loading/loading.js b/src/components/loading/loading.js index 0a3815c01c..bda1ff84bf 100644 --- a/src/components/loading/loading.js +++ b/src/components/loading/loading.js @@ -13,12 +13,13 @@ export function show() { if (!elem) { elem = document.createElement('div'); + elem.setAttribute('dir', 'ltr'); loadingElem = elem; elem.classList.add('docspinner'); elem.classList.add('mdl-spinner'); - elem.innerHTML = ''; + elem.innerHTML = ''; document.body.appendChild(elem); From b2a025f4d10f7d15f1d0deb9f5e724ec7d97a142 Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Sat, 2 Jul 2022 18:40:08 -0400 Subject: [PATCH 05/66] Small visual fix in homescreen --- src/elements/emby-scroller/emby-scroller.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/elements/emby-scroller/emby-scroller.scss b/src/elements/emby-scroller/emby-scroller.scss index d4d2c69c85..bf54f07a77 100644 --- a/src/elements/emby-scroller/emby-scroller.scss +++ b/src/elements/emby-scroller/emby-scroller.scss @@ -11,6 +11,11 @@ .itemsContainer > .card > .cardBox { margin-left: 0; margin-right: 1.2em; + + [dir="rtl"] & { + margin-right: 0; + margin-left: 1.2em; + } } .servers > .card > .cardBox { From 974417ce3db13c3f1d12d29cd13cdc506af8db52 Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Sat, 2 Jul 2022 22:59:40 -0400 Subject: [PATCH 06/66] use inline and block properties now --- src/assets/css/librarybrowser.scss | 118 ++++-------------- src/assets/css/metadataeditor.scss | 7 +- src/components/cardbuilder/card.scss | 27 +--- src/components/indicators/indicators.scss | 10 +- src/components/listview/listview.scss | 6 +- src/components/mediainfo/mediainfo.scss | 14 +-- .../emby-scrollbuttons.scss | 7 +- src/elements/emby-scroller/emby-scroller.scss | 8 +- src/elements/emby-select/emby-select.scss | 20 +-- src/elements/emby-slider/emby-slider.scss | 32 ++--- 10 files changed, 51 insertions(+), 198 deletions(-) diff --git a/src/assets/css/librarybrowser.scss b/src/assets/css/librarybrowser.scss index d251bde1c1..60347ecb93 100644 --- a/src/assets/css/librarybrowser.scss +++ b/src/assets/css/librarybrowser.scss @@ -137,14 +137,11 @@ .pageTitle { display: inline-flex; - margin: 0 0 0 0.5em; + margin-block: 0; + margin-inline: 0.5em 0; height: 1.7em; align-items: center; flex-shrink: 1; - - [dir='rtl'] & { - margin: 0 0.5em 0 0; - } } .pageTitleWithDefaultLogo { @@ -216,25 +213,17 @@ align-items: center; text-decoration: none; color: inherit; - padding: 0.9em 0 0.9em 2.4em !important; + padding-block: 0.9em !important; + padding-inline: 2.4em 0 !important; flex-grow: 1; font-weight: 400 !important; margin: 0 !important; border-radius: 0 !important; - - [dir='rtl'] & { - padding: 0.9em 2.4em 0.9em 0 !important; - } } .navMenuOptionIcon { - margin-right: 1.2em; + margin-inline-end: 1.2em; flex-shrink: 0; - - [dir='rtl'] & { - margin-right: unset; - margin-left: 1.2em; - } } .navMenuOptionText { @@ -243,15 +232,9 @@ } .sidebarHeader { - margin: 1em 0 0.5em; - - [dir='ltr'] & { - padding-left: 1.2em; - } - - [dir='rtl'] & { - padding-right: 1.2em; - } + padding-inline-start: 1.2em; + margin-block: 1em 0.5em; + margin-inline: 0; } .dashboardDocument .skinBody { @@ -282,7 +265,7 @@ .dashboardDocument .mainDrawer { z-index: inherit !important; - left: 0 !important; + inset-inline-start: 0 !important; top: 0 !important; transform: none !important; box-shadow: none !important; @@ -295,7 +278,7 @@ } .dashboardDocument .skinBody { - left: 20em; + inset-inline-start: 20em; } } @@ -494,31 +477,16 @@ .detailPageContent { display: flex; flex-direction: column; - padding-left: 32.45vw; - padding-right: 2%; + padding-inline: 3.245vw 2%; .layout-mobile & { - padding-left: 5%; - padding-right: 5%; + padding-inline: 5%; } .layout-desktop &, .layout-tv & { .emby-scroller { - margin-left: 0; - } - } - - [dir="rtl"] & { - padding-right: 32.45vw; - padding-left: 2%; - - .layout-desktop &, - .layout-tv & { - .emby-scroller { - margin-left: unset; - margin-right: 0; - } + margin-inline-start: 0; } } } @@ -680,29 +648,18 @@ .layout-mobile & { display: block; position: relative; - padding: 0.5rem 5%; + padding-block: 0.5rem; + padding-inline: 5%; } .layout-desktop & { position: relative; - padding-left: 32.45vw; + padding-inline-start: 32.45vw; } .layout-tv & { display: block; - padding-left: 32.45vw; - } - - [dir="rtl"] & { - .layout-mobile & { - padding: 0.5rem 0 0 5%; - } - - .layout-desktop &, - .layout-tv & { - padding-right: 32.45vw; - padding-left: unset; - } + padding-inline-start: 32.45vw; } } @@ -731,13 +688,9 @@ } .infoText { - text-align: left; + text-align: start; min-width: 0; max-width: 100%; - - [dir="rtl"] & { - text-align: right; - } } .detailPageSecondaryContainer { @@ -770,13 +723,13 @@ } .layout-mobile & { - left: 5%; + inset-inline-start: 5%; bottom: 1rem; max-width: 30vw; filter: drop-shadow(0 0 0.5rem #000); @media all and (max-width: 32em) { - left: 0; + inset-inline-start: 0; bottom: 0; } @@ -788,30 +741,17 @@ } .layout-desktop & { - left: 3.3%; + inset-inline-start: 3.3%; top: -80%; width: 25vw; } .layout-tv & { - left: 5%; + inset-inline-start: 5%; top: 50%; width: 25vw; transform: translateY(-50%); } - - [dir="rtl"] & { - left: unset; - - .layout-mobile &, - .layout-tv & { - right: 5%; - } - - .layout-desktop & { - right: 3.3%; - } - } } .detailPagePrimaryContent { @@ -1211,21 +1151,11 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards { } .padded-left { - padding-left: 3.3%; - - [dir="rtl"] & { - padding-right: 3.3%; - padding-left: unset; - } + padding-inline-start: 3.3%; } .padded-right { - padding-right: 3.3%; - - [dir="rtl"] & { - padding-right: unset; - padding-left: 3.3%; - } + padding-inline-end: 3.3%; } .padded-top { diff --git a/src/assets/css/metadataeditor.scss b/src/assets/css/metadataeditor.scss index 190f53187f..c17998887b 100644 --- a/src/assets/css/metadataeditor.scss +++ b/src/assets/css/metadataeditor.scss @@ -54,11 +54,10 @@ @media all and (min-width: 50em) { .editPageSidebar { position: fixed; - top: 5.2em; - bottom: 0; - left: 0; + inset-block: 5.2em 0; + inset-inline-start: 0; width: 30%; - border-right: 1px solid #555; + border-inline-end: 1px solid #555; display: block; } diff --git a/src/components/cardbuilder/card.scss b/src/components/cardbuilder/card.scss index c3858252b2..6f9ee2699a 100644 --- a/src/components/cardbuilder/card.scss +++ b/src/components/cardbuilder/card.scss @@ -302,11 +302,7 @@ button::-moz-focus-inner { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - text-align: left; - - [dir="rtl"] & { - text-align: right; - } + text-align: start; } .dialog .cardText { @@ -400,31 +396,21 @@ button::-moz-focus-inner { } .cardIndicators { - right: 0.225em; + inset-inline-end: 0.225em; top: 0.225em; position: absolute; display: flex; align-items: center; contain: layout style; - - [dir="rtl"] & { - right: unset; - left: 0.225em; - } } .cardProgramAttributeIndicators { top: 0; - left: 0; + inset-inline-start: 0; position: absolute; display: flex; text-transform: uppercase; font-size: 92%; - - [dir="rtl"] & { - left: unset; - right: 0; - } } .programAttributeIndicator { @@ -444,12 +430,7 @@ button::-moz-focus-inner { .cardOverlayButton-br { position: absolute; bottom: 0; - right: 0; - - [dir="rtl"] & { - right: unset; - left: 0; - } + inset-inline-end: 0; } .cardOverlayButtonIcon { diff --git a/src/components/indicators/indicators.scss b/src/components/indicators/indicators.scss index 20eaec4cb7..1c23c9f1a2 100644 --- a/src/components/indicators/indicators.scss +++ b/src/components/indicators/indicators.scss @@ -7,14 +7,8 @@ .itemProgressBarForeground { position: absolute; - top: 0; - left: 0; - bottom: 0; - - [dir="rtl"] & { - left: unset; - right: 0; - } + inset-block: 0; + inset-inline-start: 0; } .indicator { diff --git a/src/components/listview/listview.scss b/src/components/listview/listview.scss index 4bf98767fb..e8f3401318 100644 --- a/src/components/listview/listview.scss +++ b/src/components/listview/listview.scss @@ -9,14 +9,10 @@ margin: 0; display: block; align-items: center; - text-align: left; + text-align: start; padding: 0.25em 0.25em 0.25em 0.5em; cursor: pointer; overflow: hidden; - - [dir='rtl'] & { - text-align: right; - } } .listItem-withContentWrapper { diff --git a/src/components/mediainfo/mediainfo.scss b/src/components/mediainfo/mediainfo.scss index 4c43f41fea..74ba9d0f6b 100644 --- a/src/components/mediainfo/mediainfo.scss +++ b/src/components/mediainfo/mediainfo.scss @@ -1,10 +1,7 @@ .mediaInfoItem { - margin: 0 1em 0 0; + margin-block: 0; + margin-inline: 0 1em; padding: 0; - - [dir="rtl"] & { - margin: 0 0 0 1em; - } } .mediaInfoText { @@ -29,12 +26,7 @@ } .mediaInfoItem:last-child { - margin-right: 0; - - [dir='rtl'] & { - margin-right: unset; - margin-left: 0; - } + margin-inline-end: 0; } .starRatingContainer { diff --git a/src/elements/emby-scrollbuttons/emby-scrollbuttons.scss b/src/elements/emby-scrollbuttons/emby-scrollbuttons.scss index a50424a644..c0bc38317f 100644 --- a/src/elements/emby-scrollbuttons/emby-scrollbuttons.scss +++ b/src/elements/emby-scrollbuttons/emby-scrollbuttons.scss @@ -1,7 +1,7 @@ .emby-scrollbuttons { position: absolute; top: 0; - right: 0; + inset-inline-end: 0; align-items: center; justify-content: center; min-width: 104px; @@ -10,11 +10,6 @@ z-index: 1; color: #fff; display: flex; - - [dir='rtl'] & { - left: 0; - right: unset; - } } .emby-scrollbuttons-button > .material-icons { diff --git a/src/elements/emby-scroller/emby-scroller.scss b/src/elements/emby-scroller/emby-scroller.scss index bf54f07a77..130d0f6042 100644 --- a/src/elements/emby-scroller/emby-scroller.scss +++ b/src/elements/emby-scroller/emby-scroller.scss @@ -9,13 +9,7 @@ /* align first card in scroller to heading */ .itemsContainer > .card > .cardBox { - margin-left: 0; - margin-right: 1.2em; - - [dir="rtl"] & { - margin-right: 0; - margin-left: 1.2em; - } + margin-inline: 0 1.2em; } .servers > .card > .cardBox { diff --git a/src/elements/emby-select/emby-select.scss b/src/elements/emby-select/emby-select.scss index dfac666023..73d32ea12a 100644 --- a/src/elements/emby-select/emby-select.scss +++ b/src/elements/emby-select/emby-select.scss @@ -11,17 +11,14 @@ /* General select styles: change as needed */ font-family: inherit; font-weight: inherit; - padding: 0.5em 1.9em 0.5em 0.5em; + padding-block: 0.5em 0.5em; + padding-inline: 0.5em 1.9em; /* Prevent padding from causing width overflow */ box-sizing: border-box; outline: none !important; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%; - - [dir="rtl"] & { - padding: 0.5em 0.5em 0.5em 1.9em; - } } .emby-select[disabled] { @@ -39,11 +36,9 @@ .selectContainer-inline > .emby-select { padding: 0.3em 1.9em 0.3em 0.5em; + padding-block: 0.3em; + padding-inline: 0.5em 0.9em; font-size: inherit; - - [dir="rtl"] & { - padding: 0.3em 0.5em 0.3em 1.9em; - } } .selectContainer-inline > .emby-select[disabled] { @@ -100,15 +95,10 @@ .selectArrowContainer { position: absolute; - right: 0.3em; + inset-inline-end: 0.3em; top: 0.2em; color: inherit; pointer-events: none; - - [dir="rtl"] & { - right: unset; - left: 0.3em; - } } .selectContainer-inline > .selectArrowContainer { diff --git a/src/elements/emby-slider/emby-slider.scss b/src/elements/emby-slider/emby-slider.scss index 0aa6204ca5..0d73f9a038 100644 --- a/src/elements/emby-slider/emby-slider.scss +++ b/src/elements/emby-slider/emby-slider.scss @@ -151,15 +151,10 @@ width: 100%; box-sizing: border-box; top: 50%; - left: 0; + inset-inline-start: 0; position: absolute; - padding: 0 0.54em; /* half of slider thumb size */ - - [dir="rtl"] & { - left: unset; - right: 0; - padding: 0 0 0 0.54em; - } + padding-block: 0; + padding-inline: 0.54em;/* half of slider thumb size */ } .mdl-slider-background-flex { @@ -168,16 +163,11 @@ margin-top: -0.1em; width: 100%; top: 50%; - left: 0; + inset-inline-start: 0; display: flex; overflow: hidden; border: 0; padding: 0; - - [dir="rtl"] & { - left: unset; - right: 0; - } } .mdl-slider-background-flex-inner { @@ -188,16 +178,11 @@ .mdl-slider-background-lower { /* transition: width 0.18s cubic-bezier(0.4, 0, 0.2, 1); */ position: absolute; - left: 0; + inset-inline-start: 0; width: 0; top: 0; bottom: 0; background-color: #00a4dc; - - [dir="rtl"] & { - left: unset; - right: 0; - } } .mdl-slider-background-lower-clear { @@ -227,11 +212,8 @@ position: absolute; left: 0; right: 0; - margin: 0 0.54em; /* half of slider thumb size */ - - [dir="rtl"] & { - margin: 0 0 0 0.54em; - } + margin-block: 0; + margin-inline: 0.54em; /* half of slider thumb size */ } .sliderBubble { From 4530e44e6259b0e384da5dc7946fd5c9a0c145a9 Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Sun, 3 Jul 2022 09:10:02 -0400 Subject: [PATCH 07/66] Small fix for video player as the progress bar shouldn't be rtl --- src/assets/css/librarybrowser.scss | 2 +- src/controllers/playback/video/index.html | 52 ++++++++++++----------- src/elements/emby-select/emby-select.scss | 5 +-- src/elements/emby-slider/emby-slider.js | 6 +-- src/styles/rtl.scss | 10 +---- 5 files changed, 32 insertions(+), 43 deletions(-) diff --git a/src/assets/css/librarybrowser.scss b/src/assets/css/librarybrowser.scss index 60347ecb93..56cd6bdecd 100644 --- a/src/assets/css/librarybrowser.scss +++ b/src/assets/css/librarybrowser.scss @@ -265,7 +265,7 @@ .dashboardDocument .mainDrawer { z-index: inherit !important; - inset-inline-start: 0 !important; + left: 0 !important; top: 0 !important; transform: none !important; box-shadow: none !important; diff --git a/src/controllers/playback/video/index.html b/src/controllers/playback/video/index.html index c76a1714ae..6c02f51626 100644 --- a/src/controllers/playback/video/index.html +++ b/src/controllers/playback/video/index.html @@ -18,7 +18,7 @@
-
+
@@ -27,37 +27,39 @@
- +
+ - + - + - + - + - + - + - + +
diff --git a/src/elements/emby-select/emby-select.scss b/src/elements/emby-select/emby-select.scss index 73d32ea12a..0b6416dfff 100644 --- a/src/elements/emby-select/emby-select.scss +++ b/src/elements/emby-select/emby-select.scss @@ -11,7 +11,7 @@ /* General select styles: change as needed */ font-family: inherit; font-weight: inherit; - padding-block: 0.5em 0.5em; + padding-block: 0.5em; padding-inline: 0.5em 1.9em; /* Prevent padding from causing width overflow */ @@ -35,9 +35,8 @@ } .selectContainer-inline > .emby-select { - padding: 0.3em 1.9em 0.3em 0.5em; padding-block: 0.3em; - padding-inline: 0.5em 0.9em; + padding-inline: 0.5em 1.9em; font-size: inherit; } diff --git a/src/elements/emby-slider/emby-slider.js b/src/elements/emby-slider/emby-slider.js index 7cab8d5dc2..01e14d6861 100644 --- a/src/elements/emby-slider/emby-slider.js +++ b/src/elements/emby-slider/emby-slider.js @@ -419,11 +419,7 @@ import { getIsRTL } from '../../scripts/globalize'; function setRange(elem, startPercent, endPercent) { const style = elem.style; - if (getIsRTL()) { - style.right = Math.max(startPercent, 0) + '%'; - } else { - style.left = Math.max(startPercent, 0) + '%'; - } + style.insetInlineStart = Math.max(startPercent, 0) + '%'; const widthPercent = endPercent - startPercent; style.width = Math.max(Math.min(widthPercent, 100), 0) + '%'; diff --git a/src/styles/rtl.scss b/src/styles/rtl.scss index 436effb3a1..120649a29b 100644 --- a/src/styles/rtl.scss +++ b/src/styles/rtl.scss @@ -1,22 +1,14 @@ .chevron_right, .chevron_left, .arrow_back, -.play_arrow, .playlist_add, -.video_library, .shuffle, .input, .live_tv, .dvr, -.play_circle_filled, .shopping_cart, .vpn_key, -.skip_next, -.skip_previous, -.fast_forward, -.fast_rewind, -.undo, -.redo { +.volume_up { [dir='rtl'] & { transform: scale(-1, 1); } From 2c22245195fc5dec432e61f52fde76086ae7437d Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Sun, 3 Jul 2022 09:12:43 -0400 Subject: [PATCH 08/66] Small css fix --- src/assets/css/librarybrowser.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/assets/css/librarybrowser.scss b/src/assets/css/librarybrowser.scss index 56cd6bdecd..42c5f56813 100644 --- a/src/assets/css/librarybrowser.scss +++ b/src/assets/css/librarybrowser.scss @@ -477,7 +477,7 @@ .detailPageContent { display: flex; flex-direction: column; - padding-inline: 3.245vw 2%; + padding-inline: 32.45vw 2%; .layout-mobile & { padding-inline: 5%; From bb8d6378fb193954a59ae6f92505b467ddca4012 Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Sun, 3 Jul 2022 09:29:01 -0400 Subject: [PATCH 09/66] More small css fixes --- src/assets/css/librarybrowser.scss | 57 ++++++++++++++++++++++++------ 1 file changed, 46 insertions(+), 11 deletions(-) diff --git a/src/assets/css/librarybrowser.scss b/src/assets/css/librarybrowser.scss index 42c5f56813..3c5a7d9c8a 100644 --- a/src/assets/css/librarybrowser.scss +++ b/src/assets/css/librarybrowser.scss @@ -477,16 +477,31 @@ .detailPageContent { display: flex; flex-direction: column; - padding-inline: 32.45vw 2%; + padding-left: 32.45vw; + padding-right: 2%; .layout-mobile & { - padding-inline: 5%; + padding-left: 5%; + padding-right: 5%; } .layout-desktop &, .layout-tv & { .emby-scroller { - margin-inline-start: 0; + margin-left: 0; + } + } + + [dir="rtl"] & { + padding-right: 32.45vw; + padding-left: 2%; + + .layout-desktop &, + .layout-tv & { + .emby-scroller { + margin-left: unset; + margin-right: 0; + } } } } @@ -648,18 +663,25 @@ .layout-mobile & { display: block; position: relative; - padding-block: 0.5rem; - padding-inline: 5%; + padding: 0.5rem 5%; } .layout-desktop & { position: relative; - padding-inline-start: 32.45vw; + padding-left: 32.45vw; } .layout-tv & { display: block; - padding-inline-start: 32.45vw; + padding-left: 32.45vw; + } + + [dir="rtl"] & { + .layout-desktop &, + .layout-tv & { + padding-right: 32.45vw; + padding-left: unset; + } } } @@ -723,13 +745,13 @@ } .layout-mobile & { - inset-inline-start: 5%; + left: 5%; bottom: 1rem; max-width: 30vw; filter: drop-shadow(0 0 0.5rem #000); @media all and (max-width: 32em) { - inset-inline-start: 0; + left: 0; bottom: 0; } @@ -741,17 +763,30 @@ } .layout-desktop & { - inset-inline-start: 3.3%; + left: 3.3%; top: -80%; width: 25vw; } .layout-tv & { - inset-inline-start: 5%; + left: 5%; top: 50%; width: 25vw; transform: translateY(-50%); } + + [dir="rtl"] & { + left: unset; + + .layout-mobile &, + .layout-tv & { + right: 5%; + } + + .layout-desktop & { + right: 3.3%; + } + } } .detailPagePrimaryContent { From b671da10868ef29e496eea35e6bdc7ce1cfcf19d Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Sun, 3 Jul 2022 09:45:26 -0400 Subject: [PATCH 10/66] Small css fixes and added element --- src/assets/css/librarybrowser.scss | 12 ++++++------ src/controllers/itemDetails/index.js | 4 ++-- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/assets/css/librarybrowser.scss b/src/assets/css/librarybrowser.scss index 3c5a7d9c8a..63c84bb7b8 100644 --- a/src/assets/css/librarybrowser.scss +++ b/src/assets/css/librarybrowser.scss @@ -244,6 +244,10 @@ right: 0; bottom: 0; left: 0; + + [dir="rtl"] & { + transition: right ease-in-out 0.3s, padding ease-in-out 0.3s; + } } .centerMessage { @@ -278,7 +282,7 @@ } .dashboardDocument .skinBody { - inset-inline-start: 20em; + left: 20em; } } @@ -477,8 +481,7 @@ .detailPageContent { display: flex; flex-direction: column; - padding-left: 32.45vw; - padding-right: 2%; + padding-inline: 32.45vw 2%; .layout-mobile & { padding-left: 5%; @@ -493,9 +496,6 @@ } [dir="rtl"] & { - padding-right: 32.45vw; - padding-left: 2%; - .layout-desktop &, .layout-tv & { .emby-scroller { diff --git a/src/controllers/itemDetails/index.js b/src/controllers/itemDetails/index.js index eb8c91f09b..6c3ed0f526 100644 --- a/src/controllers/itemDetails/index.js +++ b/src/controllers/itemDetails/index.js @@ -912,7 +912,7 @@ function renderOverview(page, item) { if (overview) { for (const overviewElemnt of overviewElements) { - overviewElemnt.innerHTML = overview; + overviewElemnt.innerHTML = '' + overview + ''; overviewElemnt.classList.remove('hide'); overviewElemnt.classList.add('detail-clamp-text'); @@ -1065,7 +1065,7 @@ function renderTagline(page, item) { if (item.Taglines && item.Taglines.length) { taglineElement.classList.remove('hide'); - taglineElement.innerText = item.Taglines[0]; + taglineElement.innerHTML = '' + item.Taglines[0] + ''; } else { taglineElement.classList.add('hide'); } From d38518e1e53ec684a225aa4cc100855f2a2043e4 Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Sun, 3 Jul 2022 10:13:06 -0400 Subject: [PATCH 11/66] More small css fixes --- src/assets/css/librarybrowser.scss | 26 ++++++++++++------- src/assets/css/metadataeditor.scss | 2 +- src/components/formdialog.scss | 13 ++++------ src/components/guide/guide.scss | 6 ++--- .../imageUploader/imageUploader.template.html | 2 +- .../imageeditor/imageeditor.template.html | 8 +++--- src/components/indicators/indicators.scss | 2 +- .../libraryoptionseditor.js | 2 +- .../mediaLibraryCreator.template.html | 2 +- .../mediaLibraryEditor/mediaLibraryEditor.js | 2 +- .../mediaLibraryEditor.template.html | 2 +- src/components/mediainfo/mediainfo.scss | 6 ++++- .../metadataEditor.template.html | 8 +++--- src/components/playerstats/playerstats.scss | 2 +- .../recordingcreator/recordingfields.scss | 2 +- src/components/toast/toast.scss | 2 +- src/controllers/dashboard/devices/devices.js | 2 +- src/controllers/dashboard/library.js | 2 +- .../dashboard/plugins/installed/index.js | 2 +- src/elements/emby-input/emby-input.scss | 4 +-- src/elements/emby-radio/emby-radio.scss | 2 +- src/elements/emby-toggle/emby-toggle.scss | 2 +- src/index.html | 2 +- 23 files changed, 55 insertions(+), 48 deletions(-) diff --git a/src/assets/css/librarybrowser.scss b/src/assets/css/librarybrowser.scss index 63c84bb7b8..e913d4d1a9 100644 --- a/src/assets/css/librarybrowser.scss +++ b/src/assets/css/librarybrowser.scss @@ -348,7 +348,7 @@ .headerArrowImage { height: 20px; - margin-left: 0.5em; + margin-inline-start: 0.5em; } .backdropContainer { @@ -378,7 +378,7 @@ } .viewControls + .listTopPaging { - margin-left: 0.5em !important; + margin-inline-start: 0.5em !important; } .criticReview { @@ -439,12 +439,12 @@ } .reviewDate { - margin-left: 1em; + margin-inline-start: 1em; } .reviewScore { position: absolute; - left: 0.8em; + inset-inline-start: 0.8em; } .itemBackdrop { @@ -630,7 +630,7 @@ .layout-mobile .mainDetailButtons { margin-top: 1em; margin-bottom: 0.5em; - margin-left: 0; + margin-inline-start: 0; @include header-poster-padding; @@ -639,6 +639,13 @@ margin-bottom: 0; padding-left: 0; } + + [dir="rtl"] & { + @media all and (max-width: 32em) { + padding-left: unset; + padding-right: 0; + } + } } .subtitle { @@ -909,8 +916,7 @@ div.itemDetailGalleryLink.defaultCardBackground { } .recordingFields button { - margin-left: 0; - margin-right: 0.5em; + margin-inline: 0 0.5em; flex-shrink: 0; } @@ -1145,16 +1151,16 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards { } .sectionTitleButton { - margin-left: 1.5em !important; + margin-inline-start: 1.5em !important; flex-shrink: 0; } .sectionTitleButton + .sectionTitleButton { - margin-left: 0.5em !important; + margin-inline-start: 0.5em !important; } .sectionTitleIconButton { - margin-left: 1.5em !important; + margin-inline-start: 1.5em !important; flex-shrink: 0; font-size: 84% !important; padding: 0.5em !important; diff --git a/src/assets/css/metadataeditor.scss b/src/assets/css/metadataeditor.scss index c17998887b..7cf43e0193 100644 --- a/src/assets/css/metadataeditor.scss +++ b/src/assets/css/metadataeditor.scss @@ -7,7 +7,7 @@ } .libraryTree { - margin-left: 0.25em; + margin-inline-start: 0.25em; } .offlineEditorNode { diff --git a/src/components/formdialog.scss b/src/components/formdialog.scss index 9edd2aa1b2..03fd62f0ea 100644 --- a/src/components/formdialog.scss +++ b/src/components/formdialog.scss @@ -12,7 +12,7 @@ } .formDialogHeaderTitle { - margin-left: 0.25em; + margin-inline-start: 0.25em; /* In case of h1, h2, h3 */ margin-top: 0; @@ -20,7 +20,7 @@ } .formDialogHeaderTitle:first-child { - margin-left: 1em; + margin-inline-start: 1em; } .formDialogContent:not(.no-grow) { @@ -98,8 +98,7 @@ .formDialogFooterItem-autosize { flex-basis: initial; flex-grow: initial; - padding-left: 2em; - padding-right: 2em; + padding-inline: 2em; } @media all and (min-width: 50em) { @@ -108,8 +107,7 @@ } .dialogContentInner { - padding-left: 1.5em; - padding-right: 1.5em; + padding-inline: 1.5em; } } @@ -119,7 +117,6 @@ } .dialogContentInner { - padding-left: 2em; - padding-right: 2em; + padding-inline: 2em; } } diff --git a/src/components/guide/guide.scss b/src/components/guide/guide.scss index 4373f697ec..3ea28c684a 100644 --- a/src/components/guide/guide.scss +++ b/src/components/guide/guide.scss @@ -307,7 +307,7 @@ } .programIcon { - margin-left: 0.5em; + margin-inline-start: 0.5em; height: 1em; width: 1em; font-size: 1.6em; @@ -340,8 +340,8 @@ } .guideChannelName { - margin-left: auto; - margin-right: 1em; + margin-inline-start: auto; + margin-inline-end: 1em; text-overflow: ellipsis; overflow: hidden; max-width: 70%; diff --git a/src/components/imageUploader/imageUploader.template.html b/src/components/imageUploader/imageUploader.template.html index 8903aa0106..5aa5a47041 100644 --- a/src/components/imageUploader/imageUploader.template.html +++ b/src/components/imageUploader/imageUploader.template.html @@ -13,7 +13,7 @@

${HeaderAddUpdateImage}

- diff --git a/src/components/imageeditor/imageeditor.template.html b/src/components/imageeditor/imageeditor.template.html index f878bf9e7f..6a865e6629 100644 --- a/src/components/imageeditor/imageeditor.template.html +++ b/src/components/imageeditor/imageeditor.template.html @@ -11,10 +11,10 @@

${Images}

- -
@@ -26,10 +26,10 @@

${Backdrops}

- -
diff --git a/src/components/indicators/indicators.scss b/src/components/indicators/indicators.scss index 1c23c9f1a2..7351c45072 100644 --- a/src/components/indicators/indicators.scss +++ b/src/components/indicators/indicators.scss @@ -31,7 +31,7 @@ } .indicator + .indicator { - margin-left: 0.25em; + margin-inline-start: 0.25em; } .indicatorIcon { diff --git a/src/components/libraryoptionseditor/libraryoptionseditor.js b/src/components/libraryoptionseditor/libraryoptionseditor.js index 2d67f04f0f..80916fcd82 100644 --- a/src/components/libraryoptionseditor/libraryoptionseditor.js +++ b/src/components/libraryoptionseditor/libraryoptionseditor.js @@ -231,7 +231,7 @@ import template from './libraryoptionseditor.template.html'; html += '

' + globalize.translate('HeaderTypeImageFetchers', globalize.translate('TypeOptionPlural' + availableTypeOptions.Type)) + '

'; const supportedImageTypes = availableTypeOptions.SupportedImageTypes || []; if (supportedImageTypes.length > 1 || supportedImageTypes.length === 1 && supportedImageTypes[0] !== 'Primary') { - html += ''; + html += ''; } html += '
'; html += '
'; diff --git a/src/components/mediaLibraryCreator/mediaLibraryCreator.template.html b/src/components/mediaLibraryCreator/mediaLibraryCreator.template.html index d130c820eb..038df635c0 100644 --- a/src/components/mediaLibraryCreator/mediaLibraryCreator.template.html +++ b/src/components/mediaLibraryCreator/mediaLibraryCreator.template.html @@ -19,7 +19,7 @@

${Folders}

-
diff --git a/src/components/mediaLibraryEditor/mediaLibraryEditor.js b/src/components/mediaLibraryEditor/mediaLibraryEditor.js index 9cbe9b0519..be16582da5 100644 --- a/src/components/mediaLibraryEditor/mediaLibraryEditor.js +++ b/src/components/mediaLibraryEditor/mediaLibraryEditor.js @@ -109,7 +109,7 @@ import template from './mediaLibraryEditor.template.html'; function getFolderHtml(pathInfo, index) { let html = ''; - html += `
`; + html += `
`; html += `
`; html += '

'; html += escapeHtml(pathInfo.Path); diff --git a/src/components/mediaLibraryEditor/mediaLibraryEditor.template.html b/src/components/mediaLibraryEditor/mediaLibraryEditor.template.html index 8f1822520e..de79d2198d 100644 --- a/src/components/mediaLibraryEditor/mediaLibraryEditor.template.html +++ b/src/components/mediaLibraryEditor/mediaLibraryEditor.template.html @@ -12,7 +12,7 @@

${Folders}

-
diff --git a/src/components/mediainfo/mediainfo.scss b/src/components/mediainfo/mediainfo.scss index 74ba9d0f6b..b4345115b8 100644 --- a/src/components/mediainfo/mediainfo.scss +++ b/src/components/mediainfo/mediainfo.scss @@ -47,13 +47,17 @@ } .mediaInfoCriticRating { - padding-left: 1.5em; + padding-inline-start: 1.5em; background-position: left center; background-repeat: no-repeat; background-size: auto 1.2em; min-height: 1.2em; display: flex; align-items: center; + + [dir="rtl"] & { + background-position: right center; + } } .mediaInfoCriticRatingFresh { diff --git a/src/components/metadataEditor/metadataEditor.template.html b/src/components/metadataEditor/metadataEditor.template.html index d301687a45..796bae550a 100644 --- a/src/components/metadataEditor/metadataEditor.template.html +++ b/src/components/metadataEditor/metadataEditor.template.html @@ -194,7 +194,7 @@

${Genres}

-
@@ -203,7 +203,7 @@

${People}

-
@@ -213,7 +213,7 @@

${Studios}

-
@@ -222,7 +222,7 @@

${Tags}

-
diff --git a/src/components/playerstats/playerstats.scss b/src/components/playerstats/playerstats.scss index dfdf75a2e0..fb5f36da05 100644 --- a/src/components/playerstats/playerstats.scss +++ b/src/components/playerstats/playerstats.scss @@ -2,7 +2,7 @@ background: rgba(28, 28, 28, 0.8); border-radius: 0.3em; color: #fff; - left: 1.5em; + inset-inline-start: 1.5em; position: absolute; top: 5em; } diff --git a/src/components/recordingcreator/recordingfields.scss b/src/components/recordingcreator/recordingfields.scss index db0c7e0692..e36ed472f3 100644 --- a/src/components/recordingcreator/recordingfields.scss +++ b/src/components/recordingcreator/recordingfields.scss @@ -1,5 +1,5 @@ .recordingButton { - margin-left: 0; + margin-inline-start: 0; min-width: 10em; } diff --git a/src/components/toast/toast.scss b/src/components/toast/toast.scss index cb16573f48..d15cc27258 100644 --- a/src/components/toast/toast.scss +++ b/src/components/toast/toast.scss @@ -1,6 +1,6 @@ .toastContainer { position: fixed; - left: 0; + inset-inline-start: 0; bottom: 0; pointer-events: none; z-index: 9999999; diff --git a/src/controllers/dashboard/devices/devices.js b/src/controllers/dashboard/devices/devices.js index 100fb1ff57..4ec1a22051 100644 --- a/src/controllers/dashboard/devices/devices.js +++ b/src/controllers/dashboard/devices/devices.js @@ -113,7 +113,7 @@ import confirm from '../../../components/confirm/confirm'; deviceHtml += '
'; if (canEdit || canDelete(device.Id)) { - deviceHtml += '
'; + deviceHtml += '
'; deviceHtml += ''; deviceHtml += '
'; } diff --git a/src/controllers/dashboard/library.js b/src/controllers/dashboard/library.js index df8be24712..cc3dde208e 100644 --- a/src/controllers/dashboard/library.js +++ b/src/controllers/dashboard/library.js @@ -310,7 +310,7 @@ import cardBuilder from '../../components/cardbuilder/cardBuilder'; html += '
'; // always show menu unless explicitly hidden if (virtualFolder.showMenu !== false) { - html += '
'; + html += '
'; html += ''; html += '
'; } diff --git a/src/controllers/dashboard/plugins/installed/index.js b/src/controllers/dashboard/plugins/installed/index.js index 16d9654351..0ce8668ec9 100644 --- a/src/controllers/dashboard/plugins/installed/index.js +++ b/src/controllers/dashboard/plugins/installed/index.js @@ -83,7 +83,7 @@ function getPluginCardHtml(plugin, pluginConfigurationPages) { html += '
'; if (configPage || plugin.CanUninstall) { - html += '
'; + html += '
'; html += ''; html += '
'; } diff --git a/src/elements/emby-input/emby-input.scss b/src/elements/emby-input/emby-input.scss index 08376e5dea..6f7004b298 100644 --- a/src/elements/emby-input/emby-input.scss +++ b/src/elements/emby-input/emby-input.scss @@ -47,12 +47,12 @@ .inlineForm .inputContainer:first-child, .inlineForm .selectContainer:first-child { - margin-left: 0; + margin-inline-start: 0; } .inlineForm .inputContainer:last-child, .inlineForm .selectContainer:last-child { - margin-right: 0; + margin-inline-end: 0; } .inputLabel { diff --git a/src/elements/emby-radio/emby-radio.scss b/src/elements/emby-radio/emby-radio.scss index 2d7f584171..bc62176265 100644 --- a/src/elements/emby-radio/emby-radio.scss +++ b/src/elements/emby-radio/emby-radio.scss @@ -44,7 +44,7 @@ height: 100%; position: absolute; top: 0; - left: 0; + inset-inline-start: 0; z-index: 1; overflow: visible; } diff --git a/src/elements/emby-toggle/emby-toggle.scss b/src/elements/emby-toggle/emby-toggle.scss index 3b5c5a5f64..316624bced 100644 --- a/src/elements/emby-toggle/emby-toggle.scss +++ b/src/elements/emby-toggle/emby-toggle.scss @@ -59,7 +59,7 @@ .mdl-switch__thumb { background: #999; position: absolute; - left: 0; + inset-inline-start: 0; top: -0.25em; height: 1.44em; width: 1.44em; diff --git a/src/index.html b/src/index.html index d77378d3f8..34092e46c7 100644 --- a/src/index.html +++ b/src/index.html @@ -98,7 +98,7 @@ .mainDrawerHandle { position: fixed; top: 0; - left: 0; + inset-inline-start: 0; bottom: 0; z-index: 1; width: 0.8em; From 87190cf31aa0fdb286e7b7cbeb1663cfbdd5ebec Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Sun, 3 Jul 2022 11:58:08 -0400 Subject: [PATCH 12/66] Fixed navbar for RTL layouts --- src/assets/css/librarybrowser.scss | 4 ++++ src/libraries/navdrawer/navdrawer.js | 5 +++-- src/libraries/navdrawer/navdrawer.scss | 13 +++++++++++++ src/scripts/globalize.js | 1 + src/scripts/site.js | 1 - src/styles/rtl.scss | 12 ++++++++++++ 6 files changed, 33 insertions(+), 3 deletions(-) diff --git a/src/assets/css/librarybrowser.scss b/src/assets/css/librarybrowser.scss index e913d4d1a9..dba4937931 100644 --- a/src/assets/css/librarybrowser.scss +++ b/src/assets/css/librarybrowser.scss @@ -813,6 +813,10 @@ .itemDetailImage { width: 100% !important; box-shadow: 0 0.1em 0.5em 0 rgba(0, 0, 0, 0.75); + + [dir="rtl"] & { + box-shadow: 0 0 0.5em 0.1em rgba(0, 0, 0, 0.75); + } } div.itemDetailGalleryLink.defaultCardBackground { diff --git a/src/libraries/navdrawer/navdrawer.js b/src/libraries/navdrawer/navdrawer.js index 8b786ea5fe..74289fd065 100644 --- a/src/libraries/navdrawer/navdrawer.js +++ b/src/libraries/navdrawer/navdrawer.js @@ -7,6 +7,7 @@ import browser from '../../scripts/browser'; import dom from '../../scripts/dom'; import './navdrawer.scss'; import '../../assets/css/scrollstyles.scss'; +import { getIsRTL } from '../../scripts/globalize'; function getTouches(e) { return e.changedTouches || e.targetTouches || e.touches; @@ -193,7 +194,7 @@ class NavDrawer { options.target.classList.add('touch-menu-la'); options.target.style.width = options.width + 'px'; - options.target.style.left = -options.width + 'px'; + options.target.style.insetInlineStart = -options.width + 'px'; if (!options.disableMask) { this.mask = document.createElement('div'); @@ -205,7 +206,7 @@ class NavDrawer { animateToPosition(pos) { const options = this.options; requestAnimationFrame(function () { - options.target.style.transform = pos ? 'translateX(' + pos + 'px)' : 'none'; + options.target.style.transform = pos ? 'translateX(' + (getIsRTL() ? -pos : pos) + 'px)' : 'none'; }); } diff --git a/src/libraries/navdrawer/navdrawer.scss b/src/libraries/navdrawer/navdrawer.scss index 6d5d098de2..9256a38e9b 100644 --- a/src/libraries/navdrawer/navdrawer.scss +++ b/src/libraries/navdrawer/navdrawer.scss @@ -15,6 +15,13 @@ -webkit-transition: -webkit-transform ease-out 40ms, left ease-out 260ms; -o-transition: transform ease-out 40ms, left ease-out 260ms; transition: transform ease-out 40ms, left ease-out 260ms; + + [div="rtl"] & { + -webkit-transition: -webkit-transform ease-out 40ms, right ease-out 260ms; + -o-transition: transform ease-out 40ms, right ease-out 260ms; + transition: transform ease-out 40ms, right ease-out 260ms; + } + z-index: 1099; } @@ -22,6 +29,12 @@ -webkit-transition: -webkit-transform ease-out 240ms, left ease-out 260ms; -o-transition: transform ease-out 240ms, left ease-out 260ms; transition: transform ease-out 240ms, left ease-out 260ms; + + [div="rtl"] & { + -webkit-transition: -webkit-transform ease-out 240ms, right ease-out 260ms; + -o-transition: transform ease-out 240ms, right ease-out 260ms; + transition: transform ease-out 240ms, right ease-out 260ms; + } } .drawer-open { diff --git a/src/scripts/globalize.js b/src/scripts/globalize.js index 201db1153b..c643cca9b7 100644 --- a/src/scripts/globalize.js +++ b/src/scripts/globalize.js @@ -55,6 +55,7 @@ import { currentSettings as userSettings } from './settings/userSettings'; if (isRTL) { document.getElementsByTagName('body')[0].setAttribute('dir', 'rtl'); + import('../styles/rtl.scss'); } else { document.getElementsByTagName('body')[0].setAttribute('dir', 'ltr'); } diff --git a/src/scripts/site.js b/src/scripts/site.js index 0a69aca00e..edf2dab2cd 100644 --- a/src/scripts/site.js +++ b/src/scripts/site.js @@ -100,7 +100,6 @@ function onGlobalizeInit() { import('../assets/css/fonts.scss'); } - import('../styles/rtl.scss'); import('../assets/css/librarybrowser.scss'); loadPlugins().then(function () { diff --git a/src/styles/rtl.scss b/src/styles/rtl.scss index 120649a29b..aaa2083c22 100644 --- a/src/styles/rtl.scss +++ b/src/styles/rtl.scss @@ -13,3 +13,15 @@ transform: scale(-1, 1); } } + +@media all and (min-width: 40em) { + .dashboardDocument .mainDrawer { + left: unset !important; + right: 0 !important; + } + + .dashboardDocument .skinBody { + left: 0 !important; + right: 20em !important; + } +} From 10432a038a1a72a1593a2ff7dfe11ac7abb444b2 Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Sun, 3 Jul 2022 12:14:39 -0400 Subject: [PATCH 13/66] Small fix for message icon --- src/styles/rtl.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/styles/rtl.scss b/src/styles/rtl.scss index aaa2083c22..8ea007dfb3 100644 --- a/src/styles/rtl.scss +++ b/src/styles/rtl.scss @@ -8,7 +8,8 @@ .dvr, .shopping_cart, .vpn_key, -.volume_up { +.volume_up, +.message { [dir='rtl'] & { transform: scale(-1, 1); } From d7e25bab12c7fac2917bfdd691e6a36ee5fd2607 Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Sun, 3 Jul 2022 13:40:58 -0400 Subject: [PATCH 14/66] Fixed emby-progressring Localization --- src/elements/emby-progressring/emby-progressring.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/elements/emby-progressring/emby-progressring.js b/src/elements/emby-progressring/emby-progressring.js index 8c7f890ac6..f174fd6170 100644 --- a/src/elements/emby-progressring/emby-progressring.js +++ b/src/elements/emby-progressring/emby-progressring.js @@ -1,6 +1,7 @@ import './emby-progressring.scss'; import 'webcomponents.js/webcomponents-lite'; import template from './emby-progressring.template.html'; +import { getCurrentDateTimeLocale } from '../../scripts/globalize'; /* eslint-disable indent */ @@ -8,6 +9,7 @@ import template from './emby-progressring.template.html'; EmbyProgressRing.createdCallback = function () { this.classList.add('progressring'); + this.setAttribute('dir', 'ltr'); const instance = this; instance.innerHTML = template; @@ -70,7 +72,10 @@ import template from './emby-progressring.template.html'; this.querySelector('.animate-75-100-b').style.transform = 'rotate(' + angle + 'deg)'; } - this.querySelector('.progressring-text').innerHTML = progress + '%'; + this.querySelector('.progressring-text').innerHTML = new Intl.NumberFormat(getCurrentDateTimeLocale(), { + style: 'percent', + maximumFractionDigits: 0 + }).format(progress / 100); }; EmbyProgressRing.attachedCallback = function () { From 6570c07c6321f1ae5c057d25ce31ca2f6645fc91 Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Sun, 3 Jul 2022 13:42:45 -0400 Subject: [PATCH 15/66] Added arrow-back to inverted icons --- src/styles/rtl.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/styles/rtl.scss b/src/styles/rtl.scss index 8ea007dfb3..3d81d3d024 100644 --- a/src/styles/rtl.scss +++ b/src/styles/rtl.scss @@ -1,6 +1,7 @@ .chevron_right, .chevron_left, .arrow_back, +.arrow_forward, .playlist_add, .shuffle, .input, From 66f33b368b780f3758fa81cba550cf3322056322 Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Sun, 3 Jul 2022 13:46:54 -0400 Subject: [PATCH 16/66] Localized page flippers --- src/components/imageDownloader/imageDownloader.js | 2 +- src/scripts/libraryBrowser.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/imageDownloader/imageDownloader.js b/src/components/imageDownloader/imageDownloader.js index b88eea6688..ad69caa7dc 100644 --- a/src/components/imageDownloader/imageDownloader.js +++ b/src/components/imageDownloader/imageDownloader.js @@ -122,7 +122,7 @@ import template from './imageDownloader.template.html'; html += ''; const startAtDisplay = totalRecordCount ? startIndex + 1 : 0; - html += globalize.translate('ListPaging', startAtDisplay, recordsEnd, totalRecordCount); + html += globalize.translate('ListPaging', startAtDisplay.toLocaleString(), recordsEnd.toLocaleString(), totalRecordCount.toLocaleString()); html += ''; diff --git a/src/scripts/libraryBrowser.js b/src/scripts/libraryBrowser.js index 426b53eb45..2f2268498d 100644 --- a/src/scripts/libraryBrowser.js +++ b/src/scripts/libraryBrowser.js @@ -90,7 +90,7 @@ export function getQueryPagingHtml (options) { if (showControls) { html += ''; - html += globalize.translate('ListPaging', (totalRecordCount ? startIndex + 1 : 0), recordsEnd, totalRecordCount); + html += globalize.translate('ListPaging', (totalRecordCount ? startIndex + 1 : 0).toLocaleString(), recordsEnd.toLocaleString(), totalRecordCount.toLocaleString()); html += ''; } From df39a9a1fff8473cbaed83bc1f4bde67a33150d5 Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Sun, 3 Jul 2022 14:03:39 -0400 Subject: [PATCH 17/66] Uses now proper toLocaleString function --- src/components/cardbuilder/cardBuilder.js | 4 ++-- src/components/imageDownloader/imageDownloader.js | 2 +- src/components/indicators/indicators.js | 5 +++-- src/components/mediainfo/mediainfo.js | 10 ++++------ src/controllers/playback/video/index.js | 2 +- src/elements/emby-slider/emby-slider.js | 5 +++-- src/scripts/datetime.js | 12 ++++++------ src/scripts/globalize.js | 2 +- src/scripts/libraryBrowser.js | 2 +- 9 files changed, 22 insertions(+), 22 deletions(-) diff --git a/src/components/cardbuilder/cardBuilder.js b/src/components/cardbuilder/cardBuilder.js index 4d42366590..d3f6103c57 100644 --- a/src/components/cardbuilder/cardBuilder.js +++ b/src/components/cardbuilder/cardBuilder.js @@ -909,13 +909,13 @@ import { appRouter } from '../appRouter'; } if (options.showYear || options.showSeriesYear) { - const productionYear = item.ProductionYear?.toLocaleString(getCurrentDateTimeLocale(), {useGrouping: false}); + const productionYear = datetime.toLocaleString(item.ProductionYear, {useGrouping: false}); if (item.Type === 'Series') { if (item.Status === 'Continuing') { lines.push(globalize.translate('SeriesYearToPresent', productionYear || '')); } else { if (item.EndDate && item.ProductionYear) { - const endYear = datetime.parseISO8601Date(item.EndDate).getFullYear().toLocaleString(getCurrentDateTimeLocale(), {useGrouping: false}); + const endYear = datetime.toLocaleString(datetime.parseISO8601Date(item.EndDate).getFullYear(), {useGrouping: false}); lines.push(productionYear + ((endYear === item.ProductionYear) ? '' : (' - ' + endYear))); } else { lines.push(productionYear || ''); diff --git a/src/components/imageDownloader/imageDownloader.js b/src/components/imageDownloader/imageDownloader.js index ad69caa7dc..b88eea6688 100644 --- a/src/components/imageDownloader/imageDownloader.js +++ b/src/components/imageDownloader/imageDownloader.js @@ -122,7 +122,7 @@ import template from './imageDownloader.template.html'; html += ''; const startAtDisplay = totalRecordCount ? startIndex + 1 : 0; - html += globalize.translate('ListPaging', startAtDisplay.toLocaleString(), recordsEnd.toLocaleString(), totalRecordCount.toLocaleString()); + html += globalize.translate('ListPaging', startAtDisplay, recordsEnd, totalRecordCount); html += ''; diff --git a/src/components/indicators/indicators.js b/src/components/indicators/indicators.js index 6b6b635c64..9263acec1d 100644 --- a/src/components/indicators/indicators.js +++ b/src/components/indicators/indicators.js @@ -3,6 +3,7 @@ import itemHelper from '../itemHelper'; import '../../elements/emby-progressbar/emby-progressbar'; import './indicators.scss'; import 'material-design-icons-iconfont'; +import { getCurrentDateTimeLocale } from '../../scripts/globalize'; export function enableProgressIndicator(item) { if (item.MediaType === 'Video' && item.Type !== 'TvChannel') { @@ -84,7 +85,7 @@ export function getPlayedIndicatorHtml(item) { if (enablePlayedIndicator(item)) { const userData = item.UserData || {}; if (userData.UnplayedItemCount) { - return '
' + userData.UnplayedItemCount.toLocaleString() + '
'; + return '
' + datetime.toLocaleString(userData.UnplayedItemCount) + '
'; } if (userData.PlayedPercentage && userData.PlayedPercentage >= 100 || (userData.Played)) { @@ -99,7 +100,7 @@ export function getChildCountIndicatorHtml(item, options) { const minCount = options && options.minCount ? options.minCount : 0; if (item.ChildCount && item.ChildCount > minCount) { - return '
' + item.ChildCount.toLocaleString() + '
'; + return '
' + datetime.toLocaleString(item.ChildCount) + '
'; } return ''; diff --git a/src/components/mediainfo/mediainfo.js b/src/components/mediainfo/mediainfo.js index 2172329d89..e92551c0fb 100644 --- a/src/components/mediainfo/mediainfo.js +++ b/src/components/mediainfo/mediainfo.js @@ -111,8 +111,6 @@ import '../../elements/emby-button/emby-button'; const showFolderRuntime = item.Type === 'MusicAlbum' || item.MediaType === 'MusicArtist' || item.Type === 'Playlist' || item.MediaType === 'Playlist' || item.MediaType === 'MusicGenre'; - const dateTimeLocale = getCurrentDateTimeLocale(); - if (showFolderRuntime) { count = item.SongCount || item.ChildCount; @@ -177,13 +175,13 @@ import '../../elements/emby-button/emby-button'; if (options.year !== false && item.ProductionYear && item.Type === 'Series') { if (item.Status === 'Continuing') { - miscInfo.push(globalize.translate('SeriesYearToPresent', item.ProductionYear.toLocaleString(dateTimeLocale, {useGrouping: false}))); + miscInfo.push(globalize.translate('SeriesYearToPresent', datetime.toLocaleString(item.ProductionYear, {useGrouping: false}))); } else if (item.ProductionYear) { - text = item.ProductionYear.toLocaleString(dateTimeLocale, {useGrouping: false}); + text = datetime.toLocaleString(item.ProductionYear, {useGrouping: false}); if (item.EndDate) { try { - const endYear = datetime.parseISO8601Date(item.EndDate).getFullYear().toLocaleString(dateTimeLocale, {useGrouping: false}); + const endYear = datetime.toLocaleString(datetime.parseISO8601Date(item.EndDate).getFullYear(), {useGrouping: false}); if (endYear !== item.ProductionYear) { text += `-${endYear}`; @@ -247,7 +245,7 @@ import '../../elements/emby-button/emby-button'; miscInfo.push(item.ProductionYear); } else if (item.PremiereDate) { try { - text = datetime.parseISO8601Date(item.PremiereDate).getFullYear().toLocaleString(dateTimeLocale, {useGrouping: false}); + text = datetime.toLocaleString(datetime.parseISO8601Date(item.PremiereDate).getFullYear(), {useGrouping: false}); miscInfo.push(text); } catch (e) { console.error('error parsing date:', item.PremiereDate); diff --git a/src/controllers/playback/video/index.js b/src/controllers/playback/video/index.js index d6598dca3e..d4ce165614 100644 --- a/src/controllers/playback/video/index.js +++ b/src/controllers/playback/video/index.js @@ -216,7 +216,7 @@ import { setBackdropTransparency, TRANSPARENCY_LEVEL } from '../../../components let title = itemName; if (item.PremiereDate) { try { - const year = datetime.parseISO8601Date(item.PremiereDate).getFullYear().toLocaleString(getCurrentDateTimeLocale(), {useGrouping: false}); + const year = datetime.toLocaleString(datetime.parseISO8601Date(item.PremiereDate).getFullYear(), {useGrouping: false}); title += ` (${year})`; } catch (e) { console.error(e); diff --git a/src/elements/emby-slider/emby-slider.js b/src/elements/emby-slider/emby-slider.js index 01e14d6861..ba9d9da7cc 100644 --- a/src/elements/emby-slider/emby-slider.js +++ b/src/elements/emby-slider/emby-slider.js @@ -5,7 +5,8 @@ import keyboardnavigation from '../../scripts/keyboardNavigation'; import './emby-slider.scss'; import 'webcomponents.js/webcomponents-lite'; import '../emby-input/emby-input'; -import { getIsRTL } from '../../scripts/globalize'; +import { getCurrentDateTimeLocale, getIsRTL } from '../../scripts/globalize'; +import datetime from '../../scripts/datetime'; /* eslint-disable indent */ @@ -129,7 +130,7 @@ import { getIsRTL } from '../../scripts/globalize'; if (range.getBubbleText) { value = range.getBubbleText(value); } else { - value = mapFractionToValue(range, value / 100).toLocaleString(); + value = datetime.toLocaleString(mapFractionToValue(range, value / 100)); } value = '

' + value + '

'; } diff --git a/src/scripts/datetime.js b/src/scripts/datetime.js index 691d2802f5..df0650beb2 100644 --- a/src/scripts/datetime.js +++ b/src/scripts/datetime.js @@ -1,4 +1,4 @@ -import globalize from './globalize'; +import globalize, { getCurrentDateTimeLocale } from './globalize'; /* eslint-disable indent */ @@ -84,7 +84,7 @@ import globalize from './globalize'; hours = Math.floor(hours); if (hours) { - parts.push(hours.toLocaleString()); + parts.push(toLocaleString(hours)); } ticks -= (hours * ticksPerHour); @@ -95,9 +95,9 @@ import globalize from './globalize'; ticks -= (minutes * ticksPerMinute); if (minutes < 10 && hours) { - minutes = (0).toLocaleString() + minutes.toLocaleString(); + minutes = toLocaleString(0) + toLocaleString(minutes); } else { - minutes = minutes.toLocaleString(); + minutes = toLocaleString(minutes); } parts.push(minutes); @@ -105,9 +105,9 @@ import globalize from './globalize'; seconds = Math.floor(seconds); if (seconds < 10) { - seconds = (0).toLocaleString() + seconds.toLocaleString(); + seconds = toLocaleString(0) + toLocaleString(seconds); } else { - seconds = seconds.toLocaleString(); + seconds = toLocaleString(seconds); } parts.push(seconds); diff --git a/src/scripts/globalize.js b/src/scripts/globalize.js index c643cca9b7..493257bfea 100644 --- a/src/scripts/globalize.js +++ b/src/scripts/globalize.js @@ -213,7 +213,7 @@ import { currentSettings as userSettings } from './settings/userSettings'; export function translate(key) { let val = translateKey(key); for (let i = 1; i < arguments.length; i++) { - val = replaceAll(val, '{' + (i - 1) + '}', arguments[i]); + val = replaceAll(val, '{' + (i - 1) + '}', arguments[i].toLocaleString(currentCulture)); } return val; } diff --git a/src/scripts/libraryBrowser.js b/src/scripts/libraryBrowser.js index 2f2268498d..87ee2a7d46 100644 --- a/src/scripts/libraryBrowser.js +++ b/src/scripts/libraryBrowser.js @@ -90,7 +90,7 @@ export function getQueryPagingHtml (options) { if (showControls) { html += ''; - html += globalize.translate('ListPaging', (totalRecordCount ? startIndex + 1 : 0).toLocaleString(), recordsEnd.toLocaleString(), totalRecordCount.toLocaleString()); + html += globalize.translate('ListPaging', totalRecordCount ? startIndex + 1 : 0, recordsEnd, totalRecordCount); html += ''; } From 894d0d80380cf890948bc89329aae8263fda0923 Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Sun, 3 Jul 2022 14:05:09 -0400 Subject: [PATCH 18/66] fixed minor bug --- src/components/cardbuilder/cardBuilder.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/cardbuilder/cardBuilder.js b/src/components/cardbuilder/cardBuilder.js index d3f6103c57..a77de34a03 100644 --- a/src/components/cardbuilder/cardBuilder.js +++ b/src/components/cardbuilder/cardBuilder.js @@ -909,7 +909,7 @@ import { appRouter } from '../appRouter'; } if (options.showYear || options.showSeriesYear) { - const productionYear = datetime.toLocaleString(item.ProductionYear, {useGrouping: false}); + const productionYear = item.ProductionYear && datetime.toLocaleString(item.ProductionYear, {useGrouping: false}); if (item.Type === 'Series') { if (item.Status === 'Continuing') { lines.push(globalize.translate('SeriesYearToPresent', productionYear || '')); From 27a6b8c1ea33ef3f579b220f3ed157064e79f3f3 Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Sun, 3 Jul 2022 14:12:38 -0400 Subject: [PATCH 19/66] Fixes to the metadata dialog --- src/components/dialog/dialog.template.html | 2 +- src/components/metadataEditor/metadataEditor.template.html | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/dialog/dialog.template.html b/src/components/dialog/dialog.template.html index 6d4310c0f4..5c6f8e9000 100644 --- a/src/components/dialog/dialog.template.html +++ b/src/components/dialog/dialog.template.html @@ -1,5 +1,5 @@
-

+

diff --git a/src/components/metadataEditor/metadataEditor.template.html b/src/components/metadataEditor/metadataEditor.template.html index 796bae550a..faecc5643d 100644 --- a/src/components/metadataEditor/metadataEditor.template.html +++ b/src/components/metadataEditor/metadataEditor.template.html @@ -3,7 +3,7 @@

${Edit}

-
+
`; + html += ``; selectionCommandsPanel.innerHTML = html; From 8c7b7c8d6ba194320219acfda21029d2fa5bc287 Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Sun, 3 Jul 2022 15:04:53 -0400 Subject: [PATCH 21/66] SOme Fixes in the dashboard --- src/controllers/dashboard/dashboard.html | 10 +++++----- src/controllers/dashboard/encodingsettings.html | 6 +++--- src/controllers/dashboard/general.html | 4 ++-- src/controllers/dashboard/logs.js | 2 +- .../dashboard/scheduledtasks/scheduledtasks.js | 2 +- 5 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/controllers/dashboard/dashboard.html b/src/controllers/dashboard/dashboard.html index da3a595330..92794fb4ba 100644 --- a/src/controllers/dashboard/dashboard.html +++ b/src/controllers/dashboard/dashboard.html @@ -80,31 +80,31 @@
${LabelCache}
-
+
${LabelLogs}
-
+
${LabelMetadata}
-
+
${LabelTranscodes}
-
+
${LabelWeb}
-
+
diff --git a/src/controllers/dashboard/encodingsettings.html b/src/controllers/dashboard/encodingsettings.html index 048a957b4e..88fe128aac 100644 --- a/src/controllers/dashboard/encodingsettings.html +++ b/src/controllers/dashboard/encodingsettings.html @@ -220,7 +220,7 @@
- +
@@ -231,7 +231,7 @@
- +
@@ -240,7 +240,7 @@
- +
diff --git a/src/controllers/dashboard/general.html b/src/controllers/dashboard/general.html index 53a22036e3..9b9df89952 100644 --- a/src/controllers/dashboard/general.html +++ b/src/controllers/dashboard/general.html @@ -30,7 +30,7 @@
- +
@@ -40,7 +40,7 @@
- +
diff --git a/src/controllers/dashboard/logs.js b/src/controllers/dashboard/logs.js index a5e7d72e56..39c71f432b 100644 --- a/src/controllers/dashboard/logs.js +++ b/src/controllers/dashboard/logs.js @@ -41,7 +41,7 @@ import alert from '../../components/alert'; let logHtml = ''; logHtml += ''; logHtml += '
'; - logHtml += "

" + log.Name + '

'; + logHtml += "

" + log.Name + '

'; const date = datetime.parseISO8601Date(log.DateModified, true); let text = datetime.toLocaleDateString(date); text += ' ' + datetime.getDisplayTime(date); diff --git a/src/controllers/dashboard/scheduledtasks/scheduledtasks.js b/src/controllers/dashboard/scheduledtasks/scheduledtasks.js index c000986ae9..7bcf3f8115 100644 --- a/src/controllers/dashboard/scheduledtasks/scheduledtasks.js +++ b/src/controllers/dashboard/scheduledtasks/scheduledtasks.js @@ -58,7 +58,7 @@ import '../../../elements/emby-button/emby-button'; html += ''; html += ''; html += '
'; - html += ""; + html += ""; html += "

" + task.Name + '

'; html += "
" + getTaskProgressHtml(task) + '
'; html += ''; From ea85b4a6d7b72c6ef02c03cb8492b7af8f2bee7c Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Sun, 3 Jul 2022 15:05:09 -0400 Subject: [PATCH 22/66] Added to item titles --- src/components/cardbuilder/cardBuilder.js | 2 +- src/controllers/itemDetails/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/cardbuilder/cardBuilder.js b/src/components/cardbuilder/cardBuilder.js index a77de34a03..8b5f2a5e5f 100644 --- a/src/components/cardbuilder/cardBuilder.js +++ b/src/components/cardbuilder/cardBuilder.js @@ -702,7 +702,7 @@ import { appRouter } from '../appRouter'; if (text) { html += "
"; - html += text; + html += '' + text + ''; html += '
'; valid++; diff --git a/src/controllers/itemDetails/index.js b/src/controllers/itemDetails/index.js index 6c3ed0f526..43cfce9e39 100644 --- a/src/controllers/itemDetails/index.js +++ b/src/controllers/itemDetails/index.js @@ -497,7 +497,7 @@ function renderName(item, container, context) { html += '

' + escapeHtml(item.OriginalTitle) + '

'; } - container.innerHTML = html; + container.innerHTML = '' + html + ''; if (html.length) { container.classList.remove('hide'); From bcdc67b5227323d3a2c914bc7b23808e69d49390 Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Sun, 3 Jul 2022 18:21:18 -0400 Subject: [PATCH 23/66] Fixed scrollbuttons on desktop --- src/elements/emby-scrollbuttons/emby-scrollbuttons.js | 11 ++++++++--- src/libraries/scroller.js | 4 ++++ 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/src/elements/emby-scrollbuttons/emby-scrollbuttons.js b/src/elements/emby-scrollbuttons/emby-scrollbuttons.js index c38c20b2c9..2ad7c98020 100644 --- a/src/elements/emby-scrollbuttons/emby-scrollbuttons.js +++ b/src/elements/emby-scrollbuttons/emby-scrollbuttons.js @@ -1,7 +1,7 @@ import './emby-scrollbuttons.scss'; import 'webcomponents.js/webcomponents-lite'; import '../emby-button/paper-icon-button-light'; -import globalize from '../../scripts/globalize'; +import globalize, { getIsRTL } from '../../scripts/globalize'; /* eslint-disable indent */ @@ -42,18 +42,23 @@ const EmbyScrollButtonsPrototype = Object.create(HTMLDivElement.prototype); function updateScrollButtons(scrollButtons, scrollSize, scrollPos, scrollWidth) { // TODO: Check if hack is really needed // hack alert add twenty for rounding errors + let localeAwarePos = scrollPos; + if (getIsRTL()) { + localeAwarePos *= -1; + } + if (scrollWidth <= scrollSize + 20) { scrollButtons.scrollButtonsLeft.classList.add('hide'); scrollButtons.scrollButtonsRight.classList.add('hide'); } - if (scrollPos > 0) { + if (localeAwarePos > 0) { scrollButtons.scrollButtonsLeft.disabled = false; } else { scrollButtons.scrollButtonsLeft.disabled = true; } - const scrollPosEnd = scrollPos + scrollSize; + const scrollPosEnd = localeAwarePos + scrollSize; if (scrollWidth > 0 && scrollPosEnd >= scrollWidth) { scrollButtons.scrollButtonsRight.disabled = true; } else { diff --git a/src/libraries/scroller.js b/src/libraries/scroller.js index 82fb79acb2..45777c2e50 100644 --- a/src/libraries/scroller.js +++ b/src/libraries/scroller.js @@ -9,6 +9,7 @@ import dom from '../scripts/dom'; import focusManager from '../components/focusManager'; import ResizeObserver from 'resize-observer-polyfill'; import '../assets/css/scrollstyles.scss'; +import { getIsRTL } from '../scripts/globalize'; /** * Return type of the value. @@ -268,6 +269,9 @@ const scrollerFactory = function (frame, options) { newPos = within(newPos, pos.start, pos.end); } + if (getIsRTL()) + newPos *= -1; + if (!transform) { nativeScrollTo(nativeScrollElement, newPos, immediate); return; From b0b382ca78f95643c07122ef53de8b3c414c048e Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Sun, 3 Jul 2022 18:54:28 -0400 Subject: [PATCH 24/66] localized production year of search result --- src/components/itemidentifier/itemidentifier.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/itemidentifier/itemidentifier.js b/src/components/itemidentifier/itemidentifier.js index 976e54f6f0..7e2828382d 100644 --- a/src/components/itemidentifier/itemidentifier.js +++ b/src/components/itemidentifier/itemidentifier.js @@ -22,6 +22,7 @@ import '../cardbuilder/card.scss'; import ServerConnections from '../ServerConnections'; import toast from '../toast/toast'; import template from './itemidentifier.template.html'; +import datetime from '../../scripts/datetime'; const enableFocusTransform = !browser.slow && !browser.edge; @@ -166,7 +167,7 @@ import template from './itemidentifier.template.html'; lines.push(escapeHtml(identifyResult.Name)); if (identifyResult.ProductionYear) { - lines.push(identifyResult.ProductionYear); + lines.push(datetime.toLocaleString(identifyResult.ProductionYear)); } let resultHtml = lines.join('
'); From 2354676c58bf254de7b667c3f90eb06c530d5ae4 Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Sun, 3 Jul 2022 18:59:10 -0400 Subject: [PATCH 25/66] Removed grouping --- src/components/itemidentifier/itemidentifier.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/itemidentifier/itemidentifier.js b/src/components/itemidentifier/itemidentifier.js index 7e2828382d..f9244f22c1 100644 --- a/src/components/itemidentifier/itemidentifier.js +++ b/src/components/itemidentifier/itemidentifier.js @@ -167,7 +167,7 @@ import datetime from '../../scripts/datetime'; lines.push(escapeHtml(identifyResult.Name)); if (identifyResult.ProductionYear) { - lines.push(datetime.toLocaleString(identifyResult.ProductionYear)); + lines.push(datetime.toLocaleString(identifyResult.ProductionYear, {useGrouping: false})); } let resultHtml = lines.join('
'); From 5301a98ea155070f14e16b1b93573e8e842ef905 Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Sun, 3 Jul 2022 22:30:18 -0400 Subject: [PATCH 26/66] fixed some css --- src/controllers/dashboard/dashboard.js | 2 +- src/controllers/dashboard/library.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/controllers/dashboard/dashboard.js b/src/controllers/dashboard/dashboard.js index fcf5255a94..e23fde03ba 100644 --- a/src/controllers/dashboard/dashboard.js +++ b/src/controllers/dashboard/dashboard.js @@ -280,7 +280,7 @@ import confirm from '../../components/confirm/confirm'; html += clientImage; } - html += '
'; + html += '
'; html += '
' + escapeHtml(session.DeviceName) + '
'; html += '
' + escapeHtml(DashboardPage.getAppSecondaryText(session)) + '
'; html += '
'; diff --git a/src/controllers/dashboard/library.js b/src/controllers/dashboard/library.js index cc3dde208e..f083e2aefe 100644 --- a/src/controllers/dashboard/library.js +++ b/src/controllers/dashboard/library.js @@ -343,7 +343,7 @@ import cardBuilder from '../../components/cardbuilder/cardBuilder'; html += ' '; html += '
'; } else if (virtualFolder.Locations.length && virtualFolder.Locations.length === 1) { - html += "
"; + html += "
"; html += virtualFolder.Locations[0]; html += '
'; } else { From 7b1afeef8215046fd6794007361a5fb6b46c5f9f Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Mon, 4 Jul 2022 11:56:38 -0400 Subject: [PATCH 27/66] Some library rtl fixes --- src/assets/css/librarybrowser.scss | 47 +++++++++++++++++++++++++-- src/components/alphaPicker/style.scss | 11 ++++++- src/components/listview/listview.js | 4 +-- src/controllers/itemDetails/index.js | 8 ++--- 4 files changed, 60 insertions(+), 10 deletions(-) diff --git a/src/assets/css/librarybrowser.scss b/src/assets/css/librarybrowser.scss index dba4937931..a6464e2b33 100644 --- a/src/assets/css/librarybrowser.scss +++ b/src/assets/css/librarybrowser.scss @@ -32,6 +32,39 @@ } } +@mixin header-poster-padding-rtl() { + padding-left: unset; + padding-right: 37.5%; + + @media all and (min-width: 43.75em) { + padding-right: 25%; + } + + @media all and (min-width: 50em) { + padding-right: 20%; + } + + @media all and (min-width: 75em) { + padding-right: 16.666666666666666666666666666667%; + } + + @media all and (min-width: 87.5em) { + padding-right: 14.285714285714285714285714285714%; + } + + @media all and (min-width: 100em) { + padding-right: 12.5%; + } + + @media all and (min-width: 120em) { + padding-right: 11.111111111111111111111111111111%; + } + + @media all and (min-width: 131.25em) { + padding-right: 10%; + } +} + .headerUserImage, .navMenuOption, .pageTitle { @@ -622,9 +655,9 @@ .layout-mobile .itemName, .layout-mobile .itemMiscInfo, .layout-mobile .mainDetailButtons { - align-items: center; - justify-content: center; - text-align: center; + align-items: center !important; + justify-content: center !important; + text-align: center !important; } .layout-mobile .mainDetailButtons { @@ -641,6 +674,8 @@ } [dir="rtl"] & { + @include header-poster-padding-rtl; + @media all and (max-width: 32em) { padding-left: unset; padding-right: 0; @@ -714,6 +749,12 @@ position: relative; } } + + [dir="rtl"] & { + .layout-mobile & { + @include header-poster-padding-rtl; + } + } } .infoText { diff --git a/src/components/alphaPicker/style.scss b/src/components/alphaPicker/style.scss index 8feb3e50e0..b033891c9f 100644 --- a/src/components/alphaPicker/style.scss +++ b/src/components/alphaPicker/style.scss @@ -107,7 +107,7 @@ } .alphaPicker-fixed-right { - right: 0.4em; + inset-inline-end: 0.4em; } @media all and (min-width: 62.5em) { @@ -116,6 +116,15 @@ } } +[dir="rtl"] { + @media all and (min-width: 62.5em) { + .alphaPicker-fixed-right { + right: unset; + left: 1em; + } + } +} + @media all and (max-height: 31.25em) { .alphaPicker-fixed { display: none !important; diff --git a/src/components/listview/listview.js b/src/components/listview/listview.js index ee75656367..ad0cbccba8 100644 --- a/src/components/listview/listview.js +++ b/src/components/listview/listview.js @@ -149,7 +149,7 @@ import ServerConnections from '../ServerConnections'; elem.classList.add('listItemBodyText'); - elem.innerText = text; + elem.innerHTML = '' + text + ''; html += elem.outerHTML; } @@ -422,7 +422,7 @@ import ServerConnections from '../ServerConnections'; if (enableOverview && item.Overview) { html += '
'; - html += item.Overview; + html += '' + item.Overview + ''; html += '
'; } diff --git a/src/controllers/itemDetails/index.js b/src/controllers/itemDetails/index.js index 43cfce9e39..1022f8c127 100644 --- a/src/controllers/itemDetails/index.js +++ b/src/controllers/itemDetails/index.js @@ -473,7 +473,7 @@ function renderName(item, container, context) { html = '

' + parentNameHtml.join(' - ') + '

'; } } else { - html = '

' + tvShowHtml + '

'; + html = '

' + tvShowHtml + '

'; } } @@ -483,21 +483,21 @@ function renderName(item, container, context) { if (html && !parentNameLast) { if (tvSeasonHtml) { - html += '

' + tvSeasonHtml + ' - ' + name + '

'; + html += '

' + tvSeasonHtml + ' - ' + name + '

'; } else { html += '

' + name + '

'; } } else if (item.OriginalTitle && item.OriginalTitle != item.Name) { html = '

' + name + '

' + html; } else { - html = '

' + name + '

' + html; + html = '

' + name + '

' + html; } if (item.OriginalTitle && item.OriginalTitle != item.Name) { html += '

' + escapeHtml(item.OriginalTitle) + '

'; } - container.innerHTML = '' + html + ''; + container.innerHTML = html; if (html.length) { container.classList.remove('hide'); From 8cd92ab5184efaad768e4ff583d9238a7fcef557 Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Mon, 4 Jul 2022 13:29:32 -0400 Subject: [PATCH 28/66] Fixed touch navDrawer for RTL --- src/libraries/navdrawer/navdrawer.js | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/src/libraries/navdrawer/navdrawer.js b/src/libraries/navdrawer/navdrawer.js index 74289fd065..35293773ee 100644 --- a/src/libraries/navdrawer/navdrawer.js +++ b/src/libraries/navdrawer/navdrawer.js @@ -74,7 +74,10 @@ class NavDrawer { const touch = touches[0] || {}; const endX = touch.clientX || 0; const endY = touch.clientY || 0; - const deltaX = endX - (this.menuTouchStartX || 0); + let deltaX = endX - (this.menuTouchStartX || 0); + if (getIsRTL()) { + deltaX *= -1; + } const deltaY = endY - (this.menuTouchStartY || 0); this.setVelocity(deltaX); @@ -107,7 +110,10 @@ class NavDrawer { const touch = touches[0] || {}; const endX = touch.clientX || 0; const endY = touch.clientY || 0; - const deltaX = endX - (this.menuTouchStartX || 0); + let deltaX = endX - (this.menuTouchStartX || 0); + if (getIsRTL()) { + deltaX *= -1; + } const deltaY = endY - (this.menuTouchStartY || 0); this.currentPos = deltaX; this.checkMenuState(deltaX, deltaY); @@ -162,7 +168,10 @@ class NavDrawer { if (endX <= options.width && this.isVisible) { this.countStart++; - const deltaX = endX - (this.backgroundTouchStartX || 0); + let deltaX = endX - (this.backgroundTouchStartX || 0); + if (getIsRTL()) { + deltaX *= -1; + } if (this.countStart == 1) { this.startPoint = deltaX; @@ -184,7 +193,10 @@ class NavDrawer { const touches = getTouches(e); const touch = touches[0] || {}; const endX = touch.clientX || 0; - const deltaX = endX - (this.backgroundTouchStartX || 0); + let deltaX = endX - (this.backgroundTouchStartX || 0); + if (getIsRTL()) { + deltaX *= -1; + } this.checkMenuState(deltaX); this.countStart = 0; }; From b15953acc2bf0df495918c90407f9e6e681894fe Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Mon, 4 Jul 2022 13:29:46 -0400 Subject: [PATCH 29/66] Added a few bdi tags for a good experience --- src/components/listview/listview.js | 2 +- src/controllers/itemDetails/index.js | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/listview/listview.js b/src/components/listview/listview.js index ad0cbccba8..9db6c78a53 100644 --- a/src/components/listview/listview.js +++ b/src/components/listview/listview.js @@ -487,7 +487,7 @@ import ServerConnections from '../ServerConnections'; if (enableOverview && item.Overview) { html += '
'; - html += item.Overview; + html += '' + item.Overview + ''; html += '
'; } } diff --git a/src/controllers/itemDetails/index.js b/src/controllers/itemDetails/index.js index 1022f8c127..e7d06125ce 100644 --- a/src/controllers/itemDetails/index.js +++ b/src/controllers/itemDetails/index.js @@ -483,12 +483,12 @@ function renderName(item, container, context) { if (html && !parentNameLast) { if (tvSeasonHtml) { - html += '

' + tvSeasonHtml + ' - ' + name + '

'; + html += '

' + tvSeasonHtml + ' - ' + name + '

'; } else { - html += '

' + name + '

'; + html += '

' + name + '

'; } } else if (item.OriginalTitle && item.OriginalTitle != item.Name) { - html = '

' + name + '

' + html; + html = '

' + name + '

' + html; } else { html = '

' + name + '

' + html; } From fc96d4dad15cc83b9ac490d7cc02a47be0340af3 Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Mon, 4 Jul 2022 14:24:08 -0400 Subject: [PATCH 30/66] Fixes buttons in episode overview in RTL layouts --- src/assets/css/librarybrowser.scss | 9 --------- src/styles/rtl.scss | 12 ++++++++++++ 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/src/assets/css/librarybrowser.scss b/src/assets/css/librarybrowser.scss index a6464e2b33..3c12c27a48 100644 --- a/src/assets/css/librarybrowser.scss +++ b/src/assets/css/librarybrowser.scss @@ -672,15 +672,6 @@ margin-bottom: 0; padding-left: 0; } - - [dir="rtl"] & { - @include header-poster-padding-rtl; - - @media all and (max-width: 32em) { - padding-left: unset; - padding-right: 0; - } - } } .subtitle { diff --git a/src/styles/rtl.scss b/src/styles/rtl.scss index 3d81d3d024..68719e0ad2 100644 --- a/src/styles/rtl.scss +++ b/src/styles/rtl.scss @@ -1,3 +1,5 @@ +@import '../assets/css/librarybrowser.scss'; + .chevron_right, .chevron_left, .arrow_back, @@ -27,3 +29,13 @@ right: 20em !important; } } + +.layout-mobile .mainDetailButtons { + padding-left: unset !important; + @include header-poster-padding-rtl; + + @media all and (max-width: 32em) { + padding-left: unset !important; + padding-right: 0 Im !important; + } +} From 4cc07995a26c93c1e7bff04e829b40fdbc2964a7 Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Tue, 5 Jul 2022 15:27:23 -0400 Subject: [PATCH 31/66] Fixed bug with video player --- src/scripts/datetime.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/scripts/datetime.js b/src/scripts/datetime.js index df0650beb2..431b85055c 100644 --- a/src/scripts/datetime.js +++ b/src/scripts/datetime.js @@ -1,4 +1,4 @@ -import globalize, { getCurrentDateTimeLocale } from './globalize'; +import globalize from './globalize'; /* eslint-disable indent */ @@ -84,7 +84,7 @@ import globalize, { getCurrentDateTimeLocale } from './globalize'; hours = Math.floor(hours); if (hours) { - parts.push(toLocaleString(hours)); + parts.push(hours.toLocaleString(globalize.getCurrentDateTimeLocale())); } ticks -= (hours * ticksPerHour); @@ -95,9 +95,9 @@ import globalize, { getCurrentDateTimeLocale } from './globalize'; ticks -= (minutes * ticksPerMinute); if (minutes < 10 && hours) { - minutes = toLocaleString(0) + toLocaleString(minutes); + minutes = (0).toLocaleString(globalize.getCurrentDateTimeLocale()) + minutes.toLocaleString(globalize.getCurrentDateTimeLocale()); } else { - minutes = toLocaleString(minutes); + minutes = minutes.toLocaleString(globalize.getCurrentDateTimeLocale()); } parts.push(minutes); @@ -105,9 +105,9 @@ import globalize, { getCurrentDateTimeLocale } from './globalize'; seconds = Math.floor(seconds); if (seconds < 10) { - seconds = toLocaleString(0) + toLocaleString(seconds); + seconds = (0).toLocaleString(globalize.getCurrentDateTimeLocale()) + seconds.toLocaleString(globalize.getCurrentDateTimeLocale()); } else { - seconds = toLocaleString(seconds); + seconds = seconds.toLocaleString(globalize.getCurrentDateTimeLocale()); } parts.push(seconds); From cb234bf8eea9d7187bf767349fd2e7edb6ea31c2 Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Tue, 5 Jul 2022 15:28:13 -0400 Subject: [PATCH 32/66] Removed useless declarations --- src/components/cardbuilder/cardBuilder.js | 2 +- src/components/indicators/indicators.js | 1 - src/components/mediainfo/mediainfo.js | 2 +- src/controllers/playback/video/index.js | 2 +- 4 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/cardbuilder/cardBuilder.js b/src/components/cardbuilder/cardBuilder.js index 8b5f2a5e5f..2eecb10fa3 100644 --- a/src/components/cardbuilder/cardBuilder.js +++ b/src/components/cardbuilder/cardBuilder.js @@ -11,7 +11,7 @@ import imageLoader from '../images/imageLoader'; import itemHelper from '../itemHelper'; import focusManager from '../focusManager'; import indicators from '../indicators/indicators'; -import globalize, { getCurrentDateTimeLocale } from '../../scripts/globalize'; +import globalize from '../../scripts/globalize'; import layoutManager from '../layoutManager'; import dom from '../../scripts/dom'; import browser from '../../scripts/browser'; diff --git a/src/components/indicators/indicators.js b/src/components/indicators/indicators.js index 9263acec1d..ad7f14e811 100644 --- a/src/components/indicators/indicators.js +++ b/src/components/indicators/indicators.js @@ -3,7 +3,6 @@ import itemHelper from '../itemHelper'; import '../../elements/emby-progressbar/emby-progressbar'; import './indicators.scss'; import 'material-design-icons-iconfont'; -import { getCurrentDateTimeLocale } from '../../scripts/globalize'; export function enableProgressIndicator(item) { if (item.MediaType === 'Video' && item.Type !== 'TvChannel') { diff --git a/src/components/mediainfo/mediainfo.js b/src/components/mediainfo/mediainfo.js index e92551c0fb..daa7ec5747 100644 --- a/src/components/mediainfo/mediainfo.js +++ b/src/components/mediainfo/mediainfo.js @@ -1,6 +1,6 @@ import escapeHtml from 'escape-html'; import datetime from '../../scripts/datetime'; -import globalize, { getCurrentDateTimeLocale } from '../../scripts/globalize'; +import globalize from '../../scripts/globalize'; import { appRouter } from '../appRouter'; import itemHelper from '../itemHelper'; import indicators from '../indicators/indicators'; diff --git a/src/controllers/playback/video/index.js b/src/controllers/playback/video/index.js index d4ce165614..14f56cbcc6 100644 --- a/src/controllers/playback/video/index.js +++ b/src/controllers/playback/video/index.js @@ -10,7 +10,7 @@ import itemHelper from '../../../components/itemHelper'; import mediaInfo from '../../../components/mediainfo/mediainfo'; import focusManager from '../../../components/focusManager'; import { Events } from 'jellyfin-apiclient'; -import globalize, { getCurrentDateTimeLocale } from '../../../scripts/globalize'; +import globalize from '../../../scripts/globalize'; import { appHost } from '../../../components/apphost'; import layoutManager from '../../../components/layoutManager'; import * as userSettings from '../../../scripts/settings/userSettings'; From 7d39af1594ed32d20395a4f98fd2676d5edea99b Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Tue, 5 Jul 2022 19:41:56 -0400 Subject: [PATCH 33/66] Fixed metadataedutor --- src/assets/css/metadataeditor.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/assets/css/metadataeditor.scss b/src/assets/css/metadataeditor.scss index 7cf43e0193..ec8a034e7c 100644 --- a/src/assets/css/metadataeditor.scss +++ b/src/assets/css/metadataeditor.scss @@ -67,6 +67,14 @@ } } +[dir="rtl"] { + @media all and (min-width: 50em) { + .editPageInnerContent { + float: left; + } + } +} + @media all and (min-width: 112.5em) { .editPageSidebar { width: 25%; From 611f90b5646f1e0fbe9ac9c2e11bb30c1348d646 Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Tue, 5 Jul 2022 19:44:55 -0400 Subject: [PATCH 34/66] fixed bugs with video player --- src/assets/css/videoosd.scss | 8 ++++++++ src/elements/emby-slider/emby-slider.js | 8 +++----- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/src/assets/css/videoosd.scss b/src/assets/css/videoosd.scss index c0ef57dd5c..a37a11849d 100644 --- a/src/assets/css/videoosd.scss +++ b/src/assets/css/videoosd.scss @@ -126,6 +126,10 @@ -webkit-box-align: center; -webkit-align-items: center; align-items: center; + + [dir="rtl"] & { + flex-direction: row-reverse; + } } .osdVolumeSliderContainer { @@ -142,6 +146,10 @@ display: -webkit-flex; align-items: center; -webkit-box-align: center; + + [dir="rtl"] & { + flex-direction: row-reverse; + } } .volumeButtons { diff --git a/src/elements/emby-slider/emby-slider.js b/src/elements/emby-slider/emby-slider.js index ba9d9da7cc..63cf524d98 100644 --- a/src/elements/emby-slider/emby-slider.js +++ b/src/elements/emby-slider/emby-slider.js @@ -33,10 +33,8 @@ import datetime from '../../scripts/datetime'; const rect = range.sliderBubbleTrack.getBoundingClientRect(); let fraction = (clientX - rect.left) / rect.width; - - if (getIsRTL()) { - fraction = (rect.width - (clientX - rect.left)) / rect.width; - } + if (getIsRTL()) + fraction = (rect.right - clientX) / rect.width; // Snap to step const valueRange = range.max - range.min; @@ -130,7 +128,7 @@ import datetime from '../../scripts/datetime'; if (range.getBubbleText) { value = range.getBubbleText(value); } else { - value = datetime.toLocaleString(mapFractionToValue(range, value / 100)); + value = mapFractionToValue(range, value / 100).toLocaleString(); } value = '

' + value + '

'; } From 186ef937a584d2fc6ef6353f222ea749abac43d5 Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Tue, 5 Jul 2022 19:45:09 -0400 Subject: [PATCH 35/66] Added ltr specification for file paths --- src/components/mediaLibraryCreator/mediaLibraryCreator.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/mediaLibraryCreator/mediaLibraryCreator.js b/src/components/mediaLibraryCreator/mediaLibraryCreator.js index c1e6826f6e..f7d32ded6c 100644 --- a/src/components/mediaLibraryCreator/mediaLibraryCreator.js +++ b/src/components/mediaLibraryCreator/mediaLibraryCreator.js @@ -121,10 +121,10 @@ import template from './mediaLibraryCreator.template.html'; let html = ''; html += '
'; html += `
`; - html += `
${escapeHtml(pathInfo.Path)}
`; + html += `
${escapeHtml(pathInfo.Path)}
`; if (pathInfo.NetworkPath) { - html += `
${escapeHtml(pathInfo.NetworkPath)}
`; + html += `
${escapeHtml(pathInfo.NetworkPath)}
`; } html += '
'; From 8488f48f99027b2682735d236726e53f6816c023 Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Tue, 5 Jul 2022 19:58:02 -0400 Subject: [PATCH 36/66] Fixed video player --- src/assets/css/videoosd.scss | 4 ---- src/components/actionSheet/actionSheet.scss | 3 +-- src/elements/emby-slider/emby-slider.js | 7 +++---- src/scripts/globalize.js | 13 ++++++++++++- src/styles/rtl.scss | 1 + 5 files changed, 17 insertions(+), 11 deletions(-) diff --git a/src/assets/css/videoosd.scss b/src/assets/css/videoosd.scss index a37a11849d..d6b0090f79 100644 --- a/src/assets/css/videoosd.scss +++ b/src/assets/css/videoosd.scss @@ -146,10 +146,6 @@ display: -webkit-flex; align-items: center; -webkit-box-align: center; - - [dir="rtl"] & { - flex-direction: row-reverse; - } } .volumeButtons { diff --git a/src/components/actionSheet/actionSheet.scss b/src/components/actionSheet/actionSheet.scss index 7c1da7ad18..0b18ca3afa 100644 --- a/src/components/actionSheet/actionSheet.scss +++ b/src/components/actionSheet/actionSheet.scss @@ -64,8 +64,7 @@ display: flex; justify-content: flex-end; flex-shrink: 0; - margin-left: 5em; - margin-right: 0.5em; + margin-inline: 5em 0.5em; } .actionSheetScroller { diff --git a/src/elements/emby-slider/emby-slider.js b/src/elements/emby-slider/emby-slider.js index 63cf524d98..3dc1bc4968 100644 --- a/src/elements/emby-slider/emby-slider.js +++ b/src/elements/emby-slider/emby-slider.js @@ -5,8 +5,7 @@ import keyboardnavigation from '../../scripts/keyboardNavigation'; import './emby-slider.scss'; import 'webcomponents.js/webcomponents-lite'; import '../emby-input/emby-input'; -import { getCurrentDateTimeLocale, getIsRTL } from '../../scripts/globalize'; -import datetime from '../../scripts/datetime'; +import globalize from '../../scripts/globalize'; /* eslint-disable indent */ @@ -33,7 +32,7 @@ import datetime from '../../scripts/datetime'; const rect = range.sliderBubbleTrack.getBoundingClientRect(); let fraction = (clientX - rect.left) / rect.width; - if (getIsRTL()) + if (globalize.getElementIsRTL(range)) fraction = (rect.right - clientX) / rect.width; // Snap to step @@ -115,7 +114,7 @@ import datetime from '../../scripts/datetime'; const bubbleRect = bubble.getBoundingClientRect(); let bubblePos = bubbleTrackRect.width * value / 100; - if (getIsRTL()) { + if (globalize.getElementIsRTL(range)) { bubblePos = bubbleTrackRect.width - bubblePos; } bubblePos = Math.min(Math.max(bubblePos, bubbleRect.width / 2), bubbleTrackRect.width - bubbleRect.width / 2); diff --git a/src/scripts/globalize.js b/src/scripts/globalize.js index 493257bfea..5e1122a9c5 100644 --- a/src/scripts/globalize.js +++ b/src/scripts/globalize.js @@ -43,6 +43,16 @@ import { currentSettings as userSettings } from './settings/userSettings'; return isRTL; } + export function getElementIsRTL(element) { + let elementIsRTL = false; + if (window.getComputedStyle) { // all browsers + elementIsRTL = window.getComputedStyle(element, null).getPropertyValue('direction') == 'rtl'; + } else { + elementIsRTL = element.currentStyle.direction == 'rtl'; // IE5-8 + } + return elementIsRTL; + } + export function updateCurrentCulture() { let culture; try { @@ -271,7 +281,8 @@ export default { getCurrentDateTimeLocale, register, updateCurrentCulture, - getIsRTL + getIsRTL, + getElementIsRTL }; /* eslint-enable indent */ diff --git a/src/styles/rtl.scss b/src/styles/rtl.scss index 68719e0ad2..4e691719ec 100644 --- a/src/styles/rtl.scss +++ b/src/styles/rtl.scss @@ -12,6 +12,7 @@ .shopping_cart, .vpn_key, .volume_up, +.volume_off, .message { [dir='rtl'] & { transform: scale(-1, 1); From 99a67bee64d90ba07f015bb2131d6c23b279f845 Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Tue, 5 Jul 2022 20:06:04 -0400 Subject: [PATCH 37/66] Some cleaning and usage of getIsElementRTL --- .../emby-scrollbuttons/emby-scrollbuttons.js | 4 ++-- src/libraries/navdrawer/navdrawer.js | 12 ++++++------ src/libraries/scroller.js | 4 ++-- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/elements/emby-scrollbuttons/emby-scrollbuttons.js b/src/elements/emby-scrollbuttons/emby-scrollbuttons.js index 2ad7c98020..1f21f7bf21 100644 --- a/src/elements/emby-scrollbuttons/emby-scrollbuttons.js +++ b/src/elements/emby-scrollbuttons/emby-scrollbuttons.js @@ -1,7 +1,7 @@ import './emby-scrollbuttons.scss'; import 'webcomponents.js/webcomponents-lite'; import '../emby-button/paper-icon-button-light'; -import globalize, { getIsRTL } from '../../scripts/globalize'; +import globalize from '../../scripts/globalize'; /* eslint-disable indent */ @@ -43,7 +43,7 @@ const EmbyScrollButtonsPrototype = Object.create(HTMLDivElement.prototype); // TODO: Check if hack is really needed // hack alert add twenty for rounding errors let localeAwarePos = scrollPos; - if (getIsRTL()) { + if (globalize.getElementIsRTL(scrollButtons)) { localeAwarePos *= -1; } diff --git a/src/libraries/navdrawer/navdrawer.js b/src/libraries/navdrawer/navdrawer.js index 35293773ee..e991dd7b86 100644 --- a/src/libraries/navdrawer/navdrawer.js +++ b/src/libraries/navdrawer/navdrawer.js @@ -7,7 +7,7 @@ import browser from '../../scripts/browser'; import dom from '../../scripts/dom'; import './navdrawer.scss'; import '../../assets/css/scrollstyles.scss'; -import { getIsRTL } from '../../scripts/globalize'; +import globalize from '../../scripts/globalize'; function getTouches(e) { return e.changedTouches || e.targetTouches || e.touches; @@ -75,7 +75,7 @@ class NavDrawer { const endX = touch.clientX || 0; const endY = touch.clientY || 0; let deltaX = endX - (this.menuTouchStartX || 0); - if (getIsRTL()) { + if (globalize.getIsRTL()) { deltaX *= -1; } const deltaY = endY - (this.menuTouchStartY || 0); @@ -111,7 +111,7 @@ class NavDrawer { const endX = touch.clientX || 0; const endY = touch.clientY || 0; let deltaX = endX - (this.menuTouchStartX || 0); - if (getIsRTL()) { + if (globalize.getIsRTL()) { deltaX *= -1; } const deltaY = endY - (this.menuTouchStartY || 0); @@ -169,7 +169,7 @@ class NavDrawer { if (endX <= options.width && this.isVisible) { this.countStart++; let deltaX = endX - (this.backgroundTouchStartX || 0); - if (getIsRTL()) { + if (globalize.getIsRTL()) { deltaX *= -1; } @@ -194,7 +194,7 @@ class NavDrawer { const touch = touches[0] || {}; const endX = touch.clientX || 0; let deltaX = endX - (this.backgroundTouchStartX || 0); - if (getIsRTL()) { + if (globalize.getIsRTL()) { deltaX *= -1; } this.checkMenuState(deltaX); @@ -218,7 +218,7 @@ class NavDrawer { animateToPosition(pos) { const options = this.options; requestAnimationFrame(function () { - options.target.style.transform = pos ? 'translateX(' + (getIsRTL() ? -pos : pos) + 'px)' : 'none'; + options.target.style.transform = pos ? 'translateX(' + (globalize.getIsRTL() ? -pos : pos) + 'px)' : 'none'; }); } diff --git a/src/libraries/scroller.js b/src/libraries/scroller.js index 45777c2e50..59918adf6a 100644 --- a/src/libraries/scroller.js +++ b/src/libraries/scroller.js @@ -9,7 +9,7 @@ import dom from '../scripts/dom'; import focusManager from '../components/focusManager'; import ResizeObserver from 'resize-observer-polyfill'; import '../assets/css/scrollstyles.scss'; -import { getIsRTL } from '../scripts/globalize'; +import globalize from '../scripts/globalize'; /** * Return type of the value. @@ -269,7 +269,7 @@ const scrollerFactory = function (frame, options) { newPos = within(newPos, pos.start, pos.end); } - if (getIsRTL()) + if (globalize.getIsRTL()) newPos *= -1; if (!transform) { From ab4bad88a1bb834c0eb6ca999f7532ea3fd79250 Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Tue, 5 Jul 2022 20:45:26 -0400 Subject: [PATCH 38/66] Small css fix media info --- src/assets/css/librarybrowser.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/assets/css/librarybrowser.scss b/src/assets/css/librarybrowser.scss index 3c12c27a48..d650146374 100644 --- a/src/assets/css/librarybrowser.scss +++ b/src/assets/css/librarybrowser.scss @@ -1096,7 +1096,7 @@ div.itemDetailGalleryLink.defaultCardBackground { } .mediaInfoLabel { - margin-right: 1em; + margin-inline-end: 1em; font-weight: 600; } From 233e1822511baab52a511c8cf93b14f00cd8161f Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Tue, 5 Jul 2022 20:48:39 -0400 Subject: [PATCH 39/66] Forced LTR for file path in media info --- src/components/itemMediaInfo/itemMediaInfo.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/itemMediaInfo/itemMediaInfo.js b/src/components/itemMediaInfo/itemMediaInfo.js index 520dccaa4d..b9751a6750 100644 --- a/src/components/itemMediaInfo/itemMediaInfo.js +++ b/src/components/itemMediaInfo/itemMediaInfo.js @@ -66,7 +66,7 @@ const attributeDelimiterHtml = layoutManager.tv ? '' : ': `; } if (version.Path && user && user.Policy.IsAdministrator) { - html += `${createAttribute(globalize.translate('MediaInfoPath'), version.Path)}
`; + html += `${createAttribute(globalize.translate('MediaInfoPath'), version.Path, true)}
`; } if (version.Size) { const size = `${(version.Size / (1024 * 1024)).toFixed(0)} MB`; @@ -212,8 +212,8 @@ const attributeDelimiterHtml = layoutManager.tv ? '' : ': ${label}${attributeDelimiterHtml}${escapeHtml(value)}\n`; + function createAttribute(label, value, isLtr) { + return `${label}${attributeDelimiterHtml}${escapeHtml(value)}\n`; } function loadMediaInfo(itemId, serverId) { From a27ababb3eca89e5fae3e134b3292edd58f9042b Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Tue, 5 Jul 2022 20:49:51 -0400 Subject: [PATCH 40/66] Added a useful comment --- src/components/itemMediaInfo/itemMediaInfo.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/itemMediaInfo/itemMediaInfo.js b/src/components/itemMediaInfo/itemMediaInfo.js index b9751a6750..d149a633a0 100644 --- a/src/components/itemMediaInfo/itemMediaInfo.js +++ b/src/components/itemMediaInfo/itemMediaInfo.js @@ -212,6 +212,7 @@ const attributeDelimiterHtml = layoutManager.tv ? '' : ': ${label}${attributeDelimiterHtml}${escapeHtml(value)}\n`; } From 0f8c87108ba53b577bb2aa9edaf7318cd7d7e982 Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Tue, 5 Jul 2022 21:56:23 -0400 Subject: [PATCH 41/66] Fixed scrollButtons --- .../emby-scrollbuttons/emby-scrollbuttons.js | 7 ++++++ src/libraries/scroller.js | 25 +++++++++++++------ 2 files changed, 25 insertions(+), 7 deletions(-) diff --git a/src/elements/emby-scrollbuttons/emby-scrollbuttons.js b/src/elements/emby-scrollbuttons/emby-scrollbuttons.js index 1f21f7bf21..cd276e40ad 100644 --- a/src/elements/emby-scrollbuttons/emby-scrollbuttons.js +++ b/src/elements/emby-scrollbuttons/emby-scrollbuttons.js @@ -140,6 +140,13 @@ const EmbyScrollButtonsPrototype = Object.create(HTMLDivElement.prototype); newPos = scrollPos + scrollSize; } + if (globalize.getIsRTL() && direction === 'left') { + newPos = scrollPos + scrollSize; + } else if (globalize.getIsRTL()) { + newPos = Math.min(0, scrollPos - scrollSize); + } + console.log(newPos); + scroller.scrollToPosition(newPos, false); } diff --git a/src/libraries/scroller.js b/src/libraries/scroller.js index 59918adf6a..b114dcba17 100644 --- a/src/libraries/scroller.js +++ b/src/libraries/scroller.js @@ -53,7 +53,9 @@ function disableOneEvent(event) { * * @return {Number} */ -function within(number, min, max) { +function within(number, num1, num2) { + const min = Math.min(num1, num2); + const max = Math.max(num1, num2); if (number < min) { return min; } else if (number > max) { @@ -174,6 +176,8 @@ const scrollerFactory = function (frame, options) { // Set position limits & relativess self._pos.end = Math.max(slideeSize - frameSize, 0); + if (globalize.getIsRTL()) + self._pos.end *= -1; } } @@ -269,9 +273,6 @@ const scrollerFactory = function (frame, options) { newPos = within(newPos, pos.start, pos.end); } - if (globalize.getIsRTL()) - newPos *= -1; - if (!transform) { nativeScrollTo(nativeScrollElement, newPos, immediate); return; @@ -360,7 +361,12 @@ const scrollerFactory = function (frame, options) { const slideeOffset = getBoundingClientRect(scrollElement); const itemOffset = getBoundingClientRect(item); - let offset = o.horizontal ? itemOffset.left - slideeOffset.left : itemOffset.top - slideeOffset.top; + let horizontalOffset = itemOffset.left - slideeOffset.left; + if (globalize.getIsRTL()) { + horizontalOffset = itemOffset.right - slideeOffset.right; + } + + let offset = o.horizontal ? horizontalOffset : itemOffset.top - slideeOffset.top; let size = o.horizontal ? itemOffset.width : itemOffset.height; if (!size && size !== 0) { @@ -384,12 +390,17 @@ const scrollerFactory = function (frame, options) { const currentEnd = currentStart + frameSize; console.debug('offset:' + offset + ' currentStart:' + currentStart + ' currentEnd:' + currentEnd); - const isVisible = offset >= currentStart && (offset + size) <= currentEnd; + const isVisible = offset >= Math.min(currentStart, currentEnd) + && (offset + size) <= Math.max(currentStart, currentEnd); + + let end = offset - frameSize + size; + if (globalize.getIsRTL()) + end *= -1; return { start: offset, center: offset + centerOffset - (frameSize / 2) + (size / 2), - end: offset - frameSize + size, + end, size: size, isVisible: isVisible }; From 8b6894808f868174d00f8bb4e2a3591d63936de9 Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Tue, 5 Jul 2022 22:25:13 -0400 Subject: [PATCH 42/66] Fixed video player subtitles --- src/plugins/htmlVideoPlayer/plugin.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/plugins/htmlVideoPlayer/plugin.js b/src/plugins/htmlVideoPlayer/plugin.js index c4204010ab..74bb878a64 100644 --- a/src/plugins/htmlVideoPlayer/plugin.js +++ b/src/plugins/htmlVideoPlayer/plugin.js @@ -1363,6 +1363,7 @@ function tryRemoveElement(elem) { loading.show(); const dlg = document.createElement('div'); + dlg.setAttribute('dir', 'ltr'); dlg.classList.add('videoPlayerContainer'); From b810bdc2f14d8355251a48710c63bfa4c842c82f Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Wed, 6 Jul 2022 21:54:24 -0400 Subject: [PATCH 43/66] Small improvements in behavior --- src/libraries/scroller.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/libraries/scroller.js b/src/libraries/scroller.js index b114dcba17..433652a4d6 100644 --- a/src/libraries/scroller.js +++ b/src/libraries/scroller.js @@ -54,8 +54,12 @@ function disableOneEvent(event) { * @return {Number} */ function within(number, num1, num2) { + if (num2 === undefined) { + return number < num1 ? num1 : number; + } const min = Math.min(num1, num2); const max = Math.max(num1, num2); + console.log(min, max); if (number < min) { return min; } else if (number > max) { @@ -264,6 +268,7 @@ const scrollerFactory = function (frame, options) { * @return {Void} */ self.slideTo = function (newPos, immediate, fullItemPos) { + console.trace(); ensureSizeInfo(); const pos = self._pos; @@ -864,6 +869,7 @@ scrollerFactory.prototype.to = function (location, item, immediate) { this.slideTo(this._pos[location], immediate); } else { const itemPos = this.getPos(item); + console.log(itemPos); if (itemPos) { this.slideTo(itemPos[location], immediate, itemPos); From 94cff6591b37f32e4d028b0f5165ec378b23743d Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Fri, 8 Jul 2022 12:06:20 -0400 Subject: [PATCH 44/66] Small css fix --- src/assets/css/librarybrowser.scss | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/src/assets/css/librarybrowser.scss b/src/assets/css/librarybrowser.scss index d650146374..3426f6b766 100644 --- a/src/assets/css/librarybrowser.scss +++ b/src/assets/css/librarybrowser.scss @@ -1228,11 +1228,21 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards { } .padded-left { - padding-inline-start: 3.3%; + padding-left: 3.3%; + + [dir="rtl"] & { + padding-left: unset; + padding-right: 3.3%; + } } .padded-right { - padding-inline-end: 3.3%; + padding-right: 3.3%; + + [dir="rtl"] & { + padding-right: unset; + padding-left: 3.3%; + } } .padded-top { From 6baba39b7d0ded33419a74cbafb5b91f645cfc97 Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Fri, 8 Jul 2022 12:06:40 -0400 Subject: [PATCH 45/66] ColeSmell fix --- src/libraries/navdrawer/navdrawer.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/libraries/navdrawer/navdrawer.js b/src/libraries/navdrawer/navdrawer.js index e991dd7b86..64306c2dbb 100644 --- a/src/libraries/navdrawer/navdrawer.js +++ b/src/libraries/navdrawer/navdrawer.js @@ -217,8 +217,9 @@ class NavDrawer { animateToPosition(pos) { const options = this.options; + const languageAwarePos = globalize.getIsRTL() ? -pos : pos; requestAnimationFrame(function () { - options.target.style.transform = pos ? 'translateX(' + (globalize.getIsRTL() ? -pos : pos) + 'px)' : 'none'; + options.target.style.transform = pos ? 'translateX(' + languageAwarePos + 'px)' : 'none'; }); } From f2e6f9ff71356b973f0e4271e0a2b7b09ad81ef9 Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Fri, 8 Jul 2022 12:21:35 -0400 Subject: [PATCH 46/66] Fixed scroller tv --- src/libraries/scroller.js | 27 +++++++++++++-------------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/src/libraries/scroller.js b/src/libraries/scroller.js index 433652a4d6..4fa5e6de70 100644 --- a/src/libraries/scroller.js +++ b/src/libraries/scroller.js @@ -54,7 +54,9 @@ function disableOneEvent(event) { * @return {Number} */ function within(number, num1, num2) { - if (num2 === undefined) { + if (num2 === undefined && globalize.getIsRTL()) { + return number > num1 ? num1 : number; + } else if (num2 === undefined) { return number < num1 ? num1 : number; } const min = Math.min(num1, num2); @@ -268,12 +270,11 @@ const scrollerFactory = function (frame, options) { * @return {Void} */ self.slideTo = function (newPos, immediate, fullItemPos) { - console.trace(); ensureSizeInfo(); const pos = self._pos; if (layoutManager.tv) { - newPos = within(newPos, pos.start); + newPos = within(-newPos, pos.start); } else { newPos = within(newPos, pos.start, pos.end); } @@ -368,7 +369,7 @@ const scrollerFactory = function (frame, options) { let horizontalOffset = itemOffset.left - slideeOffset.left; if (globalize.getIsRTL()) { - horizontalOffset = itemOffset.right - slideeOffset.right; + horizontalOffset = slideeOffset.right - itemOffset.right; } let offset = o.horizontal ? horizontalOffset : itemOffset.top - slideeOffset.top; @@ -392,22 +393,21 @@ const scrollerFactory = function (frame, options) { ensureSizeInfo(); const currentStart = self._pos.cur; - const currentEnd = currentStart + frameSize; + let currentEnd = currentStart + frameSize; + if (globalize.getIsRTL()) { + currentEnd = currentStart - frameSize; + } console.debug('offset:' + offset + ' currentStart:' + currentStart + ' currentEnd:' + currentEnd); const isVisible = offset >= Math.min(currentStart, currentEnd) - && (offset + size) <= Math.max(currentStart, currentEnd); - - let end = offset - frameSize + size; - if (globalize.getIsRTL()) - end *= -1; + && (globalize.getIsRTL() ? (offset - size) : (offset + size)) <= Math.max(currentStart, currentEnd); return { start: offset, center: offset + centerOffset - (frameSize / 2) + (size / 2), - end, - size: size, - isVisible: isVisible + end: offset - frameSize + size, + size, + isVisible }; }; @@ -869,7 +869,6 @@ scrollerFactory.prototype.to = function (location, item, immediate) { this.slideTo(this._pos[location], immediate); } else { const itemPos = this.getPos(item); - console.log(itemPos); if (itemPos) { this.slideTo(itemPos[location], immediate, itemPos); From d719ee6a07fba8ff6e7fedac8af440812aeaae7e Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Fri, 8 Jul 2022 12:41:58 -0400 Subject: [PATCH 47/66] Fixed language detection --- src/scripts/globalize.js | 33 +++++++++++++++++++++++++-------- 1 file changed, 25 insertions(+), 8 deletions(-) diff --git a/src/scripts/globalize.js b/src/scripts/globalize.js index 5e1122a9c5..f7da47d8e8 100644 --- a/src/scripts/globalize.js +++ b/src/scripts/globalize.js @@ -6,6 +6,7 @@ import { currentSettings as userSettings } from './settings/userSettings'; /* eslint-disable indent */ const fallbackCulture = 'en-us'; + const RTL_LANGS = ['ar', 'fa', 'ur', 'he']; const allTranslations = {}; let currentCulture; @@ -43,6 +44,29 @@ import { currentSettings as userSettings } from './settings/userSettings'; return isRTL; } + function checkAndProcessDir(culture) { + for (const lang of RTL_LANGS) { + if (culture.includes(lang)) { + isRTL = true; + break; + } + } + + if (isRTL) + processIsRTL(); + else + processIsLTR(); + } + + function processIsRTL() { + document.getElementsByTagName('body')[0].setAttribute('dir', 'rtl'); + import('../styles/rtl.scss'); + } + + function processIsLTR() { + document.getElementsByTagName('body')[0].setAttribute('dir', 'ltr'); + } + export function getElementIsRTL(element) { let elementIsRTL = false; if (window.getComputedStyle) { // all browsers @@ -61,14 +85,7 @@ import { currentSettings as userSettings } from './settings/userSettings'; console.error('no language set in user settings'); } culture = culture || getDefaultLanguage(); - isRTL = culture === 'ar' || culture === 'fa' || culture === 'ur_PK' || culture === 'he'; - - if (isRTL) { - document.getElementsByTagName('body')[0].setAttribute('dir', 'rtl'); - import('../styles/rtl.scss'); - } else { - document.getElementsByTagName('body')[0].setAttribute('dir', 'ltr'); - } + checkAndProcessDir(culture); currentCulture = normalizeLocaleName(culture); From 76b0e8c01c099edce3166815e23a9a09532e3268 Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Fri, 8 Jul 2022 12:43:15 -0400 Subject: [PATCH 48/66] Cleaned up element dir detection funciton --- src/scripts/globalize.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/scripts/globalize.js b/src/scripts/globalize.js index f7da47d8e8..01e622f00f 100644 --- a/src/scripts/globalize.js +++ b/src/scripts/globalize.js @@ -68,13 +68,10 @@ import { currentSettings as userSettings } from './settings/userSettings'; } export function getElementIsRTL(element) { - let elementIsRTL = false; if (window.getComputedStyle) { // all browsers - elementIsRTL = window.getComputedStyle(element, null).getPropertyValue('direction') == 'rtl'; - } else { - elementIsRTL = element.currentStyle.direction == 'rtl'; // IE5-8 + return window.getComputedStyle(element, null).getPropertyValue('direction') == 'rtl'; } - return elementIsRTL; + return element.currentStyle.direction == 'rtl'; } export function updateCurrentCulture() { From 37a63038002cd61a2710b1e8f54c63f8dc887ddb Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Fri, 8 Jul 2022 13:25:59 -0400 Subject: [PATCH 49/66] Final commit --- src/assets/css/librarybrowser.scss | 43 +++++++++++-------- .../emby-scrollbuttons/emby-scrollbuttons.js | 1 - src/libraries/scroller.js | 1 - src/scripts/globalize.js | 3 ++ src/styles/rtl.scss | 22 ---------- 5 files changed, 29 insertions(+), 41 deletions(-) diff --git a/src/assets/css/librarybrowser.scss b/src/assets/css/librarybrowser.scss index 3426f6b766..aa46f18f86 100644 --- a/src/assets/css/librarybrowser.scss +++ b/src/assets/css/librarybrowser.scss @@ -308,6 +308,11 @@ box-shadow: none !important; width: 20.205em !important; font-size: 94%; + + [dir="rtl"] & { + left: unset !important; + right: 0 !important; + } } .dashboardDocument .mainDrawer-scrollContainer { @@ -316,6 +321,11 @@ .dashboardDocument .skinBody { left: 20em; + + [dir="rtl"] & { + left: 0 !important; + right: 20em !important; + } } } @@ -672,6 +682,15 @@ margin-bottom: 0; padding-left: 0; } + + [dir="rtl"] & { + padding-left: unset !important; + @include header-poster-padding-rtl; + + @media all and (max-width: 32em) { + padding-right: 0 !important; + } + } } .subtitle { @@ -696,24 +715,24 @@ .layout-mobile & { display: block; position: relative; - padding: 0.5rem 5%; + padding: 0.5rem 5% !important; } .layout-desktop & { position: relative; - padding-left: 32.45vw; + padding-left: 32.45vw !important; } .layout-tv & { display: block; - padding-left: 32.45vw; + padding-left: 32.45vw !important; } [dir="rtl"] & { .layout-desktop &, .layout-tv & { - padding-right: 32.45vw; - padding-left: unset; + padding-right: 32.45vw !important; + padding-left: unset !important; } } } @@ -1228,21 +1247,11 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards { } .padded-left { - padding-left: 3.3%; - - [dir="rtl"] & { - padding-left: unset; - padding-right: 3.3%; - } + padding-inline-start: 3.3%; } .padded-right { - padding-right: 3.3%; - - [dir="rtl"] & { - padding-right: unset; - padding-left: 3.3%; - } + padding-inline-end: 3.3%; } .padded-top { diff --git a/src/elements/emby-scrollbuttons/emby-scrollbuttons.js b/src/elements/emby-scrollbuttons/emby-scrollbuttons.js index cd276e40ad..f92c05ae52 100644 --- a/src/elements/emby-scrollbuttons/emby-scrollbuttons.js +++ b/src/elements/emby-scrollbuttons/emby-scrollbuttons.js @@ -145,7 +145,6 @@ const EmbyScrollButtonsPrototype = Object.create(HTMLDivElement.prototype); } else if (globalize.getIsRTL()) { newPos = Math.min(0, scrollPos - scrollSize); } - console.log(newPos); scroller.scrollToPosition(newPos, false); } diff --git a/src/libraries/scroller.js b/src/libraries/scroller.js index 4fa5e6de70..7d906c6498 100644 --- a/src/libraries/scroller.js +++ b/src/libraries/scroller.js @@ -61,7 +61,6 @@ function within(number, num1, num2) { } const min = Math.min(num1, num2); const max = Math.max(num1, num2); - console.log(min, max); if (number < min) { return min; } else if (number > max) { diff --git a/src/scripts/globalize.js b/src/scripts/globalize.js index 01e622f00f..af51255a71 100644 --- a/src/scripts/globalize.js +++ b/src/scripts/globalize.js @@ -45,6 +45,7 @@ import { currentSettings as userSettings } from './settings/userSettings'; } function checkAndProcessDir(culture) { + isRTL = false; for (const lang of RTL_LANGS) { if (culture.includes(lang)) { isRTL = true; @@ -60,11 +61,13 @@ import { currentSettings as userSettings } from './settings/userSettings'; function processIsRTL() { document.getElementsByTagName('body')[0].setAttribute('dir', 'rtl'); + document.getElementsByTagName('html')[0].setAttribute('dir', 'rtl'); import('../styles/rtl.scss'); } function processIsLTR() { document.getElementsByTagName('body')[0].setAttribute('dir', 'ltr'); + document.getElementsByTagName('html')[0].setAttribute('dir', 'ltr'); } export function getElementIsRTL(element) { diff --git a/src/styles/rtl.scss b/src/styles/rtl.scss index 4e691719ec..61d06b2a2c 100644 --- a/src/styles/rtl.scss +++ b/src/styles/rtl.scss @@ -18,25 +18,3 @@ transform: scale(-1, 1); } } - -@media all and (min-width: 40em) { - .dashboardDocument .mainDrawer { - left: unset !important; - right: 0 !important; - } - - .dashboardDocument .skinBody { - left: 0 !important; - right: 20em !important; - } -} - -.layout-mobile .mainDetailButtons { - padding-left: unset !important; - @include header-poster-padding-rtl; - - @media all and (max-width: 32em) { - padding-left: unset !important; - padding-right: 0 Im !important; - } -} From d7fd0413d42034d38436261834c0778cf58a251c Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Fri, 8 Jul 2022 13:27:52 -0400 Subject: [PATCH 50/66] Fixed small linting issue --- src/assets/css/librarybrowser.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/assets/css/librarybrowser.scss b/src/assets/css/librarybrowser.scss index aa46f18f86..733f613603 100644 --- a/src/assets/css/librarybrowser.scss +++ b/src/assets/css/librarybrowser.scss @@ -685,6 +685,7 @@ [dir="rtl"] & { padding-left: unset !important; + @include header-poster-padding-rtl; @media all and (max-width: 32em) { From db98c429563b2546bd52279f6a57c5e8230a0839 Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Fri, 8 Jul 2022 19:21:49 -0400 Subject: [PATCH 51/66] Small css fix --- src/components/cardbuilder/card.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/cardbuilder/card.scss b/src/components/cardbuilder/card.scss index 6f9ee2699a..7ed17739f2 100644 --- a/src/components/cardbuilder/card.scss +++ b/src/components/cardbuilder/card.scss @@ -364,7 +364,7 @@ button::-moz-focus-inner { .cardTextCentered, .cardTextCentered > .textActionButton { - text-align: center; + text-align: center !important; } .cardText-rightmargin { From ece21d0de014eb9abdcaf0f6e20aa9595db603d7 Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Fri, 8 Jul 2022 22:25:41 -0400 Subject: [PATCH 52/66] Deployed music player fixes --- src/components/actionSheet/actionSheet.scss | 5 ++-- src/components/listview/listview.scss | 2 +- src/components/nowPlayingBar/nowPlayingBar.js | 4 ++-- .../nowPlayingBar/nowPlayingBar.scss | 10 ++++---- .../remotecontrol/remotecontrol.scss | 24 +++++++++++-------- src/controllers/playback/queue/index.html | 4 ++-- 6 files changed, 27 insertions(+), 22 deletions(-) diff --git a/src/components/actionSheet/actionSheet.scss b/src/components/actionSheet/actionSheet.scss index 0b18ca3afa..b55ffe9480 100644 --- a/src/components/actionSheet/actionSheet.scss +++ b/src/components/actionSheet/actionSheet.scss @@ -100,7 +100,8 @@ } .actionsheetMenuItemIcon { - margin: 0 0.85em 0 0.45em !important; + margin-block: 0 !important; + margin-inline: 0.45em 0.85em !important; padding: 0 !important; } @@ -111,5 +112,5 @@ .btnCloseActionSheet { position: fixed; top: 0.75em; - left: 0.5em; + inset-inline-start: 0.5em; } diff --git a/src/components/listview/listview.scss b/src/components/listview/listview.scss index e8f3401318..6be15a62d1 100644 --- a/src/components/listview/listview.scss +++ b/src/components/listview/listview.scss @@ -75,7 +75,7 @@ } .listViewDragHandle { - margin-left: -0.25em !important; + margin-inline-start: -0.25em !important; touch-action: none; } diff --git a/src/components/nowPlayingBar/nowPlayingBar.js b/src/components/nowPlayingBar/nowPlayingBar.js index 4277100168..bc91e520a6 100644 --- a/src/components/nowPlayingBar/nowPlayingBar.js +++ b/src/components/nowPlayingBar/nowPlayingBar.js @@ -47,7 +47,7 @@ import { appRouter } from '../appRouter'; html += '
'; html += '
'; - html += '
'; + html += '
'; html += ''; html += '
'; @@ -57,7 +57,7 @@ import { appRouter } from '../appRouter'; html += '
'; // The onclicks are needed due to the return false above - html += '
'; + html += '
'; html += ''; diff --git a/src/components/nowPlayingBar/nowPlayingBar.scss b/src/components/nowPlayingBar/nowPlayingBar.scss index b90ff2008d..be420f69ec 100644 --- a/src/components/nowPlayingBar/nowPlayingBar.scss +++ b/src/components/nowPlayingBar/nowPlayingBar.scss @@ -54,11 +54,10 @@ white-space: nowrap; text-overflow: ellipsis; vertical-align: middle; - text-align: left; + text-align: start; flex-grow: 1; font-size: 92%; - margin-right: 1em; - margin-left: 0.5em; + margin-inline: 0.5em 1em; } .nowPlayingBarCenter { @@ -92,7 +91,8 @@ .nowPlayingBarRight { position: relative; - margin: 0 0.5em 0 auto; + margin-block: 0; + margin-inline: auto 0.5em; /* Need this to make sure it's on top of nowPlayingBarPositionContainer so that buttons are fully clickable */ z-index: 2; @@ -110,7 +110,7 @@ } .nowPlayingBarVolumeSliderContainer { - margin-right: 2em; + margin-inline-end: 2em; } .nowPlayingBarUserDataButtons { diff --git a/src/components/remotecontrol/remotecontrol.scss b/src/components/remotecontrol/remotecontrol.scss index 6dc769e710..59bdf83dff 100644 --- a/src/components/remotecontrol/remotecontrol.scss +++ b/src/components/remotecontrol/remotecontrol.scss @@ -51,6 +51,10 @@ .nowPlayingButtonsContainer { display: flex; + + [dir="rtl"] & { + flex-direction: row-reverse; + } } .infoContainer, @@ -94,7 +98,7 @@ .nowPlayingPageImageContainer { width: 16%; - margin-right: 1em; + margin-inline-end: 1em; position: relative; -webkit-flex-shrink: 0; flex-shrink: 0; @@ -265,7 +269,7 @@ @media all and (min-width: 80em) { .nowPlayingPageImageContainer { - margin-right: 0.75em; + margin-inline-end: 0.75em; } } @@ -362,23 +366,23 @@ .nowPlayingInfoControls .nowPlayingPageUserDataButtonsTitle button { padding-top: 0; - padding-right: 0; - margin-right: 0; - float: right; + padding-inline-end: 0; + margin-inline-end: 0; + float: inline-end; border-radius: 0; } .nowPlayingInfoButtons .btnRepeat, .nowPlayingInfoButtons .btnRewind { - margin-left: 0; - margin-right: auto; + margin-inline-start: 0; + margin-inline-end: auto; font-size: smaller; } .nowPlayingInfoButtons .btnShuffleQueue, .nowPlayingInfoButtons .btnFastForward { - margin-left: auto; - margin-right: 0; + margin-inline-start: auto; + margin-inline-end: 0; font-size: smaller; } @@ -410,7 +414,7 @@ .nowPlayingButtonsContainer { display: flex; - flex-direction: column; + flex-direction: column !important; } } diff --git a/src/controllers/playback/queue/index.html b/src/controllers/playback/queue/index.html index b5f5bf2cf6..cb4706f152 100644 --- a/src/controllers/playback/queue/index.html +++ b/src/controllers/playback/queue/index.html @@ -18,7 +18,7 @@
-
+
@@ -28,7 +28,7 @@
-
+
diff --git a/src/components/imageUploader/style.scss b/src/components/imageUploader/style.scss index dc4fecb108..5944b09f67 100644 --- a/src/components/imageUploader/style.scss +++ b/src/components/imageUploader/style.scss @@ -10,3 +10,7 @@ align-items: center; justify-content: center; } + +.raised.raised-mini.btnBrowse { + margin-left:1.5em; +} diff --git a/src/components/imageeditor/imageeditor.scss b/src/components/imageeditor/imageeditor.scss index 5587e7d8d1..7705b634a2 100644 --- a/src/components/imageeditor/imageeditor.scss +++ b/src/components/imageeditor/imageeditor.scss @@ -7,3 +7,23 @@ .first-imageEditor-buttons { margin-top: 2em; } + +.btnBrowseAllImages { + [dir="ltr"] & { + margin-left: 1em; + } + + [dir="rtl"] & { + margin-right: 1em + } +} + +.btnOpenUploadMenu { + [dir="ltr"] & { + margin-left: .5em; + } + + [dir="rtl"] & { + margin-right: .5em; + } +} diff --git a/src/components/imageeditor/imageeditor.template.html b/src/components/imageeditor/imageeditor.template.html index 6a865e6629..f8679bd0a0 100644 --- a/src/components/imageeditor/imageeditor.template.html +++ b/src/components/imageeditor/imageeditor.template.html @@ -11,10 +11,10 @@

${Images}

- -
@@ -26,10 +26,10 @@

${Backdrops}

- -
diff --git a/src/components/indicators/indicators.scss b/src/components/indicators/indicators.scss index 7351c45072..3130150d31 100644 --- a/src/components/indicators/indicators.scss +++ b/src/components/indicators/indicators.scss @@ -7,8 +7,16 @@ .itemProgressBarForeground { position: absolute; - inset-block: 0; - inset-inline-start: 0; + top: 0; + bottom: 0; + + [dir="ltr"] & { + left: 0; + } + + [dir="rtl"] & { + right: 0; + } } .indicator { @@ -31,7 +39,13 @@ } .indicator + .indicator { - margin-inline-start: 0.25em; + [dir="ltr"] & { + margin-left: 0.25em; + } + + [dir="rtl"] & { + margin-right: 0.25em; + } } .indicatorIcon { diff --git a/src/components/libraryoptionseditor/libraryoptionseditor.js b/src/components/libraryoptionseditor/libraryoptionseditor.js index 80916fcd82..309e52321c 100644 --- a/src/components/libraryoptionseditor/libraryoptionseditor.js +++ b/src/components/libraryoptionseditor/libraryoptionseditor.js @@ -11,6 +11,7 @@ import dom from '../../scripts/dom'; import '../../elements/emby-checkbox/emby-checkbox'; import '../../elements/emby-select/emby-select'; import '../../elements/emby-input/emby-input'; +import './style.scss'; import template from './libraryoptionseditor.template.html'; function populateLanguages(parent) { @@ -231,7 +232,7 @@ import template from './libraryoptionseditor.template.html'; html += '

' + globalize.translate('HeaderTypeImageFetchers', globalize.translate('TypeOptionPlural' + availableTypeOptions.Type)) + '

'; const supportedImageTypes = availableTypeOptions.SupportedImageTypes || []; if (supportedImageTypes.length > 1 || supportedImageTypes.length === 1 && supportedImageTypes[0] !== 'Primary') { - html += ''; + html += ''; } html += '
'; html += '
'; diff --git a/src/components/libraryoptionseditor/style.scss b/src/components/libraryoptionseditor/style.scss new file mode 100644 index 0000000000..a632e1bc9b --- /dev/null +++ b/src/components/libraryoptionseditor/style.scss @@ -0,0 +1,9 @@ +.raised.btnImageOptionsForType { + [dir="ltr"] & { + margin-left:1.5em; + } + + [dir="rtl"] & { + margin-right:1.5em; + } +} diff --git a/src/components/listview/listview.scss b/src/components/listview/listview.scss index 6be15a62d1..3d138cb752 100644 --- a/src/components/listview/listview.scss +++ b/src/components/listview/listview.scss @@ -9,10 +9,18 @@ margin: 0; display: block; align-items: center; - text-align: start; - padding: 0.25em 0.25em 0.25em 0.5em; cursor: pointer; overflow: hidden; + + [dir="ltr"] & { + text-align: left; + padding: 0.25em 0.25em 0.25em 0.5em; + } + + [dir="rtl"] & { + text-align: right; + padding: 0.25em 0.5em 0.25em 0.25em; + } } .listItem-withContentWrapper { @@ -211,7 +219,14 @@ width: 1em !important; height: 1em !important; font-size: 143%; - margin: 0 0.25em 0 0; + + [dir="ltr"] & { + margin: 0 0.25em 0 0; + } + + [dir="rtl"] & { + margin: 0 0 0 0.25em; + } } .listItemIcon:not(.listItemIcon-transparent) { @@ -219,7 +234,14 @@ color: #fff; padding: 0.5em; border-radius: 100em; - margin: 0 0.2em 0 0.4em; + + [dir="ltr"] & { + margin: 0 0.2em 0 0.4em; + } + + [dir="rtl"] & { + margin: 0 0.4em 0 0.2em; + } } .listItemProgressBar { diff --git a/src/components/mediaLibraryCreator/mediaLibraryCreator.js b/src/components/mediaLibraryCreator/mediaLibraryCreator.js index f7d32ded6c..37c4d376fa 100644 --- a/src/components/mediaLibraryCreator/mediaLibraryCreator.js +++ b/src/components/mediaLibraryCreator/mediaLibraryCreator.js @@ -20,6 +20,7 @@ import '../../elements/emby-toggle/emby-toggle'; import '../listview/listview.scss'; import '../formdialog.scss'; import '../../assets/css/flexstyles.scss'; +import './style.scss'; import toast from '../toast/toast'; import alert from '../alert'; import template from './mediaLibraryCreator.template.html'; diff --git a/src/components/mediaLibraryCreator/mediaLibraryCreator.template.html b/src/components/mediaLibraryCreator/mediaLibraryCreator.template.html index 038df635c0..d62919227f 100644 --- a/src/components/mediaLibraryCreator/mediaLibraryCreator.template.html +++ b/src/components/mediaLibraryCreator/mediaLibraryCreator.template.html @@ -19,7 +19,7 @@

${Folders}

-
diff --git a/src/components/mediaLibraryCreator/style.scss b/src/components/mediaLibraryCreator/style.scss new file mode 100644 index 0000000000..245bef567f --- /dev/null +++ b/src/components/mediaLibraryCreator/style.scss @@ -0,0 +1,19 @@ +.fab.btnAddFolder.submit { + [dir="ltr"] & { + margin-left: 1em; + } + + [dir="rtl"] & { + margin-right: 1em; + } +} + +.listItem.listItem-border.lnkPath { + [dir="ltr"] & { + padding-left:.5em; + } + + [dir="rtl"] & { + padding-right:.5em; + } +} diff --git a/src/components/mediaLibraryEditor/mediaLibraryEditor.js b/src/components/mediaLibraryEditor/mediaLibraryEditor.js index be16582da5..5f99f5dede 100644 --- a/src/components/mediaLibraryEditor/mediaLibraryEditor.js +++ b/src/components/mediaLibraryEditor/mediaLibraryEditor.js @@ -18,6 +18,7 @@ import '../../elements/emby-button/paper-icon-button-light'; import '../formdialog.scss'; import '../../elements/emby-toggle/emby-toggle'; import '../../assets/css/flexstyles.scss'; +import './style.scss'; import toast from '../toast/toast'; import confirm from '../confirm/confirm'; import template from './mediaLibraryEditor.template.html'; diff --git a/src/components/mediaLibraryEditor/mediaLibraryEditor.template.html b/src/components/mediaLibraryEditor/mediaLibraryEditor.template.html index de79d2198d..b5ff971d92 100644 --- a/src/components/mediaLibraryEditor/mediaLibraryEditor.template.html +++ b/src/components/mediaLibraryEditor/mediaLibraryEditor.template.html @@ -12,7 +12,7 @@

${Folders}

-
diff --git a/src/components/mediaLibraryEditor/style.scss b/src/components/mediaLibraryEditor/style.scss new file mode 100644 index 0000000000..245bef567f --- /dev/null +++ b/src/components/mediaLibraryEditor/style.scss @@ -0,0 +1,19 @@ +.fab.btnAddFolder.submit { + [dir="ltr"] & { + margin-left: 1em; + } + + [dir="rtl"] & { + margin-right: 1em; + } +} + +.listItem.listItem-border.lnkPath { + [dir="ltr"] & { + padding-left:.5em; + } + + [dir="rtl"] & { + padding-right:.5em; + } +} diff --git a/src/components/mediainfo/mediainfo.scss b/src/components/mediainfo/mediainfo.scss index b4345115b8..1db5136389 100644 --- a/src/components/mediainfo/mediainfo.scss +++ b/src/components/mediainfo/mediainfo.scss @@ -1,7 +1,13 @@ .mediaInfoItem { - margin-block: 0; - margin-inline: 0 1em; padding: 0; + + [dir="ltr"] & { + margin: 0 1em 0 0; + } + + [dir="rtl"] & { + margin: 0 0 0 1em; + } } .mediaInfoText { @@ -26,7 +32,13 @@ } .mediaInfoItem:last-child { - margin-inline-end: 0; + [dir="ltr"] & { + margin-right: 0; + } + + [dir="rtl"] & { + margin-left: 0; + } } .starRatingContainer { @@ -47,7 +59,6 @@ } .mediaInfoCriticRating { - padding-inline-start: 1.5em; background-position: left center; background-repeat: no-repeat; background-size: auto 1.2em; @@ -55,7 +66,12 @@ display: flex; align-items: center; + [dir="ltr"] & { + padding-left: 1.5em; + } + [dir="rtl"] & { + padding-right: 1.5em; background-position: right center; } } diff --git a/src/components/multiSelect/multiSelect.js b/src/components/multiSelect/multiSelect.js index c37707bfbd..370d306d4b 100644 --- a/src/components/multiSelect/multiSelect.js +++ b/src/components/multiSelect/multiSelect.js @@ -130,7 +130,7 @@ import datetime from '../../scripts/datetime'; html += '

'; const moreIcon = 'more_vert'; - html += ``; + html += ``; selectionCommandsPanel.innerHTML = html; diff --git a/src/components/multiSelect/multiSelect.scss b/src/components/multiSelect/multiSelect.scss index 39b50aa17e..51a93c033f 100644 --- a/src/components/multiSelect/multiSelect.scss +++ b/src/components/multiSelect/multiSelect.scss @@ -34,3 +34,7 @@ .withMultiSelect { position: relative; } + +.btnSelectionPanelOptions { + margin-left:auto; +} diff --git a/src/components/nowPlayingBar/nowPlayingBar.scss b/src/components/nowPlayingBar/nowPlayingBar.scss index be420f69ec..2d24cbaf7e 100644 --- a/src/components/nowPlayingBar/nowPlayingBar.scss +++ b/src/components/nowPlayingBar/nowPlayingBar.scss @@ -54,10 +54,20 @@ white-space: nowrap; text-overflow: ellipsis; vertical-align: middle; - text-align: start; flex-grow: 1; font-size: 92%; - margin-inline: 0.5em 1em; + + [dir="ltr"] & { + text-align: left; + margin-right: 1em; + margin-left: 0.5em; + } + + [dir="rtl"] & { + text-align: right; + margin-left: 1em; + margin-right: 0.5em; + } } .nowPlayingBarCenter { @@ -91,8 +101,6 @@ .nowPlayingBarRight { position: relative; - margin-block: 0; - margin-inline: auto 0.5em; /* Need this to make sure it's on top of nowPlayingBarPositionContainer so that buttons are fully clickable */ z-index: 2; @@ -100,6 +108,14 @@ justify-content: flex-end; align-items: center; flex-shrink: 0; + + [dir="ltr"] & { + margin: 0 0.5em 0 auto; + } + + [dir="rtl"] & { + margin: 0 auto 0 0.5em; + } } .nowPlayingBarCurrentTime { @@ -110,7 +126,13 @@ } .nowPlayingBarVolumeSliderContainer { - margin-inline-end: 2em; + [dir="ltr"] & { + margin-right: 2em; + } + + [dir="rtl"] & { + margin-left: 2em; + } } .nowPlayingBarUserDataButtons { diff --git a/src/components/playerstats/playerstats.scss b/src/components/playerstats/playerstats.scss index 0ecaa1a434..08e26a7a7c 100644 --- a/src/components/playerstats/playerstats.scss +++ b/src/components/playerstats/playerstats.scss @@ -2,9 +2,16 @@ background: rgba(28, 28, 28, 0.8); border-radius: 0.3em; color: #fff; - inset-inline-start: 1.5em; position: absolute; top: 5em; + + [dir="ltr"] & { + left: 1.5em; + } + + [dir="rtl"] & { + right: 1.5em; + } } .playerStats-tv { @@ -31,26 +38,51 @@ .playerStats-stats { display: flex; flex-direction: column; - padding-block: 0 1em; - padding-inline: 1em 3em; max-width: 50em; overflow: hidden; + + [dir="ltr"] & { + padding: 0 3em 1em 1em; + } + + [dir="rtl"] & { + padding: 0 1em 1em 3em; + } } .playerStats-stat { display: flex; - margin-inline-start: 1em; + + [dir="ltr"] & { + margin-left: 1em; + + } + + [dir="rtl"] & { + margin-right: 1em; + } } .playerStats-stat-label { font-weight: 500; - margin-block: 0; - margin-inline: 0 0.5em; + + [dir="ltr"] & { + margin: 0 0.5em 0 0; + } + + [dir="rtl"] & { + margin: 0 0 0 0.5em; + } } .playerStats-stat-header { - margin-block: 1em 0; - margin-inline: 0 1em; + [dir="ltr"] & { + margin: 1em 1em 0 0; + } + + [dir="rtl"] & { + margin: 1em 0 0 1em; + } } .playerStats-stat-value { diff --git a/src/components/recordingcreator/recordingfields.scss b/src/components/recordingcreator/recordingfields.scss index e36ed472f3..9835138209 100644 --- a/src/components/recordingcreator/recordingfields.scss +++ b/src/components/recordingcreator/recordingfields.scss @@ -1,6 +1,13 @@ .recordingButton { - margin-inline-start: 0; min-width: 10em; + + [dir="ltr"] & { + margin-left: 0; + } + + [dir="rtl"] & { + margin-right: 0; + } } .recordingIcon-active { diff --git a/src/components/remotecontrol/remotecontrol.scss b/src/components/remotecontrol/remotecontrol.scss index 59bdf83dff..8f19838fc1 100644 --- a/src/components/remotecontrol/remotecontrol.scss +++ b/src/components/remotecontrol/remotecontrol.scss @@ -39,7 +39,13 @@ } .nowPlayingPageTitle { - margin: 0 0 0.5em 0.5em; + [dir="ltr"] & { + margin: 0 0 0.5em 0.5em; + } + + [dir="rtl"] & { + margin: 0 0.5em 0.5em 0; + } } .nowPlayingAlbum a, @@ -98,10 +104,17 @@ .nowPlayingPageImageContainer { width: 16%; - margin-inline-end: 1em; position: relative; -webkit-flex-shrink: 0; flex-shrink: 0; + + [dir="ltr"] & { + margin-right: 1em; + } + + [dir="rtl"] & { + margin-left: 1em; + } } .nowPlayingPageImageContainerNoAlbum { @@ -269,7 +282,13 @@ @media all and (min-width: 80em) { .nowPlayingPageImageContainer { - margin-inline-end: 0.75em; + [dir="ltr"] & { + margin-right: 0.75em; + } + + [dir="rtl"] & { + margin-left: 0.75em; + } } } @@ -366,24 +385,49 @@ .nowPlayingInfoControls .nowPlayingPageUserDataButtonsTitle button { padding-top: 0; - padding-inline-end: 0; - margin-inline-end: 0; - float: inline-end; border-radius: 0; + + [dir="ltr"] & { + padding-right: 0; + margin-right: 0; + float: right; + } + + [dir="rtl"] & { + padding-left: 0; + margin-left: 0; + float: left; + } } .nowPlayingInfoButtons .btnRepeat, .nowPlayingInfoButtons .btnRewind { - margin-inline-start: 0; - margin-inline-end: auto; font-size: smaller; + + [dir="ltr"] & { + margin-left: 0; + margin-right: auto; + } + + [dir="rtl"] & { + margin-right: 0; + margin-left: auto; + } } .nowPlayingInfoButtons .btnShuffleQueue, .nowPlayingInfoButtons .btnFastForward { - margin-inline-start: auto; - margin-inline-end: 0; font-size: smaller; + + [dir="ltr"] & { + margin-left: auto; + margin-right: 0; + } + + [dir="rtl"] & { + margin-right: auto; + margin-left: 0; + } } .paper-icon-button-light { diff --git a/src/components/subtitleuploader/style.scss b/src/components/subtitleuploader/style.scss index c9d5eb980d..a680e05da6 100644 --- a/src/components/subtitleuploader/style.scss +++ b/src/components/subtitleuploader/style.scss @@ -9,3 +9,8 @@ align-items: center; justify-content: center; } + +.raised.raised-mini.btnBrowse { + margin-left:1.5em; +} + diff --git a/src/components/subtitleuploader/subtitleuploader.template.html b/src/components/subtitleuploader/subtitleuploader.template.html index 4b5bc6c7d0..a695b0a17b 100644 --- a/src/components/subtitleuploader/subtitleuploader.template.html +++ b/src/components/subtitleuploader/subtitleuploader.template.html @@ -13,7 +13,7 @@

${HeaderAddUpdateSubtitle}

- diff --git a/src/components/toast/toast.scss b/src/components/toast/toast.scss index d15cc27258..05a7fda0a1 100644 --- a/src/components/toast/toast.scss +++ b/src/components/toast/toast.scss @@ -1,12 +1,19 @@ .toastContainer { position: fixed; - inset-inline-start: 0; bottom: 0; pointer-events: none; z-index: 9999999; padding: 1em; display: flex; flex-direction: column; + + [dir="ltr"] & { + left: 0; + } + + [dir="rtl"] & { + right: 0; + } } .toast { diff --git a/src/components/tvproviders/schedulesdirect.js b/src/components/tvproviders/schedulesdirect.js index 239831ad8a..6d8b02db16 100644 --- a/src/components/tvproviders/schedulesdirect.js +++ b/src/components/tvproviders/schedulesdirect.js @@ -8,6 +8,7 @@ import '../../elements/emby-button/paper-icon-button-light'; import '../../elements/emby-select/emby-select'; import '../../elements/emby-button/emby-button'; import '../../assets/css/flexstyles.scss'; +import './style.scss'; import Dashboard from '../../utils/dashboard'; import { Events } from 'jellyfin-apiclient'; diff --git a/src/components/tvproviders/schedulesdirect.template.html b/src/components/tvproviders/schedulesdirect.template.html index 8783987875..aee9bd4f72 100644 --- a/src/components/tvproviders/schedulesdirect.template.html +++ b/src/components/tvproviders/schedulesdirect.template.html @@ -37,7 +37,7 @@

2

-

+

${GuideProviderSelectListings}

diff --git a/src/components/tvproviders/style.scss b/src/components/tvproviders/style.scss new file mode 100644 index 0000000000..bbd8c88c21 --- /dev/null +++ b/src/components/tvproviders/style.scss @@ -0,0 +1,9 @@ +.guideProviderSelectListings { + [dir="ltr"] & { + margin:0 0 0 .5em; + } + + [dir="rtl"] & { + margin:0 .5em 0 0; + } +} diff --git a/src/components/upnextdialog/upnextdialog.scss b/src/components/upnextdialog/upnextdialog.scss index efb0366488..08c4904bb5 100644 --- a/src/components/upnextdialog/upnextdialog.scss +++ b/src/components/upnextdialog/upnextdialog.scss @@ -4,7 +4,6 @@ bottom: 0; width: 30em; padding: 1em; - margin: 0 2em 2em 0; display: flex; flex-direction: column; will-change: transform, opacity; @@ -13,6 +12,14 @@ color: #fff; user-select: none; -webkit-touch-callout: none; + + [dir="ltr"] & { + margin: 0 2em 2em 0; + } + + [dir="rtl"] & { + margin: 0 0 2em 2em; + } } .upNextDialog-hidden { diff --git a/src/controllers/dashboard/devices/devices.js b/src/controllers/dashboard/devices/devices.js index 4ec1a22051..be854fda65 100644 --- a/src/controllers/dashboard/devices/devices.js +++ b/src/controllers/dashboard/devices/devices.js @@ -113,7 +113,10 @@ import confirm from '../../../components/confirm/confirm'; deviceHtml += '
'; if (canEdit || canDelete(device.Id)) { - deviceHtml += '
'; + if (globalize.getIsRTL()) + deviceHtml += '
'; + else + deviceHtml += '
'; deviceHtml += ''; deviceHtml += '
'; } diff --git a/src/controllers/dashboard/plugins/installed/index.js b/src/controllers/dashboard/plugins/installed/index.js index 0ce8668ec9..b8ddbbbf85 100644 --- a/src/controllers/dashboard/plugins/installed/index.js +++ b/src/controllers/dashboard/plugins/installed/index.js @@ -83,7 +83,10 @@ function getPluginCardHtml(plugin, pluginConfigurationPages) { html += '
'; if (configPage || plugin.CanUninstall) { - html += '
'; + if (globalize.getIsRTL()) + html += '
'; + else + html += '
'; html += ''; html += '
'; } diff --git a/src/controllers/dashboard/scheduledtasks/scheduledtasks.js b/src/controllers/dashboard/scheduledtasks/scheduledtasks.js index 7bcf3f8115..7df1ff0da9 100644 --- a/src/controllers/dashboard/scheduledtasks/scheduledtasks.js +++ b/src/controllers/dashboard/scheduledtasks/scheduledtasks.js @@ -58,7 +58,10 @@ import '../../../elements/emby-button/emby-button'; html += ''; html += ''; html += '
'; - html += ""; + let textAlignStyle = 'left'; + if (globalize.getIsRTL()) + textAlignStyle = 'right'; + html += ""; html += "

" + task.Name + '

'; html += "
" + getTaskProgressHtml(task) + '
'; html += ''; diff --git a/src/elements/emby-collapse/emby-collapse.scss b/src/elements/emby-collapse/emby-collapse.scss index e7293f903c..e6f84750bb 100644 --- a/src/elements/emby-collapse/emby-collapse.scss +++ b/src/elements/emby-collapse/emby-collapse.scss @@ -17,20 +17,36 @@ align-items: center; text-transform: none; width: 100%; - text-align: start; border-width: 0 0 0.1em 0; border-style: solid; padding-left: 0.1em; background: transparent; box-shadow: none; + + [dir="ltr"] & { + text-align: left; + padding-left: 0.1em; + } + + [dir="rtl"] & { + text-align: right; + padding-right: 0.1em; + } } .emby-collapse-expandIcon { transform-origin: 50% 50%; transition: transform 180ms ease-out; position: absolute; - inset-inline-end: 0.5em; font-size: 1.5em; + + [dir="ltr"] & { + right: 0.5em; + } + + [dir="rtl"] & { + left: 0.5em; + } } .emby-collapse-expandIconExpanded { diff --git a/src/elements/emby-input/emby-input.scss b/src/elements/emby-input/emby-input.scss index 6f7004b298..3341f03b4f 100644 --- a/src/elements/emby-input/emby-input.scss +++ b/src/elements/emby-input/emby-input.scss @@ -47,12 +47,24 @@ .inlineForm .inputContainer:first-child, .inlineForm .selectContainer:first-child { - margin-inline-start: 0; + [dir="ltr"] & { + margin-left: 0; + } + + [dir="rtl"] & { + margin-right: 0 + } } .inlineForm .inputContainer:last-child, .inlineForm .selectContainer:last-child { - margin-inline-end: 0; + [dir="ltr"] & { + margin-right: 0; + } + + [dir="rtl"] & { + margin-left: 0; + } } .inputLabel { diff --git a/src/elements/emby-radio/emby-radio.scss b/src/elements/emby-radio/emby-radio.scss index bb496394db..5f743c9d79 100644 --- a/src/elements/emby-radio/emby-radio.scss +++ b/src/elements/emby-radio/emby-radio.scss @@ -32,11 +32,18 @@ .mdl-radio__circles { position: relative; - margin-inline-end: 0.54em; width: 1.08em; height: 1.08em; border-radius: 50%; cursor: pointer; + + [dir="ltr"] & { + margin-right: 0.54em; + } + + [dir="rtl"] & { + margin-left: 0.54em; + } } .mdl-radio__circles svg { @@ -44,9 +51,16 @@ height: 100%; position: absolute; top: 0; - inset-inline-start: 0; z-index: 1; overflow: visible; + + [dir="ltr"] & { + left: 0; + } + + [dir="rtl"] & { + right: 0; + } } .mdl-radio__button:disabled + .mdl-radio__circles { diff --git a/src/elements/emby-scrollbuttons/emby-scrollbuttons.scss b/src/elements/emby-scrollbuttons/emby-scrollbuttons.scss index c0bc38317f..de1ba39472 100644 --- a/src/elements/emby-scrollbuttons/emby-scrollbuttons.scss +++ b/src/elements/emby-scrollbuttons/emby-scrollbuttons.scss @@ -1,7 +1,6 @@ .emby-scrollbuttons { position: absolute; top: 0; - inset-inline-end: 0; align-items: center; justify-content: center; min-width: 104px; @@ -10,6 +9,14 @@ z-index: 1; color: #fff; display: flex; + + [dir="ltr"] & { + right: 0; + } + + [dir="rtl"] & { + left: 0; + } } .emby-scrollbuttons-button > .material-icons { diff --git a/src/elements/emby-scroller/emby-scroller.scss b/src/elements/emby-scroller/emby-scroller.scss index 130d0f6042..a0126501e1 100644 --- a/src/elements/emby-scroller/emby-scroller.scss +++ b/src/elements/emby-scroller/emby-scroller.scss @@ -9,7 +9,15 @@ /* align first card in scroller to heading */ .itemsContainer > .card > .cardBox { - margin-inline: 0 1.2em; + [dir="ltr"] & { + margin-left: 0; + margin-right: 1.2em; + } + + [dir="rtl"] & { + margin-right: 0; + margin-left: 1.2em; + } } .servers > .card > .cardBox { diff --git a/src/elements/emby-select/emby-select.scss b/src/elements/emby-select/emby-select.scss index 0b6416dfff..62205c8b90 100644 --- a/src/elements/emby-select/emby-select.scss +++ b/src/elements/emby-select/emby-select.scss @@ -11,14 +11,20 @@ /* General select styles: change as needed */ font-family: inherit; font-weight: inherit; - padding-block: 0.5em; - padding-inline: 0.5em 1.9em; /* Prevent padding from causing width overflow */ box-sizing: border-box; outline: none !important; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%; + + [dir="ltr"] & { + padding: 0.5em 1.9em 0.5em 0.5em; + } + + [dir="rtl"] & { + padding: 0.5em 0.5em 0.5em 1.9em; + } } .emby-select[disabled] { @@ -35,9 +41,15 @@ } .selectContainer-inline > .emby-select { - padding-block: 0.3em; - padding-inline: 0.5em 1.9em; font-size: inherit; + + [dir="ltr"] & { + padding: 0.3em 1.9em 0.3em 0.5em; + } + + [dir="rtl"] & { + padding: 0.3em 0.5em 0.3em 1.9em; + } } .selectContainer-inline > .emby-select[disabled] { @@ -94,10 +106,17 @@ .selectArrowContainer { position: absolute; - inset-inline-end: 0.3em; top: 0.2em; color: inherit; pointer-events: none; + + [dir="ltr"] & { + right: 0.3em; + } + + [dir="rtl"] & { + left: 0.3em; + } } .selectContainer-inline > .selectArrowContainer { diff --git a/src/elements/emby-slider/emby-slider.js b/src/elements/emby-slider/emby-slider.js index 3dc1bc4968..f8c492cefe 100644 --- a/src/elements/emby-slider/emby-slider.js +++ b/src/elements/emby-slider/emby-slider.js @@ -417,7 +417,10 @@ import globalize from '../../scripts/globalize'; function setRange(elem, startPercent, endPercent) { const style = elem.style; - style.insetInlineStart = Math.max(startPercent, 0) + '%'; + if (globalize.getIsRTL()) + style.right = Math.max(startPercent, 0) + '%'; + else + style.left = Math.max(startPercent, 0) + '%'; const widthPercent = endPercent - startPercent; style.width = Math.max(Math.min(widthPercent, 100), 0) + '%'; diff --git a/src/elements/emby-slider/emby-slider.scss b/src/elements/emby-slider/emby-slider.scss index 0d73f9a038..9d663f10ab 100644 --- a/src/elements/emby-slider/emby-slider.scss +++ b/src/elements/emby-slider/emby-slider.scss @@ -151,10 +151,16 @@ width: 100%; box-sizing: border-box; top: 50%; - inset-inline-start: 0; position: absolute; - padding-block: 0; - padding-inline: 0.54em;/* half of slider thumb size */ + padding: 0 0.54em; /* half of slider thumb size */ + + [dir="ltr"] & { + left: 0; + } + + [dir="rtl"] & { + right: 0; + } } .mdl-slider-background-flex { @@ -163,11 +169,18 @@ margin-top: -0.1em; width: 100%; top: 50%; - inset-inline-start: 0; display: flex; overflow: hidden; border: 0; padding: 0; + + [dir="ltr"] & { + left: 0; + } + + [dir="rtl"] & { + right: 0; + } } .mdl-slider-background-flex-inner { @@ -178,11 +191,18 @@ .mdl-slider-background-lower { /* transition: width 0.18s cubic-bezier(0.4, 0, 0.2, 1); */ position: absolute; - inset-inline-start: 0; width: 0; top: 0; bottom: 0; background-color: #00a4dc; + + [dir="ltr"] & { + left: 0; + } + + [dir="rtl"] & { + right: 0; + } } .mdl-slider-background-lower-clear { @@ -212,8 +232,7 @@ position: absolute; left: 0; right: 0; - margin-block: 0; - margin-inline: 0.54em; /* half of slider thumb size */ + margin: 0 0.54em; /* half of slider thumb size */ } .sliderBubble { diff --git a/src/elements/emby-toggle/emby-toggle.scss b/src/elements/emby-toggle/emby-toggle.scss index 316624bced..b4583336a3 100644 --- a/src/elements/emby-toggle/emby-toggle.scss +++ b/src/elements/emby-toggle/emby-toggle.scss @@ -59,7 +59,6 @@ .mdl-switch__thumb { background: #999; position: absolute; - inset-inline-start: 0; top: -0.25em; height: 1.44em; width: 1.44em; @@ -72,6 +71,14 @@ display: flex; align-items: center; justify-content: center; + + [dir="ltr"] & { + left: 0; + } + + [dir="rtl"] & { + right: 0; + } } .mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__thumb { diff --git a/src/index.html b/src/index.html index 34092e46c7..60a4dff86b 100644 --- a/src/index.html +++ b/src/index.html @@ -1,5 +1,5 @@ - + @@ -98,12 +98,19 @@ .mainDrawerHandle { position: fixed; top: 0; - inset-inline-start: 0; bottom: 0; z-index: 1; width: 0.8em; } + [dir="ltr"] .mainDrawerHandle { + left: 0; + } + + [dir="rtl"] .mainDrawerHandle { + left: 0; + } + @-webkit-keyframes fadein { from { opacity: 0; @@ -148,7 +155,7 @@ } - +
From 99ddfbd33c062c98a7ea6161b837809124306bd2 Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Thu, 14 Jul 2022 17:59:37 -0400 Subject: [PATCH 60/66] Modified a fire other inline entries --- src/assets/css/librarybrowser.scss | 34 +++++++++---------- src/components/listview/listview.scss | 9 ++++- .../mediaLibraryCreator.js | 2 +- .../mediaLibraryEditor/mediaLibraryEditor.js | 2 +- src/components/mediainfo/mediainfo.scss | 2 +- .../metadataEditor/metadataEditor.js | 1 + .../metadataEditor.template.html | 10 +++--- src/components/metadataEditor/style.scss | 19 +++++++++++ src/controllers/dashboard/library.js | 5 ++- 9 files changed, 56 insertions(+), 28 deletions(-) create mode 100644 src/components/metadataEditor/style.scss diff --git a/src/assets/css/librarybrowser.scss b/src/assets/css/librarybrowser.scss index d896ae8811..1b0249b650 100644 --- a/src/assets/css/librarybrowser.scss +++ b/src/assets/css/librarybrowser.scss @@ -732,9 +732,9 @@ .layout-mobile .itemName, .layout-mobile .itemMiscInfo, .layout-mobile .mainDetailButtons { - align-items: center !important; - justify-content: center !important; - text-align: center !important; + align-items: center; + justify-content: center; + text-align: center; } .layout-mobile .mainDetailButtons { @@ -798,16 +798,14 @@ display: block; } - [dir="ltr"] & { - .layout-desktop &, - .layout-tv & { + .layout-desktop &, + .layout-tv & { + [dir="ltr"] & { padding-left: 32.45vw; - } - } - [dir="rtl"] & { - .layout-desktop &, - .layout-tv & { + } + + [dir="rtl"] & { padding-right: 32.45vw; } } @@ -829,18 +827,18 @@ flex: 1 0 0; .layout-mobile & { - @include header-poster-padding; + [dir="ltr"] { + @include header-poster-padding; + } + + [dir="rtl"] & { + @include header-poster-padding-rtl; + } @media all and (max-width: 32em) { position: relative; } } - - [dir="rtl"] & { - .layout-mobile & { - @include header-poster-padding-rtl; - } - } } .infoText { diff --git a/src/components/listview/listview.scss b/src/components/listview/listview.scss index 3d138cb752..75324e6449 100644 --- a/src/components/listview/listview.scss +++ b/src/components/listview/listview.scss @@ -83,8 +83,15 @@ } .listViewDragHandle { - margin-inline-start: -0.25em !important; touch-action: none; + + [dir="ltr"] & { + margin-left: -0.25em !important; + } + + [dir="rtl"] & { + margin-right: -0.25em !important; + } } .listItemBody { diff --git a/src/components/mediaLibraryCreator/mediaLibraryCreator.js b/src/components/mediaLibraryCreator/mediaLibraryCreator.js index 37c4d376fa..05c0fb02f8 100644 --- a/src/components/mediaLibraryCreator/mediaLibraryCreator.js +++ b/src/components/mediaLibraryCreator/mediaLibraryCreator.js @@ -120,7 +120,7 @@ import template from './mediaLibraryCreator.template.html'; function getFolderHtml(pathInfo, index) { let html = ''; - html += '
'; + html += '
'; html += `
`; html += `
${escapeHtml(pathInfo.Path)}
`; diff --git a/src/components/mediaLibraryEditor/mediaLibraryEditor.js b/src/components/mediaLibraryEditor/mediaLibraryEditor.js index 5f99f5dede..da0dc2909c 100644 --- a/src/components/mediaLibraryEditor/mediaLibraryEditor.js +++ b/src/components/mediaLibraryEditor/mediaLibraryEditor.js @@ -110,7 +110,7 @@ import template from './mediaLibraryEditor.template.html'; function getFolderHtml(pathInfo, index) { let html = ''; - html += `
`; + html += `
`; html += `
`; html += '

'; html += escapeHtml(pathInfo.Path); diff --git a/src/components/mediainfo/mediainfo.scss b/src/components/mediainfo/mediainfo.scss index 1db5136389..cb623b685d 100644 --- a/src/components/mediainfo/mediainfo.scss +++ b/src/components/mediainfo/mediainfo.scss @@ -59,7 +59,6 @@ } .mediaInfoCriticRating { - background-position: left center; background-repeat: no-repeat; background-size: auto 1.2em; min-height: 1.2em; @@ -68,6 +67,7 @@ [dir="ltr"] & { padding-left: 1.5em; + background-position: left center; } [dir="rtl"] & { diff --git a/src/components/metadataEditor/metadataEditor.js b/src/components/metadataEditor/metadataEditor.js index 10112a8453..a36779ba53 100644 --- a/src/components/metadataEditor/metadataEditor.js +++ b/src/components/metadataEditor/metadataEditor.js @@ -17,6 +17,7 @@ import '../../elements/emby-button/paper-icon-button-light'; import '../formdialog.scss'; import '../../assets/css/clearbutton.scss'; import '../../assets/css/flexstyles.scss'; +import './style.scss'; import ServerConnections from '../ServerConnections'; import toast from '../toast/toast'; import { appRouter } from '../appRouter'; diff --git a/src/components/metadataEditor/metadataEditor.template.html b/src/components/metadataEditor/metadataEditor.template.html index faecc5643d..b0d73793d2 100644 --- a/src/components/metadataEditor/metadataEditor.template.html +++ b/src/components/metadataEditor/metadataEditor.template.html @@ -3,7 +3,7 @@

${Edit}

-
+
@@ -203,7 +203,7 @@

${People}

-
@@ -213,7 +213,7 @@

${Studios}

-
@@ -222,7 +222,7 @@

${Tags}

-
diff --git a/src/components/metadataEditor/style.scss b/src/components/metadataEditor/style.scss new file mode 100644 index 0000000000..37bfdbe66b --- /dev/null +++ b/src/components/metadataEditor/style.scss @@ -0,0 +1,19 @@ +.dialogHeader { + [dir="ltr"] & { + margin-left: auto; + } + + [dir="rtl"] & { + margin-right: auto; + } +} + +.marginLeft { + [dir="ltr"] & { + margin-left:1em; + } + + [dir="rtl"] & { + margin-right:1em; + } +} diff --git a/src/controllers/dashboard/library.js b/src/controllers/dashboard/library.js index f083e2aefe..550cf9dc0e 100644 --- a/src/controllers/dashboard/library.js +++ b/src/controllers/dashboard/library.js @@ -310,7 +310,10 @@ import cardBuilder from '../../components/cardbuilder/cardBuilder'; html += '
'; // always show menu unless explicitly hidden if (virtualFolder.showMenu !== false) { - html += '
'; + let dirTextAlign = 'right'; + if (globalize.getIsRTL()) + dirTextAlign = 'left'; + html += '
'; html += ''; html += '
'; } From bf6e77a93af6d5d3d2a0ce2cf7a62b639dd11fd7 Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Sat, 1 Oct 2022 17:20:44 -0400 Subject: [PATCH 61/66] Fixed merge bugs --- src/assets/css/librarybrowser.scss | 12 +++++++----- src/components/alphaPicker/style.scss | 4 ++-- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/src/assets/css/librarybrowser.scss b/src/assets/css/librarybrowser.scss index d304735c93..4452e09b96 100644 --- a/src/assets/css/librarybrowser.scss +++ b/src/assets/css/librarybrowser.scss @@ -801,14 +801,16 @@ display: block; } - .layout-desktop &, - .layout-tv & { - [dir="ltr"] & { + [dir="ltr"] & { + .layout-desktop &, + .layout-tv & { padding-left: 32.45vw; - } + } - [dir="rtl"] & { + [dir="rtl"] & { + .layout-desktop &, + .layout-tv & { padding-right: 32.45vw; } } diff --git a/src/components/alphaPicker/style.scss b/src/components/alphaPicker/style.scss index 4144e75210..a764937165 100644 --- a/src/components/alphaPicker/style.scss +++ b/src/components/alphaPicker/style.scss @@ -117,7 +117,7 @@ [dir="rtl"] & { left: 0.4em; - left: max(env(safe-area-inset-right), 0.4em) + left: max(env(safe-area-inset-left), 0.4em) } } @@ -130,7 +130,7 @@ [dir="rtl"] & { left: 1em; - left: max(env(safe-area-inset-right), 1em); + left: max(env(safe-area-inset-left), 1em); } } } From a4f58030163ffae895302148b7ac87c3d9da041e Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Mon, 3 Oct 2022 13:36:26 -0400 Subject: [PATCH 62/66] Fixed linting issues --- src/assets/css/librarybrowser.scss | 20 +++++-------- src/components/actionSheet/actionSheet.scss | 1 - src/components/alphaPicker/style.scss | 2 +- src/components/cardbuilder/card.scss | 3 +- src/components/imageUploader/style.scss | 2 +- src/components/imageeditor/imageeditor.scss | 6 ++-- .../libraryoptionseditor/style.scss | 4 +-- src/components/listview/listview.scss | 14 +++++----- src/components/mediaLibraryCreator/style.scss | 4 +-- src/components/mediaLibraryEditor/style.scss | 4 +-- src/components/metadataEditor/style.scss | 4 +-- src/components/multiSelect/multiSelect.scss | 2 +- src/components/playerstats/playerstats.scss | 1 - src/components/subtitleuploader/style.scss | 3 +- src/components/tvproviders/style.scss | 4 +-- src/elements/emby-input/emby-input.scss | 28 +++++++------------ src/elements/emby-scroller/emby-scroller.scss | 10 +++---- 17 files changed, 47 insertions(+), 65 deletions(-) diff --git a/src/assets/css/librarybrowser.scss b/src/assets/css/librarybrowser.scss index 4452e09b96..319c629fe5 100644 --- a/src/assets/css/librarybrowser.scss +++ b/src/assets/css/librarybrowser.scss @@ -536,7 +536,6 @@ .reviewDate { [dir="ltr"] & { margin-left: 1em; - } [dir="rtl"] & { @@ -546,6 +545,7 @@ .reviewScore { position: absolute; + [dir="ltr"] & { left: 0.8em; } @@ -800,20 +800,14 @@ .layout-tv & { display: block; } +} - [dir="ltr"] & { - .layout-desktop &, - .layout-tv & { - padding-left: 32.45vw; - } - } +.layout-desktop [dir="rtl"] .detailPagePrimaryContainer { + padding-right: 32.45vw; +} - [dir="rtl"] & { - .layout-desktop &, - .layout-tv & { - padding-right: 32.45vw; - } - } +.layout-desktop [dir="ltr"] .detailPagePrimaryContainer { + padding-left: 32.45vw; } .layout-desktop .detailRibbon { diff --git a/src/components/actionSheet/actionSheet.scss b/src/components/actionSheet/actionSheet.scss index 6961c99fc7..9a9234ffcf 100644 --- a/src/components/actionSheet/actionSheet.scss +++ b/src/components/actionSheet/actionSheet.scss @@ -47,7 +47,6 @@ .actionsheetListItemBody { [dir="ltr"] & { padding: 0.4em 1em 0.4em 0.6em !important; - } [dir="rtl"] & { diff --git a/src/components/alphaPicker/style.scss b/src/components/alphaPicker/style.scss index a764937165..86d7e773e1 100644 --- a/src/components/alphaPicker/style.scss +++ b/src/components/alphaPicker/style.scss @@ -117,7 +117,7 @@ [dir="rtl"] & { left: 0.4em; - left: max(env(safe-area-inset-left), 0.4em) + left: max(env(safe-area-inset-left), 0.4em); } } diff --git a/src/components/cardbuilder/card.scss b/src/components/cardbuilder/card.scss index b8b37a7a00..e43b488dbe 100644 --- a/src/components/cardbuilder/card.scss +++ b/src/components/cardbuilder/card.scss @@ -302,9 +302,9 @@ button::-moz-focus-inner { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + [dir="ltr"] & { text-align: left; - } [dir="rtl"] & { @@ -454,7 +454,6 @@ button::-moz-focus-inner { [dir="ltr"] & { right: 0; - } [dir="rtl"] & { diff --git a/src/components/imageUploader/style.scss b/src/components/imageUploader/style.scss index 5944b09f67..3d67181c4f 100644 --- a/src/components/imageUploader/style.scss +++ b/src/components/imageUploader/style.scss @@ -12,5 +12,5 @@ } .raised.raised-mini.btnBrowse { - margin-left:1.5em; + margin-left: 1.5em; } diff --git a/src/components/imageeditor/imageeditor.scss b/src/components/imageeditor/imageeditor.scss index 7705b634a2..a127d58055 100644 --- a/src/components/imageeditor/imageeditor.scss +++ b/src/components/imageeditor/imageeditor.scss @@ -14,16 +14,16 @@ } [dir="rtl"] & { - margin-right: 1em + margin-right: 1em; } } .btnOpenUploadMenu { [dir="ltr"] & { - margin-left: .5em; + margin-left: 0.5em; } [dir="rtl"] & { - margin-right: .5em; + margin-right: 0.5em; } } diff --git a/src/components/libraryoptionseditor/style.scss b/src/components/libraryoptionseditor/style.scss index a632e1bc9b..a3760f36c3 100644 --- a/src/components/libraryoptionseditor/style.scss +++ b/src/components/libraryoptionseditor/style.scss @@ -1,9 +1,9 @@ .raised.btnImageOptionsForType { [dir="ltr"] & { - margin-left:1.5em; + margin-left: 1.5em; } [dir="rtl"] & { - margin-right:1.5em; + margin-right: 1.5em; } } diff --git a/src/components/listview/listview.scss b/src/components/listview/listview.scss index 75324e6449..9270331252 100644 --- a/src/components/listview/listview.scss +++ b/src/components/listview/listview.scss @@ -1,3 +1,10 @@ +.listItem, +.listItemBody, +.listItemMediaInfo { + display: flex; + contain: layout style; +} + .listItem { background: transparent; border: 0; @@ -104,13 +111,6 @@ justify-content: center; } -.listItem, -.listItemBody, -.listItemMediaInfo { - display: flex; - contain: layout style; -} - .layout-tv .listItemBody { padding: 0.35em 0.75em; } diff --git a/src/components/mediaLibraryCreator/style.scss b/src/components/mediaLibraryCreator/style.scss index 245bef567f..567d054b4c 100644 --- a/src/components/mediaLibraryCreator/style.scss +++ b/src/components/mediaLibraryCreator/style.scss @@ -10,10 +10,10 @@ .listItem.listItem-border.lnkPath { [dir="ltr"] & { - padding-left:.5em; + padding-left: 0.5em; } [dir="rtl"] & { - padding-right:.5em; + padding-right: 0.5em; } } diff --git a/src/components/mediaLibraryEditor/style.scss b/src/components/mediaLibraryEditor/style.scss index 245bef567f..567d054b4c 100644 --- a/src/components/mediaLibraryEditor/style.scss +++ b/src/components/mediaLibraryEditor/style.scss @@ -10,10 +10,10 @@ .listItem.listItem-border.lnkPath { [dir="ltr"] & { - padding-left:.5em; + padding-left: 0.5em; } [dir="rtl"] & { - padding-right:.5em; + padding-right: 0.5em; } } diff --git a/src/components/metadataEditor/style.scss b/src/components/metadataEditor/style.scss index 37bfdbe66b..bf10dcdcdd 100644 --- a/src/components/metadataEditor/style.scss +++ b/src/components/metadataEditor/style.scss @@ -10,10 +10,10 @@ .marginLeft { [dir="ltr"] & { - margin-left:1em; + margin-left: 1em; } [dir="rtl"] & { - margin-right:1em; + margin-right: 1em; } } diff --git a/src/components/multiSelect/multiSelect.scss b/src/components/multiSelect/multiSelect.scss index 8ffd666207..2475d213b5 100644 --- a/src/components/multiSelect/multiSelect.scss +++ b/src/components/multiSelect/multiSelect.scss @@ -42,5 +42,5 @@ } .btnSelectionPanelOptions { - margin-left:auto; + margin-left: auto; } diff --git a/src/components/playerstats/playerstats.scss b/src/components/playerstats/playerstats.scss index 08e26a7a7c..f74f647a37 100644 --- a/src/components/playerstats/playerstats.scss +++ b/src/components/playerstats/playerstats.scss @@ -55,7 +55,6 @@ [dir="ltr"] & { margin-left: 1em; - } [dir="rtl"] & { diff --git a/src/components/subtitleuploader/style.scss b/src/components/subtitleuploader/style.scss index a680e05da6..c0bfebe912 100644 --- a/src/components/subtitleuploader/style.scss +++ b/src/components/subtitleuploader/style.scss @@ -11,6 +11,5 @@ } .raised.raised-mini.btnBrowse { - margin-left:1.5em; + margin-left: 1.5em; } - diff --git a/src/components/tvproviders/style.scss b/src/components/tvproviders/style.scss index bbd8c88c21..6618e5c0e0 100644 --- a/src/components/tvproviders/style.scss +++ b/src/components/tvproviders/style.scss @@ -1,9 +1,9 @@ .guideProviderSelectListings { [dir="ltr"] & { - margin:0 0 0 .5em; + margin: 0 0 0 0.5em; } [dir="rtl"] & { - margin:0 .5em 0 0; + margin: 0 0.5em 0 0; } } diff --git a/src/elements/emby-input/emby-input.scss b/src/elements/emby-input/emby-input.scss index 3341f03b4f..c71069981b 100644 --- a/src/elements/emby-input/emby-input.scss +++ b/src/elements/emby-input/emby-input.scss @@ -45,26 +45,18 @@ margin: 0 0.5em 1.8em; } -.inlineForm .inputContainer:first-child, -.inlineForm .selectContainer:first-child { - [dir="ltr"] & { - margin-left: 0; - } - - [dir="rtl"] & { - margin-right: 0 - } +[dir="rtl"] .inlineForm .inputContainer:last-child, +[dir="rtl"] .inlineForm .selectContainer:last-child, +[dir="ltr"] .inlineForm .inputContainer:first-child, +[dir="ltr"] .inlineForm .selectContainer:first-child { + margin-left: 0; } -.inlineForm .inputContainer:last-child, -.inlineForm .selectContainer:last-child { - [dir="ltr"] & { - margin-right: 0; - } - - [dir="rtl"] & { - margin-left: 0; - } +[dir="ltr"] .inlineForm .inputContainer:last-child, +[dir="ltr"] .inlineForm .selectContainer:last-child, +[dir="rtl"] .inlineForm .inputContainer:first-child, +[dir="rtl"] .inlineForm .selectContainer:first-child { + margin-right: 0; } .inputLabel { diff --git a/src/elements/emby-scroller/emby-scroller.scss b/src/elements/emby-scroller/emby-scroller.scss index c362bccffb..b02fb00096 100644 --- a/src/elements/emby-scroller/emby-scroller.scss +++ b/src/elements/emby-scroller/emby-scroller.scss @@ -9,6 +9,11 @@ margin-right: max(env(safe-area-inset-right), 3.3%); } +.servers > .card > .cardBox { + margin-left: 0.6em; + margin-right: 0.6em; +} + /* align first card in scroller to heading */ .itemsContainer > .card > .cardBox { [dir="ltr"] & { @@ -22,11 +27,6 @@ } } -.servers > .card > .cardBox { - margin-left: 0.6em; - margin-right: 0.6em; -} - .layout-tv .emby-scroller, .layout-mobile .emby-scroller { padding-left: 3.3%; From aed7feda2b71a50c7933781bba21c8393dddec5a Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Wed, 12 Oct 2022 08:32:13 -0400 Subject: [PATCH 63/66] Fixed css ugliness --- src/components/formdialog.scss | 35 ++++++---------------------------- 1 file changed, 6 insertions(+), 29 deletions(-) diff --git a/src/components/formdialog.scss b/src/components/formdialog.scss index 04259422c2..68dca09589 100644 --- a/src/components/formdialog.scss +++ b/src/components/formdialog.scss @@ -110,17 +110,8 @@ .formDialogFooterItem-autosize { flex-basis: initial; flex-grow: initial; - - [dir="ltr"] & { - - padding-left: 2em; - padding-right: 2em; - } - - [dir="rtl"] & { - padding-right: 2em; - padding-left: 2em; - } + padding-right: 2em; + padding-left: 2em; } @media all and (min-width: 50em) { @@ -129,15 +120,8 @@ } .dialogContentInner { - [dir="ltr"] & { - padding-left: 1.5em; - padding-right: 1.5em; - } - - [dir="rtl"] & { - padding-right: 1.5em; - padding-left: 1.5em; - } + padding-left: 1.5em; + padding-right: 1.5em; } } @@ -147,14 +131,7 @@ } .dialogContentInner { - [dir="ltr"] & { - padding-left: 2em; - padding-right: 2em; - } - - [dir="rtl"] & { - padding-right: 2em; - padding-left: 2em; - } + padding-left: 2em; + padding-right: 2em; } } From 6e5be5d3666d5c7c783c9bf4affc533b2508a922 Mon Sep 17 00:00:00 2001 From: hadicharara <46264409+hadicharara@users.noreply.github.com> Date: Thu, 13 Oct 2022 13:47:17 -0400 Subject: [PATCH 64/66] Update src/libraries/scroller.js Co-authored-by: Bill Thornton --- src/libraries/scroller.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libraries/scroller.js b/src/libraries/scroller.js index 385c4e0915..c388c52fe8 100644 --- a/src/libraries/scroller.js +++ b/src/libraries/scroller.js @@ -399,7 +399,7 @@ const scrollerFactory = function (frame, options) { console.debug('offset:' + offset + ' currentStart:' + currentStart + ' currentEnd:' + currentEnd); const isVisible = offset >= Math.min(currentStart, currentEnd) - && (globalize.getIsRTL() ? (offset - size) : (offset + size)) <= Math.max(currentStart, currentEnd); + && (globalize.getIsRTL() ? (offset - size) : (offset + size)) <= Math.max(currentStart, currentEnd); return { start: offset, From 892f5b73cf853eb047cb09fedcca7e7b92932e06 Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Thu, 13 Oct 2022 13:59:48 -0400 Subject: [PATCH 65/66] Fixed all reported issues --- .../metadataEditor.template.html | 8 ++--- src/components/metadataEditor/style.scss | 2 +- .../emby-scrollbuttons/emby-scrollbuttons.js | 6 ++-- src/elements/emby-slider/emby-slider.js | 4 +-- src/libraries/navdrawer/navdrawer.js | 5 +++- src/scripts/globalize.js | 29 +++++++++---------- 6 files changed, 28 insertions(+), 26 deletions(-) diff --git a/src/components/metadataEditor/metadataEditor.template.html b/src/components/metadataEditor/metadataEditor.template.html index b0d73793d2..eda5d84e0d 100644 --- a/src/components/metadataEditor/metadataEditor.template.html +++ b/src/components/metadataEditor/metadataEditor.template.html @@ -194,7 +194,7 @@

${Genres}

-
@@ -203,7 +203,7 @@

${People}

-
@@ -213,7 +213,7 @@

${Studios}

-
@@ -222,7 +222,7 @@

${Tags}

-
diff --git a/src/components/metadataEditor/style.scss b/src/components/metadataEditor/style.scss index bf10dcdcdd..2b36a96eda 100644 --- a/src/components/metadataEditor/style.scss +++ b/src/components/metadataEditor/style.scss @@ -8,7 +8,7 @@ } } -.marginLeft { +.metadataFormFields .marginStart { [dir="ltr"] & { margin-left: 1em; } diff --git a/src/elements/emby-scrollbuttons/emby-scrollbuttons.js b/src/elements/emby-scrollbuttons/emby-scrollbuttons.js index 76db38a908..e7fa1df29f 100644 --- a/src/elements/emby-scrollbuttons/emby-scrollbuttons.js +++ b/src/elements/emby-scrollbuttons/emby-scrollbuttons.js @@ -40,13 +40,13 @@ const EmbyScrollButtonsPrototype = Object.create(HTMLDivElement.prototype); } function updateScrollButtons(scrollButtons, scrollSize, scrollPos, scrollWidth) { - // TODO: Check if hack is really needed - // hack alert add twenty for rounding errors let localeAwarePos = scrollPos; - if (globalize.getElementIsRTL(scrollButtons)) { + if (globalize.getIsElementRTL(scrollButtons)) { localeAwarePos *= -1; } + // TODO: Check if hack is really needed + // hack alert add twenty for rounding errors if (scrollWidth <= scrollSize + 20) { scrollButtons.scrollButtonsLeft.classList.add('hide'); scrollButtons.scrollButtonsRight.classList.add('hide'); diff --git a/src/elements/emby-slider/emby-slider.js b/src/elements/emby-slider/emby-slider.js index d49b1b8ff0..7ce7b02ab6 100644 --- a/src/elements/emby-slider/emby-slider.js +++ b/src/elements/emby-slider/emby-slider.js @@ -32,7 +32,7 @@ import globalize from '../../scripts/globalize'; const rect = range.sliderBubbleTrack.getBoundingClientRect(); let fraction = (clientX - rect.left) / rect.width; - if (globalize.getElementIsRTL(range)) + if (globalize.getIsElementRTL(range)) fraction = (rect.right - clientX) / rect.width; // Snap to step @@ -121,7 +121,7 @@ import globalize from '../../scripts/globalize'; const bubbleRect = bubble.getBoundingClientRect(); let bubblePos = bubbleTrackRect.width * value / 100; - if (globalize.getElementIsRTL(range)) { + if (globalize.getIsElementRTL(range)) { bubblePos = bubbleTrackRect.width - bubblePos; } bubblePos = Math.min(Math.max(bubblePos, bubbleRect.width / 2), bubbleTrackRect.width - bubbleRect.width / 2); diff --git a/src/libraries/navdrawer/navdrawer.js b/src/libraries/navdrawer/navdrawer.js index 3f409568f0..bd27b6e55c 100644 --- a/src/libraries/navdrawer/navdrawer.js +++ b/src/libraries/navdrawer/navdrawer.js @@ -206,7 +206,10 @@ class NavDrawer { options.target.classList.add('touch-menu-la'); options.target.style.width = options.width + 'px'; - options.target.style.insetInlineStart = -options.width + 'px'; + if (globalize.getIsRTL()) + options.target.style.right = -options.width + 'px'; + else + options.target.style.left = -options.width + 'px'; if (!options.disableMask) { this.mask = document.createElement('div'); diff --git a/src/scripts/globalize.js b/src/scripts/globalize.js index af51255a71..3198b1b537 100644 --- a/src/scripts/globalize.js +++ b/src/scripts/globalize.js @@ -3,6 +3,11 @@ import isEmpty from 'lodash-es/isEmpty'; import { currentSettings as userSettings } from './settings/userSettings'; +const Direction = { + rtl: "rtl", + ltr: "ltr" +}; + /* eslint-disable indent */ const fallbackCulture = 'en-us'; @@ -46,6 +51,7 @@ import { currentSettings as userSettings } from './settings/userSettings'; function checkAndProcessDir(culture) { isRTL = false; + console.log(culture); for (const lang of RTL_LANGS) { if (culture.includes(lang)) { isRTL = true; @@ -53,24 +59,17 @@ import { currentSettings as userSettings } from './settings/userSettings'; } } - if (isRTL) - processIsRTL(); - else - processIsLTR(); + setDocumentDirection(isRTL ? Direction.rtl : Direction.ltr); } - function processIsRTL() { - document.getElementsByTagName('body')[0].setAttribute('dir', 'rtl'); - document.getElementsByTagName('html')[0].setAttribute('dir', 'rtl'); - import('../styles/rtl.scss'); + function setDocumentDirection(direction) { + document.getElementsByTagName('body')[0].setAttribute('dir', direction); + document.getElementsByTagName('html')[0].setAttribute('dir', direction); + if (direction === Direction.rtl) + import('../styles/rtl.scss'); } - function processIsLTR() { - document.getElementsByTagName('body')[0].setAttribute('dir', 'ltr'); - document.getElementsByTagName('html')[0].setAttribute('dir', 'ltr'); - } - - export function getElementIsRTL(element) { + export function getIsElementRTL(element) { if (window.getComputedStyle) { // all browsers return window.getComputedStyle(element, null).getPropertyValue('direction') == 'rtl'; } @@ -299,7 +298,7 @@ export default { register, updateCurrentCulture, getIsRTL, - getElementIsRTL + getIsElementRTL }; /* eslint-enable indent */ From d1145a3c6384d8a6e9895608adf639ab709ce846 Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Fri, 14 Oct 2022 17:06:25 -0400 Subject: [PATCH 66/66] Fixed linting issue --- src/scripts/globalize.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/scripts/globalize.js b/src/scripts/globalize.js index 3198b1b537..f54599fa4d 100644 --- a/src/scripts/globalize.js +++ b/src/scripts/globalize.js @@ -4,8 +4,8 @@ import isEmpty from 'lodash-es/isEmpty'; import { currentSettings as userSettings } from './settings/userSettings'; const Direction = { - rtl: "rtl", - ltr: "ltr" + rtl: 'rtl', + ltr: 'ltr' }; /* eslint-disable indent */