jellyfin / jellyfin-vue Goto Github PK

Found this one while moving things around to make a PlayButton component.

Trying to play a single episode of a TV show produces the following error:
TypeError: _a[state.currentItemIndex] is undefined.

This is meant to be a somewhat exhaustive list of features to implement in order to consider this client "production-ready". It aims to match (but rework) the feature set of the current Jellyfin web client.

Feel free to claim a feature by opening an issue or a PR to discuss implementation, UI, UX, and usability.

When re-implementing a feature, please don't blindly copy what is done on Jellyfin web. We would like to take this opportunity to rethink everything, with a particular focus on accessibility, user experience and usability.

Note: claimed features are expected to be implemented (or at least started) by the person claiming them. Do not open a discussion for features you do not intend to work on.

General

• Add Dialog/Modal system
• Add backdrop support (#105)

Authentication, login and server selection

• User authentication
• Login screen
• Automatic login/Remember me
• Quick login with visible users
• Server selection
• Remember previous servers
• Server detection (Using a json config file)
• Server manifest checking
• Add Quick Connect pin support

Home

• Continue watching
• Continue listening
• Next up
• Latest
• Live TV
• Active recordings
• My media
• Pull home section list from the server
• Provide default sections
• Provide a skeleton loader for sections

Libraries

• List libraries for navigation
• Navigate libraries
• Navigate folders
• Provide a skeleton loader for libraries
• Allow to switch between pagination and infinite scroll
• Implement a virtual scroller (#119)
• Add sorting
• Add filters
• Add view modes (Movies, Collections, Album Artist, Track, etc)

Item details

• Implement a basic details page
• Add season list
• Add related items
• Add extras
• Add actors
• Add metadata editor
• Add image editor
• Add item identification (#114)

Playback

• Provide a mechanism for platform detection
• Generate a playback profile
• Add video playback support (#74)
• Add audio playback support
• Add PDF playback support
• Add EPUB playback support
• Add CBZ/CBR playback support
• Add playback manager (Handle playlists, playing multiple items, etc)
• Add "Play on" feature
• Add Chromecast support
• Add playback session reporting
• Add playback resume support
• Add subtitle support
• Add audio track switching support
• Add forward/back buttons to video player
• Add next/previous track to video player
• Add playback speed control to video player
• Add SyncPlay support
• Add Up next dialog

Live TV

• Add channel listing
• Add guide
• Add recordings management

User settings

• Add user account settings (#63)
• Add home screen settings
• Add playback settings
• Add subtitle settings
• Add display settings

Metadata editor

• Add folder list
• Add metadata editor

Server settings

• Add dashboard (#63)
• Add general settings
• Add users settings
• Add libraries
• Add library display settings
• Add NFO settings
• Add transcoding settings
• Add resume settings
• Add streaming settings
• Add activity log
• Add DLNA settings
• Add DLNA profile editor
• Add TV tuner settings
• Add DVR settings
• Add networking settings
• Add API keys management
• Add logs viewer
• Add notification settings
• Add plugins list
• Add plugin configuration
• Add plugin installation
• Add repository management
• Add scheduled task configuration

Would like to be able to configure where the folders are stored, normal Jellyfin used /config /media /cache as noted here. https://jellyfin.org/docs/general/administration/installing.html#docker

Just wondering what this uses, and if it can be documented. (Although I suppose this will all be irrelevant once merged with core.)

As reported by @sparky8251 , libraries that are merged for display show up empty.

The call to getItems seems to not happen at all, hence the page never finishing loading.

The fab buttons (dark mode and language) both have the same focus problem we had with the (now removed) fab buttons of the audio player (@ferferga). Maybe we should apply the same fix?

Perhaps this is an upstream issue.

Is this planned? In jf-web you hold an item for a second, then you can select multiple items and choose to group the versions.

One may decide to require doing this at the file level so jellyfin can pick it up correctly.

Another alternative is to do it in the metadata editor, to keep the complexity down in the user-facing pages.

As of commit 1848, the docker contaner crashes apon boot.

Log: Error: Cannot find module '/app/nginx'

at Function.Module._resolveFilename (internal/modules/cjs/loader.js:815:15)

at Function.Module._load (internal/modules/cjs/loader.js:667:27)

at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:60:12)

at internal/main/run_main_module.js:17:47 {

code: 'MODULE_NOT_FOUND',

requireStack: []

}

"Bokmål" is a form of Norwegian but I think it's incorrect to show it without "Norsk bokmål" or some variant that starts with the main language.

Wikipedia for reference:
http://puu.sh/H70qY/e369f3cf47.png

Vue:
http://puu.sh/H70rz/499dd97a04.png

For ease of copying

Norsk bokmål
Norsk nynorsk

Other alternatives doesn't sort well

Norsk
Nynorsk

We should do most API calls in Vuex stores instead of individual components.

As reported by @sparky8251 , videos are currently aligned to the left of the maximized video player:

For a MVP of video playback to be considered complete, the following needs to be completed:

• A Nuxt plugin for browser detection (Good reference: https://github.com/google/shaka-player/blob/606457488f77e9cf5cac2c82e94bb4ce35d50e2a/lib/util/platform.js) (#70)
• A Nuxt plugin for media format support (Can be limited to video for now) (#71)
• Pressing play on any item (Route /item/<id>/play) brings the user to the playback page and starts the video playback (Note: This page will be used for all playback. It has to be able to detect the type of item, and redirect to the proper player)

Running master branch of jellyfin-vue and jellyfin-server
Tested on both chrome and firefox

When viewing SD videos they are scaled incorrectly (see fig. 1). This does not happen on HD movies (fig. 2)

The SD video is an AVC @ 480 x 360 video
The HD video is an AVC @ 1920 x 816 video

Fig. 1: SD Image

Fig.2: HD Image

I am unable to fullscreen the media player. The cursor does not change when hovering

Tested on both firefox and chrome. Running master on both server and vue-client

It seems that if subtitles doesn't have a defined language (i.e: und), and has no name, so it's blank on select, and when clicking on the select to pick one, it gives undefined error.

It seems that the audio label isn't showing correctly, if it's undefined language.

Excepted:

Got:

--

Some debug information:

Tried building on my Windows machine but I didn't have Python installed which is required for node-gyp. I then tried building it in a Linux environment with Python but it failed with TypeScript errors. I guess the lint command doesn't find these errors so adding a build task to CI might prevent these issues.

$ nuxt-ts generate
[fatal] Nuxt build error
  ERROR in mixins/imageHelper.ts:10:22
  TS2339: Property '$axios' does not exist on type '{ getImageLink(id: string, type: string): string; }'.
  8 |      */
  9 |     getImageLink(id: string, type: string): string {
  > 10 |       return `${this.$axios.defaults.baseURL}/Items/${id}/Images/${type}`;
  |                      ^^^^^^
  11 |     }
  12 |   }
  13 | };
  
  ERROR in pages/item/_itemId.vue:37:17
  TS2533: Object is possibly 'null' or 'undefined'.
  35 |     });
  36 |
  > 37 |     this.item = Item.data.Items[0];
  |                 ^^^^^^^^^^^^^^^
  38 |   }
  39 | });
  40 | </script>
   ╭─────────────────────────────╮
   │                             │
   │   ✖ Nuxt Fatal Error        │
   │                             │
   │   Error: Nuxt build error   │
   │                             │
   ╰─────────────────────────────╯

I leave this up here to take note of what I found

On my computer, letters which take some height are getting clipped.

It happens with all kind of letters, "y", "ç", etc. Here is what I found:

• Happens with noto-sans but not with sans-serif
• Happens on FF 84, Lubuntu 20.10 with 1080p screen
• Doesn't happen on Chrome, Windows 10, 1080p screen at neither 125% or 100% display settings (not the browser's zoom, the Windows display settings)
• Doesn't happen on Chrome and FF on Android
• Unzooming or zooming a few steps in the browser makes the letters appear fully (but the zoom levels aren't the same for all components, 90% works for the "g" in "settings" but not for the "g" in "English")
• Computed line-height is similar to others

Confirmed user where it works:

• @MrTimscampi
• @ferferga

Confirmed user where it doesn't work:

• @ThibaultNocchi

As PR #467 shows, setting line-height: normal !important; to concerned components fixes it.

These are my results as of 2020/12/31.

This issue details the needed points to be addressed before we can proceed with the first release.

Major (Mandatory for release)

• Music player responsiveness (#554, still need addressing for the full screen version)
• Video player overlay when maximized should timeout when the mouse isn't moved (#583)
• The artist page needs a responsive pass (#616)
• Store mutations for position change during playback should be limited to 1 per second (The constant spam of mutations makes performance worse) (#607)
• Add "Resume" and "Play from the beginning" support (#605)
• Pass the selected source and video/audio/subtitle tracks to the playback manager when playing an item
• Use the ItemMenu component for all "three dots" menus in item pages (#565)
• Search needs to be finished (#345)
• Onboarding wizard needs to be finished
• Playing single episodes fails
• Server is sending a WebM stream where Web sends HLS
• Episodes are in the wrong season (#480)
• Missing images (#711, #769)

Intermediate (Nice to have)

• The light theme needs a color pass (Avoid bright whites, use lighter variants of the dark theme's colors, etc)
• <nuxt-link> used for navigation should be able to be copied and the address visible on hover the same way as <a> (already fixed here 44450c2#diff-9ab75b264fc615af11fca1ecc4e5167ea34a4c00d1580c3dfa880ff045276186L22)

Behind the scenes

• Clean the localization files for real duplicates and those having the same intents

When resuming playback via mpris (e.g. playerctl) the play button in the audio controls doesn't update, it works when pausing.

This probably happens because the PlaybackManager state isn't updated.

A possible fix could be adding a call to unpause in onAudioProgress at AudioPlayer.vue#L193.

  router: {
	[...]
    base: '/web/'
  },

This would allow jellyfin-server to host the generated static files in place of jellyfin-web

Edit: This also doesn't work if jellyfin is hosted under a baseurl

Edit many months later:

Setting the router.base field to ./ allows the ui to load, and only vue fonts and images fail to load

The default behavior should be to ask for login each time. I a "Remember me" checkbox is ticked during login, the session is kept on subsequent visits.

Now that Axe is disabled by default, we should have some kind of documentation (probably in CONTRIBUTING.md) in how to use it for users that are not frequent contributors here, so everyone's able to provide new features while keeping accessibility in mind.

If you have a non-English language set, you'll notice the interface reverts to English when you click on any link. Though it doesn't change the setting server-side, so something must be changing the i18n value directly.

Wasn't present as of e94d675

Is present as of 6dc78e6

So it seems the 6dc78e6 commit introduced it, the one syncing changes to the server

First of all thanks for your hard work. This looks very promising!
Just want to let you know, that I came across a small bug on the item page.
See screenshot.

With @nuxt/types 2.14.5, the Inject type is now exposed.

We should remove our custom type definition and use the built-in one.

Example of the changes:

export default (context: Context, inject: PluginInjection): void => {
  inject('snackbar', (message: string, color: string | undefined | null) => {
    context.store.commit('snackbar/display', { message, color });
  });
};

export default (context: Context, inject: Inject): Plugin => {
  inject('snackbar', (message: string, color: string | undefined | null) => {
    context.store.commit('snackbar/display', { message, color });
  });
};

When trying to access artist pages, "itemId must not be null or undefined when an item object is not passed" appears on the error page.

...does not happen when using the keyboard to go to next/prev track.

This issue is meant to track what's needed in order for a complete move to Vue 3.

Earliest expected date: Q3 2021

Dependencies

• Vue 3
• Nuxt 3 (nuxt/nuxt#5708 - Open beta in Q2 2021)
• Vuetify 3 (Q3 2021)
• Vuex 4
• vue-i18n (v9)
• nuxt-auth (Dependent on Nuxt 3)
• nuxt-axios (Dependent on Nuxt 3)
• nuxt-pwa (Dependent on Nuxt 3)
• nuxt-i18n (Dependent on vue-i18n and Nuxt 3)
• nuxt-date-fns (Dependent on Nuxt 3)
• nuxt-vuex-localstorage (Dependent on Nuxt 3)
• vue-virtual-scroller (Potentially replaced with custom solution. See #274). Replacement in the works in #606
• VueperSlides To be replaced with Swiper Replaced in #412
• eslint-plugin-vue 7.0.0
• vue-test-utils 2.0.0 (RC-8)
• vue-axe

Manually-required code changes are, as of yet, unknown. This issue will be updated as information becomes available.

This console error is happening when inputting the server address and going to the username/password field. Happens exactly in the second where the server selection screen appears.

I think this is caused due to using routes instead of letting axios do auth completely

On the user selection page (when there are public users on the server), when using the light mode, the placeholder icon doesn't look right.

It should likely still use the dark theme at the component level.

The snackbar should be its own component, controlled by a Vuex store in order to be available across the app in a standard way.

A good example of an implantation would be the following, using a store and a plugin for easy access: https://dev.to/stephannv/how-to-create-a-global-snackbar-using-nuxt-vuetify-and-vuex-1bda

Episodes are part of the wrong seasons. (Using the latest 10.7.0-rc2 server)

Alf in web:

Alf in Vue (Should be season 1):

Archer in web:

Archer in Vue (Should be season 3):

shows up unlocalized in the ui

When connecting to a server (Either automatically via #139 or with user interaction), we need to check the server for a manifest, in order to confirm that it is a valid Jellyfin server.

This should be done when validating a server on the server selection page and when loading the client.

Pointed out by @Nickbert7 in #392

We should make sure that all the forms we develop going forward are 100% safe against HTML and are only parsed as text.

When switching users or servers, the stores don't get cleared out. This can lead to temporarily seeing some items from another server or user account.

The logout process should clear all the stores.

Hi!

Thanks for software

I'm using this Docker image but unable to successfully run it

docker-compose.yaml:

version: "3"
services:

  jellyfin:
    container_name: jellyfin_beta
    environment:
      - PUID=1000
      - PGID=1000
      - TZ=Europe/London
    image: jellyfin/jellyfin-vue:unstable
    ports:
      - 8097:8097
    restart: unless-stopped
    volumes: TODO

log:

Last login: Thu Nov  5 20:13:00 on ttys000
ldexterldesign@apple ~ % cd /Volumes/Secomba/ldexterldesign/Boxcryptor/Dropbox/gtd/home/calendar/Sanitise\ device\ -\ apple/docker/jellyfin\ -\ beta
ldexterldesign@apple jellyfin - beta % docker-compose up
jellyfin_beta is up-to-date
Attaching to jellyfin_beta
jellyfin_beta | /docker-entrypoint.sh: /docker-entrypoint.d/ is not empty, will attempt to perform configuration
jellyfin_beta | /docker-entrypoint.sh: Looking for shell scripts in /docker-entrypoint.d/
jellyfin_beta | /docker-entrypoint.sh: Launching /docker-entrypoint.d/10-listen-on-ipv6-by-default.sh
jellyfin_beta | 10-listen-on-ipv6-by-default.sh: Getting the checksum of /etc/nginx/conf.d/default.conf
jellyfin_beta | 10-listen-on-ipv6-by-default.sh: error: /etc/nginx/conf.d/default.conf differs from the packages version
jellyfin_beta | /docker-entrypoint.sh: Launching /docker-entrypoint.d/20-envsubst-on-templates.sh
jellyfin_beta | /docker-entrypoint.sh: Configuration complete; ready for start up
jellyfin_beta | /docker-entrypoint.sh: /docker-entrypoint.d/ is not empty, will attempt to perform configuration
jellyfin_beta | /docker-entrypoint.sh: Looking for shell scripts in /docker-entrypoint.d/
jellyfin_beta | /docker-entrypoint.sh: Launching /docker-entrypoint.d/10-listen-on-ipv6-by-default.sh
jellyfin_beta | 10-listen-on-ipv6-by-default.sh: Getting the checksum of /etc/nginx/conf.d/default.conf
jellyfin_beta | 10-listen-on-ipv6-by-default.sh: error: /etc/nginx/conf.d/default.conf differs from the packages version
jellyfin_beta | /docker-entrypoint.sh: Launching /docker-entrypoint.d/20-envsubst-on-templates.sh
jellyfin_beta | /docker-entrypoint.sh: Configuration complete; ready for start up
// nothing on 0.0.0.0:8097

Is anyone else successfully running this image?:

• If yes then would you be kind enough to tell me what I'm doing wrong
• If no then perhaps we should fix the image

Hope to hear back

Sincerely

I get an error regarding the filters field in the ItemsApiGetItemsRequest used in the FilterButton component

TS2322: Type 'string' is not assignable to type 'ItemFilter[] | undefined'.
    249 |             includeItemTypes: this.itemType,
    250 |             recursive: true,
  > 251 |             filters: statusString,
        |             ^^^^^^^
    252 |             genres: genreString,
    253 |             officialRatings: ratingString,
    254 |             videoTypes: videoTypeString,

it seems like the type was changed in commit 7585079

Currently, the library view loads every item, resulting in a very large DOM and really bad performance from the client.

We should only render (and maybe load) what is visible to the user.

Using a component like vue-virtual-scroller (Developed by a member of the core Vue.js team), would be the preferred solution to this. After some tries on my end, this doesn't seem to work. Here's a Google implementation of what we want, for ideas: https://github.com/GoogleChromeLabs/ui-element-samples/blob/gh-pages/infinite-scroller/scripts/infinite-scroll.js

I want to get involved, but I don't know what needs to be done and which modules are already under development. Hope that there can be a todolist to synchronize this information to help potential developers to participate

Yes, this is the most petty of non issues, but personally I think it would sound better as "Related items" or "similar to what you're watching/listening. Since there's a 99% chance that if I took the time to add it to my server, I like it,

At some point recently, our profile changed, causing the server to send a WebM file containing H.264.

On jf-web, the same file is sent using a TS container.

hello

root@debian:/home/jellyfin-vue# yarn install
yarn install v1.22.5
warning You are using Node "16.0.0-pre" which is not supported and may encounter bugs or unexpected behavior. Yarn supports the following semver range: "^4.8.0 || ^5.7.0 || ^6.2.2 || >=8.0.0"
[1/4] Resolving packages...
[2/4] Fetching packages...
error [email protected]: The engine "node" is incompatible with this module. Expected version ">=10.0.0". Got "16.0.0-pre"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.