Jellyfin-web: Migration to ES6 modules

Created on 1 Mar 2020 · 25Comments · Source: jellyfin/jellyfin-web

This is to track the move to ES6 modules.

[x] ./components/appRouter.js __(#1645)__
[x] ./components/filtermenu/filtermenu.js __(#1728)__
[x] ./components/focusManager.js __(#1738)__
[x] ./components/guide/guide-settings.js __(#1759)__
[x] ./components/guide/guide.js __(#1759)__
[x] ./components/imageDownloader/imageDownloader.js __(#1655)__
[x] ./components/imageeditor/imageeditor.js __(#1655)__
[x] ./components/itemHelper.js __(#1600)__
[x] ./components/itemsrefresher.js __(#1751)__
[x] ./components/layoutManager.js __(#1751)__
[x] ./components/loading/loading.js __(#1679)__
[x] ./components/loading/loadingLegacy.js __(removed)__
[x] ./components/notifications/notifications.js __(#1771)__
[x] ./components/nowPlayingBar/nowPlayingBar.js __(#1597)__
[x] ./components/packageManager.js __(#1716)__
[x] ./components/playback/playbackmanager.js __(#1707)__
[x] ./components/playback/playqueuemanager.js __(#1693)__
[x] ./components/playlisteditor/playlisteditor.js __(#1404)__
[x] ./components/playmenu.js __(#1173)__
[x] ./components/pluginManager.js __(#1716)__
[x] ./components/recordingcreator/recordingbutton.js __(#1750)__
[x] ./components/recordingcreator/recordingcreator.js __(#1750)__
[x] ./components/recordingcreator/recordingeditor.js __(#1761)__
[x] ./components/recordingcreator/recordingfields.js __(#1761)__
[x] ./components/recordingcreator/recordinghelper.js __(#1762)__
[x] ./components/recordingcreator/seriesrecordingeditor.js __(#1762)__
[x] ./components/refreshdialog/refreshdialog.js __(#1692)__
[x] ./components/remotecontrol/remotecontrol.js __(#1719)__
[x] ~~./components/require/requirecss.js~~ __(Will be replaced by a Webpack loader)__
[x] ~~./components/require/requiretext.js~~ __(Will be replaced by a Webpack loader)__
[x] ./components/serviceworker/notifications.js __'(Does not use RequireJS)__
[x] ~~./components/skinManager.js~~ __(#1502)__
[x] ./components/slideshow/slideshow.js __(#1768)__
[x] ./components/sortmenu/sortmenu.js __(#1768)__
[x] ./components/subtitleeditor/subtitleeditor.js __(#1769)__
[x] ./components/subtitlesync/subtitlesync.js __(#1769)__
[x] ./components/syncPlay/groupSelectionMenu.js __(#1011)__
[x] ./components/syncPlay/playbackPermissionManager.js __(#1011)__
[x] ./components/syncPlay/syncPlayManager.js __(#1011)__
[x] ./components/syncPlay/timeSyncManager.js __(#1011)__
[x] ./components/tabbedview/itemstab.js __(removed)__
[x] ./components/tabbedview/tabbedview.js __(#1676)__
[x] ./components/themeMediaPlayer.js __(#1771)__
[x] ./components/toast/toast.js __(#1654)__
[x] ./components/tunerPicker.js __(#1780)__
[x] ./components/tvproviders/schedulesdirect.js __(#1736)__
[x] ./components/tvproviders/xmltv.js __(#1736)__
[x] ./components/upnextdialog/upnextdialog.js __(#1654)__
[x] ./components/userdatabuttons/userdatabuttons.js __(#1780)__
[x] ./components/viewContainer.js __(#1718)__
[x] ./components/viewManager/viewManager.js __(#1733)__
[x] ./components/viewSettings/viewSettings.js __(#1771)__
[x] ./controllers/dashboard/devices/device.js __(#1548 )__
[x] ./controllers/dashboard/devices/devices.js __(#1548 )__
[x] ./controllers/dashboard/dlna/profile.js __(#1550 )__
[x] ./controllers/dashboard/dlna/profiles.js __(#1550 )__
[x] ./controllers/dashboard/dlna/settings.js __(#1550 )__
[x] ./controllers/dashboard/logs.js __(#1367)__
[x] ./controllers/dashboard/notifications/notification.js __(#1649)__
[x] ./controllers/dashboard/notifications/notifications.js __(#1649 )__
[x] ./controllers/dashboard/plugins/add.js __(#1652)__
[x] ./controllers/dashboard/plugins/available.js __(#1652)__
[x] ./controllers/dashboard/plugins/installed.js __(#1652)__
[x] ./controllers/dashboard/plugins/repositories.js
[x] ./controllers/dashboard/scheduledtasks/scheduledtask.js __(#1592)__
[x] ./controllers/dashboard/scheduledtasks/scheduledtasks.js __(#1592)__
[x] ./controllers/edititemmetadata.js __(#1650)__
[x] ./controllers/favorites.js __(#1650)__
[x] ./controllers/home.js __(#1676)__
[x] ./controllers/hometab.js __(#1650)__
[x] ./controllers/itemDetails/index.js __(#1600)__
[x] ./controllers/list.js __(#1675)__
[x] ./controllers/livetv/livetvchannels.js __(#1745)__
[x] ./controllers/livetv/livetvguide.js __(#1749)__
[x] ./controllers/livetv/livetvrecordings.js __(#1744)__
[x] ./controllers/livetv/livetvschedule.js __(#1743)__
[x] ./controllers/livetv/livetvseriestimers.js __(#1726)__
[x] ./controllers/livetv/livetvsuggested.js __(#1725)__
[x] ./controllers/livetvguideprovider.js __(#1724)__
[x] ./controllers/livetvsettings.js __(#1713)__
[x] ./controllers/livetvstatus.js __(#1700)__
[x] ./controllers/livetvtuner.js __(#1689)__
[x] ./controllers/user/menu.js __(#1591)__
[x] ./controllers/user/profile.js __(#1591)__
[x] ./legacy/fnchecked.js __(removed)__
[x] ~~./legacy/focusPreventScroll.js~~ __(#1776)__
[x] ./legacy/selectmenu.js __(removed)__
[x] ./libraries/navdrawer/navdrawer.js __(#1774)__
[x] ./libraries/screensavermanager.js __(#1675)__
[x] ./libraries/scroller.js __(#1774)__
[x] ./plugins/bookPlayer/plugin.js __(#1263)__
[x] ./plugins/bookPlayer/tableOfContents.js __(#1263)__
[x] ./plugins/chromecastPlayer/chromecastHelpers.js __(#1776)__
[x] ./plugins/chromecastPlayer/plugin.js __(#1781)__
[x] ./plugins/experimentalWarnings/plugin.js __(#1779 )__
[x] ./plugins/htmlAudioPlayer/plugin.js __(#1747)__
[x] ./plugins/logoScreensaver/plugin.js __(#1778 )__
[x] ./plugins/playAccessValidation/plugin.js __(#1778 )__
[x] ./plugins/sessionPlayer/plugin.js __(#1779)__
[x] ./plugins/youtubePlayer/plugin.js __(#1589)__
[x] ./scripts/browser.js __(#1600 )__
[x] ./scripts/gamepadtokey.js __(#1776)__
[x] ./scripts/imagehelper.js __(#1015)__
[x] ./scripts/itembynamedetailpage.js __(#1757)__
[x] ./scripts/libraryBrowser.js __(#1663)__
[x] ./scripts/libraryMenu.js __(#1676)__
[x] ./scripts/livetvcomponents.js __(#1749)__
[x] ./scripts/mouseManager.js __(#1718)__
[x] ./scripts/multiDownload.js __(#1663)__
[x] ./scripts/routes.js __(#1718)__
[x] ./scripts/scrollHelper.js __(#1653)__
[x] ./scripts/searchtab.js __(#1653)__
[x] ./scripts/serverNotifications.js __(#1653)__
[x] ./scripts/settings/appSettings.js __(#1015 )__
[x] ./scripts/settings/userSettings.js __(#1015 )__
[x] ./scripts/settings/webSettings.js __(#1015 )__
[x] ./scripts/shell.js __(#1653)__
[x] ./scripts/site.js __(Claimed by @MrTimscampi, to be done last, with the final removal of RequireJS)__
[x] ./serviceworker.js
[x] ./standalone.js
[x] ./bundle.js __(#1577)__
[x] ./components/accessSchedule/accessSchedule.js __(#1353)__
[x] ./components/actionSheet/actionSheet.js __(#1173)__
[x] ./components/activitylog.js __(#1570)__
[x] ./components/alert.js __(#1570)__
[x] ./components/alphaPicker/alphaPicker.js __(#1356)__
[x] ./components/appFooter/appFooter.js __(#1564)__
[x] ./components/apphost.js __(#1577)__
[x] ./components/autoFocuser.js __(#999)__
[x] ./components/backdrop/backdrop.js __(#1422)__
[x] ./components/cardbuilder/cardBuilder.js __(#869)__
[x] ./components/cardbuilder/chaptercardbuilder.js __(#1352)__
[x] ./components/cardbuilder/peoplecardbuilder.js __(#1352)__
[x] ./components/castSenderApi.js __(#1756)__
[x] ./components/channelMapper/channelMapper.js __(#1384)__
[x] ./components/collectionEditor/collectionEditor.js __(#1404)__
[x] ./components/confirm/confirm.js __(#1440)__
[x] ./components/dialog/dialog.js __(#1424)__
[x] ./components/dialogHelper/dialogHelper.js __(#1424)__
[x] ./components/directorybrowser/directorybrowser.js __(#1443)__
[x] ./components/displaySettings/displaySettings.js __(#1457)__
[x] ./components/favoriteitems.js __(#1679)__
[x] ./components/fetchhelper.js __(#1089)__
[x] ./components/filterdialog/filterdialog.js __(#1089)__
[x] ./components/groupedcards.js __(#1420)__
[x] ./components/homeScreenSettings/homeScreenSettings.js __(#1457)__
[x] ./components/homesections/homesections.js __(#1564)__
[x] ./components/htmlMediaHelper.js __(#1420)__
[x] ./components/imageOptionsEditor/imageOptionsEditor.js __(#1363)__
[x] ./components/images/imageLoader.js __(#1065 )__
[x] ./components/imageUploader/imageUploader.js __(#1361)__
[x] ./components/indicators/indicators.js __(#1173)__
[x] ./components/itemContextMenu.js __(#1512)__
[x] ./components/itemidentifier/itemidentifier.js __(#1361)__
[x] ./components/itemMediaInfo/itemMediaInfo.js __(#1361)__
[x] ./components/lazyLoader/lazyLoaderIntersectionObserver.js __(#1065)__
[x] ./components/libraryoptionseditor/libraryoptionseditor.js __(#1363)__
[x] ./components/listview/listview.js __(#1370)__
[x] ./components/maintabsmanager.js __(#1512)__
[x] ./components/mediainfo/mediainfo.js __(#1403)__
[x] ./components/mediaLibraryCreator/mediaLibraryCreator.js __(#1365)__
[x] ./components/mediaLibraryEditor/mediaLibraryEditor.js __(#1365)__
[x] ./components/metadataEditor/metadataEditor.js __(#1586)__
[x] ./components/metadataEditor/personEditor.js __(#1586)__
[x] ./components/multiSelect/multiSelect.js __(#1440)__
[x] ./components/playback/brightnessosd.js __(#1284)__
[x] ./components/playback/mediasession.js __(#1088)__
[x] ./components/playback/nowplayinghelper.js __(#1284)__
[x] ./components/playback/playbackorientation.js __(#1284)__
[x] ./components/playback/playerSelectionMenu.js __(#1284)__
[x] ./components/playback/playersettingsmenu.js __(#1284)__
[x] ./components/playback/playmethodhelper.js __(#1284)__
[x] ./components/playback/remotecontrolautoplay.js __(#1284)__
[x] ./components/playback/volumeosd.js __(#1284)__
[x] ./components/playbackSettings/playbackSettings.js __(#1457)__
[x] ./components/playerstats/playerstats.js __(#1587)__
[x] ./components/prompt/prompt.js __(#1440)__
[x] ./components/qualityOptions.js __(#1577)__
[x] ./components/sanitizeFilename.js _(#991)_
[x] ./components/scrollManager.js _(#999)_
[x] ./components/search/searchfields.js __(#1581)__
[x] ./components/search/searchresults.js __(#1581)__
[x] ./components/shortcuts.js __(#1358)__
[x] ./components/subtitlesettings/subtitleappearancehelper.js __(#1174)__
[x] ./components/subtitlesettings/subtitlesettings.js __(#1174)__
[x] ./controllers/auth/addserver.js __(#1569)__
[x] ./controllers/auth/forgotpassword.js __(#1569)__
[x] ./controllers/auth/forgotpasswordpin.js __(#1569)__
[x] ./controllers/auth/login.js __(#1569)__
[x] ./controllers/auth/selectserver.js __(#1569)__
[x] ./controllers/dashboard/apikeys.js __(#1545)__
[x] ./controllers/dashboard/dashboard.js __(#1545)__
[x] ./controllers/dashboard/encodingsettings.js __(#1545)__
[x] ./controllers/dashboard/general.js __(#1572)__
[x] ./controllers/dashboard/librarydisplay.js __(#1572)__
[x] ./controllers/dashboard/mediaLibrary.js __(#1539)__
[x] ./controllers/dashboard/metadataImages.js __(#1572)__
[x] ./controllers/dashboard/metadatanfo.js __(#1572)__
[x] ./controllers/dashboard/networking.js __(#1539)__
[x] ./controllers/dashboard/playback.js __(#1539)__
[x] ./controllers/dashboard/serveractivity.js __(#1539)__
[x] ./controllers/dashboard/streaming.js __(#1572)__
[x] ./controllers/dashboard/users/useredit.js __(#1546)__
[x] ./controllers/dashboard/users/userlibraryaccess.js __(#1546)__
[x] ./controllers/dashboard/users/usernew.js __(#1546)__
[x] ./controllers/dashboard/users/userparentalcontrol.js __(#1546)__
[x] ./controllers/dashboard/users/userpasswordpage.js __(#1546)__
[x] ./controllers/dashboard/users/userprofilespage.js __(#1546)__
[x] ./controllers/movies/moviecollections.js __(#1553 )__
[x] ./controllers/movies/moviegenres.js __(#1553 )__
[x] ./controllers/movies/movies.js __(#1553 )__
[x] ./controllers/movies/moviesrecommended.js __(#1553 )__
[x] ./controllers/movies/movietrailers.js __(#1553 )__
[x] ./controllers/music/musicalbums.js __(#1554)__
[x] ./controllers/music/musicartists.js __(#1554)__
[x] ./controllers/music/musicgenres.js __(#1554)__
[x] ./controllers/music/musicplaylists.js __(#1554)__
[x] ./controllers/music/musicrecommended.js __(#1554)__
[x] ./controllers/music/songs.js __(#1554)__
[x] ./controllers/playback/nowplaying.js __(#1584)__
[x] ./controllers/playback/videoosd.js __(#1584)__
[x] ./controllers/searchpage.js __(#1581)__
[x] ./controllers/shows/episodes.js __(#1566)__
[x] ./controllers/shows/tvgenres.js __(#1566)__
[x] ./controllers/shows/tvlatest.js __(#1566)__
[x] ./controllers/shows/tvrecommended.js __(#1566)__
[x] ./controllers/shows/tvshows.js __(#1566)__
[x] ./controllers/shows/tvstudios.js __(#1566)__
[x] ./controllers/shows/tvupcoming.js __(#1566)__
[x] ./controllers/user/display.js __(#1541)__
[x] ./controllers/user/home.js __(#1541)__
[x] ./controllers/user/playback.js __(#1541)__
[x] ./controllers/user/subtitles.js __(#1541)__
[x] ./controllers/wizard/finish.js __(#1585)__
[x] ./controllers/wizard/remoteaccess.js __(#1585)__
[x] ./controllers/wizard/settings.js __(#1585)__
[x] ./controllers/wizard/start.js __(#1585)__
[x] ./controllers/wizard/user.js __(#1585)__
[x] ./elements/emby-button/emby-button.js __(#1582)__
[x] ./elements/emby-button/paper-icon-button-light.js __(#1582)__
[x] ./elements/emby-checkbox/emby-checkbox.js __(#1535)__
[x] ./elements/emby-collapse/emby-collapse.js __(#1582)__
[x] ./elements/emby-input/emby-input.js __(#1582)__
[x] ./elements/emby-itemrefreshindicator/emby-itemrefreshindicator.js __(#1537)__
[x] ./elements/emby-itemscontainer/emby-itemscontainer.js __(#1547)__
[x] ./elements/emby-playstatebutton/emby-playstatebutton.js __(#1547)__
[x] ./elements/emby-programcell/emby-programcell.js __(#1547)__
[x] ./elements/emby-progressbar/emby-progressbar.js __(#1537)__
[x] ./elements/emby-progressring/emby-progressring.js __(#1537)__
[x] ./elements/emby-radio/emby-radio.js __(#1538)__
[x] ./elements/emby-ratingbutton/emby-ratingbutton.js __(#1536)__
[x] ./elements/emby-scrollbuttons/emby-scrollbuttons.js __(#1536)__
[x] ./elements/emby-scroller/emby-scroller.js __(#1538)__
[x] ./elements/emby-select/emby-select.js __(#1536)__
[x] ./elements/emby-slider/emby-slider.js __(#1537)__
[x] ./elements/emby-tabs/emby-tabs.js __(#1538)__
[x] ./elements/emby-textarea/emby-textarea.js __(#1535)__
[x] ./elements/emby-toggle/emby-toggle.js __(#1535)__
[x] ./plugins/backdropScreensaver/plugin.js __(#1089)__
[x] ./plugins/htmlVideoPlayer/plugin.js __(#1091)__
[x] ./plugins/photoPlayer/plugin.js __(#1269)__
[x] ./scripts/alphanumericshortcuts.js __(#1589)__
[x] ./scripts/apploader.js __(#1577)__
[x] ./scripts/autoBackdrops.js __(#1589)__
[x] ./scripts/browserDeviceProfile.js __(#1364)__
[x] ./scripts/datetime.js __(#1570)__
[x] ./scripts/deleteHelper.js __(#1173)__
[x] ./scripts/dfnshelper.js
[x] ./scripts/dom.js __(#999)__
[x] ./scripts/editorsidebar.js __(#1588)__
[x] ./scripts/fileDownloader.js __(#991)__
[x] ./scripts/filesystem.js __(#991)__
[x] ./scripts/globalize.js __(#1588)__
[x] ./scripts/inputManager.js __(#1039)__
[x] ./scripts/keyboardNavigation.js __(#991)__
[x] ./scripts/playlistedit.js __(#1404)__
[x] ./scripts/playlists.js __(#1588)__
[x] ./scripts/taskbutton.js __(#1583)__
[x] ./scripts/themeLoader.js __(#1420)__
[x] ./scripts/touchHelper.js __(#1583)__

es6 feature

Source

MrTimscampi

👍6

All 25 comments

How to convert the modules to ES6

Wait for #869 to be merged or create a branch from that PR
That PR includes tooling adjustments to allow ES6 modules to be converted into AMD modules and not break everything, as well as adjust the linter settings to support ES6 syntax.
Choose one or more file(s) in the list above
If the file has no define() statement anywhere, good job, you're done. Mention it here so it can be taken off the list.
If the file starts with a define() statement, continue.
Convert the define() statement so that this kind of line:
javascript define(['datetime', 'imageLoader', 'scripts/imagehelper', 'css!./card', 'paper-icon-button-light', 'programStyles'], function (datetime, imageLoader, imageHelper) {
Becomes this:
javascript import datetime from "datetime"; import imageLoader from 'imageLoader'; import imageHelper from 'scripts/imagehelper'; import 'css!./card'; import 'paper-icon-button-light'; import 'programStyles';
Do note that your IDE may complain that the modules can't be found. This is normal and expected at this point.
Look at the end of the file if there is a return statement and, if present, add export in front of the functions referenced by the return statement and delete it.
As an example, here's how an exported function should look like:
javascript export function getCardsHtml(items, options) {
Add the file path to package.json in the test array of the overrides section in the babel key.
This is due to needing to convert the ES6 syntax in a specific way so that RequireJS can still load it as a module. This means using a specific plugin, but running that plugin on everything mangles the files, leading to a broken client. As such, we only wish to convert files that are already migrated to ES6.
Once all import and export are done, save the file, test the client using yarn serve (If possible, try to get your converted file to load, which may mean performing some specific flow in the web client).
Commit, push and open a PR.

Edit: Of course, some modules may require more work. This is the basics and should be all you need to do for a fair number of modules, but a few might require to be refactored into classes, for example.

Edit 2: In order to convert the instances of require() inside of files (generally meant for conditional loading of modules), the conversion should be done as follows:

Current

require(['slideshow'], function (slideshow) {

ES6

import('slideshow').then(({default: Slideshow}) => {

MrTimscampi on 1 Mar 2020

🚀1

Just checked, these files do not have any define's in them.

./src/components/polyfills/objectassign.js
./src/components/polyfills/focusPreventScroll.js
./src/components/serviceworker/notifications.js
./src/libraries/query-string/index.js
./src/libraries/query-string/test.js
./src/scripts/apploader.js
./src/standalone.js
./src/serviceworker.js

But wouldn't they need to have the functions exported?

Stampede10343 on 19 Mar 2020

Thanks for checking :)

./src/components/polyfills/objectassign.js

./src/components/polyfills/focusPreventScroll.js

These will be moved out of tree eventually, if possible.

./src/components/serviceworker/notifications.js

This is a service worker, it can stay as-is for now.

./src/libraries/query-string/index.js

This was moved out of tree since this list was made.

./src/scripts/apploader.js
./src/standalone.js
./src/serviceworker.js

Nothing to migrate here at the moment.

Thanks, I'll remove them from the list.

MrTimscampi on 19 Mar 2020

./src/components/backdropscreensaver/plugin.js
./src/components/htmlvideoplayer/plugin.js
Since these get loaded up by the PluginManager, I wasn't able to convert them, probably my lack of knowledge of AMD but I tried making it a class but when PluginManager is newing up the plugin it fails.

Stampede10343 on 20 Mar 2020

./src/components/backdropscreensaver/plugin.js
./src/components/htmlvideoplayer/plugin.js
Since these get loaded up by the PluginManager, I wasn't able to convert them, probably my lack of knowledge of AMD but I tried making it a class but when PluginManager is newing up the plugin it fails.

I am basically seeing this for any module that has a return function(someParams). Which gets used like

require(['component'], function(component) {
    new component(params)
}

After converting to a class I get 'component' is not a constructor

Stampede10343 on 29 Mar 2020

@MrTimscampi What's the correct approach for modules that are defined but their functions are not used?

For example:

define(["dialogHelper", "datetime", "globalize", "emby-select", "paper-icon-button-light", "formDialogStyle"], function (dialogHelper, datetime, globalize) {

"emby-select", "paper-icon-button-light", "formDialogStyle" are not used as functions. That means that we need to follow the same procedure when importing or it has extra steps?
I suppose the only difference is that we don't need to specify those modules in package.json, as they're not JS but CSS files

ferferga on 3 Apr 2020

@ferferga These become this:

import 'paper-icon-button-light';

The only things you need to add to package.json are the packages converted to ES6, not the imports of those packages :)

MrTimscampi on 3 Apr 2020

👍1

@MrTimscampi After converting #810 to ES6 modules
I get 'Uncaught (in promise) TypeError: tabbedPage is not a constructor what shall i do?
when i add default like this it work

var tabbedPageInstance = new tabbedPage.default(view, {
                    handleFocus: true
                });

and a big issue for me when i convert home.js it not load at all?

grafixeyehero on 15 Apr 2020

@grafixeyehero Seems like you don't have a default export in the file (export default instead of only export)

Do note that usually, for compatibility, we do it like this:

import stuff from 'somewhere';
/* eslint-disable indent */
function regularPrivateFunction () {
    ...
}

export yourExportedFunction () {
    ...
}
/* eslint-enable indent */
export default {
    yourExportedFunction: yourExportedFunction
}

For home.js, it's a bit more complicated. Since you're using require() to lazy-load a module. I guess we can replace it with the new import() (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import under Dynamic Imports).

As for the conversion to a class, I'd need to see the code produced to help you debug it. Feel free to commit and push changes if you can :)

MrTimscampi on 15 Apr 2020

picking up:

./src/components/backdropscreensaver/plugin.js
./src/components/htmlvideoplayer/plugin.js
./src/components/filterdialog/filterdialog.js
./src/components/fetchhelper.js
~./src/components/fullscreenManager.js~ (not present anymore)

cromefire on 15 Apr 2020

PR #1173

File Done

[x] src/components/deleteHelper.js
[x] src/components/actionSheet/actionSheet.js
[x] src/components/playmenu.js
[x] src/components/indicators/indicators.js

sarab97 on 3 May 2020

PR https://github.com/jellyfin/jellyfin-web/pull/1174

Files:

[x] src/components/subtitlesettings/subtitlesettings.js
[x] src/components/subtitlesettings/subtitleappearancehelper.js

puschie286 on 3 May 2020

./src/components/backdropscreensaver/plugin.js
./src/components/htmlvideoplayer/plugin.js
Since these get loaded up by the PluginManager, I wasn't able to convert them, probably my lack of knowledge of AMD but I tried making it a class but when PluginManager is newing up the plugin it fails.

I am basically seeing this for any module that has a return function(someParams). Which gets used like
require(['component'], function(component) {
    new component(params)
}
After converting to a class I get 'component' is not a constructor

i had the same problem - after hours of research and trying it looks like we need to change the import style or the calling style
new ClassA(param) -> new ClassA.ClassA(param)
Better example and explanation
hope it will help you :)

puschie286 on 4 May 2020

This should be fixed by #1091

cromefire on 4 May 2020

At least for stuff using the plugin manager I think (it then checks for default and calls new plugin.default() on demand)

cromefire on 4 May 2020

The logs page controller has been merged to develop as the first controller with ES6 support included, so it can be used as a base for the other controllers.

dkanada on 16 Jun 2020

Quick question on src/controllers/dashboard/dashboard.js.
I have got: import datefns from 'date-fns'; at the start of the file. However, on line 462: datefns.formatDistanceToNow(Date.parse(session.LastActivityDate), dfnshelper.localeWithSuffix)

when running it produces the following error in the console:
Uncaught TypeError: Cannot read property 'formatDistanceToNow' of undefined.

But when I put the return statement inside an import there is no error:
import('date-fns').then(({default: datefns}) => { return { html: globalize.translate('LastSeen', datefns.formatDistanceToNow(Date.parse(session.LastActivityDate), dfnshelper.localeWithSuffix)), image: imgUrl }; })

I just wondered what the best way to approach it is? Or what am I doing wrong?

Camc314 on 9 Jul 2020

You likely need to do something like datefns.default.formatDistanceToNow(), during the ES6 migration.

It is counter-intuitive, but you are currently still importing AMD modules, not ES6 modules. Only the source file is written a different way, but when building it all gets rewritten as AMD modules.

It will be a lot simpler once we're done.

Usually, you can output the object you're having issues with to the console or put a breakpoint somewhere around it to see what's inside, then adapt your code to match.

MrTimscampi on 9 Jul 2020

Thanks for that, I changed the import statement to
import * as datefns from 'date-fns';
Which made it work. Before if you outped the object datefns, it was undefined. Now it has all the functions in the module.

Camc314 on 9 Jul 2020

👍1

@MrTimscampi Correct me if I'm wrong but I believe the following are missing from the list above:

[ ] src/controllers/dashboard/devices/device.js
[ ] src/controllers/dashboard/devices/devices.js
[ ] src/controllers/dashboard/dlna/profile.js
[ ] src/controllers/dashboard/dlna/profiles.js
[ ] src/controllers/dashboard/dlna/settings.js
[ ] src/controllers/dashboard/plugins/repositories.js
[ ] src/controllers/dashboard/users/useredit.js
[ ] src/controllers/dashboard/users/userlibraryaccess.js
[ ] src/controllers/dashboard/users/usernew.js
[ ] src/controllers/dashboard/users/userparentalcontrol.js
[ ] src/controllers/dashboard/users/userpasswordpage.js
[ ] src/controllers/dashboard/users/userprofilespage.js

Camc314 on 9 Jul 2020

I think some of the files also don't exist anymore, I guess it's an old list

cromefire on 9 Jul 2020

I am currently on the latest es6 branch, so it might be an old list.
Some of the files I have listed are there just not listed in the correct directory e.g
In the original list: ./src/controllers/useredit.js
whereas its actual location: ./src/controllers/dashboard/users/useredit.js

Camc314 on 9 Jul 2020

The list is indeed old (It was generated when opening the issue)

Multiple files have been moved, removed or renamed since.

MrTimscampi on 9 Jul 2020

👍1

The file list has been updated to the current paths as of July 11th 2020.

Edit: The progress has also been updated.

MrTimscampi on 11 Jul 2020

👍1

Closing - #1994 🥂🥳🎉

Camc314 on 20 Nov 2020

🎉1

Was this page helpful?

0 / 5 - 0 ratings

Related issues

WebOS 4: Most icons are missing

MrTimscampi · 4Comments

Android Device Browsers (chrome/Firefox) not working with JellyFin Web

mitchelljfranklin · 4Comments

Scroll slipping

chnaski · 3Comments

Replace remote fonts with local hosted fonts

Anan5a · 3Comments

Display all episodes of one season TV shows on core page

hamburglar2160 · 4Comments