Home Screen Sections (Modular Home)
2 |A Jellyfin Plugin
3 |
4 | 
5 |
6 |
7 |
8 | 
9 |
10 |
11 | 
12 |
13 |
44 |
45 | - Watch Again
46 | - Again similar to Netflix's feature of the same name, this will request Movies in a Collection and TV Shows that have been watched to their completion and will provide the user an option to watch the show/movie collection again. The listed entry will be the first movie to be released in that collection (done by Premiere Date) or the first episode in the series
47 | 
48 |
49 | - My List
50 | - Again similar to Netflix's feature. This requires a bit more setup than the others to get working. It looks for a playlist called "My List" and retrieves the entries in that playlist.
51 | 
52 |
53 | ## Installation
54 |
55 | ### Prerequisites
56 | - This plugin is based on Jellyfin Version `10.10.7`
57 | - The following plugins are required to also be installed, please following their installation guides:
58 | - File Transformation (https://github.com/IAmParadox27/jellyfin-plugin-file-transformation) at least v2.2.1.0
59 | - Plugin Pages (https://github.com/IAmParadox27/jellyfin-plugin-pages) at least v2.2.2.0
60 |
61 | ### Installation
62 | 1. Add `https://www.iamparadox.dev/jellyfin/plugins/manifest.json` to your plugin repositories.
63 | 2. Install `Home Screen Sections` from the Catalogue.
64 | 3. Restart Jellyfin.
65 | 4. On the user's homepage, open the hamburger menu and you should see a link for settings to "Modular Home". Click this.
66 | 5. At the top there is a button to enable support and it will retrieve all sections that are available on your instance. Select all that apply.
67 | 6. Save the settings. _Please note currently the user is not provided any feedback when the settings are saved_.
68 | 7. Force refresh your webpage (or app) and you should see your new sections instead of the original ones.
69 | ## Upcoming Features/Known Issues
70 | If you find an issue with any of the sections or usage of the plugin, please open an issue on GitHub.
71 |
72 | ### FAQ
73 |
74 | #### I've installed the plugins and don't get any options or changes. How do I fix?
75 | This is common, particularly on a fresh install. The first thing you should try is the following
76 | 1. Launch your browsers developer tools
77 |
78 | 
79 |
80 | 3. Open the **Network** tab across the top bar
81 | 4. Check the **Disable cache** checkbox
82 | 5. Refresh the page **while the dev tools are still open**
83 |
84 | 
85 |
86 | #### How can I tell if its worked?
87 |
88 | > The easiest way to confirm whether the user is using the modular home settings is to check whether the movie posters are portrait or landscape. Due to how the cards are delivered from the backend all cards are forced to be landscape
89 | ## Contribution
90 | ### Adding your own sections
91 | > This is great an' all but I want a section that doesn't exist here. Can I make one?
92 |
93 | Yep! Home Screen Sections exposes HTTP endpoints which can be used to register sections.
94 |
95 | Send an HTTP POST request to `http(s)://{YOUR_JELLYFIN_URL}/HomeScreen/RegisterSection` with data in the following structure
96 | ```json
97 | {
98 | "id": "", // Unique ID for your section
99 | "displayText":"", // What text should be displayed for your section
100 | "limit": 1, // This can only be 1 at the moment, I am working hard to support more than 1 section via HTTP request
101 | "additionalData": "", // Any accompanying data you want sent to your endpoint
102 | "resultsEndpoint":"" // The endpoint that will be requested when the section is requested. Expected to return `QueryResult
8 |
249 |
250 |
--------------------------------------------------------------------------------
/src/Jellyfin.Plugin.HomeScreenSections/Controllers/HomeScreenController.cs:
--------------------------------------------------------------------------------
1 | using System.ComponentModel.DataAnnotations;
2 | using System.Net.Http.Headers;
3 | using System.Reflection;
4 | using System.Text.RegularExpressions;
5 | using Jellyfin.Data.Entities;
6 | using Jellyfin.Data.Enums;
7 | using Jellyfin.Extensions;
8 | using Jellyfin.Plugin.HomeScreenSections.Configuration;
9 | using Jellyfin.Plugin.HomeScreenSections.Helpers;
10 | using Jellyfin.Plugin.HomeScreenSections.HomeScreen.Sections;
11 | using Jellyfin.Plugin.HomeScreenSections.Library;
12 | using Jellyfin.Plugin.HomeScreenSections.Model;
13 | using Jellyfin.Plugin.HomeScreenSections.Model.Dto;
14 | using Jellyfin.Plugin.HomeScreenSections.Services;
15 | using MediaBrowser.Common.Configuration;
16 | using MediaBrowser.Common.Extensions;
17 | using MediaBrowser.Controller;
18 | using MediaBrowser.Model.Dto;
19 | using MediaBrowser.Model.Querying;
20 | using Microsoft.AspNetCore.Http;
21 | using Microsoft.AspNetCore.Mvc;
22 | using Newtonsoft.Json;
23 | using Newtonsoft.Json.Linq;
24 |
25 | namespace Jellyfin.Plugin.HomeScreenSections.Controllers
26 | {
27 | ///
9 |
19 | 63 |
64 |
65 |
66 |
119 |
120 |
121 |
248 |
10 |
18 |
11 |
17 | Home Screen Sections
12 | 13 | 14 | Help 15 | 16 |19 | 63 |
';
59 | if (!layoutManager.tv && sectionInfo.Route !== undefined) {
60 | var route = undefined;
61 | if (sectionInfo.OriginalPayload !== undefined) {
62 | route = p.appRouter.getRouteUrl(sectionInfo.OriginalPayload, {
63 | serverId: apiClient.serverId()
64 | });
65 | } else {
66 | route = p.appRouter.getRouteUrl(sectionInfo.Route, {
67 | serverId: apiClient.serverId()
68 | })
69 | }
70 |
71 | html += '';
72 | html += '
";
84 | html += ''; 73 | html += sectionInfo.DisplayText; 74 | html += "
"; 75 | html += ''; 76 | html += ""; 77 | } else { 78 | html += ''; 79 | html += sectionInfo.DisplayText; 80 | html += "
"; 81 | } 82 | 83 | html += "';
85 | html += '
";
88 | elem.classList.add("hide");
89 | elem.innerHTML = html;
90 |
91 | var var13_, var14_, itemsContainer = elem.querySelector(".itemsContainer");
92 |
93 | if (itemsContainer !== null) {
94 | if (sectionInfo.ContainerClass !== undefined) {
95 | itemsContainer.classList.add(sectionInfo.ContainerClass);
96 | }
97 |
98 | var cardBuilder = {{cardbuilder_hook}}.default;
99 |
100 | var cardSettings = {
101 | ViewMode: sectionInfo.ViewMode,
102 | DisplayTitleText: sectionInfo.DisplayTitleText,
103 | ShowDetailsMenu: sectionInfo.ShowDetailsMenu
104 | }
105 |
106 | itemsContainer.fetchData = getHomeScreenSectionFetchFn(apiClient.serverId(), sectionInfo, u.A, userSettings);
107 |
108 | var getBackdropShape = y.UI;
109 | var getPortraitShape = y.xK;
110 | var getSquareShape = y.zP;
111 |
112 | var getShapeFn = getBackdropShape;
113 | if (cardSettings.ViewMode === 'Portrait')
114 | {
115 | getShapeFn = getPortraitShape;
116 | }
117 | else if (cardSettings.ViewMode === 'Square')
118 | {
119 | getShapeFn = getSquareShape;
120 | }
121 |
122 | itemsContainer.getItemsHtml = getHomeScreenSectionItemsHtmlFn(userSettings.useEpisodeImagesInNextUpAndResume(), options.enableOverflow, sectionInfo.Section, cardBuilder, getShapeFn, cardSettings);
123 | itemsContainer.parentContainer = elem;
124 | }
125 | }
126 | return Promise.resolve()
127 | }
128 |
129 | async function isUserUsingHomeScreenSections(_userSettings, _apiClient) {
130 | var pluginConfig = await _apiClient.getJSON(_apiClient.getUrl("HomeScreen/Configuration"));
131 |
132 | if (pluginConfig.AllowUserOverride === true) {
133 | if (_userSettings && _userSettings.getData() && _userSettings.getData().CustomPrefs && _userSettings.getData().CustomPrefs.useModularHome !== undefined) {
134 | return _userSettings.getData().CustomPrefs.useModularHome === "true";
135 | }
136 | }
137 |
138 | return pluginConfig.Enabled;
139 | }
140 |
141 | if (await isUserUsingHomeScreenSections(userSettings, apiClient)) {
142 | return function(elem, apiClient, user, userSettings) {
143 | var var39_, var39_3, var39_4;
144 | return var39_ = this, void 0, var39_4 = function() {
145 | var var44_, options, var44_3, var44_4, var44_5, var44_6, var44_7, sectionInfo, var44_9, var44_10, var44_11;
146 | return function(param45_, param45_2) {
147 | var var46_, var47_, var48_, var49_ = {
148 | label: 0,
149 | sent: function() {
150 | if (1 & var48_[0]) throw var48_[1];
151 | return var48_[1]
152 | },
153 | trys: [],
154 | ops: []
155 | },
156 | var58_ = Object.create(("function" == typeof Iterator ? Iterator : Object).prototype);
157 | return var58_.next = fn69_(0), var58_.throw = fn69_(1), var58_.return = fn69_(2), "function" == typeof Symbol && (var58_[Symbol.iterator] = function() {
158 | return this
159 | }), var58_;
160 |
161 | function fn69_(param69_) {
162 | return function(param70_) {
163 | return function(param71_) {
164 | if (var46_) throw TypeError("Generator is already executing.");
165 | for (; var58_ && (var58_ = 0, param71_[0] && (var49_ = 0)), var49_;) try {
166 | if (var46_ = 1, var47_ && (var48_ = 2 & param71_[0] ? var47_.return : param71_[0] ? var47_.throw || ((var48_ = var47_.return) && var48_.call(var47_), 0) : var47_.next) && !(var48_ = var48_.call(var47_, param71_[1])).done) return var48_;
167 | switch (var47_ = 0, var48_ && (param71_ = [2 & param71_[0], var48_.value]), param71_[0]) {
168 | case 0:
169 | case 1:
170 | var48_ = param71_;
171 | break;
172 | case 4:
173 | return var49_.label++, {
174 | value: param71_[1],
175 | done: !1
176 | };
177 | case 5:
178 | var49_.label++, var47_ = param71_[1], param71_ = [0];
179 | continue;
180 | case 7:
181 | param71_ = var49_.ops.pop(), var49_.trys.pop();
182 | continue;
183 | default:
184 | if (!((var48_ = (var48_ = var49_.trys).length > 0 && var48_[var48_.length - 1]) || 6 !== param71_[0] && 2 !== param71_[0])) {
185 | var49_ = 0;
186 | continue
187 | }
188 | if (3 === param71_[0] && (!var48_ || param71_[1] > var48_[0] && param71_[1] < var48_[3])) {
189 | var49_.label = param71_[1];
190 | break
191 | }
192 | if (6 === param71_[0] && var49_.label < var48_[1]) {
193 | var49_.label = var48_[1], var48_ = param71_;
194 | break
195 | }
196 | if (var48_ && var49_.label < var48_[2]) {
197 | var49_.label = var48_[2], var49_.ops.push(param71_);
198 | break
199 | }
200 | var48_[2] && var49_.ops.pop(), var49_.trys.pop();
201 | continue
202 | }
203 | param71_ = param45_2.call(param45_, var49_)
204 | } catch (let110_) {
205 | param71_ = [6, let110_], var47_ = 0
206 | } finally {
207 | var46_ = var48_ = 0
208 | }
209 | if (5 & param71_[0]) throw param71_[1];
210 | return {
211 | value: param71_[0] ? param71_[1] : void 0,
212 | done: !0
213 | }
214 | }([param69_, param70_])
215 | }
216 | }
217 | }(this, (function(param120_) {
218 | switch (param120_.label) {
219 | case 0:
220 | var var123_, var123_2, var123_3;
221 | return [4, (var123_ = apiClient, var123_2 = {
222 | UserId: apiClient.getCurrentUserId(),
223 | Language: localStorage.getItem(apiClient.getCurrentUserId() + '-language')
224 | }, var123_3 = var123_.getUrl("HomeScreen/Sections", var123_2), var123_.getJSON(var123_3))];
225 | case 1:
226 | if (var44_ = param120_.sent(), options = {
227 | enableOverflow: !0
228 | }, var44_3 = "", var44_4 = [], void 0 !== var44_.Items) {
229 | for (var44_5 = 0; var44_5 < var44_.TotalRecordCount; var44_5++) var44_6 = var44_.Items[var44_5].Section, var44_.Items[var44_5].Limit > 1 && (var44_6 += "-" + var44_.Items[var44_5].AdditionalData), var44_3 += '';
230 | if (elem.innerHTML = var44_3, elem.classList.add("homeSectionsContainer"), var44_.TotalRecordCount > 0)
231 | for (var44_7 = 0; var44_7 < var44_.Items.length; var44_7++) sectionInfo = var44_.Items[var44_7], var44_4.push(loadHomeSection(elem, apiClient, 0, userSettings, sectionInfo, options))
232 | }
233 | return var44_.TotalRecordCount > 0 ? [2, Promise.all(var44_4).then((function() {
234 | var var134_2, var134_3, var134_4;
235 | return var134_2 = {
236 | refresh: !0
237 | }, var134_3 = elem.querySelectorAll(".itemsContainer"), var134_4 = [], Array.prototype.forEach.call(var134_3, (function(param139_) {
238 | param139_.resume && var134_4.push(param139_.resume(var134_2))
239 | })), Promise.all(var134_4)
240 | }))] : (var44_9 = (null === (var44_11 = user.Policy) || void 0 === var44_11 ? void 0 : var44_11.IsAdministrator) ? s.Ay.translate("NoCreatedLibraries", '';
86 | html += "
";
87 | html += "', "") : s.Ay.translate("AskAdminToCreateLibrary"), var44_3 += '
', var44_3 += "
", elem.innerHTML = var44_3, (var44_10 = elem.querySelector("#button-createLibrary")) && var44_10.addEventListener("click", (function() {
241 | l.default.navigate("dashboard/libraries")
242 | })), [2])
243 | }
244 | }))
245 | }, new(var39_3 = void 0, var39_3 = Promise)((function(param160_, param160_2) {
246 | function fn161_(param161_) {
247 | try {
248 | fn175_(var39_4.next(param161_))
249 | } catch (let164_) {
250 | param160_2(let164_)
251 | }
252 | }
253 |
254 | function fn168_(param168_) {
255 | try {
256 | fn175_(var39_4.throw(param168_))
257 | } catch (let171_) {
258 | param160_2(let171_)
259 | }
260 | }
261 |
262 | function fn175_(param175_) {
263 | var var176_;
264 | param175_.done ? param160_(param175_.value) : ((var176_ = param175_.value) instanceof var39_3 ? var176_ : new var39_3((function(param181_) {
265 | param181_(var176_)
266 | }))).then(fn161_, fn168_)
267 | }
268 | fn175_((var39_4 = var39_4.apply(var39_, [])).next())
269 | }))
270 | }(elem, apiClient, user, userSettings);
271 | } else {
272 | return this.originalLoadSections(elem, apiClient, user, userSettings);
273 | }
274 | }
--------------------------------------------------------------------------------
/src/Jellyfin.Plugin.HomeScreenSections/Helpers/MiscExtensions.cs:
--------------------------------------------------------------------------------
1 | using System.Reflection;
2 | using Jellyfin.Data.Entities;
3 | using MediaBrowser.Controller.Collections;
4 | using MediaBrowser.Controller.Entities.Movies;
5 |
6 | namespace Jellyfin.Plugin.HomeScreenSections.Helpers;
7 |
8 | public static class MiscExtensions
9 | {
10 | public static IEnumerable" + s.Ay.translate("MessageNothingHere") + "
", var44_3 += "" + var44_9 + "
", var44_3 += "