chore(release): 🚀 v4.49.3 [skip ci]

Merge pull request #5248 from emma-the-rock/patch-1
fix(plex-api): update Plex Watchlist URL
2025-08-22 22:23:34 -07:00 · 2025-08-17 16:01:24 +00:00 · 2025-08-17 17:58:51 +02:00 · 2025-08-14 21:17:10 -03:00 · 2025-07-12 21:47:40 +00:00 · 2025-07-12 22:45:50 +01:00
10 changed files with 209 additions and 77 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,3 +1,21 @@
+## [4.49.3](https://github.com/Ombi-app/Ombi/compare/v4.49.2...v4.49.3) (2025-08-17)
+
+
+### Bug Fixes
+
+* **plex-api:** update Plex Watchlist URL ([11fd7a5](https://github.com/Ombi-app/Ombi/commit/11fd7a5fc853da75974a16bf4fdecd72a836f54b))
+
+
+
+## [4.49.2](https://github.com/Ombi-app/Ombi/compare/v4.49.1...v4.49.2) (2025-07-12)
+
+
+### Performance Improvements
+
+* **discover:** :zap: Improve the loading performance on the discover page ([97d5167](https://github.com/Ombi-app/Ombi/commit/97d5167db6c9f915021f32b96b281d7db3741d7f))
+
+
+
 ## [4.49.1](https://github.com/Ombi-app/Ombi/compare/v4.49.0...v4.49.1) (2025-07-12)


@ -2193,16 +2211,3 @@



-## [4.43.5](https://github.com/Ombi-app/Ombi/compare/v4.43.4...v4.43.5) (2023-08-24)
-
-
-
-## [4.43.4](https://github.com/Ombi-app/Ombi/compare/v4.43.3...v4.43.4) (2023-07-28)
-
-
-### Bug Fixes
-
-* **user-importer:** Fixed not importing all correct users [#4989](https://github.com/Ombi-app/Ombi/issues/4989) ([34c32f8](https://github.com/Ombi-app/Ombi/commit/34c32f8338705ea3f790d95b91c9ada21a41b9f2))
-
-
-
--- a/src/Ombi.Api.Plex/PlexApi.cs
+++ b/src/Ombi.Api.Plex/PlexApi.cs
@ -68,7 +68,7 @@ namespace Ombi.Api.Plex
        private const string FriendsUri = "https://plex.tv/api/users"; 
        private const string GetAccountUri = "https://plex.tv/users/account.json";
        private const string ServerUri = "https://plex.tv/pms/servers.xml";
-        private const string WatchlistUri = "https://metadata.provider.plex.tv/";
+        private const string WatchlistUri = "https://discover.provider.plex.tv/";

        /// <summary>
        /// Sign into the Plex API
--- a/src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.html
+++ b/src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.html
@ -5,13 +5,17 @@
    <mat-button-toggle id="{{id}}Tv" [ngClass]="{'button-active': discoverOptions === DiscoverOption.Tv}" value="{{DiscoverOption.Tv}}" class="discover-filter-button">{{'Discovery.Tv' | translate}}</mat-button-toggle>
  </mat-button-toggle-group>
 </div>
-@defer (when discoverResults.length > 0) {
+@defer (when discoverResults.length > 0; prefetch on idle) {
 <p-carousel #carousel [numVisible]="10" [numScroll]="10" [page]="0" [value]="discoverResults" [responsiveOptions]="responsiveOptions" (onPage)="newPage()">
    <ng-template let-result pTemplate="item">
        <discover-card [discoverType]="discoverType" [isAdmin]="isAdmin" [result]="result" [is4kEnabled]="is4kEnabled"></discover-card>
    </ng-template>
 </p-carousel>
 }
-@placeholder(minimum 500) {
-    <p-skeleton width="100%" height="18rem"></p-skeleton>
+@placeholder(minimum 300) {
+    <div class="row loading-container">
+        <div class="col-2" *ngFor="let item of [1,2,3,4,5,6,7,8,9,10]">
+            <p-skeleton width="100%" height="270px"></p-skeleton>
+        </div>
+    </div>
 }
--- a/src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.scss
+++ b/src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.scss
@ -105,6 +105,30 @@
   padding: 5px;
 }

+.loading-container {
+    display: flex;
+    gap: 10px;
+    padding: 0 20px;
+    margin-top: 20px;
+}
+
+.loading-container .col-2 {
+    flex: 0 0 auto;
+    width: calc(10% - 9px);
+}
+
+@media (max-width: 768px) {
+    .loading-container .col-2 {
+        width: calc(50% - 5px);
+    }
+}
+
+@media (max-width: 480px) {
+    .loading-container .col-2 {
+        width: calc(100% - 0px);
+    }
+}
+
@media (min-width:755px){
  ::ng-deep .p-carousel-item{
    flex: 1 0 200px !important;
--- a/src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.ts
+++ b/src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.ts
@ -43,7 +43,7 @@ export class CarouselListComponent implements OnInit {
    get mediaTypeStorageKey() {
        return "DiscoverOptions" + this.discoverType.toString();
    };
-    private amountToLoad = 17;
+    private amountToLoad = 10;
    private currentlyLoaded = 0;
    private baseUrl: string = "";

@ -148,6 +148,7 @@ export class CarouselListComponent implements OnInit {
    }

    public async ngOnInit() {
+        
        this.is4kEnabled = this.featureFacade.is4kEnabled();
        this.currentlyLoaded = 0;
        const localDiscoverOptions = +this.storageService.get(this.mediaTypeStorageKey);
@ -155,11 +156,15 @@ export class CarouselListComponent implements OnInit {
            this.discoverOptions = DiscoverOption[DiscoverOption[localDiscoverOptions]];
        }

-        let currentIteration = 0;
-        while (this.discoverResults.length <= 14 && currentIteration <= 3) {
-            currentIteration++;
+        // Load initial data - just enough to fill the first carousel page
+        // This reduces initial API calls and improves loading performance
+        await this.loadData(false);
+        
+        // If we don't have enough results to fill the carousel, load one more batch
+        if (this.discoverResults.length < 10) {
            await this.loadData(false);
        }
+        
    }

    public async toggleChanged(event: MatButtonToggleChange) {
--- a/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.html
+++ b/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.html
@ -1,46 +1,108 @@
 <div class="small-middle-container">
-	<div class="section">
-		<h2 id="genreHeading" data-toggle="collapse" href="#genreCollapse" role="button">{{ 'Discovery.Genres' | translate }}</h2>
-		<genre-button-select class="collapse show" id="genreCollapse"></genre-button-select>
-	</div>
-	<div class="section">
-		<h2>{{ 'Discovery.RecentlyRequestedTab' | translate }}</h2>
-		<div>
-			<ombi-recently-list [id]="'recentlyRequested'"></ombi-recently-list>
+	@defer (on viewport; prefetch on idle) {
+		<div class="section">
+			<h2 id="genreHeading" data-toggle="collapse" href="#genreCollapse" role="button">{{ 'Discovery.Genres' | translate }}</h2>
+			<genre-button-select class="collapse show" id="genreCollapse"></genre-button-select>
 		</div>
-	</div>
-
-
-	<div class="section" [hidden]="!showSeasonal">
-		<h2>{{ 'Discovery.SeasonalTab' | translate }}</h2>
-		<div>
-			<carousel-list
-				[id]="'seasonal'"
-				[isAdmin]="isAdmin"
-				[discoverType]="DiscoverType.Seasonal"
-				(movieCount)="setSeasonalMovieCount($event)"
-			></carousel-list>
+	} @placeholder(minimum 300) {
+		<div class="section">
+			<h2>{{ 'Discovery.Genres' | translate }}</h2>
+			<p-skeleton width="100%" height="60px"></p-skeleton>
 		</div>
-	</div>
+	}

-	<div class="section">
-		<h2>{{ 'Discovery.PopularTab' | translate }}</h2>
-		<div>
-			<carousel-list [id]="'popular'" [isAdmin]="isAdmin" [discoverType]="DiscoverType.Popular"></carousel-list>
+	@defer (on viewport; prefetch on idle) {
+		<div class="section">
+			<h2>{{ 'Discovery.RecentlyRequestedTab' | translate }}</h2>
+			<div>
+				<ombi-recently-list [id]="'recentlyRequested'"></ombi-recently-list>
+			</div>
 		</div>
-	</div>
+	} @placeholder(minimum 300) {
+		<div class="section">
+			<h2>{{ 'Discovery.RecentlyRequestedTab' | translate }}</h2>
+			<div class="row loading-container">
+				<div class="col-2" *ngFor="let item of [1,2,3,4,5]">
+					<p-skeleton width="100%" height="270px"></p-skeleton>
+				</div>
+			</div>
+		</div>
+	}

-	<div class="section">
-		<h2>{{ 'Discovery.TrendingTab' | translate }}</h2>
-		<div>
-			<carousel-list [id]="'trending'" [isAdmin]="isAdmin" [discoverType]="DiscoverType.Trending"></carousel-list>
+	@defer (on viewport; prefetch on idle) {
+		<div class="section" [hidden]="!showSeasonal">
+			<h2>{{ 'Discovery.SeasonalTab' | translate }}</h2>
+			<div>
+				<carousel-list
+					[id]="'seasonal'"
+					[isAdmin]="isAdmin"
+					[discoverType]="DiscoverType.Seasonal"
+					(movieCount)="setSeasonalMovieCount($event)"
+				></carousel-list>
+			</div>
 		</div>
-	</div>
+	} @placeholder(minimum 300) {
+		<div class="section">
+			<h2>{{ 'Discovery.SeasonalTab' | translate }}</h2>
+			<div class="row loading-container">
+				<div class="col-2" *ngFor="let item of [1,2,3,4,5,6,7,8,9,10]">
+					<p-skeleton width="100%" height="270px"></p-skeleton>
+				</div>
+			</div>
+		</div>
+	}

-	<div class="section">
-		<h2>{{ 'Discovery.UpcomingTab' | translate }}</h2>
-		<div>
-			<carousel-list [id]="'upcoming'" [isAdmin]="isAdmin" [discoverType]="DiscoverType.Upcoming"></carousel-list>
+	@defer (on viewport; prefetch on idle) {
+		<div class="section">
+			<h2>{{ 'Discovery.PopularTab' | translate }}</h2>
+			<div>
+				<carousel-list [id]="'popular'" [isAdmin]="isAdmin" [discoverType]="DiscoverType.Popular"></carousel-list>
+			</div>
 		</div>
-	</div>
+	} @placeholder(minimum 300) {
+		<div class="section">
+			<h2>{{ 'Discovery.PopularTab' | translate }}</h2>
+			<div class="row loading-container">
+				<div class="col-2" *ngFor="let item of [1,2,3,4,5,6,7,8,9,10]">
+					<p-skeleton width="100%" height="270px"></p-skeleton>
+				</div>
+			</div>
+		</div>
+	}
+
+	@defer (on viewport; prefetch on idle) {
+		<div class="section">
+			<h2>{{ 'Discovery.TrendingTab' | translate }}</h2>
+			<div>
+				<carousel-list [id]="'trending'" [isAdmin]="isAdmin" [discoverType]="DiscoverType.Trending"></carousel-list>
+			</div>
+		</div>
+	} @placeholder(minimum 300) {
+		<div class="section">
+			<h2>{{ 'Discovery.TrendingTab' | translate }}</h2>
+			<div class="row loading-container">
+				<div class="col-2" *ngFor="let item of [1,2,3,4,5,6,7,8,9,10]">
+					<p-skeleton width="100%" height="270px"></p-skeleton>
+				</div>
+			</div>
+		</div>
+	}
+
+	@defer (on viewport; prefetch on idle) {
+		<div class="section">
+			<h2>{{ 'Discovery.UpcomingTab' | translate }}</h2>
+			<div>
+				<carousel-list [id]="'upcoming'" [isAdmin]="isAdmin" [discoverType]="DiscoverType.Upcoming"></carousel-list>
+			</div>
+		</div>
+	} @placeholder(minimum 300) {
+		<div class="section">
+			<h2>{{ 'Discovery.UpcomingTab' | translate }}</h2>
+			<div class="row loading-container">
+				<div class="col-2" *ngFor="let item of [1,2,3,4,5,6,7,8,9,10]">
+					<p-skeleton width="100%" height="270px"></p-skeleton>
+				</div>
+			</div>
+		</div>
+	}
 </div>
--- a/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.scss
+++ b/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.scss
@ -9,4 +9,28 @@ h2{
    margin-top:40px;
    margin-left:40px;
    font-size: 24px;
+}
+
+.loading-container {
+    display: flex;
+    gap: 10px;
+    padding: 0 20px;
+    margin-top: 20px;
+}
+
+.loading-container .col-2 {
+    flex: 0 0 auto;
+    width: calc(10% - 9px);
+}
+
+@media (max-width: 768px) {
+    .loading-container .col-2 {
+        width: calc(50% - 5px);
+    }
+}
+
+@media (max-width: 480px) {
+    .loading-container .col-2 {
+        width: calc(100% - 0px);
+    }
 }
--- a/src/Ombi/ClientApp/src/app/discover/components/recently-requested-list/recently-requested-list.component.html
+++ b/src/Ombi/ClientApp/src/app/discover/components/recently-requested-list/recently-requested-list.component.html
@ -1,4 +1,4 @@
-@defer (when requests()) {
+@defer (when requests(); prefetch on idle) {
    <div *ngIf="requests().length > 0">
        <p-carousel #carousel [value]="requests()" [numVisible]="3" [numScroll]="1"
            [responsiveOptions]="responsiveOptions" [page]="0">
@ -13,21 +13,9 @@
            </ng-template>
        </p-carousel>
    </div>
-}@placeholder(minimum 500) {
+}@placeholder(minimum 300) {
    <div class="row loading-container">
-        <div class="col-2">
-            <p-skeleton width="100%" height="270px"></p-skeleton>
-        </div>
-        <div class="col-2">
-            <p-skeleton width="100%" height="270px"></p-skeleton>
-        </div>
-        <div class="col-2">
-            <p-skeleton width="100%" height="270px"></p-skeleton>
-        </div>
-        <div class="col-2">
-            <p-skeleton width="100%" height="270px"></p-skeleton>
-        </div>
-        <div class="col-2">
+        <div class="col-2" *ngFor="let item of [1,2,3,4,5]">
            <p-skeleton width="100%" height="270px"></p-skeleton>
        </div>
    </div>
--- a/src/Ombi/ClientApp/src/app/discover/components/recently-requested-list/recently-requested-list.component.scss
+++ b/src/Ombi/ClientApp/src/app/discover/components/recently-requested-list/recently-requested-list.component.scss
@ -105,12 +105,32 @@
   padding: 5px;
 }

+.loading-container {
+    display: flex;
+    gap: 10px;
+    padding: 0 20px;
+    margin-top: 20px;
+}
+
+.loading-container .col-2 {
+    flex: 0 0 auto;
+    width: calc(20% - 8px);
+}
+
+@media (max-width: 768px) {
+    .loading-container .col-2 {
+        width: calc(50% - 5px);
+    }
+}
+
+@media (max-width: 480px) {
+    .loading-container .col-2 {
+        width: calc(100% - 0px);
+    }
+}
+
@media (min-width:755px){
  ::ng-deep .p-carousel-item{
    flex: 1 0 200px !important;
  }
-}
-
-.loading-container {
-  margin-left: 10rem; 
 }
--- a/version.json
+++ b/version.json
@ -1,3 +1,3 @@
 {
-  "version": "4.49.1"
+  "version": "4.49.3"
 }
Author	SHA1	Message	Date
Conventional Changelog Action	b72f47470c	chore(release): 🚀 v4.49.3 [skip ci]	2025-08-17 16:01:24 +00:00
Jamie Rees	72d4115378	Merge pull request #5248 from emma-the-rock/patch-1 fix(plex-api): update Plex Watchlist URL	2025-08-17 17:58:51 +02:00
emmatherock	11fd7a5fc8	fix(plex-api): update Plex Watchlist URL	2025-08-14 21:17:10 -03:00
Conventional Changelog Action	d2be48a921	chore(release): 🚀 v4.49.2 [skip ci]	2025-07-12 21:47:40 +00:00
tidusjar	a92c76021a	Merge branch 'develop' of https://github.com/tidusjar/ombi into develop	2025-07-12 22:45:50 +01:00
tidusjar	97d5167db6	perf(discover): ⚡ Improve the loading performance on the discover page	2025-07-12 22:35:11 +01:00