mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Merge branch 'master' into master
This commit is contained in:
Nitzan Savion
GitHub
commit
fb6e0312ac
183 changed files with 6396 additions and 3896 deletions
|
|
@ -1,55 +0,0 @@
|
|||
jobs:
|
||||
- job: Build
|
||||
displayName: 'Build'
|
||||
|
||||
strategy:
|
||||
matrix:
|
||||
Development:
|
||||
BuildConfiguration: development
|
||||
Production:
|
||||
BuildConfiguration: production
|
||||
|
||||
pool:
|
||||
vmImage: 'ubuntu-latest'
|
||||
|
||||
steps:
|
||||
- task: NodeTool@0
|
||||
displayName: 'Install Node'
|
||||
inputs:
|
||||
versionSpec: '20.x'
|
||||
|
||||
- task: Cache@2
|
||||
displayName: 'Cache node_modules'
|
||||
inputs:
|
||||
key: 'npm | package-lock.json'
|
||||
path: 'node_modules'
|
||||
|
||||
- script: 'npm ci --no-audit'
|
||||
displayName: 'Install Dependencies'
|
||||
|
||||
- script: 'npm run build:development'
|
||||
displayName: 'Build Development'
|
||||
condition: eq(variables['BuildConfiguration'], 'development')
|
||||
|
||||
- script: 'npm run build:production'
|
||||
displayName: 'Build Production'
|
||||
condition: eq(variables['BuildConfiguration'], 'production')
|
||||
|
||||
- script: 'test -d dist'
|
||||
displayName: 'Check Build'
|
||||
|
||||
- script: 'mv dist jellyfin-web'
|
||||
displayName: 'Rename Directory'
|
||||
|
||||
- task: ArchiveFiles@2
|
||||
displayName: 'Archive Directory'
|
||||
inputs:
|
||||
rootFolderOrFile: 'jellyfin-web'
|
||||
includeRootFolder: true
|
||||
archiveFile: 'jellyfin-web-$(BuildConfiguration)'
|
||||
|
||||
- task: PublishPipelineArtifact@1
|
||||
displayName: 'Publish Release'
|
||||
inputs:
|
||||
targetPath: '$(Build.SourcesDirectory)/jellyfin-web-$(BuildConfiguration).zip'
|
||||
artifactName: 'jellyfin-web-$(BuildConfiguration)'
|
||||
|
|
@ -1,126 +0,0 @@
|
|||
jobs:
|
||||
- job: BuildPackage
|
||||
displayName: 'Build Packages'
|
||||
|
||||
strategy:
|
||||
matrix:
|
||||
CentOS:
|
||||
BuildConfiguration: centos
|
||||
Debian:
|
||||
BuildConfiguration: debian
|
||||
Fedora:
|
||||
BuildConfiguration: fedora
|
||||
Portable:
|
||||
BuildConfiguration: portable
|
||||
|
||||
pool:
|
||||
vmImage: 'ubuntu-latest'
|
||||
|
||||
steps:
|
||||
- script: echo "##vso[task.setvariable variable=JellyfinVersion]$( awk -F '/' '{ print $NF }' <<<'$(Build.SourceBranch)' | sed 's/^v//' )"
|
||||
displayName: Set release version (stable)
|
||||
condition: startsWith(variables['Build.SourceBranch'], 'refs/tags/v')
|
||||
|
||||
- script: 'docker build -f deployment/Dockerfile.$(BuildConfiguration) -t jellyfin-web-$(BuildConfiguration) deployment'
|
||||
displayName: 'Build Dockerfile'
|
||||
condition: or(startsWith(variables['Build.SourceBranch'], 'refs/tags'), startsWith(variables['Build.SourceBranch'], 'refs/heads/master'))
|
||||
|
||||
- script: 'docker image ls -a && docker run -v $(pwd)/deployment/dist:/dist -v $(pwd):/jellyfin -e IS_UNSTABLE="yes" -e BUILD_ID=$(Build.BuildNumber) jellyfin-web-$(BuildConfiguration)'
|
||||
displayName: 'Run Dockerfile (unstable)'
|
||||
condition: startsWith(variables['Build.SourceBranch'], 'refs/heads/master')
|
||||
|
||||
- script: 'docker image ls -a && docker run -v $(pwd)/deployment/dist:/dist -v $(pwd):/jellyfin -e IS_UNSTABLE="no" -e BUILD_ID=$(Build.BuildNumber) jellyfin-web-$(BuildConfiguration)'
|
||||
displayName: 'Run Dockerfile (stable)'
|
||||
condition: startsWith(variables['Build.SourceBranch'], 'refs/tags')
|
||||
|
||||
- task: PublishPipelineArtifact@1
|
||||
displayName: 'Publish Release'
|
||||
condition: or(startsWith(variables['Build.SourceBranch'], 'refs/tags'), startsWith(variables['Build.SourceBranch'], 'refs/heads/master'))
|
||||
inputs:
|
||||
targetPath: '$(Build.SourcesDirectory)/deployment/dist'
|
||||
artifactName: 'jellyfin-web-$(BuildConfiguration)'
|
||||
|
||||
- task: SSH@0
|
||||
displayName: 'Create target directory on repository server'
|
||||
condition: or(startsWith(variables['Build.SourceBranch'], 'refs/tags'), startsWith(variables['Build.SourceBranch'], 'refs/heads/master'))
|
||||
inputs:
|
||||
sshEndpoint: repository
|
||||
runOptions: 'inline'
|
||||
inline: 'mkdir -p /srv/repository/incoming/azure/$(Build.BuildNumber)/$(BuildConfiguration)'
|
||||
|
||||
- task: CopyFilesOverSSH@0
|
||||
displayName: 'Upload artifacts to repository server'
|
||||
condition: or(startsWith(variables['Build.SourceBranch'], 'refs/tags'), startsWith(variables['Build.SourceBranch'], 'refs/heads/master'))
|
||||
inputs:
|
||||
sshEndpoint: repository
|
||||
sourceFolder: '$(Build.SourcesDirectory)/deployment/dist'
|
||||
contents: '**'
|
||||
targetFolder: '/srv/repository/incoming/azure/$(Build.BuildNumber)/$(BuildConfiguration)'
|
||||
|
||||
- job: BuildDocker
|
||||
displayName: 'Build Docker'
|
||||
|
||||
pool:
|
||||
vmImage: 'ubuntu-latest'
|
||||
|
||||
variables:
|
||||
- name: JellyfinVersion
|
||||
value: 0.0.0
|
||||
|
||||
steps:
|
||||
- script: echo "##vso[task.setvariable variable=JellyfinVersion]$( awk -F '/' '{ print $NF }' <<<'$(Build.SourceBranch)' | sed 's/^v//' )"
|
||||
displayName: Set release version (stable)
|
||||
condition: startsWith(variables['Build.SourceBranch'], 'refs/tags')
|
||||
|
||||
- task: Docker@2
|
||||
displayName: 'Push Unstable Image'
|
||||
condition: startsWith(variables['Build.SourceBranch'], 'refs/heads/master')
|
||||
inputs:
|
||||
repository: 'jellyfin/jellyfin-web'
|
||||
command: buildAndPush
|
||||
buildContext: '.'
|
||||
Dockerfile: 'deployment/Dockerfile.docker'
|
||||
containerRegistry: Docker Hub
|
||||
tags: |
|
||||
unstable-$(Build.BuildNumber)
|
||||
unstable
|
||||
|
||||
- task: Docker@2
|
||||
displayName: 'Push Stable Image'
|
||||
condition: startsWith(variables['Build.SourceBranch'], 'refs/tags')
|
||||
inputs:
|
||||
repository: 'jellyfin/jellyfin-web'
|
||||
command: buildAndPush
|
||||
buildContext: '.'
|
||||
Dockerfile: 'deployment/Dockerfile.docker'
|
||||
containerRegistry: Docker Hub
|
||||
tags: |
|
||||
stable-$(Build.BuildNumber)
|
||||
$(JellyfinVersion)
|
||||
|
||||
- job: CollectArtifacts
|
||||
displayName: 'Collect Artifacts'
|
||||
dependsOn:
|
||||
- BuildPackage
|
||||
- BuildDocker
|
||||
condition: and(succeeded('BuildPackage'), succeeded('BuildDocker'))
|
||||
|
||||
pool:
|
||||
vmImage: 'ubuntu-latest'
|
||||
|
||||
steps:
|
||||
- task: SSH@0
|
||||
displayName: 'Update Unstable Repository'
|
||||
condition: startsWith(variables['Build.SourceBranch'], 'refs/heads/master')
|
||||
inputs:
|
||||
sshEndpoint: repository
|
||||
runOptions: 'inline'
|
||||
inline: 'sudo /srv/repository/collect-server.azure.sh /srv/repository/incoming/azure $(Build.BuildNumber) unstable'
|
||||
|
||||
- task: SSH@0
|
||||
displayName: 'Update Stable Repository'
|
||||
condition: startsWith(variables['Build.SourceBranch'], 'refs/tags')
|
||||
inputs:
|
||||
sshEndpoint: repository
|
||||
runOptions: 'inline'
|
||||
inline: 'sudo /srv/repository/collect-server.azure.sh /srv/repository/incoming/azure $(Build.BuildNumber) $(Build.SourceBranch)'
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
trigger:
|
||||
batch: true
|
||||
branches:
|
||||
include:
|
||||
- '*'
|
||||
tags:
|
||||
include:
|
||||
- '*'
|
||||
pr:
|
||||
branches:
|
||||
include:
|
||||
- '*'
|
||||
|
||||
jobs:
|
||||
- template: azure-pipelines-build.yml
|
||||
- template: azure-pipelines-package.yml
|
||||
1
.copr
1
.copr
|
|
@ -1 +0,0 @@
|
|||
fedora/
|
||||
|
|
@ -8,5 +8,5 @@ trim_trailing_whitespace = true
|
|||
insert_final_newline = true
|
||||
end_of_line = lf
|
||||
|
||||
[*.json]
|
||||
[*.{json,yaml,yml}]
|
||||
indent_size = 2
|
||||
|
|
|
|||
4
.github/workflows/build.yml
vendored
4
.github/workflows/build.yml
vendored
|
|
@ -31,6 +31,8 @@ jobs:
|
|||
run: npm ci --no-audit
|
||||
|
||||
- name: Run a production build
|
||||
env:
|
||||
JELLYFIN_VERSION: ${{ github.event.pull_request.head.sha || github.sha }}
|
||||
run: npm run build:production
|
||||
|
||||
- name: Update config.json for testing
|
||||
|
|
@ -56,7 +58,7 @@ jobs:
|
|||
- name: Save PR context
|
||||
env:
|
||||
PR_NUMBER: ${{ github.event.number }}
|
||||
PR_SHA: ${{ github.sha }}
|
||||
PR_SHA: ${{ github.event.pull_request.head.sha }}
|
||||
run: |
|
||||
echo $PR_NUMBER > PR_number
|
||||
echo $PR_SHA > PR_sha
|
||||
|
|
|
|||
6
.github/workflows/codeql.yml
vendored
6
.github/workflows/codeql.yml
vendored
|
|
@ -22,13 +22,13 @@ jobs:
|
|||
uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
|
||||
|
||||
- name: Initialize CodeQL
|
||||
uses: github/codeql-action/init@e8893c57a1f3a2b659b6b55564fdfdbbd2982911 # v3.24.0
|
||||
uses: github/codeql-action/init@8a470fddafa5cbb6266ee11b37ef4d8aae19c571 # v3.24.6
|
||||
with:
|
||||
languages: javascript
|
||||
queries: +security-extended
|
||||
|
||||
- name: Autobuild
|
||||
uses: github/codeql-action/autobuild@e8893c57a1f3a2b659b6b55564fdfdbbd2982911 # v3.24.0
|
||||
uses: github/codeql-action/autobuild@8a470fddafa5cbb6266ee11b37ef4d8aae19c571 # v3.24.6
|
||||
|
||||
- name: Perform CodeQL Analysis
|
||||
uses: github/codeql-action/analyze@e8893c57a1f3a2b659b6b55564fdfdbbd2982911 # v3.24.0
|
||||
uses: github/codeql-action/analyze@8a470fddafa5cbb6266ee11b37ef4d8aae19c571 # v3.24.6
|
||||
|
|
|
|||
2
.github/workflows/pr-suggestions.yml
vendored
2
.github/workflows/pr-suggestions.yml
vendored
|
|
@ -33,6 +33,6 @@ jobs:
|
|||
|
||||
- name: Run eslint
|
||||
if: ${{ github.repository == 'jellyfin/jellyfin-web' }}
|
||||
uses: CatChen/eslint-suggestion-action@7bbf6d65396dbcc73d1e053d900eb5745988c11c # v3.1.2
|
||||
uses: CatChen/eslint-suggestion-action@8fb7db4e235f7af9fc434349a124034b681d99a3 # v3.1.3
|
||||
with:
|
||||
github-token: ${{ secrets.GITHUB_TOKEN }}
|
||||
|
|
|
|||
6
.github/workflows/publish.yml
vendored
6
.github/workflows/publish.yml
vendored
|
|
@ -20,7 +20,7 @@ jobs:
|
|||
|
||||
steps:
|
||||
- name: Download workflow artifact
|
||||
uses: dawidd6/action-download-artifact@e7466d1a7587ed14867642c2ca74b5bcc1e19a2d # v3.0.0
|
||||
uses: dawidd6/action-download-artifact@71072fbb1229e1317f1a8de6b04206afb461bd67 # v3.1.2
|
||||
with:
|
||||
run_id: ${{ github.event.workflow_run.id }}
|
||||
name: jellyfin-web__prod
|
||||
|
|
@ -47,7 +47,7 @@ jobs:
|
|||
|
||||
steps:
|
||||
- name: Get PR context
|
||||
uses: dawidd6/action-download-artifact@e7466d1a7587ed14867642c2ca74b5bcc1e19a2d # v3.0.0
|
||||
uses: dawidd6/action-download-artifact@71072fbb1229e1317f1a8de6b04206afb461bd67 # v3.1.2
|
||||
id: pr_context
|
||||
with:
|
||||
run_id: ${{ github.event.workflow_run.id }}
|
||||
|
|
@ -88,7 +88,7 @@ jobs:
|
|||
|
||||
steps:
|
||||
- name: Update job summary in PR comment
|
||||
uses: thollander/actions-comment-pull-request@1d3973dc4b8e1399c0620d3f2b1aa5e795465308 # v2.4.3
|
||||
uses: thollander/actions-comment-pull-request@fabd468d3a1a0b97feee5f6b9e499eab0dd903f6 # v2.5.0
|
||||
with:
|
||||
GITHUB_TOKEN: ${{ secrets.JF_BOT_TOKEN }}
|
||||
message: ${{ needs.compose-comment.outputs.msg }}
|
||||
|
|
|
|||
3
.github/workflows/update-sdk.yml
vendored
3
.github/workflows/update-sdk.yml
vendored
|
|
@ -33,10 +33,9 @@ jobs:
|
|||
npm i --save @jellyfin/sdk@unstable
|
||||
VERSION=$(jq -r '.dependencies["@jellyfin/sdk"]' package.json)
|
||||
echo "JF_SDK_VERSION=${VERSION}" >> $GITHUB_ENV
|
||||
git checkout package.json
|
||||
|
||||
- name: Open a pull request
|
||||
uses: peter-evans/create-pull-request@v6
|
||||
uses: peter-evans/create-pull-request@a4f52f8033a6168103c2538976c07b467e8163bc # v6.0.1
|
||||
with:
|
||||
token: ${{ secrets.JF_BOT_TOKEN }}
|
||||
commit-message: Update @jellyfin/sdk to ${{env.JF_SDK_VERSION}}
|
||||
|
|
|
|||
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -8,6 +8,7 @@ config.json
|
|||
|
||||
# ide
|
||||
.idea
|
||||
.vs
|
||||
|
||||
# log
|
||||
yarn-error.log
|
||||
|
|
|
|||
2
.vscode/settings.json
vendored
2
.vscode/settings.json
vendored
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.fixAll.eslint": true
|
||||
"source.fixAll.eslint": "explicit"
|
||||
},
|
||||
"eslint.format.enable": true,
|
||||
"editor.formatOnSave": false
|
||||
|
|
|
|||
|
|
@ -79,6 +79,8 @@
|
|||
- [Kevin Tan (Valius)](https://github.com/valius)
|
||||
- [Rasmus Krämer](https://github.com/rasmuslos)
|
||||
- [ntarelix](https://github.com/ntarelix)
|
||||
- [András Maróy](https://github.com/andrasmaroy)
|
||||
- [Chris-Codes-It](https://github.com/Chris-Codes-It)
|
||||
|
||||
## Emby Contributors
|
||||
|
||||
|
|
|
|||
110
build.sh
110
build.sh
|
|
@ -1,110 +0,0 @@
|
|||
#!/usr/bin/env bash
|
||||
|
||||
# build.sh - Build Jellyfin binary packages
|
||||
# Part of the Jellyfin Project
|
||||
|
||||
set -o errexit
|
||||
set -o pipefail
|
||||
|
||||
usage() {
|
||||
echo -e "build.sh - Build Jellyfin binary packages"
|
||||
echo -e "Usage:"
|
||||
echo -e " $0 -t/--type <BUILD_TYPE> -p/--platform <PLATFORM> [-k/--keep-artifacts] [-l/--list-platforms]"
|
||||
echo -e "Notes:"
|
||||
echo -e " * BUILD_TYPE can be one of: [native, docker] and must be specified"
|
||||
echo -e " * native: Build using the build script in the host OS"
|
||||
echo -e " * docker: Build using the build script in a standardized Docker container"
|
||||
echo -e " * PLATFORM can be any platform shown by -l/--list-platforms and must be specified"
|
||||
echo -e " * If -k/--keep-artifacts is specified, transient artifacts (e.g. Docker containers) will be"
|
||||
echo -e " retained after the build is finished; the source directory will still be cleaned"
|
||||
echo -e " * If -l/--list-platforms is specified, all other arguments are ignored; the script will print"
|
||||
echo -e " the list of supported platforms and exit"
|
||||
}
|
||||
|
||||
list_platforms() {
|
||||
declare -a platforms
|
||||
platforms=(
|
||||
$( find deployment -maxdepth 1 -mindepth 1 -name "build.*" | awk -F'.' '{ $1=""; printf $2; if ($3 != ""){ printf "." $3; }; if ($4 != ""){ printf "." $4; }; print ""; }' | sort )
|
||||
)
|
||||
echo -e "Valid platforms:"
|
||||
echo
|
||||
for platform in ${platforms[@]}; do
|
||||
echo -e "* ${platform} : $( grep '^#=' deployment/build.${platform} | sed 's/^#= //' )"
|
||||
done
|
||||
}
|
||||
|
||||
do_build_native() {
|
||||
export IS_DOCKER=NO
|
||||
deployment/build.${PLATFORM}
|
||||
}
|
||||
|
||||
do_build_docker() {
|
||||
if ! [ $(uname -m) = "x86_64" ]; then
|
||||
echo "Docker-based builds only support amd64-based cross-building; use a 'native' build instead."
|
||||
exit 1
|
||||
fi
|
||||
if [[ ! -f deployment/Dockerfile.${PLATFORM} ]]; then
|
||||
echo "Missing Dockerfile for platform ${PLATFORM}"
|
||||
exit 1
|
||||
fi
|
||||
if [[ ${KEEP_ARTIFACTS} == YES ]]; then
|
||||
docker_args=""
|
||||
else
|
||||
docker_args="--rm"
|
||||
fi
|
||||
|
||||
docker build . -t "jellyfin-builder.${PLATFORM}" -f deployment/Dockerfile.${PLATFORM}
|
||||
mkdir -p ${ARTIFACT_DIR}
|
||||
docker run $docker_args -v "${SOURCE_DIR}:/jellyfin" -v "${ARTIFACT_DIR}:/dist" "jellyfin-builder.${PLATFORM}"
|
||||
}
|
||||
|
||||
while [[ $# -gt 0 ]]; do
|
||||
key="$1"
|
||||
case $key in
|
||||
-t|--type)
|
||||
BUILD_TYPE="$2"
|
||||
shift
|
||||
shift
|
||||
;;
|
||||
-p|--platform)
|
||||
PLATFORM="$2"
|
||||
shift
|
||||
shift
|
||||
;;
|
||||
-k|--keep-artifacts)
|
||||
KEEP_ARTIFACTS=YES
|
||||
shift
|
||||
;;
|
||||
-l|--list-platforms)
|
||||
list_platforms
|
||||
exit 0
|
||||
;;
|
||||
-h|--help)
|
||||
usage
|
||||
exit 0
|
||||
;;
|
||||
*)
|
||||
echo "Unknown option $1"
|
||||
usage
|
||||
exit 1
|
||||
;;
|
||||
esac
|
||||
done
|
||||
|
||||
if [[ -z ${BUILD_TYPE} || -z ${PLATFORM} ]]; then
|
||||
usage
|
||||
exit 1
|
||||
fi
|
||||
|
||||
export SOURCE_DIR="$( pwd )"
|
||||
export ARTIFACT_DIR="${SOURCE_DIR}/../bin/${PLATFORM}"
|
||||
|
||||
# Determine build type
|
||||
case ${BUILD_TYPE} in
|
||||
native)
|
||||
do_build_native
|
||||
;;
|
||||
docker)
|
||||
do_build_docker
|
||||
;;
|
||||
esac
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
---
|
||||
# We just wrap `build` so this is really it
|
||||
name: "jellyfin-web"
|
||||
version: "10.8.0"
|
||||
packages:
|
||||
- debian.all
|
||||
- fedora.all
|
||||
- centos.all
|
||||
- portable
|
||||
67
bump_version
67
bump_version
|
|
@ -7,7 +7,7 @@ set -o pipefail
|
|||
set -o xtrace
|
||||
|
||||
usage() {
|
||||
echo -e "bump_version - increase the shared version and generate changelogs"
|
||||
echo -e "bump_version - increase the shared version"
|
||||
echo -e ""
|
||||
echo -e "Usage:"
|
||||
echo -e " $ bump_version <new_version>"
|
||||
|
|
@ -18,75 +18,12 @@ if [[ -z $1 ]]; then
|
|||
exit 1
|
||||
fi
|
||||
|
||||
build_file="./build.yaml"
|
||||
package_file="./package*.json"
|
||||
|
||||
new_version="$1"
|
||||
|
||||
old_version="$(
|
||||
grep "version:" ${build_file} \
|
||||
| sed -E 's/version: "([0-9\.]+[-a-z0-9]*)"/\1/'
|
||||
)"
|
||||
echo "Old version: ${old_version}"
|
||||
new_version_sed="$( cut -f1 -d'-' <<<"${new_version}" )"
|
||||
|
||||
# Bump the NPM version
|
||||
new_version_sed="$( cut -f1 -d'-' <<<"${new_version}" )"
|
||||
npm --no-git-tag-version --allow-same-version version v${new_version_sed}
|
||||
|
||||
# Set the build.yaml version to the specified new_version
|
||||
old_version_sed="$( sed 's/\./\\./g' <<<"${old_version}" )" # Escape the '.' chars
|
||||
sed -i "s/${old_version_sed}/${new_version_sed}/g" ${build_file}
|
||||
|
||||
|
||||
if [[ ${new_version} == *"-"* ]]; then
|
||||
new_version_pkg="$( sed 's/-/~/g' <<<"${new_version}" )"
|
||||
new_version_deb_sup=""
|
||||
else
|
||||
new_version_pkg="${new_version}"
|
||||
new_version_deb_sup="-1"
|
||||
fi
|
||||
|
||||
# Write out a temporary Debian changelog with our new stuff appended and some templated formatting
|
||||
debian_changelog_file="debian/changelog"
|
||||
debian_changelog_temp="$( mktemp )"
|
||||
# Create new temp file with our changelog
|
||||
echo -e "jellyfin-web (${new_version_pkg}${new_version_deb_sup}) unstable; urgency=medium
|
||||
|
||||
* New upstream version ${new_version}; release changelog at https://github.com/jellyfin/jellyfin-web/releases/tag/v${new_version}
|
||||
|
||||
-- Jellyfin Packaging Team <packaging@jellyfin.org> $( date --rfc-2822 )
|
||||
" >> ${debian_changelog_temp}
|
||||
cat ${debian_changelog_file} >> ${debian_changelog_temp}
|
||||
# Move into place
|
||||
mv ${debian_changelog_temp} ${debian_changelog_file}
|
||||
|
||||
# Write out a temporary Yum changelog with our new stuff prepended and some templated formatting
|
||||
fedora_spec_file="fedora/jellyfin-web.spec"
|
||||
fedora_changelog_temp="$( mktemp )"
|
||||
fedora_spec_temp_dir="$( mktemp -d )"
|
||||
fedora_spec_temp="${fedora_spec_temp_dir}/jellyfin-web.spec.tmp"
|
||||
# Make a copy of our spec file for hacking
|
||||
cp ${fedora_spec_file} ${fedora_spec_temp_dir}/
|
||||
pushd ${fedora_spec_temp_dir}
|
||||
# Split out the stuff before and after changelog
|
||||
csplit jellyfin-web.spec "/^%changelog/" # produces xx00 xx01
|
||||
# Update the version in xx00
|
||||
sed -i "s/${old_version_sed}/${new_version_pkg}/g" xx00
|
||||
# Remove the header from xx01
|
||||
sed -i '/^%changelog/d' xx01
|
||||
# Create new temp file with our changelog
|
||||
echo -e "%changelog
|
||||
* $( LANG=C date '+%a %b %d %Y' ) Jellyfin Packaging Team <packaging@jellyfin.org>
|
||||
- New upstream version ${new_version}; release changelog at https://github.com/jellyfin/jellyfin-web/releases/tag/v${new_version}" >> ${fedora_changelog_temp}
|
||||
cat xx01 >> ${fedora_changelog_temp}
|
||||
# Reassembble
|
||||
cat xx00 ${fedora_changelog_temp} > ${fedora_spec_temp}
|
||||
popd
|
||||
# Move into place
|
||||
mv ${fedora_spec_temp} ${fedora_spec_file}
|
||||
# Clean up
|
||||
rm -rf ${fedora_spec_temp_dir}
|
||||
|
||||
# Stage the changed files for commit
|
||||
git add .
|
||||
git status -v
|
||||
|
|
|
|||
17
debian/changelog
vendored
17
debian/changelog
vendored
|
|
@ -1,17 +0,0 @@
|
|||
jellyfin-web (10.8.0-1) unstable; urgency=medium
|
||||
|
||||
* Forthcoming stable release
|
||||
|
||||
-- Jellyfin Packaging Team <packaging@jellyfin.org> Fri, 04 Dec 2020 21:58:23 -0500
|
||||
|
||||
jellyfin-web (10.7.0-1) unstable; urgency=medium
|
||||
|
||||
* Forthcoming stable release
|
||||
|
||||
-- Jellyfin Packaging Team <packaging@jellyfin.org> Mon, 27 Jul 2020 19:13:31 -0400
|
||||
|
||||
jellyfin-web (10.6.0-1) unstable; urgency=medium
|
||||
|
||||
* New upstream version 10.6.0; release changelog at https://github.com/jellyfin/jellyfin-web/releases/tag/v10.6.0
|
||||
|
||||
-- Jellyfin Packaging Team <packaging@jellyfin.org> Mon, 16 Mar 2020 11:15:00 -0400
|
||||
1
debian/compat
vendored
1
debian/compat
vendored
|
|
@ -1 +0,0 @@
|
|||
8
|
||||
1
debian/conffiles
vendored
1
debian/conffiles
vendored
|
|
@ -1 +0,0 @@
|
|||
/usr/share/jellyfin/web/config.json
|
||||
16
debian/control
vendored
16
debian/control
vendored
|
|
@ -1,16 +0,0 @@
|
|||
Source: jellyfin-web
|
||||
Section: misc
|
||||
Priority: optional
|
||||
Maintainer: Jellyfin Team <team@jellyfin.org>
|
||||
Build-Depends: debhelper (>= 9),
|
||||
npm | nodejs
|
||||
Standards-Version: 3.9.4
|
||||
Homepage: https://jellyfin.org/
|
||||
Vcs-Git: https://github.org/jellyfin/jellyfin-web.git
|
||||
Vcs-Browser: https://github.org/jellyfin/jellyfin-web
|
||||
|
||||
Package: jellyfin-web
|
||||
Recommends: jellyfin-server
|
||||
Architecture: all
|
||||
Description: Jellyfin is the Free Software Media System.
|
||||
This package provides the Jellyfin web client.
|
||||
28
debian/copyright
vendored
28
debian/copyright
vendored
|
|
@ -1,28 +0,0 @@
|
|||
Format: http://dep.debian.net/deps/dep5
|
||||
Upstream-Name: jellyfin-web
|
||||
Source: https://github.com/jellyfin/jellyfin-web
|
||||
|
||||
Files: *
|
||||
Copyright: 2018-2020 Jellyfin Team
|
||||
License: GPL-3.0
|
||||
|
||||
Files: debian/*
|
||||
Copyright: 2020 Joshua Boniface <joshua@boniface.me>
|
||||
License: GPL-3.0
|
||||
|
||||
License: GPL-3.0
|
||||
This package is free software; you can redistribute it and/or modify
|
||||
it under the terms of the GNU General Public License as published by
|
||||
the Free Software Foundation; either version 2 of the License, or
|
||||
(at your option) any later version.
|
||||
.
|
||||
This package is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU General Public License for more details.
|
||||
.
|
||||
You should have received a copy of the GNU General Public License
|
||||
along with this program. If not, see <http://www.gnu.org/licenses/>
|
||||
.
|
||||
On Debian systems, the complete text of the GNU General
|
||||
Public License version 2 can be found in "/usr/share/common-licenses/GPL-2".
|
||||
6
debian/gbp.conf
vendored
6
debian/gbp.conf
vendored
|
|
@ -1,6 +0,0 @@
|
|||
[DEFAULT]
|
||||
pristine-tar = False
|
||||
cleaner = fakeroot debian/rules clean
|
||||
|
||||
[import-orig]
|
||||
filter = [ ".git*", ".hg*", ".vs*", ".vscode*" ]
|
||||
1
debian/install
vendored
1
debian/install
vendored
|
|
@ -1 +0,0 @@
|
|||
web usr/share/jellyfin/
|
||||
1
debian/po/POTFILES.in
vendored
1
debian/po/POTFILES.in
vendored
|
|
@ -1 +0,0 @@
|
|||
[type: gettext/rfc822deb] templates
|
||||
57
debian/po/templates.pot
vendored
57
debian/po/templates.pot
vendored
|
|
@ -1,57 +0,0 @@
|
|||
# SOME DESCRIPTIVE TITLE.
|
||||
# Copyright (C) YEAR THE PACKAGE'S COPYRIGHT HOLDER
|
||||
# This file is distributed under the same license as the PACKAGE package.
|
||||
# FIRST AUTHOR <EMAIL@ADDRESS>, YEAR.
|
||||
#
|
||||
#, fuzzy
|
||||
msgid ""
|
||||
msgstr ""
|
||||
"Project-Id-Version: jellyfin-server\n"
|
||||
"Report-Msgid-Bugs-To: jellyfin-server@packages.debian.org\n"
|
||||
"POT-Creation-Date: 2015-06-12 20:51-0600\n"
|
||||
"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
|
||||
"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
|
||||
"Language-Team: LANGUAGE <LL@li.org>\n"
|
||||
"Language: \n"
|
||||
"MIME-Version: 1.0\n"
|
||||
"Content-Type: text/plain; charset=CHARSET\n"
|
||||
"Content-Transfer-Encoding: 8bit\n"
|
||||
|
||||
#. Type: note
|
||||
#. Description
|
||||
#: ../templates:1001
|
||||
msgid "Jellyfin permission info:"
|
||||
msgstr ""
|
||||
|
||||
#. Type: note
|
||||
#. Description
|
||||
#: ../templates:1001
|
||||
msgid ""
|
||||
"Jellyfin by default runs under a user named \"jellyfin\". Please ensure that the "
|
||||
"user jellyfin has read and write access to any folders you wish to add to your "
|
||||
"library. Otherwise please run jellyfin under a different user."
|
||||
msgstr ""
|
||||
|
||||
#. Type: string
|
||||
#. Description
|
||||
#: ../templates:2001
|
||||
msgid "Username to run Jellyfin as:"
|
||||
msgstr ""
|
||||
|
||||
#. Type: string
|
||||
#. Description
|
||||
#: ../templates:2001
|
||||
msgid "The user that jellyfin will run as."
|
||||
msgstr ""
|
||||
|
||||
#. Type: note
|
||||
#. Description
|
||||
#: ../templates:3001
|
||||
msgid "Jellyfin still running"
|
||||
msgstr ""
|
||||
|
||||
#. Type: note
|
||||
#. Description
|
||||
#: ../templates:3001
|
||||
msgid "Jellyfin is currently running. Please close it and try again."
|
||||
msgstr ""
|
||||
21
debian/rules
vendored
21
debian/rules
vendored
|
|
@ -1,21 +0,0 @@
|
|||
#! /usr/bin/make -f
|
||||
export DH_VERBOSE=1
|
||||
|
||||
%:
|
||||
dh $@
|
||||
|
||||
# disable "make check"
|
||||
override_dh_auto_test:
|
||||
|
||||
# disable stripping debugging symbols
|
||||
override_dh_clistrip:
|
||||
|
||||
override_dh_auto_build:
|
||||
npm ci --no-audit --unsafe-perm
|
||||
npm run build:production
|
||||
mv $(CURDIR)/dist $(CURDIR)/web
|
||||
|
||||
override_dh_auto_clean:
|
||||
test -d $(CURDIR)/dist && rm -rf '$(CURDIR)/dist' || true
|
||||
test -d $(CURDIR)/web && rm -rf '$(CURDIR)/web' || true
|
||||
test -d $(CURDIR)/node_modules && rm -rf '$(CURDIR)/node_modules' || true
|
||||
1
debian/source/format
vendored
1
debian/source/format
vendored
|
|
@ -1 +0,0 @@
|
|||
1.0
|
||||
7
debian/source/options
vendored
7
debian/source/options
vendored
|
|
@ -1,7 +0,0 @@
|
|||
tar-ignore='.git*'
|
||||
tar-ignore='**/.git'
|
||||
tar-ignore='**/.hg'
|
||||
tar-ignore='**/.vs'
|
||||
tar-ignore='**/.vscode'
|
||||
tar-ignore='deployment'
|
||||
tar-ignore='*.deb'
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
FROM quay.io/centos/centos:stream8
|
||||
|
||||
# Docker build arguments
|
||||
ARG SOURCE_DIR=/jellyfin
|
||||
ARG ARTIFACT_DIR=/dist
|
||||
|
||||
# Docker run environment
|
||||
ENV SOURCE_DIR=/jellyfin
|
||||
ENV ARTIFACT_DIR=/dist
|
||||
ENV IS_DOCKER=YES
|
||||
|
||||
# Prepare CentOS environment
|
||||
RUN yum update -y \
|
||||
&& yum install -y epel-release \
|
||||
&& yum install -y rpmdevtools git autoconf automake glibc-devel gcc-c++ make \
|
||||
&& yum install https://rpm.nodesource.com/pub_20.x/nodistro/repo/nodesource-release-nodistro-1.noarch.rpm -y \
|
||||
&& yum install nodejs -y --setopt=nodesource-nodejs.module_hotfixes=1 \
|
||||
&& yum clean all \
|
||||
&& rm -rf /var/cache/dnf
|
||||
|
||||
# Link to build script
|
||||
RUN ln -sf ${SOURCE_DIR}/deployment/build.centos /build.sh
|
||||
|
||||
VOLUME ${SOURCE_DIR}
|
||||
|
||||
VOLUME ${ARTIFACT_DIR}
|
||||
|
||||
ENTRYPOINT ["/build.sh"]
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
FROM debian:12
|
||||
|
||||
# Docker build arguments
|
||||
ARG SOURCE_DIR=/jellyfin
|
||||
ARG ARTIFACT_DIR=/dist
|
||||
|
||||
# Docker run environment
|
||||
ENV SOURCE_DIR=/jellyfin
|
||||
ENV ARTIFACT_DIR=/dist
|
||||
ENV DEB_BUILD_OPTIONS=noddebs
|
||||
ENV IS_DOCKER=YES
|
||||
|
||||
# Prepare Debian build environment
|
||||
RUN apt-get update \
|
||||
&& apt-get install -y debhelper mmv git curl gnupg ca-certificates \
|
||||
&& mkdir -p /etc/apt/keyrings \
|
||||
&& curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg \
|
||||
&& echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_20.x nodistro main" | tee /etc/apt/sources.list.d/nodesource.list \
|
||||
&& apt-get update \
|
||||
&& apt-get install -y nodejs \
|
||||
&& rm -rf /var/lib/apt/lists/* /var/cache/apt/archives/*
|
||||
|
||||
# Link to build script
|
||||
RUN ln -sf ${SOURCE_DIR}/deployment/build.debian /build.sh
|
||||
|
||||
VOLUME ${SOURCE_DIR}
|
||||
|
||||
VOLUME ${ARTIFACT_DIR}
|
||||
|
||||
ENTRYPOINT ["/build.sh"]
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
FROM node:20-alpine
|
||||
|
||||
ARG SOURCE_DIR=/src
|
||||
ARG ARTIFACT_DIR=/jellyfin-web
|
||||
|
||||
RUN apk --no-cache add autoconf g++ make libpng-dev gifsicle alpine-sdk automake libtool make gcc musl-dev nasm python3
|
||||
|
||||
WORKDIR ${SOURCE_DIR}
|
||||
COPY . .
|
||||
|
||||
RUN npm ci --no-audit --unsafe-perm \
|
||||
&& npm run build:production \
|
||||
&& mv dist ${ARTIFACT_DIR}
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
FROM fedora:40
|
||||
|
||||
# Docker build arguments
|
||||
ARG SOURCE_DIR=/jellyfin
|
||||
ARG ARTIFACT_DIR=/dist
|
||||
|
||||
# Docker run environment
|
||||
ENV SOURCE_DIR=/jellyfin
|
||||
ENV ARTIFACT_DIR=/dist
|
||||
ENV IS_DOCKER=YES
|
||||
|
||||
# Prepare Fedora environment
|
||||
RUN dnf update -y \
|
||||
&& dnf install https://rpm.nodesource.com/pub_20.x/nodistro/repo/nodesource-release-nodistro-1.noarch.rpm -y \
|
||||
&& dnf install -y @buildsys-build rpmdevtools git dnf-plugins-core nodejs autoconf automake glibc-devel make --setopt=nodesource-nodejs.module_hotfixes=1 \
|
||||
&& dnf clean all \
|
||||
&& rm -rf /var/cache/dnf
|
||||
|
||||
# Link to build script
|
||||
RUN ln -sf ${SOURCE_DIR}/deployment/build.fedora /build.sh
|
||||
|
||||
VOLUME ${SOURCE_DIR}
|
||||
|
||||
VOLUME ${ARTIFACT_DIR}
|
||||
|
||||
ENTRYPOINT ["/build.sh"]
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
FROM debian:12
|
||||
|
||||
# Docker build arguments
|
||||
ARG SOURCE_DIR=/jellyfin
|
||||
ARG ARTIFACT_DIR=/dist
|
||||
|
||||
# Docker run environment
|
||||
ENV SOURCE_DIR=/jellyfin
|
||||
ENV ARTIFACT_DIR=/dist
|
||||
ENV IS_DOCKER=YES
|
||||
|
||||
# Prepare Debian build environment
|
||||
RUN apt-get update \
|
||||
&& apt-get install -y mmv curl git gnupg ca-certificates \
|
||||
&& mkdir -p /etc/apt/keyrings \
|
||||
&& curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg \
|
||||
&& echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_20.x nodistro main" | tee /etc/apt/sources.list.d/nodesource.list \
|
||||
&& apt-get update \
|
||||
&& apt-get install -y nodejs \
|
||||
&& rm -rf /var/lib/apt/lists/* /var/cache/apt/archives/*
|
||||
|
||||
# Link to build script
|
||||
RUN ln -sf ${SOURCE_DIR}/deployment/build.portable /build.sh
|
||||
|
||||
VOLUME ${SOURCE_DIR}
|
||||
|
||||
VOLUME ${ARTIFACT_DIR}
|
||||
|
||||
ENTRYPOINT ["/build.sh"]
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
#!/bin/bash
|
||||
|
||||
set -o errexit
|
||||
set -o xtrace
|
||||
|
||||
# move to source directory
|
||||
pushd ${SOURCE_DIR}
|
||||
|
||||
cp -a package-lock.json /tmp/package-lock.json
|
||||
|
||||
# modify changelog to unstable configuration if IS_UNSTABLE
|
||||
if [[ ${IS_UNSTABLE} == 'yes' ]]; then
|
||||
pushd fedora
|
||||
|
||||
PR_ID=$( git log --grep 'Merge pull request' --oneline --single-worktree --first-parent | head -1 | grep --color=none -Eo '#[0-9]+' | tr -d '#' )
|
||||
|
||||
sed -i "s/Version:.*/Version: ${BUILD_ID}/" jellyfin-web.spec
|
||||
sed -i "/%changelog/q" jellyfin-web.spec
|
||||
|
||||
cat <<EOF >>jellyfin-web.spec
|
||||
* $( LANG=C date '+%a %b %d %Y' ) Jellyfin Packaging Team <packaging@jellyfin.org>
|
||||
- Jellyfin Web unstable build ${BUILD_ID} for merged PR #${PR_ID}
|
||||
EOF
|
||||
popd
|
||||
fi
|
||||
|
||||
# build rpm
|
||||
make -f fedora/Makefile srpm outdir=/root/rpmbuild/SRPMS
|
||||
rpmbuild --rebuild -bb /root/rpmbuild/SRPMS/jellyfin-*.src.rpm
|
||||
|
||||
# move the artifacts
|
||||
mv /root/rpmbuild/RPMS/noarch/jellyfin-*.rpm /root/rpmbuild/SRPMS/jellyfin-*.src.rpm ${ARTIFACT_DIR}/
|
||||
|
||||
if [[ ${IS_DOCKER} == YES ]]; then
|
||||
chown -Rc $(stat -c %u:%g ${ARTIFACT_DIR}) ${ARTIFACT_DIR}
|
||||
fi
|
||||
|
||||
rm -f fedora/jellyfin*.tar.gz
|
||||
cp -a /tmp/package-lock.json package-lock.json
|
||||
|
||||
popd
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
#!/bin/bash
|
||||
|
||||
set -o errexit
|
||||
set -o xtrace
|
||||
|
||||
# move to source directory
|
||||
pushd ${SOURCE_DIR}
|
||||
|
||||
cp -a package-lock.json /tmp/package-lock.json
|
||||
|
||||
# modify changelog to unstable configuration if IS_UNSTABLE
|
||||
if [[ ${IS_UNSTABLE} == 'yes' ]]; then
|
||||
pushd debian
|
||||
|
||||
PR_ID=$( git log --grep 'Merge pull request' --oneline --single-worktree --first-parent | head -1 | grep --color=none -Eo '#[0-9]+' | tr -d '#' )
|
||||
|
||||
cat <<EOF >changelog
|
||||
jellyfin-web (${BUILD_ID}-unstable) unstable; urgency=medium
|
||||
|
||||
* Jellyfin Web unstable build ${BUILD_ID} for merged PR #${PR_ID}
|
||||
|
||||
-- Jellyfin Packaging Team <packaging@jellyfin.org> $( date --rfc-2822 )
|
||||
EOF
|
||||
popd
|
||||
fi
|
||||
|
||||
# build deb
|
||||
dpkg-buildpackage -us -uc --pre-clean --post-clean
|
||||
|
||||
mkdir -p ${ARTIFACT_DIR}
|
||||
mv ../jellyfin*.{deb,dsc,tar.gz,buildinfo,changes} ${ARTIFACT_DIR}
|
||||
|
||||
cp -a /tmp/package-lock.json package-lock.json
|
||||
|
||||
if [[ ${IS_DOCKER} == YES ]]; then
|
||||
chown -Rc $(stat -c %u:%g ${ARTIFACT_DIR}) ${ARTIFACT_DIR}
|
||||
fi
|
||||
|
||||
popd
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
#!/bin/bash
|
||||
|
||||
set -o errexit
|
||||
set -o xtrace
|
||||
|
||||
# move to source directory
|
||||
pushd ${SOURCE_DIR}
|
||||
|
||||
cp -a package-lock.json /tmp/package-lock.json
|
||||
|
||||
# modify changelog to unstable configuration if IS_UNSTABLE
|
||||
if [[ ${IS_UNSTABLE} == 'yes' ]]; then
|
||||
pushd fedora
|
||||
|
||||
PR_ID=$( git log --grep 'Merge pull request' --oneline --single-worktree --first-parent | head -1 | grep --color=none -Eo '#[0-9]+' | tr -d '#' )
|
||||
|
||||
sed -i "s/Version:.*/Version: ${BUILD_ID}/" jellyfin-web.spec
|
||||
sed -i "/%changelog/q" jellyfin-web.spec
|
||||
|
||||
cat <<EOF >>jellyfin-web.spec
|
||||
* $( LANG=C date '+%a %b %d %Y' ) Jellyfin Packaging Team <packaging@jellyfin.org>
|
||||
- Jellyfin Web unstable build ${BUILD_ID} for merged PR #${PR_ID}
|
||||
EOF
|
||||
popd
|
||||
fi
|
||||
|
||||
# build rpm
|
||||
make -f fedora/Makefile srpm outdir=/root/rpmbuild/SRPMS
|
||||
rpmbuild -rb /root/rpmbuild/SRPMS/jellyfin-*.src.rpm
|
||||
|
||||
# move the artifacts
|
||||
mv /root/rpmbuild/RPMS/noarch/jellyfin-*.rpm /root/rpmbuild/SRPMS/jellyfin-*.src.rpm ${ARTIFACT_DIR}
|
||||
|
||||
if [[ ${IS_DOCKER} == YES ]]; then
|
||||
chown -Rc $(stat -c %u:%g ${ARTIFACT_DIR}) ${ARTIFACT_DIR}
|
||||
fi
|
||||
|
||||
rm -f fedora/jellyfin*.tar.gz
|
||||
cp -a /tmp/package-lock.json package-lock.json
|
||||
|
||||
popd
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
#!/bin/bash
|
||||
|
||||
set -o errexit
|
||||
set -o xtrace
|
||||
|
||||
# move to source directory
|
||||
pushd ${SOURCE_DIR}
|
||||
|
||||
# get version
|
||||
if [[ ${IS_UNSTABLE} == 'yes' ]]; then
|
||||
version="${BUILD_ID}"
|
||||
else
|
||||
version="$( grep "version:" ./build.yaml | sed -E 's/version: "([0-9\.]+.*)"/\1/' )"
|
||||
fi
|
||||
|
||||
# build archives
|
||||
npm ci --no-audit --unsafe-perm
|
||||
npm run build:production
|
||||
mv dist jellyfin-web_${version}
|
||||
tar -czf jellyfin-web_${version}_portable.tar.gz jellyfin-web_${version}
|
||||
rm -rf dist
|
||||
|
||||
# move the artifacts
|
||||
mkdir -p ${ARTIFACT_DIR}
|
||||
mv jellyfin[-_]*.tar.gz ${ARTIFACT_DIR}
|
||||
|
||||
if [[ ${IS_DOCKER} == YES ]]; then
|
||||
chown -Rc $(stat -c %u:%g ${ARTIFACT_DIR}) ${ARTIFACT_DIR}
|
||||
fi
|
||||
|
||||
popd
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
DIR := $(dir $(lastword $(MAKEFILE_LIST)))
|
||||
# install git and npm
|
||||
$(info $(shell set -x; if [ "$$(id -u)" = "0" ]; then echo "Installing git"; dnf -y install git npm; fi))
|
||||
NAME := jellyfin-web
|
||||
VERSION := $(shell set -x; sed -ne '/^Version:/s/.* *//p' $(DIR)/$(NAME).spec)
|
||||
RELEASE := $(shell set -x; sed -ne '/^Release:/s/.* *\(.*\)%{.*}.*/\1/p' $(DIR)/$(NAME).spec)
|
||||
SRPM := jellyfin-web-$(subst -,~,$(VERSION))-$(RELEASE)$(shell rpm --eval %dist).src.rpm
|
||||
TARBALL :=$(NAME)-$(subst -,~,$(VERSION)).tar.gz
|
||||
|
||||
epel-7-x86_64_repos := https://rpm.nodesource.com/pub_20.x/nodistro/\$$basearch/
|
||||
|
||||
fed_ver := $(shell rpm -E %fedora)
|
||||
# fallback when not running on Fedora
|
||||
fed_ver ?= 36
|
||||
TARGET ?= fedora-$(fed_ver)-x86_64
|
||||
|
||||
outdir ?= $(PWD)/$(DIR)/
|
||||
|
||||
srpm: $(DIR)/$(SRPM)
|
||||
tarball: $(DIR)/$(TARBALL)
|
||||
|
||||
$(DIR)/$(TARBALL):
|
||||
cd $(DIR)/; \
|
||||
SOURCE_DIR=.. \
|
||||
WORKDIR="$${PWD}"; \
|
||||
version=$(VERSION); \
|
||||
tar \
|
||||
--transform "s,^\.,$(NAME)-$(subst -,~,$(VERSION))," \
|
||||
--exclude='.git*' \
|
||||
--exclude='**/.git' \
|
||||
--exclude='**/.hg' \
|
||||
--exclude=deployment \
|
||||
--exclude='*.deb' \
|
||||
--exclude='*.rpm' \
|
||||
--exclude=$(notdir $@) \
|
||||
-czf $(notdir $@) \
|
||||
-C $${SOURCE_DIR} ./
|
||||
|
||||
$(DIR)/$(SRPM): $(DIR)/$(TARBALL) $(DIR)/jellyfin-web.spec
|
||||
cd $(DIR)/; \
|
||||
rpmbuild -bs $(NAME).spec \
|
||||
--define "_sourcedir $$PWD/" \
|
||||
--define "_srcrpmdir $(outdir)"
|
||||
|
||||
rpms: $(DIR)/$(SRPM)
|
||||
mock $(addprefix --addrepo=, $($(TARGET)_repos)) \
|
||||
--enable-network \
|
||||
-r $(TARGET) $<
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
%global debug_package %{nil}
|
||||
|
||||
Name: jellyfin-web
|
||||
Version: 10.8.0
|
||||
Release: 2%{?dist}
|
||||
Summary: The Free Software Media System web client
|
||||
License: GPLv2
|
||||
URL: https://jellyfin.org
|
||||
# Jellyfin Server tarball created by `make -f .copr/Makefile srpm`, real URL ends with `v%%{version}.tar.gz`
|
||||
Source0: jellyfin-web-%{version}.tar.gz
|
||||
|
||||
BuildArch: noarch
|
||||
%if 0%{?rhel} > 0 && 0%{?rhel} < 8
|
||||
BuildRequires: nodejs
|
||||
%else
|
||||
BuildRequires: git
|
||||
# Nodejs 20 is required and npm >= 10 should bring in NodeJS 20
|
||||
# This requires the build environment to use the nodejs:20 module stream:
|
||||
# dnf module {install|switch-to}:web nodejs:20
|
||||
BuildRequires: npm >= 10
|
||||
%endif
|
||||
|
||||
%description
|
||||
Jellyfin is a free software media system that puts you in control of managing and streaming your media.
|
||||
|
||||
|
||||
%prep
|
||||
%autosetup -n jellyfin-web-%{version} -b 0
|
||||
|
||||
%if 0%{?rhel} > 0 && 0%{?rhel} < 8
|
||||
# Required for CentOS build
|
||||
chown root:root -R .
|
||||
%endif
|
||||
|
||||
|
||||
%build
|
||||
npm ci --no-audit --unsafe-perm
|
||||
npm run build:production
|
||||
|
||||
|
||||
%install
|
||||
%{__mkdir} -p %{buildroot}%{_libdir}/jellyfin/jellyfin-web
|
||||
%{__cp} -r dist/* %{buildroot}%{_libdir}/jellyfin/jellyfin-web
|
||||
|
||||
|
||||
%files
|
||||
%defattr(644,root,root,755)
|
||||
%{_libdir}/jellyfin/jellyfin-web
|
||||
%license LICENSE
|
||||
|
||||
|
||||
%changelog
|
||||
* Fri Dec 04 2020 Jellyfin Packaging Team <packaging@jellyfin.org>
|
||||
- Forthcoming stable release
|
||||
* Mon Jul 27 2020 Jellyfin Packaging Team <packaging@jellyfin.org>
|
||||
- Forthcoming stable release
|
||||
* Mon Mar 23 2020 Jellyfin Packaging Team <packaging@jellyfin.org>
|
||||
- Forthcoming stable release
|
||||
999
package-lock.json
generated
999
package-lock.json
generated
File diff suppressed because it is too large
Load diff
21
package.json
21
package.json
|
|
@ -12,12 +12,12 @@
|
|||
"@babel/preset-env": "7.23.8",
|
||||
"@babel/preset-react": "7.23.3",
|
||||
"@types/escape-html": "1.0.4",
|
||||
"@types/loadable__component": "5.13.8",
|
||||
"@types/loadable__component": "5.13.9",
|
||||
"@types/lodash-es": "4.17.12",
|
||||
"@types/markdown-it": "13.0.7",
|
||||
"@types/react": "17.0.75",
|
||||
"@types/react-dom": "17.0.25",
|
||||
"@types/sortablejs": "1.15.7",
|
||||
"@types/sortablejs": "1.15.8",
|
||||
"@typescript-eslint/eslint-plugin": "5.62.0",
|
||||
"@typescript-eslint/parser": "5.62.0",
|
||||
"@uupaa/dynamic-import-polyfill": "1.0.2",
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
"copy-webpack-plugin": "12.0.2",
|
||||
"cross-env": "7.0.3",
|
||||
"css-loader": "6.9.1",
|
||||
"cssnano": "6.0.3",
|
||||
"cssnano": "6.0.5",
|
||||
"es-check": "7.1.1",
|
||||
"eslint": "8.56.0",
|
||||
"eslint-plugin-compat": "4.2.0",
|
||||
|
|
@ -70,7 +70,7 @@
|
|||
"worker-loader": "3.0.8"
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/react": "11.11.3",
|
||||
"@emotion/react": "11.11.4",
|
||||
"@emotion/styled": "11.11.0",
|
||||
"@fontsource/noto-sans": "5.0.18",
|
||||
"@fontsource/noto-sans-hk": "5.0.17",
|
||||
|
|
@ -78,14 +78,15 @@
|
|||
"@fontsource/noto-sans-kr": "5.0.17",
|
||||
"@fontsource/noto-sans-sc": "5.0.17",
|
||||
"@fontsource/noto-sans-tc": "5.0.17",
|
||||
"@jellyfin/sdk": "unstable",
|
||||
"@jellyfin/sdk": "0.0.0-unstable.202403180216",
|
||||
"@loadable/component": "5.16.3",
|
||||
"@mui/icons-material": "5.15.5",
|
||||
"@mui/material": "5.15.5",
|
||||
"@mui/x-data-grid": "6.18.7",
|
||||
"@mui/icons-material": "5.15.11",
|
||||
"@mui/material": "5.15.11",
|
||||
"@mui/x-data-grid": "6.19.5",
|
||||
"@react-hook/resize-observer": "1.2.6",
|
||||
"@tanstack/react-query": "4.36.1",
|
||||
"@tanstack/react-query-devtools": "4.36.1",
|
||||
"@types/react-lazy-load-image-component": "1.6.3",
|
||||
"abortcontroller-polyfill": "1.7.5",
|
||||
"blurhash": "2.0.5",
|
||||
"classlist.js": "https://github.com/eligrey/classList.js/archive/1.2.20180112.tar.gz",
|
||||
|
|
@ -100,7 +101,7 @@
|
|||
"flv.js": "1.6.2",
|
||||
"headroom.js": "0.12.0",
|
||||
"history": "5.3.0",
|
||||
"hls.js": "1.5.1",
|
||||
"hls.js": "1.5.7",
|
||||
"intersection-observer": "0.12.2",
|
||||
"jassub": "1.7.15",
|
||||
"jellyfin-apiclient": "1.11.0",
|
||||
|
|
@ -113,7 +114,9 @@
|
|||
"native-promise-only": "0.8.1",
|
||||
"pdfjs-dist": "3.11.174",
|
||||
"react": "17.0.2",
|
||||
"react-blurhash": "0.3.0",
|
||||
"react-dom": "17.0.2",
|
||||
"react-lazy-load-image-component": "1.6.0",
|
||||
"react-router-dom": "6.21.3",
|
||||
"resize-observer-polyfill": "1.5.1",
|
||||
"screenfull": "6.0.2",
|
||||
|
|
|
|||
|
|
@ -1,26 +1,15 @@
|
|||
import { Devices, Analytics, Input, ExpandLess, ExpandMore } from '@mui/icons-material';
|
||||
import Collapse from '@mui/material/Collapse';
|
||||
import { Devices, Analytics, Input } from '@mui/icons-material';
|
||||
import List from '@mui/material/List';
|
||||
import ListItem from '@mui/material/ListItem';
|
||||
import ListItemIcon from '@mui/material/ListItemIcon';
|
||||
import ListItemText from '@mui/material/ListItemText';
|
||||
import ListSubheader from '@mui/material/ListSubheader';
|
||||
import React from 'react';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
|
||||
import ListItemLink from 'components/ListItemLink';
|
||||
import globalize from 'scripts/globalize';
|
||||
|
||||
const DLNA_PATHS = [
|
||||
'/dashboard/dlna',
|
||||
'/dashboard/dlna/profiles'
|
||||
];
|
||||
|
||||
const DevicesDrawerSection = () => {
|
||||
const location = useLocation();
|
||||
|
||||
const isDlnaSectionOpen = DLNA_PATHS.includes(location.pathname);
|
||||
|
||||
return (
|
||||
<List
|
||||
aria-labelledby='devices-subheader'
|
||||
|
|
@ -47,24 +36,13 @@ const DevicesDrawerSection = () => {
|
|||
</ListItemLink>
|
||||
</ListItem>
|
||||
<ListItem disablePadding>
|
||||
<ListItemLink to='/dashboard/dlna' selected={false}>
|
||||
<ListItemLink to='/dashboard/dlna'>
|
||||
<ListItemIcon>
|
||||
<Input />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={'DLNA'} />
|
||||
{isDlnaSectionOpen ? <ExpandLess /> : <ExpandMore />}
|
||||
</ListItemLink>
|
||||
</ListItem>
|
||||
<Collapse in={isDlnaSectionOpen} timeout='auto' unmountOnExit>
|
||||
<List component='div' disablePadding>
|
||||
<ListItemLink to='/dashboard/dlna' sx={{ pl: 4 }}>
|
||||
<ListItemText inset primary={globalize.translate('Settings')} />
|
||||
</ListItemLink>
|
||||
<ListItemLink to='/dashboard/dlna/profiles' sx={{ pl: 4 }}>
|
||||
<ListItemText inset primary={globalize.translate('TabProfiles')} />
|
||||
</ListItemLink>
|
||||
</List>
|
||||
</Collapse>
|
||||
</List>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import { AsyncRouteType, type AsyncRoute } from 'components/router/AsyncRoute';
|
|||
|
||||
export const ASYNC_ADMIN_ROUTES: AsyncRoute[] = [
|
||||
{ path: 'activity', type: AsyncRouteType.Dashboard },
|
||||
{ path: 'dlna', type: AsyncRouteType.Dashboard },
|
||||
{ path: 'notifications', type: AsyncRouteType.Dashboard },
|
||||
{ path: 'users', type: AsyncRouteType.Dashboard },
|
||||
{ path: 'users/access', type: AsyncRouteType.Dashboard },
|
||||
|
|
|
|||
|
|
@ -31,24 +31,6 @@ export const LEGACY_ADMIN_ROUTES: LegacyRoute[] = [
|
|||
controller: 'dashboard/devices/device',
|
||||
view: 'dashboard/devices/device.html'
|
||||
}
|
||||
}, {
|
||||
path: 'dlna/profiles/edit',
|
||||
pageProps: {
|
||||
controller: 'dashboard/dlna/profile',
|
||||
view: 'dashboard/dlna/profile.html'
|
||||
}
|
||||
}, {
|
||||
path: 'dlna/profiles',
|
||||
pageProps: {
|
||||
controller: 'dashboard/dlna/profiles',
|
||||
view: 'dashboard/dlna/profiles.html'
|
||||
}
|
||||
}, {
|
||||
path: 'dlna',
|
||||
pageProps: {
|
||||
controller: 'dashboard/dlna/settings',
|
||||
view: 'dashboard/dlna/settings.html'
|
||||
}
|
||||
}, {
|
||||
path: 'plugins/add',
|
||||
pageProps: {
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@ export const REDIRECTS: Redirect[] = [
|
|||
{ from: 'dashboardgeneral.html', to: '/dashboard/settings' },
|
||||
{ from: 'device.html', to: '/dashboard/devices/edit' },
|
||||
{ from: 'devices.html', to: '/dashboard/devices' },
|
||||
{ from: 'dlnaprofile.html', to: '/dashboard/dlna/profiles/edit' },
|
||||
{ from: 'dlnaprofiles.html', to: '/dashboard/dlna/profiles' },
|
||||
{ from: 'dlnaprofile.html', to: '/dashboard/dlna' },
|
||||
{ from: 'dlnaprofiles.html', to: '/dashboard/dlna' },
|
||||
{ from: 'dlnasettings.html', to: '/dashboard/dlna' },
|
||||
{ from: 'edititemmetadata.html', to: '/metadata' },
|
||||
{ from: 'encodingsettings.html', to: '/dashboard/playback/transcoding' },
|
||||
|
|
|
|||
33
src/apps/dashboard/routes/dlna.tsx
Normal file
33
src/apps/dashboard/routes/dlna.tsx
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
import Alert from '@mui/material/Alert/Alert';
|
||||
import Box from '@mui/material/Box/Box';
|
||||
import Button from '@mui/material/Button/Button';
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import Page from 'components/Page';
|
||||
import globalize from 'scripts/globalize';
|
||||
|
||||
const DlnaPage = () => (
|
||||
<Page
|
||||
id='dlnaSettingsPage'
|
||||
title='DLNA'
|
||||
className='mainAnimatedPage type-interior'
|
||||
>
|
||||
<div className='content-primary'>
|
||||
<h2>DLNA</h2>
|
||||
<Alert severity='info'>
|
||||
<Box sx={{ marginBottom: 2 }}>
|
||||
{globalize.translate('DlnaMovedMessage')}
|
||||
</Box>
|
||||
<Button
|
||||
component={Link}
|
||||
to='/dashboard/plugins/add?name=DLNA&guid=33eba9cd7da14720967fdd7dae7b74a1'
|
||||
>
|
||||
{globalize.translate('GetThePlugin')}
|
||||
</Button>
|
||||
</Alert>
|
||||
</div>
|
||||
</Page>
|
||||
);
|
||||
|
||||
export default DlnaPage;
|
||||
|
|
@ -1,23 +1,13 @@
|
|||
import Alert from '@mui/material/Alert/Alert';
|
||||
import Box from '@mui/material/Box/Box';
|
||||
import Button from '@mui/material/Button/Button';
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import Page from 'components/Page';
|
||||
import globalize from 'scripts/globalize';
|
||||
|
||||
const PluginLink = () => (
|
||||
<div
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `<a
|
||||
is='emby-linkbutton'
|
||||
class='button-link'
|
||||
href='#/dashboard/plugins/add?name=Webhook&guid=71552a5a5c5c4350a2aeebe451a30173'
|
||||
>
|
||||
${globalize.translate('GetThePlugin')}
|
||||
</a>`
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
const Notifications = () => (
|
||||
const NotificationsPage = () => (
|
||||
<Page
|
||||
id='notificationSettingPage'
|
||||
title={globalize.translate('Notifications')}
|
||||
|
|
@ -25,12 +15,20 @@ const Notifications = () => (
|
|||
>
|
||||
<div className='content-primary'>
|
||||
<h2>{globalize.translate('Notifications')}</h2>
|
||||
<p>
|
||||
{globalize.translate('NotificationsMovedMessage')}
|
||||
</p>
|
||||
<PluginLink />
|
||||
|
||||
<Alert severity='info'>
|
||||
<Box sx={{ marginBottom: 2 }}>
|
||||
{globalize.translate('NotificationsMovedMessage')}
|
||||
</Box>
|
||||
<Button
|
||||
component={Link}
|
||||
to='/dashboard/plugins/add?name=Webhook&guid=71552a5a5c5c4350a2aeebe451a30173'
|
||||
>
|
||||
{globalize.translate('GetThePlugin')}
|
||||
</Button>
|
||||
</Alert>
|
||||
</div>
|
||||
</Page>
|
||||
);
|
||||
|
||||
export default Notifications;
|
||||
export default NotificationsPage;
|
||||
|
|
|
|||
|
|
@ -49,6 +49,7 @@ const UserProfiles: FunctionComponent = () => {
|
|||
const showUserMenu = (elem: HTMLElement) => {
|
||||
const card = dom.parentWithClass(elem, 'card');
|
||||
const userId = card?.getAttribute('data-userid');
|
||||
const username = card?.getAttribute('data-username');
|
||||
|
||||
if (!userId) {
|
||||
console.error('Unexpected null user id');
|
||||
|
|
@ -106,7 +107,7 @@ const UserProfiles: FunctionComponent = () => {
|
|||
break;
|
||||
|
||||
case 'delete':
|
||||
deleteUser(userId);
|
||||
deleteUser(userId, username);
|
||||
}
|
||||
}
|
||||
}).catch(() => {
|
||||
|
|
@ -117,12 +118,13 @@ const UserProfiles: FunctionComponent = () => {
|
|||
});
|
||||
};
|
||||
|
||||
const deleteUser = (id: string) => {
|
||||
const msg = globalize.translate('DeleteUserConfirmation');
|
||||
const deleteUser = (id: string, username?: string | null) => {
|
||||
const title = username ? globalize.translate('DeleteName', username) : globalize.translate('DeleteUser');
|
||||
const text = globalize.translate('DeleteUserConfirmation');
|
||||
|
||||
confirm({
|
||||
title: globalize.translate('DeleteUser'),
|
||||
text: msg,
|
||||
title,
|
||||
text,
|
||||
confirmText: globalize.translate('Delete'),
|
||||
primary: 'delete'
|
||||
}).then(function () {
|
||||
|
|
|
|||
|
|
@ -182,6 +182,7 @@ const UserEdit: FunctionComponent = () => {
|
|||
(page.querySelector('.chkDisabled') as HTMLInputElement).checked = user.Policy.IsDisabled;
|
||||
(page.querySelector('.chkIsHidden') as HTMLInputElement).checked = user.Policy.IsHidden;
|
||||
(page.querySelector('.chkEnableCollectionManagement') as HTMLInputElement).checked = user.Policy.EnableCollectionManagement;
|
||||
(page.querySelector('.chkEnableSubtitleManagement') as HTMLInputElement).checked = user.Policy.EnableSubtitleManagement;
|
||||
(page.querySelector('.chkRemoteControlSharedDevices') as HTMLInputElement).checked = user.Policy.EnableSharedDeviceControl;
|
||||
(page.querySelector('.chkEnableRemoteControlOtherUsers') as HTMLInputElement).checked = user.Policy.EnableRemoteControlOfOtherUsers;
|
||||
(page.querySelector('.chkEnableDownloading') as HTMLInputElement).checked = user.Policy.EnableContentDownloading;
|
||||
|
|
@ -240,6 +241,7 @@ const UserEdit: FunctionComponent = () => {
|
|||
user.Policy.EnableVideoPlaybackTranscoding = (page.querySelector('.chkEnableVideoPlaybackTranscoding') as HTMLInputElement).checked;
|
||||
user.Policy.EnablePlaybackRemuxing = (page.querySelector('.chkEnableVideoPlaybackRemuxing') as HTMLInputElement).checked;
|
||||
user.Policy.EnableCollectionManagement = (page.querySelector('.chkEnableCollectionManagement') as HTMLInputElement).checked;
|
||||
user.Policy.EnableSubtitleManagement = (page.querySelector('.chkEnableSubtitleManagement') as HTMLInputElement).checked;
|
||||
user.Policy.ForceRemoteSourceTranscoding = (page.querySelector('.chkForceRemoteSourceTranscoding') as HTMLInputElement).checked;
|
||||
user.Policy.EnableContentDownloading = (page.querySelector('.chkEnableDownloading') as HTMLInputElement).checked;
|
||||
user.Policy.EnableRemoteAccess = (page.querySelector('.chkRemoteAccess') as HTMLInputElement).checked;
|
||||
|
|
@ -392,6 +394,11 @@ const UserEdit: FunctionComponent = () => {
|
|||
className='chkEnableCollectionManagement'
|
||||
title='AllowCollectionManagement'
|
||||
/>
|
||||
<CheckBoxElement
|
||||
labelClassName='checkboxContainer'
|
||||
className='chkEnableSubtitleManagement'
|
||||
title='AllowSubtitleManagement'
|
||||
/>
|
||||
<div id='featureAccessFields' className='verticalSection'>
|
||||
<h2 className='paperListLabel'>
|
||||
{globalize.translate('HeaderFeatureAccess')}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
|
||||
import type { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
|
||||
import type { CollectionType } from '@jellyfin/sdk/lib/generated-client/models/collection-type';
|
||||
import React, { FC } from 'react';
|
||||
import { useGetGenres } from 'hooks/useFetchItems';
|
||||
import globalize from 'scripts/globalize';
|
||||
import Loading from 'components/loading/LoadingComponent';
|
||||
import GenresSectionContainer from './GenresSectionContainer';
|
||||
import { CollectionType } from '@jellyfin/sdk/lib/generated-client/models/collection-type';
|
||||
import { ParentId } from 'types/library';
|
||||
import type { ParentId } from 'types/library';
|
||||
|
||||
interface GenresItemsContainerProps {
|
||||
parentId: ParentId;
|
||||
|
|
|
|||
|
|
@ -1,18 +1,17 @@
|
|||
import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
|
||||
import { CollectionType } from '@jellyfin/sdk/lib/generated-client/models/collection-type';
|
||||
import { ItemFields } from '@jellyfin/sdk/lib/generated-client/models/item-fields';
|
||||
import { ImageType } from '@jellyfin/sdk/lib/generated-client/models/image-type';
|
||||
import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
|
||||
import { ItemSortBy } from '@jellyfin/sdk/lib/models/api/item-sort-by';
|
||||
import { SortOrder } from '@jellyfin/sdk/lib/generated-client/models/sort-order';
|
||||
import escapeHTML from 'escape-html';
|
||||
import React, { FC } from 'react';
|
||||
|
||||
import React, { type FC } from 'react';
|
||||
import { useGetItems } from 'hooks/useFetchItems';
|
||||
import Loading from 'components/loading/LoadingComponent';
|
||||
import { appRouter } from 'components/router/appRouter';
|
||||
import SectionContainer from './SectionContainer';
|
||||
import { CollectionType } from '@jellyfin/sdk/lib/generated-client/models/collection-type';
|
||||
import { ParentId } from 'types/library';
|
||||
import { CardShape } from 'utils/card';
|
||||
import type { ParentId } from 'types/library';
|
||||
|
||||
interface GenresSectionContainerProps {
|
||||
parentId: ParentId;
|
||||
|
|
@ -60,7 +59,7 @@ const GenresSectionContainer: FC<GenresSectionContainerProps> = ({
|
|||
}
|
||||
|
||||
return <SectionContainer
|
||||
sectionTitle={escapeHTML(genre.Name)}
|
||||
sectionTitle={genre.Name || ''}
|
||||
items={itemsResult?.Items || []}
|
||||
url={getRouteUrl(genre)}
|
||||
cardOptions={{
|
||||
|
|
@ -69,7 +68,7 @@ const GenresSectionContainer: FC<GenresSectionContainerProps> = ({
|
|||
showTitle: true,
|
||||
centerText: true,
|
||||
cardLayout: false,
|
||||
shape: collectionType === CollectionType.Music ? 'overflowSquare' : 'overflowPortrait',
|
||||
shape: collectionType === CollectionType.Music ? CardShape.SquareOverflow : CardShape.PortraitOverflow,
|
||||
showParentTitle: collectionType === CollectionType.Music,
|
||||
showYear: collectionType !== CollectionType.Music
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
|
||||
import type { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
|
||||
import type { CollectionType } from '@jellyfin/sdk/lib/generated-client/models/collection-type';
|
||||
import React, { FC } from 'react';
|
||||
import GenresItemsContainer from './GenresItemsContainer';
|
||||
import { ParentId } from 'types/library';
|
||||
import { CollectionType } from '@jellyfin/sdk/lib/generated-client/models/collection-type';
|
||||
import type { ParentId } from 'types/library';
|
||||
|
||||
interface GenresViewProps {
|
||||
parentId: ParentId;
|
||||
|
|
|
|||
|
|
@ -1,17 +1,16 @@
|
|||
import type { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
|
||||
import { CollectionType } from '@jellyfin/sdk/lib/generated-client/models/collection-type';
|
||||
import { ImageType } from '@jellyfin/sdk/lib/generated-client';
|
||||
import { ItemSortBy } from '@jellyfin/sdk/lib/models/api/item-sort-by';
|
||||
import React, { FC, useCallback } from 'react';
|
||||
import React, { type FC, useCallback } from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import classNames from 'classnames';
|
||||
import { useLocalStorage } from 'hooks/useLocalStorage';
|
||||
import { useGetItem, useGetItemsViewByType } from 'hooks/useFetchItems';
|
||||
import { getDefaultLibraryViewSettings, getSettingsKey } from 'utils/items';
|
||||
import { CardShape } from 'utils/card';
|
||||
import Loading from 'components/loading/LoadingComponent';
|
||||
import listview from 'components/listview/listview';
|
||||
import cardBuilder from 'components/cardbuilder/cardBuilder';
|
||||
import { playbackManager } from 'components/playback/playbackmanager';
|
||||
import globalize from 'scripts/globalize';
|
||||
import ItemsContainer from 'elements/emby-itemscontainer/ItemsContainer';
|
||||
import AlphabetPicker from './AlphabetPicker';
|
||||
import FilterButton from './filter/FilterButton';
|
||||
|
|
@ -22,12 +21,13 @@ import QueueButton from './QueueButton';
|
|||
import ShuffleButton from './ShuffleButton';
|
||||
import SortButton from './SortButton';
|
||||
import GridListViewButton from './GridListViewButton';
|
||||
import { LibraryViewSettings, ParentId, ViewMode } from 'types/library';
|
||||
import { CollectionType } from '@jellyfin/sdk/lib/generated-client/models/collection-type';
|
||||
import NoItemsMessage from 'components/common/NoItemsMessage';
|
||||
import Lists from 'components/listview/List/Lists';
|
||||
import Cards from 'components/cardbuilder/Card/Cards';
|
||||
import { LibraryTab } from 'types/libraryTab';
|
||||
|
||||
import { CardOptions } from 'types/cardOptions';
|
||||
import { ListOptions } from 'types/listOptions';
|
||||
import { type LibraryViewSettings, type ParentId, ViewMode } from 'types/library';
|
||||
import type { CardOptions } from 'types/cardOptions';
|
||||
import type { ListOptions } from 'types/listOptions';
|
||||
|
||||
interface ItemsViewProps {
|
||||
viewType: LibraryTab;
|
||||
|
|
@ -110,18 +110,18 @@ const ItemsView: FC<ItemsViewProps> = ({
|
|||
let preferLogo;
|
||||
|
||||
if (libraryViewSettings.ImageType === ImageType.Banner) {
|
||||
shape = 'banner';
|
||||
shape = CardShape.Banner;
|
||||
} else if (libraryViewSettings.ImageType === ImageType.Disc) {
|
||||
shape = 'square';
|
||||
shape = CardShape.Square;
|
||||
preferDisc = true;
|
||||
} else if (libraryViewSettings.ImageType === ImageType.Logo) {
|
||||
shape = 'backdrop';
|
||||
shape = CardShape.Backdrop;
|
||||
preferLogo = true;
|
||||
} else if (libraryViewSettings.ImageType === ImageType.Thumb) {
|
||||
shape = 'backdrop';
|
||||
shape = CardShape.Backdrop;
|
||||
preferThumb = true;
|
||||
} else {
|
||||
shape = 'auto';
|
||||
shape = CardShape.Auto;
|
||||
}
|
||||
|
||||
const cardOptions: CardOptions = {
|
||||
|
|
@ -135,9 +135,9 @@ const ItemsView: FC<ItemsViewProps> = ({
|
|||
preferThumb: preferThumb,
|
||||
preferDisc: preferDisc,
|
||||
preferLogo: preferLogo,
|
||||
overlayPlayButton: false,
|
||||
overlayMoreButton: true,
|
||||
overlayText: !libraryViewSettings.ShowTitle
|
||||
overlayText: !libraryViewSettings.ShowTitle,
|
||||
imageType: libraryViewSettings.ImageType,
|
||||
queryKey: ['ItemsViewByType']
|
||||
};
|
||||
|
||||
if (
|
||||
|
|
@ -146,20 +146,26 @@ const ItemsView: FC<ItemsViewProps> = ({
|
|||
|| viewType === LibraryTab.Episodes
|
||||
) {
|
||||
cardOptions.showParentTitle = libraryViewSettings.ShowTitle;
|
||||
cardOptions.overlayPlayButton = true;
|
||||
} else if (viewType === LibraryTab.Artists) {
|
||||
cardOptions.lines = 1;
|
||||
cardOptions.showYear = false;
|
||||
cardOptions.overlayPlayButton = true;
|
||||
} else if (viewType === LibraryTab.Channels) {
|
||||
cardOptions.shape = 'square';
|
||||
cardOptions.shape = CardShape.Square;
|
||||
cardOptions.showDetailsMenu = true;
|
||||
cardOptions.showCurrentProgram = true;
|
||||
cardOptions.showCurrentProgramTime = true;
|
||||
} else if (viewType === LibraryTab.SeriesTimers) {
|
||||
cardOptions.defaultShape = 'portrait';
|
||||
cardOptions.preferThumb = 'auto';
|
||||
cardOptions.shape = CardShape.Backdrop;
|
||||
cardOptions.showSeriesTimerTime = true;
|
||||
cardOptions.showSeriesTimerChannel = true;
|
||||
cardOptions.overlayMoreButton = true;
|
||||
cardOptions.lines = 3;
|
||||
} else if (viewType === LibraryTab.Movies) {
|
||||
cardOptions.overlayPlayButton = true;
|
||||
} else if (viewType === LibraryTab.Series || viewType === LibraryTab.Networks) {
|
||||
cardOptions.overlayMoreButton = true;
|
||||
}
|
||||
|
||||
return cardOptions;
|
||||
|
|
@ -172,27 +178,32 @@ const ItemsView: FC<ItemsViewProps> = ({
|
|||
viewType
|
||||
]);
|
||||
|
||||
const getItemsHtml = useCallback(() => {
|
||||
let html = '';
|
||||
const getItems = useCallback(() => {
|
||||
if (!itemsResult?.Items?.length) {
|
||||
return <NoItemsMessage noItemsMessage={noItemsMessage} />;
|
||||
}
|
||||
|
||||
if (libraryViewSettings.ViewMode === ViewMode.ListView) {
|
||||
html = listview.getListViewHtml(getListOptions());
|
||||
} else {
|
||||
html = cardBuilder.getCardsHtml(
|
||||
itemsResult?.Items ?? [],
|
||||
getCardOptions()
|
||||
return (
|
||||
<Lists
|
||||
items={itemsResult?.Items ?? []}
|
||||
listOptions={getListOptions()}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (!itemsResult?.Items?.length) {
|
||||
html += '<div class="noItemsMessage centerMessage">';
|
||||
html += '<h1>' + globalize.translate('MessageNothingHere') + '</h1>';
|
||||
html += '<p>' + globalize.translate(noItemsMessage) + '</p>';
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
return html;
|
||||
}, [libraryViewSettings.ViewMode, itemsResult?.Items, getListOptions, getCardOptions, noItemsMessage]);
|
||||
return (
|
||||
<Cards
|
||||
items={itemsResult?.Items ?? []}
|
||||
cardOptions={getCardOptions()}
|
||||
/>
|
||||
);
|
||||
}, [
|
||||
libraryViewSettings.ViewMode,
|
||||
itemsResult?.Items,
|
||||
getListOptions,
|
||||
getCardOptions,
|
||||
noItemsMessage
|
||||
]);
|
||||
|
||||
const totalRecordCount = itemsResult?.TotalRecordCount ?? 0;
|
||||
const items = itemsResult?.Items ?? [];
|
||||
|
|
@ -289,8 +300,10 @@ const ItemsView: FC<ItemsViewProps> = ({
|
|||
className={itemsContainerClass}
|
||||
parentId={parentId}
|
||||
reloadItems={refetch}
|
||||
getItemsHtml={getItemsHtml}
|
||||
/>
|
||||
queryKey={['ItemsViewByType']}
|
||||
>
|
||||
{getItems()}
|
||||
</ItemsContainer>
|
||||
)}
|
||||
|
||||
{isPaginationEnabled && (
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
import React, { FC } from 'react';
|
||||
import React, { type FC } from 'react';
|
||||
import SuggestionsSectionView from './SuggestionsSectionView';
|
||||
import UpcomingView from './UpcomingView';
|
||||
import GenresView from './GenresView';
|
||||
import ItemsView from './ItemsView';
|
||||
import { LibraryTab } from 'types/libraryTab';
|
||||
import { ParentId } from 'types/library';
|
||||
import { LibraryTabContent } from 'types/libraryTabContent';
|
||||
import GuideView from './GuideView';
|
||||
import ProgramsSectionView from './ProgramsSectionView';
|
||||
import { LibraryTab } from 'types/libraryTab';
|
||||
import type { ParentId } from 'types/library';
|
||||
import type { LibraryTabContent } from 'types/libraryTabContent';
|
||||
|
||||
interface PageTabContentProps {
|
||||
parentId: ParentId;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
import React, { FC } from 'react';
|
||||
import React, { type FC } from 'react';
|
||||
import { useGetProgramsSectionsWithItems, useGetTimers } from 'hooks/useFetchItems';
|
||||
import { appRouter } from 'components/router/appRouter';
|
||||
import globalize from 'scripts/globalize';
|
||||
import Loading from 'components/loading/LoadingComponent';
|
||||
import SectionContainer from './SectionContainer';
|
||||
import { ParentId } from 'types/library';
|
||||
import { Section, SectionType } from 'types/sections';
|
||||
import { CardShape } from 'utils/card';
|
||||
import type { ParentId } from 'types/library';
|
||||
import type { Section, SectionType } from 'types/sections';
|
||||
|
||||
interface ProgramsSectionViewProps {
|
||||
parentId: ParentId;
|
||||
|
|
@ -18,7 +19,7 @@ const ProgramsSectionView: FC<ProgramsSectionViewProps> = ({
|
|||
sectionType,
|
||||
isUpcomingRecordingsEnabled = false
|
||||
}) => {
|
||||
const { isLoading, data: sectionsWithItems } = useGetProgramsSectionsWithItems(parentId, sectionType);
|
||||
const { isLoading, data: sectionsWithItems, refetch } = useGetProgramsSectionsWithItems(parentId, sectionType);
|
||||
const {
|
||||
isLoading: isUpcomingRecordingsLoading,
|
||||
data: upcomingRecordings
|
||||
|
|
@ -60,8 +61,10 @@ const ProgramsSectionView: FC<ProgramsSectionViewProps> = ({
|
|||
sectionTitle={globalize.translate(section.name)}
|
||||
items={items ?? []}
|
||||
url={getRouteUrl(section)}
|
||||
reloadItems={refetch}
|
||||
cardOptions={{
|
||||
...section.cardOptions
|
||||
...section.cardOptions,
|
||||
queryKey: ['ProgramSectionWithItems']
|
||||
}}
|
||||
/>
|
||||
|
||||
|
|
@ -73,7 +76,8 @@ const ProgramsSectionView: FC<ProgramsSectionViewProps> = ({
|
|||
sectionTitle={group.name}
|
||||
items={group.timerInfo ?? []}
|
||||
cardOptions={{
|
||||
shape: 'overflowBackdrop',
|
||||
queryKey: ['Timers'],
|
||||
shape: CardShape.BackdropOverflow,
|
||||
showTitle: true,
|
||||
showParentTitleOrTitle: true,
|
||||
showAirTime: true,
|
||||
|
|
|
|||
|
|
@ -1,43 +1,29 @@
|
|||
import type { BaseItemDto, TimerInfoDto } from '@jellyfin/sdk/lib/generated-client';
|
||||
import React, { FC, useEffect, useRef } from 'react';
|
||||
import React, { FC } from 'react';
|
||||
|
||||
import cardBuilder from 'components/cardbuilder/cardBuilder';
|
||||
import ItemsContainer from 'elements/emby-itemscontainer/ItemsContainer';
|
||||
import Scroller from 'elements/emby-scroller/Scroller';
|
||||
import LinkButton from 'elements/emby-button/LinkButton';
|
||||
import imageLoader from 'components/images/imageLoader';
|
||||
|
||||
import { CardOptions } from 'types/cardOptions';
|
||||
import Cards from 'components/cardbuilder/Card/Cards';
|
||||
import type { CardOptions } from 'types/cardOptions';
|
||||
|
||||
interface SectionContainerProps {
|
||||
url?: string;
|
||||
sectionTitle: string;
|
||||
items: BaseItemDto[] | TimerInfoDto[];
|
||||
cardOptions: CardOptions;
|
||||
reloadItems?: () => void;
|
||||
}
|
||||
|
||||
const SectionContainer: FC<SectionContainerProps> = ({
|
||||
sectionTitle,
|
||||
url,
|
||||
items,
|
||||
cardOptions
|
||||
cardOptions,
|
||||
reloadItems
|
||||
}) => {
|
||||
const element = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const itemsContainer = element.current?.querySelector('.itemsContainer');
|
||||
cardBuilder.buildCards(items, {
|
||||
itemsContainer: itemsContainer,
|
||||
parentContainer: element.current,
|
||||
|
||||
...cardOptions
|
||||
});
|
||||
|
||||
imageLoader.lazyChildren(itemsContainer);
|
||||
}, [cardOptions, items]);
|
||||
|
||||
return (
|
||||
<div ref={element} className='verticalSection hide'>
|
||||
<div className='verticalSection'>
|
||||
<div className='sectionTitleContainer sectionTitleContainer-cards padded-left'>
|
||||
{url && items.length > 5 ? (
|
||||
<LinkButton
|
||||
|
|
@ -66,7 +52,11 @@ const SectionContainer: FC<SectionContainerProps> = ({
|
|||
>
|
||||
<ItemsContainer
|
||||
className='itemsContainer scrollSlider focuscontainer-x'
|
||||
/>
|
||||
reloadItems={reloadItems}
|
||||
queryKey={cardOptions.queryKey}
|
||||
>
|
||||
<Cards items={items} cardOptions={cardOptions} />
|
||||
</ItemsContainer>
|
||||
</Scroller>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
import {
|
||||
RecommendationDto,
|
||||
type RecommendationDto,
|
||||
RecommendationType
|
||||
} from '@jellyfin/sdk/lib/generated-client';
|
||||
import React, { FC } from 'react';
|
||||
import escapeHTML from 'escape-html';
|
||||
import React, { type FC } from 'react';
|
||||
import {
|
||||
useGetMovieRecommendations,
|
||||
useGetSuggestionSectionsWithItems
|
||||
|
|
@ -12,8 +11,9 @@ import { appRouter } from 'components/router/appRouter';
|
|||
import globalize from 'scripts/globalize';
|
||||
import Loading from 'components/loading/LoadingComponent';
|
||||
import SectionContainer from './SectionContainer';
|
||||
import { ParentId } from 'types/library';
|
||||
import { Section, SectionType } from 'types/sections';
|
||||
import { CardShape } from 'utils/card';
|
||||
import type { ParentId } from 'types/library';
|
||||
import type { Section, SectionType } from 'types/sections';
|
||||
|
||||
interface SuggestionsSectionViewProps {
|
||||
parentId: ParentId;
|
||||
|
|
@ -89,7 +89,7 @@ const SuggestionsSectionView: FC<SuggestionsSectionViewProps> = ({
|
|||
);
|
||||
break;
|
||||
}
|
||||
return escapeHTML(title);
|
||||
return title;
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
@ -102,6 +102,7 @@ const SuggestionsSectionView: FC<SuggestionsSectionViewProps> = ({
|
|||
url={getRouteUrl(section)}
|
||||
cardOptions={{
|
||||
...section.cardOptions,
|
||||
queryKey: ['SuggestionSectionWithItems'],
|
||||
showTitle: true,
|
||||
centerText: true,
|
||||
cardLayout: false,
|
||||
|
|
@ -117,7 +118,8 @@ const SuggestionsSectionView: FC<SuggestionsSectionViewProps> = ({
|
|||
sectionTitle={getRecommendationTittle(recommendation)}
|
||||
items={recommendation.Items ?? []}
|
||||
cardOptions={{
|
||||
shape: 'overflowPortrait',
|
||||
queryKey: ['MovieRecommendations'],
|
||||
shape: CardShape.PortraitOverflow,
|
||||
showYear: true,
|
||||
scalable: true,
|
||||
overlayPlayButton: true,
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
import React, { FC } from 'react';
|
||||
import React, { type FC } from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import { useGetGroupsUpcomingEpisodes } from 'hooks/useFetchItems';
|
||||
import Loading from 'components/loading/LoadingComponent';
|
||||
import globalize from 'scripts/globalize';
|
||||
import SectionContainer from './SectionContainer';
|
||||
import { LibraryViewProps } from 'types/library';
|
||||
import { CardShape } from 'utils/card';
|
||||
import type { LibraryViewProps } from 'types/library';
|
||||
|
||||
const UpcomingView: FC<LibraryViewProps> = ({ parentId }) => {
|
||||
const { isLoading, data: groupsUpcomingEpisodes } = useGetGroupsUpcomingEpisodes(parentId);
|
||||
|
|
@ -29,7 +30,7 @@ const UpcomingView: FC<LibraryViewProps> = ({ parentId }) => {
|
|||
sectionTitle={group.name}
|
||||
items={group.items ?? []}
|
||||
cardOptions={{
|
||||
shape: 'overflowBackdrop',
|
||||
shape: CardShape.BackdropOverflow,
|
||||
showLocationTypeIndicator: false,
|
||||
showParentTitle: true,
|
||||
preferThumb: true,
|
||||
|
|
|
|||
25
src/components/cardbuilder/Card/Card.tsx
Normal file
25
src/components/cardbuilder/Card/Card.tsx
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
import React, { type FC } from 'react';
|
||||
import useCard from './useCard';
|
||||
import CardWrapper from './CardWrapper';
|
||||
import CardBox from './CardBox';
|
||||
|
||||
import type { CardOptions } from 'types/cardOptions';
|
||||
import type { ItemDto } from 'types/base/models/item-dto';
|
||||
|
||||
interface CardProps {
|
||||
item?: ItemDto;
|
||||
cardOptions: CardOptions;
|
||||
}
|
||||
|
||||
const Card: FC<CardProps> = ({ item = {}, cardOptions }) => {
|
||||
const { getCardWrapperProps, getCardBoxProps } = useCard({ item, cardOptions } );
|
||||
const cardWrapperProps = getCardWrapperProps();
|
||||
const cardBoxProps = getCardBoxProps();
|
||||
return (
|
||||
<CardWrapper {...cardWrapperProps}>
|
||||
<CardBox {...cardBoxProps} />
|
||||
</CardWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default Card;
|
||||
78
src/components/cardbuilder/Card/CardBox.tsx
Normal file
78
src/components/cardbuilder/Card/CardBox.tsx
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
import React, { type FC } from 'react';
|
||||
import layoutManager from 'components/layoutManager';
|
||||
|
||||
import CardOverlayButtons from './CardOverlayButtons';
|
||||
import CardHoverMenu from './CardHoverMenu';
|
||||
import CardOuterFooter from './CardOuterFooter';
|
||||
import CardContent from './CardContent';
|
||||
import { CardShape } from 'utils/card';
|
||||
import type { ItemDto } from 'types/base/models/item-dto';
|
||||
import type { CardOptions } from 'types/cardOptions';
|
||||
|
||||
interface CardBoxProps {
|
||||
item: ItemDto;
|
||||
cardOptions: CardOptions;
|
||||
className: string;
|
||||
shape: CardShape | undefined;
|
||||
imgUrl: string | undefined;
|
||||
blurhash: string | undefined;
|
||||
forceName: boolean;
|
||||
coveredImage: boolean;
|
||||
overlayText: boolean | undefined;
|
||||
}
|
||||
|
||||
const CardBox: FC<CardBoxProps> = ({
|
||||
item,
|
||||
cardOptions,
|
||||
className,
|
||||
shape,
|
||||
imgUrl,
|
||||
blurhash,
|
||||
forceName,
|
||||
coveredImage,
|
||||
overlayText
|
||||
}) => {
|
||||
return (
|
||||
<div className={className}>
|
||||
<div className='cardScalable'>
|
||||
<div className={`cardPadder cardPadder-${shape}`}></div>
|
||||
<CardContent
|
||||
item={item}
|
||||
cardOptions={cardOptions}
|
||||
coveredImage={coveredImage}
|
||||
|
||||
overlayText={overlayText}
|
||||
imgUrl={imgUrl}
|
||||
blurhash={blurhash}
|
||||
forceName={forceName}
|
||||
/>
|
||||
{layoutManager.mobile && (
|
||||
<CardOverlayButtons
|
||||
item={item}
|
||||
cardOptions={cardOptions}
|
||||
/>
|
||||
)}
|
||||
|
||||
{layoutManager.desktop
|
||||
&& !cardOptions.disableHoverMenu && (
|
||||
<CardHoverMenu
|
||||
item={item}
|
||||
cardOptions={cardOptions}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{!overlayText && (
|
||||
<CardOuterFooter
|
||||
item={item}
|
||||
cardOptions={cardOptions}
|
||||
forceName={forceName}
|
||||
overlayText={overlayText}
|
||||
imgUrl={imgUrl}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CardBox;
|
||||
|
||||
50
src/components/cardbuilder/Card/CardContent.tsx
Normal file
50
src/components/cardbuilder/Card/CardContent.tsx
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
import React, { type FC } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { getDefaultBackgroundClass } from '../cardBuilderUtils';
|
||||
import CardImageContainer from './CardImageContainer';
|
||||
|
||||
import type { ItemDto } from 'types/base/models/item-dto';
|
||||
import type { CardOptions } from 'types/cardOptions';
|
||||
|
||||
interface CardContentProps {
|
||||
item: ItemDto;
|
||||
cardOptions: CardOptions;
|
||||
coveredImage: boolean;
|
||||
overlayText: boolean | undefined;
|
||||
imgUrl: string | undefined;
|
||||
blurhash: string | undefined;
|
||||
forceName: boolean;
|
||||
}
|
||||
|
||||
const CardContent: FC<CardContentProps> = ({
|
||||
item,
|
||||
cardOptions,
|
||||
coveredImage,
|
||||
overlayText,
|
||||
imgUrl,
|
||||
blurhash,
|
||||
forceName
|
||||
}) => {
|
||||
const cardContentClass = classNames(
|
||||
'cardContent',
|
||||
{ [getDefaultBackgroundClass(item.Name)]: !imgUrl }
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cardContentClass}
|
||||
>
|
||||
<CardImageContainer
|
||||
item={item}
|
||||
cardOptions={cardOptions}
|
||||
coveredImage={coveredImage}
|
||||
overlayText={overlayText}
|
||||
imgUrl={imgUrl}
|
||||
blurhash={blurhash}
|
||||
forceName={forceName}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CardContent;
|
||||
87
src/components/cardbuilder/Card/CardFooterText.tsx
Normal file
87
src/components/cardbuilder/Card/CardFooterText.tsx
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
import React, { type FC } from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import useCardText from './useCardText';
|
||||
import layoutManager from 'components/layoutManager';
|
||||
import MoreVertIconButton from '../../common/MoreVertIconButton';
|
||||
import type { ItemDto } from 'types/base/models/item-dto';
|
||||
import type { CardOptions } from 'types/cardOptions';
|
||||
import Image from 'components/common/Image';
|
||||
|
||||
const shouldShowDetailsMenu = (
|
||||
cardOptions: CardOptions,
|
||||
isOuterFooter: boolean
|
||||
) => {
|
||||
return (
|
||||
cardOptions.showDetailsMenu
|
||||
&& isOuterFooter
|
||||
&& cardOptions.cardLayout
|
||||
&& layoutManager.mobile
|
||||
&& cardOptions.cardFooterAside !== 'none'
|
||||
);
|
||||
};
|
||||
|
||||
interface LogoComponentProps {
|
||||
logoUrl: string;
|
||||
}
|
||||
|
||||
const LogoComponent: FC<LogoComponentProps> = ({ logoUrl }) => (
|
||||
<Box className='cardFooterLogo'>
|
||||
<Image
|
||||
imgUrl={logoUrl}
|
||||
containImage
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
|
||||
interface CardFooterTextProps {
|
||||
item: ItemDto;
|
||||
cardOptions: CardOptions;
|
||||
forceName: boolean;
|
||||
overlayText: boolean | undefined;
|
||||
imgUrl: string | undefined;
|
||||
footerClass: string | undefined;
|
||||
progressBar?: React.JSX.Element | null;
|
||||
logoUrl?: string;
|
||||
isOuterFooter: boolean;
|
||||
}
|
||||
|
||||
const CardFooterText: FC<CardFooterTextProps> = ({
|
||||
item,
|
||||
cardOptions,
|
||||
forceName,
|
||||
imgUrl,
|
||||
footerClass,
|
||||
overlayText,
|
||||
progressBar,
|
||||
logoUrl,
|
||||
isOuterFooter
|
||||
}) => {
|
||||
const { cardTextLines } = useCardText({
|
||||
item: item.ProgramInfo || item,
|
||||
cardOptions,
|
||||
forceName,
|
||||
imgUrl,
|
||||
overlayText,
|
||||
isOuterFooter,
|
||||
cssClass: cardOptions.centerText ?
|
||||
'cardText cardTextCentered' :
|
||||
'cardText',
|
||||
forceLines: !cardOptions.overlayText,
|
||||
maxLines: cardOptions.lines
|
||||
});
|
||||
|
||||
return (
|
||||
<Box className={footerClass}>
|
||||
{logoUrl && <LogoComponent logoUrl={logoUrl} />}
|
||||
{shouldShowDetailsMenu(cardOptions, isOuterFooter) && (
|
||||
<MoreVertIconButton className='itemAction btnCardOptions' />
|
||||
)}
|
||||
|
||||
{cardTextLines}
|
||||
|
||||
{progressBar}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default CardFooterText;
|
||||
82
src/components/cardbuilder/Card/CardHoverMenu.tsx
Normal file
82
src/components/cardbuilder/Card/CardHoverMenu.tsx
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
import React, { type FC } from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import ButtonGroup from '@mui/material/ButtonGroup';
|
||||
import classNames from 'classnames';
|
||||
import { appRouter } from 'components/router/appRouter';
|
||||
import itemHelper from 'components/itemHelper';
|
||||
import { playbackManager } from 'components/playback/playbackmanager';
|
||||
|
||||
import PlayedButton from 'elements/emby-playstatebutton/PlayedButton';
|
||||
import FavoriteButton from 'elements/emby-ratingbutton/FavoriteButton';
|
||||
import PlayArrowIconButton from '../../common/PlayArrowIconButton';
|
||||
import MoreVertIconButton from '../../common/MoreVertIconButton';
|
||||
|
||||
import type { ItemDto } from 'types/base/models/item-dto';
|
||||
import type { CardOptions } from 'types/cardOptions';
|
||||
|
||||
interface CardHoverMenuProps {
|
||||
item: ItemDto;
|
||||
cardOptions: CardOptions;
|
||||
}
|
||||
|
||||
const CardHoverMenu: FC<CardHoverMenuProps> = ({
|
||||
item,
|
||||
cardOptions
|
||||
}) => {
|
||||
const url = appRouter.getRouteUrl(item, {
|
||||
parentId: cardOptions.parentId
|
||||
});
|
||||
const btnCssClass =
|
||||
'paper-icon-button-light cardOverlayButton cardOverlayButton-hover itemAction';
|
||||
|
||||
const centerPlayButtonClass = classNames(
|
||||
btnCssClass,
|
||||
'cardOverlayFab-primary'
|
||||
);
|
||||
const { IsFavorite, Played } = item.UserData ?? {};
|
||||
|
||||
return (
|
||||
<Box
|
||||
className='cardOverlayContainer'
|
||||
>
|
||||
<a
|
||||
href={url}
|
||||
aria-label={item.Name || ''}
|
||||
className='cardImageContainer'
|
||||
></a>
|
||||
|
||||
{playbackManager.canPlay(item) && (
|
||||
<PlayArrowIconButton
|
||||
className={centerPlayButtonClass}
|
||||
action='play'
|
||||
title='Play'
|
||||
/>
|
||||
)}
|
||||
|
||||
<ButtonGroup className='cardOverlayButton-br flex'>
|
||||
{itemHelper.canMarkPlayed(item) && cardOptions.enablePlayedButton !== false && (
|
||||
<PlayedButton
|
||||
className={btnCssClass}
|
||||
isPlayed={Played}
|
||||
itemId={item.Id}
|
||||
itemType={item.Type}
|
||||
queryKey={cardOptions.queryKey}
|
||||
/>
|
||||
)}
|
||||
|
||||
{itemHelper.canRate(item) && cardOptions.enableRatingButton !== false && (
|
||||
<FavoriteButton
|
||||
className={btnCssClass}
|
||||
isFavorite={IsFavorite}
|
||||
itemId={item.Id}
|
||||
queryKey={cardOptions.queryKey}
|
||||
/>
|
||||
)}
|
||||
|
||||
<MoreVertIconButton className={btnCssClass} />
|
||||
</ButtonGroup>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default CardHoverMenu;
|
||||
83
src/components/cardbuilder/Card/CardImageContainer.tsx
Normal file
83
src/components/cardbuilder/Card/CardImageContainer.tsx
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
|
||||
import React, { type FC } from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import classNames from 'classnames';
|
||||
import useIndicator from 'components/indicators/useIndicator';
|
||||
import RefreshIndicator from 'elements/emby-itemrefreshindicator/RefreshIndicator';
|
||||
import Media from '../../common/Media';
|
||||
import CardInnerFooter from './CardInnerFooter';
|
||||
|
||||
import type { ItemDto } from 'types/base/models/item-dto';
|
||||
import type { CardOptions } from 'types/cardOptions';
|
||||
|
||||
interface CardImageContainerProps {
|
||||
item: ItemDto;
|
||||
cardOptions: CardOptions;
|
||||
coveredImage: boolean;
|
||||
overlayText: boolean | undefined;
|
||||
imgUrl: string | undefined;
|
||||
blurhash: string | undefined;
|
||||
forceName: boolean;
|
||||
}
|
||||
|
||||
const CardImageContainer: FC<CardImageContainerProps> = ({
|
||||
item,
|
||||
cardOptions,
|
||||
coveredImage,
|
||||
overlayText,
|
||||
imgUrl,
|
||||
blurhash,
|
||||
forceName
|
||||
}) => {
|
||||
const indicator = useIndicator(item);
|
||||
const cardImageClass = classNames(
|
||||
'cardImageContainer',
|
||||
{ coveredImage: coveredImage },
|
||||
{ 'coveredImage-contain': coveredImage && item.Type === BaseItemKind.TvChannel }
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={cardImageClass}>
|
||||
{cardOptions.disableIndicators !== true && (
|
||||
<Box className='indicators'>
|
||||
{indicator.getMediaSourceIndicator()}
|
||||
|
||||
<Box className='cardIndicators'>
|
||||
{cardOptions.missingIndicator !== false
|
||||
&& indicator.getMissingIndicator()}
|
||||
|
||||
{indicator.getTimerIndicator()}
|
||||
{indicator.getTypeIndicator()}
|
||||
|
||||
{cardOptions.showGroupCount ?
|
||||
indicator.getChildCountIndicator() :
|
||||
indicator.getPlayedIndicator()}
|
||||
|
||||
{(item.Type === BaseItemKind.CollectionFolder
|
||||
|| item.CollectionType)
|
||||
&& item.RefreshProgress && (
|
||||
<RefreshIndicator item={item} />
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Media item={item} imgUrl={imgUrl} blurhash={blurhash} imageType={cardOptions.imageType} />
|
||||
|
||||
{overlayText && (
|
||||
<CardInnerFooter
|
||||
item={item}
|
||||
cardOptions={cardOptions}
|
||||
forceName={forceName}
|
||||
overlayText={overlayText}
|
||||
imgUrl={imgUrl}
|
||||
progressBar={indicator.getProgressBar()}
|
||||
/>
|
||||
)}
|
||||
|
||||
{!overlayText && indicator.getProgressBar()}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CardImageContainer;
|
||||
42
src/components/cardbuilder/Card/CardInnerFooter.tsx
Normal file
42
src/components/cardbuilder/Card/CardInnerFooter.tsx
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
import React, { type FC } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import CardFooterText from './CardFooterText';
|
||||
import type { ItemDto } from 'types/base/models/item-dto';
|
||||
import type { CardOptions } from 'types/cardOptions';
|
||||
|
||||
interface CardInnerFooterProps {
|
||||
item: ItemDto;
|
||||
cardOptions: CardOptions;
|
||||
imgUrl: string | undefined;
|
||||
progressBar?: React.JSX.Element | null;
|
||||
forceName: boolean;
|
||||
overlayText: boolean | undefined;
|
||||
}
|
||||
|
||||
const CardInnerFooter: FC<CardInnerFooterProps> = ({
|
||||
item,
|
||||
cardOptions,
|
||||
imgUrl,
|
||||
overlayText,
|
||||
progressBar,
|
||||
forceName
|
||||
}) => {
|
||||
const footerClass = classNames('innerCardFooter', {
|
||||
fullInnerCardFooter: progressBar
|
||||
});
|
||||
|
||||
return (
|
||||
<CardFooterText
|
||||
item={item}
|
||||
cardOptions={cardOptions}
|
||||
forceName={forceName}
|
||||
overlayText={overlayText}
|
||||
imgUrl={imgUrl}
|
||||
footerClass={footerClass}
|
||||
progressBar={progressBar}
|
||||
isOuterFooter={false}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default CardInnerFooter;
|
||||
45
src/components/cardbuilder/Card/CardOuterFooter.tsx
Normal file
45
src/components/cardbuilder/Card/CardOuterFooter.tsx
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
import React, { type FC } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { useApi } from 'hooks/useApi';
|
||||
import { getCardLogoUrl } from './cardHelper';
|
||||
import CardFooterText from './CardFooterText';
|
||||
|
||||
import type { ItemDto } from 'types/base/models/item-dto';
|
||||
import type { CardOptions } from 'types/cardOptions';
|
||||
|
||||
interface CardOuterFooterProps {
|
||||
item: ItemDto
|
||||
cardOptions: CardOptions;
|
||||
imgUrl: string | undefined;
|
||||
forceName: boolean;
|
||||
overlayText: boolean | undefined
|
||||
}
|
||||
|
||||
const CardOuterFooter: FC<CardOuterFooterProps> = ({ item, cardOptions, overlayText, imgUrl, forceName }) => {
|
||||
const { api } = useApi();
|
||||
const logoInfo = getCardLogoUrl(item, api, cardOptions);
|
||||
const logoUrl = logoInfo.logoUrl;
|
||||
|
||||
const footerClass = classNames(
|
||||
'cardFooter',
|
||||
{ 'cardFooter-transparent': cardOptions.cardLayout },
|
||||
{ 'cardFooter-withlogo': logoUrl }
|
||||
);
|
||||
|
||||
return (
|
||||
<CardFooterText
|
||||
item={item}
|
||||
cardOptions={cardOptions}
|
||||
forceName={forceName}
|
||||
overlayText={overlayText}
|
||||
imgUrl={imgUrl}
|
||||
footerClass={footerClass}
|
||||
progressBar={undefined}
|
||||
logoUrl={logoUrl}
|
||||
isOuterFooter={true}
|
||||
/>
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
export default CardOuterFooter;
|
||||
104
src/components/cardbuilder/Card/CardOverlayButtons.tsx
Normal file
104
src/components/cardbuilder/Card/CardOverlayButtons.tsx
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
|
||||
import { LocationType } from '@jellyfin/sdk/lib/generated-client/models/location-type';
|
||||
import React, { type FC } from 'react';
|
||||
import ButtonGroup from '@mui/material/ButtonGroup';
|
||||
import classNames from 'classnames';
|
||||
import { appRouter } from 'components/router/appRouter';
|
||||
import PlayArrowIconButton from '../../common/PlayArrowIconButton';
|
||||
import MoreVertIconButton from '../../common/MoreVertIconButton';
|
||||
|
||||
import type { ItemDto } from 'types/base/models/item-dto';
|
||||
import type { CardOptions } from 'types/cardOptions';
|
||||
|
||||
const sholudShowOverlayPlayButton = (
|
||||
overlayPlayButton: boolean | undefined,
|
||||
item: ItemDto
|
||||
) => {
|
||||
return (
|
||||
overlayPlayButton
|
||||
&& !item.IsPlaceHolder
|
||||
&& (item.LocationType !== LocationType.Virtual
|
||||
|| !item.MediaType
|
||||
|| item.Type === BaseItemKind.Program)
|
||||
&& item.Type !== BaseItemKind.Person
|
||||
);
|
||||
};
|
||||
|
||||
interface CardOverlayButtonsProps {
|
||||
item: ItemDto;
|
||||
cardOptions: CardOptions;
|
||||
}
|
||||
|
||||
const CardOverlayButtons: FC<CardOverlayButtonsProps> = ({
|
||||
item,
|
||||
cardOptions
|
||||
}) => {
|
||||
let overlayPlayButton = cardOptions.overlayPlayButton;
|
||||
|
||||
if (
|
||||
overlayPlayButton == null
|
||||
&& !cardOptions.overlayMoreButton
|
||||
&& !cardOptions.overlayInfoButton
|
||||
&& !cardOptions.cardLayout
|
||||
) {
|
||||
overlayPlayButton = item.MediaType === 'Video';
|
||||
}
|
||||
|
||||
const url = appRouter.getRouteUrl(item, {
|
||||
parentId: cardOptions.parentId
|
||||
});
|
||||
|
||||
const btnCssClass = classNames(
|
||||
'paper-icon-button-light',
|
||||
'cardOverlayButton',
|
||||
'itemAction'
|
||||
);
|
||||
|
||||
const centerPlayButtonClass = classNames(
|
||||
btnCssClass,
|
||||
'cardOverlayButton-centered'
|
||||
);
|
||||
|
||||
return (
|
||||
<a
|
||||
href={url}
|
||||
aria-label={item.Name || ''}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
userSelect: 'none',
|
||||
borderRadius: '0.2em'
|
||||
}}
|
||||
>
|
||||
|
||||
{cardOptions.centerPlayButton && (
|
||||
<PlayArrowIconButton
|
||||
className={centerPlayButtonClass}
|
||||
action='play'
|
||||
title='Play'
|
||||
/>
|
||||
)}
|
||||
|
||||
<ButtonGroup className='cardOverlayButton-br'>
|
||||
{sholudShowOverlayPlayButton(overlayPlayButton, item) && (
|
||||
<PlayArrowIconButton
|
||||
className={btnCssClass}
|
||||
action='play'
|
||||
title='Play'
|
||||
/>
|
||||
)}
|
||||
|
||||
{cardOptions.overlayMoreButton && (
|
||||
<MoreVertIconButton
|
||||
className={btnCssClass}
|
||||
/>
|
||||
)}
|
||||
</ButtonGroup>
|
||||
</a>
|
||||
);
|
||||
};
|
||||
|
||||
export default CardOverlayButtons;
|
||||
32
src/components/cardbuilder/Card/CardText.tsx
Normal file
32
src/components/cardbuilder/Card/CardText.tsx
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
import React, { type FC } from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import type { TextLine } from './cardHelper';
|
||||
|
||||
interface CardTextProps {
|
||||
className?: string;
|
||||
textLine: TextLine;
|
||||
}
|
||||
|
||||
const CardText: FC<CardTextProps> = ({ className, textLine }) => {
|
||||
const { title, titleAction } = textLine;
|
||||
const renderCardText = () => {
|
||||
if (titleAction) {
|
||||
return (
|
||||
<a
|
||||
className='itemAction textActionButton'
|
||||
href={titleAction.url}
|
||||
title={titleAction.title}
|
||||
{...titleAction.dataAttributes}
|
||||
>
|
||||
{titleAction.title}
|
||||
</a>
|
||||
);
|
||||
} else {
|
||||
return title;
|
||||
}
|
||||
};
|
||||
|
||||
return <Box className={className}>{renderCardText()}</Box>;
|
||||
};
|
||||
|
||||
export default CardText;
|
||||
30
src/components/cardbuilder/Card/CardWrapper.tsx
Normal file
30
src/components/cardbuilder/Card/CardWrapper.tsx
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
import React, { type FC } from 'react';
|
||||
import layoutManager from 'components/layoutManager';
|
||||
import type { DataAttributes } from 'types/dataAttributes';
|
||||
|
||||
interface CardWrapperProps {
|
||||
className: string;
|
||||
dataAttributes: DataAttributes;
|
||||
}
|
||||
|
||||
const CardWrapper: FC<CardWrapperProps> = ({
|
||||
className,
|
||||
dataAttributes,
|
||||
children
|
||||
}) => {
|
||||
if (layoutManager.tv) {
|
||||
return (
|
||||
<button className={className} {...dataAttributes}>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div className={className} {...dataAttributes}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default CardWrapper;
|
||||
24
src/components/cardbuilder/Card/Cards.tsx
Normal file
24
src/components/cardbuilder/Card/Cards.tsx
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
import React, { type FC } from 'react';
|
||||
import { setCardData } from '../cardBuilder';
|
||||
import Card from './Card';
|
||||
import type { ItemDto } from 'types/base/models/item-dto';
|
||||
import type { CardOptions } from 'types/cardOptions';
|
||||
import '../card.scss';
|
||||
|
||||
interface CardsProps {
|
||||
items: ItemDto[];
|
||||
cardOptions: CardOptions;
|
||||
}
|
||||
|
||||
const Cards: FC<CardsProps> = ({ items, cardOptions }) => {
|
||||
setCardData(items, cardOptions);
|
||||
|
||||
const renderCards = () =>
|
||||
items.map((item) => (
|
||||
<Card key={item.Id} item={item} cardOptions={cardOptions} />
|
||||
));
|
||||
|
||||
return <>{renderCards()}</>;
|
||||
};
|
||||
|
||||
export default Cards;
|
||||
718
src/components/cardbuilder/Card/cardHelper.ts
Normal file
718
src/components/cardbuilder/Card/cardHelper.ts
Normal file
|
|
@ -0,0 +1,718 @@
|
|||
import {
|
||||
BaseItemDto,
|
||||
BaseItemKind,
|
||||
BaseItemPerson,
|
||||
ImageType
|
||||
} from '@jellyfin/sdk/lib/generated-client';
|
||||
import { Api } from '@jellyfin/sdk';
|
||||
import { getImageApi } from '@jellyfin/sdk/lib/utils/api/image-api';
|
||||
|
||||
import { appRouter } from 'components/router/appRouter';
|
||||
import layoutManager from 'components/layoutManager';
|
||||
import itemHelper from 'components/itemHelper';
|
||||
import globalize from 'scripts/globalize';
|
||||
import datetime from 'scripts/datetime';
|
||||
|
||||
import { isUsingLiveTvNaming } from '../cardBuilderUtils';
|
||||
|
||||
import type { NullableNumber, NullableString } from 'types/base/common/shared/types';
|
||||
import type { ItemDto } from 'types/base/models/item-dto';
|
||||
import type { CardOptions } from 'types/cardOptions';
|
||||
import type { DataAttributes } from 'types/dataAttributes';
|
||||
import { getDataAttributes } from 'utils/items';
|
||||
|
||||
export function getCardLogoUrl(
|
||||
item: ItemDto,
|
||||
api: Api | undefined,
|
||||
cardOptions: CardOptions
|
||||
) {
|
||||
let imgType;
|
||||
let imgTag;
|
||||
let itemId;
|
||||
const logoHeight = 40;
|
||||
|
||||
if (cardOptions.showChannelLogo && item.ChannelPrimaryImageTag) {
|
||||
imgType = ImageType.Primary;
|
||||
imgTag = item.ChannelPrimaryImageTag;
|
||||
itemId = item.ChannelId;
|
||||
} else if (cardOptions.showLogo && item.ParentLogoImageTag) {
|
||||
imgType = ImageType.Logo;
|
||||
imgTag = item.ParentLogoImageTag;
|
||||
itemId = item.ParentLogoItemId;
|
||||
}
|
||||
|
||||
if (!itemId) {
|
||||
itemId = item.Id;
|
||||
}
|
||||
|
||||
if (api && imgTag && imgType && itemId) {
|
||||
const response = getImageApi(api).getItemImageUrlById(itemId, imgType, {
|
||||
height: logoHeight,
|
||||
tag: imgTag
|
||||
});
|
||||
|
||||
return {
|
||||
logoUrl: response
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
logoUrl: undefined
|
||||
};
|
||||
}
|
||||
|
||||
interface TextAction {
|
||||
url: string;
|
||||
title: string;
|
||||
dataAttributes: DataAttributes
|
||||
}
|
||||
|
||||
export interface TextLine {
|
||||
title?: NullableString;
|
||||
titleAction?: TextAction;
|
||||
}
|
||||
|
||||
export function getTextActionButton(
|
||||
item: ItemDto,
|
||||
text?: NullableString,
|
||||
serverId?: NullableString
|
||||
): TextLine {
|
||||
const title = text || itemHelper.getDisplayName(item);
|
||||
|
||||
if (layoutManager.tv) {
|
||||
return {
|
||||
title
|
||||
};
|
||||
}
|
||||
|
||||
const url = appRouter.getRouteUrl(item);
|
||||
|
||||
const dataAttributes = getDataAttributes(
|
||||
{
|
||||
action: 'link',
|
||||
itemServerId: serverId ?? item.ServerId,
|
||||
itemId: item.Id,
|
||||
itemChannelId: item.ChannelId,
|
||||
itemType: item.Type,
|
||||
itemMediaType: item.MediaType,
|
||||
itemCollectionType: item.CollectionType,
|
||||
itemIsFolder: item.IsFolder
|
||||
}
|
||||
);
|
||||
|
||||
return {
|
||||
titleAction: {
|
||||
url,
|
||||
title,
|
||||
dataAttributes
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export function getAirTimeText(
|
||||
item: ItemDto,
|
||||
showAirDateTime: boolean | undefined,
|
||||
showAirEndTime: boolean | undefined
|
||||
) {
|
||||
let airTimeText = '';
|
||||
|
||||
if (item.StartDate) {
|
||||
try {
|
||||
let date = datetime.parseISO8601Date(item.StartDate);
|
||||
|
||||
if (showAirDateTime) {
|
||||
airTimeText
|
||||
+= datetime.toLocaleDateString(date, {
|
||||
weekday: 'short',
|
||||
month: 'short',
|
||||
day: 'numeric'
|
||||
}) + ' ';
|
||||
}
|
||||
|
||||
airTimeText += datetime.getDisplayTime(date);
|
||||
|
||||
if (item.EndDate && showAirEndTime) {
|
||||
date = datetime.parseISO8601Date(item.EndDate);
|
||||
airTimeText += ' - ' + datetime.getDisplayTime(date);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('error parsing date: ' + item.StartDate);
|
||||
}
|
||||
}
|
||||
return airTimeText;
|
||||
}
|
||||
|
||||
function isGenreOrStudio(itemType: NullableString) {
|
||||
return itemType === BaseItemKind.Genre || itemType === BaseItemKind.Studio;
|
||||
}
|
||||
|
||||
function isMusicGenreOrMusicArtist(
|
||||
itemType: NullableString,
|
||||
context: NullableString
|
||||
) {
|
||||
return itemType === BaseItemKind.MusicGenre || context === 'MusicArtist';
|
||||
}
|
||||
|
||||
function getMovieCount(itemMovieCount: NullableNumber) {
|
||||
if (itemMovieCount) {
|
||||
return itemMovieCount === 1 ?
|
||||
globalize.translate('ValueOneMovie') :
|
||||
globalize.translate('ValueMovieCount', itemMovieCount);
|
||||
}
|
||||
}
|
||||
|
||||
function getSeriesCount(itemSeriesCount: NullableNumber) {
|
||||
if (itemSeriesCount) {
|
||||
return itemSeriesCount === 1 ?
|
||||
globalize.translate('ValueOneSeries') :
|
||||
globalize.translate('ValueSeriesCount', itemSeriesCount);
|
||||
}
|
||||
}
|
||||
|
||||
function getEpisodeCount(itemEpisodeCount: NullableNumber) {
|
||||
if (itemEpisodeCount) {
|
||||
return itemEpisodeCount === 1 ?
|
||||
globalize.translate('ValueOneEpisode') :
|
||||
globalize.translate('ValueEpisodeCount', itemEpisodeCount);
|
||||
}
|
||||
}
|
||||
|
||||
function getAlbumCount(itemAlbumCount: NullableNumber) {
|
||||
if (itemAlbumCount) {
|
||||
return itemAlbumCount === 1 ?
|
||||
globalize.translate('ValueOneAlbum') :
|
||||
globalize.translate('ValueAlbumCount', itemAlbumCount);
|
||||
}
|
||||
}
|
||||
|
||||
function getSongCount(itemSongCount: NullableNumber) {
|
||||
if (itemSongCount) {
|
||||
return itemSongCount === 1 ?
|
||||
globalize.translate('ValueOneSong') :
|
||||
globalize.translate('ValueSongCount', itemSongCount);
|
||||
}
|
||||
}
|
||||
|
||||
function getMusicVideoCount(itemMusicVideoCount: NullableNumber) {
|
||||
if (itemMusicVideoCount) {
|
||||
return itemMusicVideoCount === 1 ?
|
||||
globalize.translate('ValueOneMusicVideo') :
|
||||
globalize.translate('ValueMusicVideoCount', itemMusicVideoCount);
|
||||
}
|
||||
}
|
||||
|
||||
function getRecursiveItemCount(itemRecursiveItemCount: NullableNumber) {
|
||||
return itemRecursiveItemCount === 1 ?
|
||||
globalize.translate('ValueOneEpisode') :
|
||||
globalize.translate('ValueEpisodeCount', itemRecursiveItemCount);
|
||||
}
|
||||
|
||||
function getParentTitle(
|
||||
isOuterFooter: boolean,
|
||||
serverId: NullableString,
|
||||
item: ItemDto
|
||||
) {
|
||||
if (isOuterFooter && item.AlbumArtists?.length) {
|
||||
(item.AlbumArtists[0] as BaseItemDto).Type = BaseItemKind.MusicArtist;
|
||||
(item.AlbumArtists[0] as BaseItemDto).IsFolder = true;
|
||||
return getTextActionButton(item.AlbumArtists[0], null, serverId);
|
||||
} else {
|
||||
return {
|
||||
title: isUsingLiveTvNaming(item.Type) ?
|
||||
item.Name :
|
||||
item.SeriesName
|
||||
|| item.Series
|
||||
|| item.Album
|
||||
|| item.AlbumArtist
|
||||
|| ''
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function getRunTimeTicks(itemRunTimeTicks: NullableNumber) {
|
||||
if (itemRunTimeTicks) {
|
||||
let minutes = itemRunTimeTicks / 600000000;
|
||||
|
||||
minutes = minutes || 1;
|
||||
|
||||
return globalize.translate('ValueMinutes', Math.round(minutes));
|
||||
} else {
|
||||
return globalize.translate('ValueMinutes', 0);
|
||||
}
|
||||
}
|
||||
|
||||
export function getItemCounts(cardOptions: CardOptions, item: ItemDto) {
|
||||
const counts: string[] = [];
|
||||
|
||||
const addCount = (text: NullableString) => {
|
||||
if (text) {
|
||||
counts.push(text);
|
||||
}
|
||||
};
|
||||
|
||||
if (item.Type === BaseItemKind.Playlist) {
|
||||
const runTimeTicksText = getRunTimeTicks(item.RunTimeTicks);
|
||||
addCount(runTimeTicksText);
|
||||
} else if (isGenreOrStudio(item.Type)) {
|
||||
const movieCountText = getMovieCount(item.MovieCount);
|
||||
addCount(movieCountText);
|
||||
|
||||
const seriesCountText = getSeriesCount(item.SeriesCount);
|
||||
addCount(seriesCountText);
|
||||
|
||||
const episodeCountText = getEpisodeCount(item.EpisodeCount);
|
||||
addCount(episodeCountText);
|
||||
} else if (isMusicGenreOrMusicArtist(item.Type, cardOptions.context)) {
|
||||
const albumCountText = getAlbumCount(item.AlbumCount);
|
||||
addCount(albumCountText);
|
||||
|
||||
const songCountText = getSongCount(item.SongCount);
|
||||
addCount(songCountText);
|
||||
|
||||
const musicVideoCountText = getMusicVideoCount(item.MusicVideoCount);
|
||||
addCount(musicVideoCountText);
|
||||
} else if (item.Type === BaseItemKind.Series) {
|
||||
const recursiveItemCountText = getRecursiveItemCount(
|
||||
item.RecursiveItemCount
|
||||
);
|
||||
addCount(recursiveItemCountText);
|
||||
}
|
||||
|
||||
return counts.join(', ');
|
||||
}
|
||||
|
||||
export function shouldShowTitle(
|
||||
showTitle: boolean | string | undefined,
|
||||
itemType: NullableString
|
||||
) {
|
||||
return (
|
||||
Boolean(showTitle)
|
||||
|| itemType === BaseItemKind.PhotoAlbum
|
||||
|| itemType === BaseItemKind.Folder
|
||||
);
|
||||
}
|
||||
|
||||
export function shouldShowOtherText(
|
||||
isOuterFooter: boolean,
|
||||
overlayText: boolean | undefined
|
||||
) {
|
||||
return isOuterFooter ? !overlayText : overlayText;
|
||||
}
|
||||
|
||||
export function shouldShowParentTitleUnderneath(
|
||||
itemType: NullableString
|
||||
) {
|
||||
return (
|
||||
itemType === BaseItemKind.MusicAlbum
|
||||
|| itemType === BaseItemKind.Audio
|
||||
|| itemType === BaseItemKind.MusicVideo
|
||||
);
|
||||
}
|
||||
|
||||
function shouldShowMediaTitle(
|
||||
titleAdded: boolean,
|
||||
showTitle: boolean,
|
||||
forceName: boolean,
|
||||
cardOptions: CardOptions,
|
||||
textLines: TextLine[]
|
||||
) {
|
||||
let showMediaTitle =
|
||||
(showTitle && !titleAdded)
|
||||
|| (cardOptions.showParentTitleOrTitle && !textLines.length);
|
||||
if (!showMediaTitle && !titleAdded && (showTitle || forceName)) {
|
||||
showMediaTitle = true;
|
||||
}
|
||||
return showMediaTitle;
|
||||
}
|
||||
|
||||
function shouldShowExtraType(itemExtraType: NullableString) {
|
||||
return itemExtraType && itemExtraType !== 'Unknown';
|
||||
}
|
||||
|
||||
function shouldShowSeriesYearOrYear(
|
||||
showYear: string | boolean | undefined,
|
||||
showSeriesYear: boolean | undefined
|
||||
) {
|
||||
return Boolean(showYear) || showSeriesYear;
|
||||
}
|
||||
|
||||
function shouldShowCurrentProgram(
|
||||
showCurrentProgram: boolean | undefined,
|
||||
itemType: NullableString
|
||||
) {
|
||||
return showCurrentProgram && itemType === BaseItemKind.TvChannel;
|
||||
}
|
||||
|
||||
function shouldShowCurrentProgramTime(
|
||||
showCurrentProgramTime: boolean | undefined,
|
||||
itemType: NullableString
|
||||
) {
|
||||
return showCurrentProgramTime && itemType === BaseItemKind.TvChannel;
|
||||
}
|
||||
|
||||
function shouldShowPersonRoleOrType(
|
||||
showPersonRoleOrType: boolean | undefined,
|
||||
item: ItemDto
|
||||
) {
|
||||
return showPersonRoleOrType && (item as BaseItemPerson).Role;
|
||||
}
|
||||
|
||||
function shouldShowParentTitle(
|
||||
showParentTitle: boolean | undefined,
|
||||
parentTitleUnderneath: boolean
|
||||
) {
|
||||
return showParentTitle && parentTitleUnderneath;
|
||||
}
|
||||
|
||||
function addOtherText(
|
||||
cardOptions: CardOptions,
|
||||
parentTitleUnderneath: boolean,
|
||||
isOuterFooter: boolean,
|
||||
item: ItemDto,
|
||||
addTextLine: (val: TextLine) => void,
|
||||
serverId: NullableString
|
||||
) {
|
||||
if (
|
||||
shouldShowParentTitle(
|
||||
cardOptions.showParentTitle,
|
||||
parentTitleUnderneath
|
||||
)
|
||||
) {
|
||||
addTextLine(getParentTitle(isOuterFooter, serverId, item));
|
||||
}
|
||||
|
||||
if (shouldShowExtraType(item.ExtraType)) {
|
||||
addTextLine({ title: globalize.translate(item.ExtraType) });
|
||||
}
|
||||
|
||||
if (cardOptions.showItemCounts) {
|
||||
addTextLine({ title: getItemCounts(cardOptions, item) });
|
||||
}
|
||||
|
||||
if (cardOptions.textLines) {
|
||||
addTextLine({ title: getAdditionalLines(cardOptions.textLines, item) });
|
||||
}
|
||||
|
||||
if (cardOptions.showSongCount) {
|
||||
addTextLine({ title: getSongCount(item.SongCount) });
|
||||
}
|
||||
|
||||
if (cardOptions.showPremiereDate) {
|
||||
addTextLine({ title: getPremiereDate(item.PremiereDate) });
|
||||
}
|
||||
|
||||
if (
|
||||
shouldShowSeriesYearOrYear(
|
||||
cardOptions.showYear,
|
||||
cardOptions.showSeriesYear
|
||||
)
|
||||
) {
|
||||
addTextLine({ title: getProductionYear(item) });
|
||||
}
|
||||
|
||||
if (cardOptions.showRuntime) {
|
||||
addTextLine({ title: getRunTime(item.RunTimeTicks) });
|
||||
}
|
||||
|
||||
if (cardOptions.showAirTime) {
|
||||
addTextLine({
|
||||
title: getAirTimeText(
|
||||
item,
|
||||
cardOptions.showAirDateTime,
|
||||
cardOptions.showAirEndTime
|
||||
)
|
||||
});
|
||||
}
|
||||
|
||||
if (cardOptions.showChannelName) {
|
||||
addTextLine(getChannelName(item));
|
||||
}
|
||||
|
||||
if (shouldShowCurrentProgram(cardOptions.showCurrentProgram, item.Type)) {
|
||||
addTextLine({ title: getCurrentProgramName(item.CurrentProgram) });
|
||||
}
|
||||
|
||||
if (
|
||||
shouldShowCurrentProgramTime(
|
||||
cardOptions.showCurrentProgramTime,
|
||||
item.Type
|
||||
)
|
||||
) {
|
||||
addTextLine({ title: getCurrentProgramTime(item.CurrentProgram) });
|
||||
}
|
||||
|
||||
if (cardOptions.showSeriesTimerTime) {
|
||||
addTextLine({ title: getSeriesTimerTime(item) });
|
||||
}
|
||||
|
||||
if (cardOptions.showSeriesTimerChannel) {
|
||||
addTextLine({ title: getSeriesTimerChannel(item) });
|
||||
}
|
||||
|
||||
if (shouldShowPersonRoleOrType(cardOptions.showCurrentProgramTime, item)) {
|
||||
addTextLine({
|
||||
title: globalize.translate(
|
||||
'PersonRole',
|
||||
(item as BaseItemPerson).Role
|
||||
)
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function getSeriesTimerChannel(item: ItemDto) {
|
||||
if (item.RecordAnyChannel) {
|
||||
return globalize.translate('AllChannels');
|
||||
} else {
|
||||
return item.ChannelName || '' || globalize.translate('OneChannel');
|
||||
}
|
||||
}
|
||||
|
||||
function getSeriesTimerTime(item: ItemDto) {
|
||||
if (item.RecordAnyTime) {
|
||||
return globalize.translate('Anytime');
|
||||
} else {
|
||||
return datetime.getDisplayTime(item.StartDate);
|
||||
}
|
||||
}
|
||||
|
||||
function getCurrentProgramTime(CurrentProgram: BaseItemDto | undefined) {
|
||||
if (CurrentProgram) {
|
||||
return getAirTimeText(CurrentProgram, false, true) || '';
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
function getCurrentProgramName(CurrentProgram: BaseItemDto | undefined) {
|
||||
if (CurrentProgram) {
|
||||
return CurrentProgram.Name;
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
function getChannelName(item: ItemDto) {
|
||||
if (item.ChannelId) {
|
||||
return getTextActionButton(
|
||||
{
|
||||
Id: item.ChannelId,
|
||||
ServerId: item.ServerId,
|
||||
Name: item.ChannelName,
|
||||
Type: BaseItemKind.TvChannel,
|
||||
MediaType: item.MediaType,
|
||||
IsFolder: false
|
||||
},
|
||||
item.ChannelName
|
||||
);
|
||||
} else {
|
||||
return { title: item.ChannelName || '\u00A0' };
|
||||
}
|
||||
}
|
||||
|
||||
function getRunTime(itemRunTimeTicks: NullableNumber) {
|
||||
if (itemRunTimeTicks) {
|
||||
return datetime.getDisplayRunningTime(itemRunTimeTicks);
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
function getPremiereDate(PremiereDate: string | null | undefined) {
|
||||
if (PremiereDate) {
|
||||
try {
|
||||
return datetime.toLocaleDateString(
|
||||
datetime.parseISO8601Date(PremiereDate),
|
||||
{ weekday: 'long', month: 'long', day: 'numeric' }
|
||||
);
|
||||
} catch (err) {
|
||||
return '';
|
||||
}
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
function getAdditionalLines(
|
||||
textLines: (item: ItemDto) => (string | undefined)[],
|
||||
item: ItemDto
|
||||
) {
|
||||
const additionalLines = textLines(item);
|
||||
for (const additionalLine of additionalLines) {
|
||||
return additionalLine;
|
||||
}
|
||||
}
|
||||
|
||||
function getProductionYear(item: ItemDto) {
|
||||
const productionYear =
|
||||
item.ProductionYear
|
||||
&& datetime.toLocaleString(item.ProductionYear, {
|
||||
useGrouping: false
|
||||
});
|
||||
if (item.Type === BaseItemKind.Series) {
|
||||
if (item.Status === 'Continuing') {
|
||||
return globalize.translate(
|
||||
'SeriesYearToPresent',
|
||||
productionYear || ''
|
||||
);
|
||||
} else if (item.EndDate && item.ProductionYear) {
|
||||
const endYear = datetime.toLocaleString(
|
||||
datetime.parseISO8601Date(item.EndDate).getFullYear(),
|
||||
{ useGrouping: false }
|
||||
);
|
||||
return (
|
||||
productionYear
|
||||
+ (endYear === productionYear ? '' : ' - ' + endYear)
|
||||
);
|
||||
} else {
|
||||
return productionYear || '';
|
||||
}
|
||||
} else {
|
||||
return productionYear || '';
|
||||
}
|
||||
}
|
||||
|
||||
function getMediaTitle(cardOptions: CardOptions, item: ItemDto): TextLine {
|
||||
const name =
|
||||
cardOptions.showTitle === 'auto'
|
||||
&& !item.IsFolder
|
||||
&& item.MediaType === 'Photo' ?
|
||||
'' :
|
||||
itemHelper.getDisplayName(item, {
|
||||
includeParentInfo: cardOptions.includeParentInfoInTitle
|
||||
});
|
||||
|
||||
return getTextActionButton({
|
||||
Id: item.Id,
|
||||
ServerId: item.ServerId,
|
||||
Name: name,
|
||||
Type: item.Type,
|
||||
CollectionType: item.CollectionType,
|
||||
IsFolder: item.IsFolder
|
||||
});
|
||||
}
|
||||
|
||||
function getParentTitleOrTitle(
|
||||
isOuterFooter: boolean,
|
||||
item: ItemDto,
|
||||
setTitleAdded: (val: boolean) => void,
|
||||
showTitle: boolean
|
||||
): TextLine {
|
||||
if (
|
||||
isOuterFooter
|
||||
&& item.Type === BaseItemKind.Episode
|
||||
&& item.SeriesName
|
||||
) {
|
||||
if (item.SeriesId) {
|
||||
return getTextActionButton({
|
||||
Id: item.SeriesId,
|
||||
ServerId: item.ServerId,
|
||||
Name: item.SeriesName,
|
||||
Type: BaseItemKind.Series,
|
||||
IsFolder: true
|
||||
});
|
||||
} else {
|
||||
return { title: item.SeriesName };
|
||||
}
|
||||
} else if (isUsingLiveTvNaming(item.Type)) {
|
||||
if (!item.EpisodeTitle && !item.IndexNumber) {
|
||||
setTitleAdded(true);
|
||||
}
|
||||
return { title: item.Name };
|
||||
} else {
|
||||
const parentTitle =
|
||||
item.SeriesName
|
||||
|| item.Series
|
||||
|| item.Album
|
||||
|| item.AlbumArtist
|
||||
|| '';
|
||||
|
||||
if (parentTitle || showTitle) {
|
||||
return { title: parentTitle };
|
||||
}
|
||||
|
||||
return { title: '' };
|
||||
}
|
||||
}
|
||||
|
||||
interface TextLinesOpts {
|
||||
isOuterFooter: boolean;
|
||||
overlayText: boolean | undefined;
|
||||
forceName: boolean;
|
||||
item: ItemDto;
|
||||
cardOptions: CardOptions;
|
||||
imgUrl: string | undefined;
|
||||
}
|
||||
|
||||
export function getCardTextLines({
|
||||
isOuterFooter,
|
||||
overlayText,
|
||||
forceName,
|
||||
item,
|
||||
cardOptions,
|
||||
imgUrl
|
||||
}: TextLinesOpts) {
|
||||
const showTitle = shouldShowTitle(cardOptions.showTitle, item.Type);
|
||||
const showOtherText = shouldShowOtherText(isOuterFooter, overlayText);
|
||||
const serverId = item.ServerId || cardOptions.serverId;
|
||||
let textLines: TextLine[] = [];
|
||||
const parentTitleUnderneath = shouldShowParentTitleUnderneath(item.Type);
|
||||
|
||||
let titleAdded = false;
|
||||
const addTextLine = (val: TextLine) => {
|
||||
textLines.push(val);
|
||||
};
|
||||
|
||||
const setTitleAdded = (val: boolean) => {
|
||||
titleAdded = val;
|
||||
};
|
||||
|
||||
if (
|
||||
showOtherText
|
||||
&& (cardOptions.showParentTitle || cardOptions.showParentTitleOrTitle)
|
||||
&& !parentTitleUnderneath
|
||||
) {
|
||||
addTextLine(
|
||||
getParentTitleOrTitle(isOuterFooter, item, setTitleAdded, showTitle)
|
||||
);
|
||||
}
|
||||
|
||||
const showMediaTitle = shouldShowMediaTitle(
|
||||
titleAdded,
|
||||
showTitle,
|
||||
forceName,
|
||||
cardOptions,
|
||||
textLines
|
||||
);
|
||||
|
||||
if (showMediaTitle) {
|
||||
addTextLine(getMediaTitle(cardOptions, item));
|
||||
}
|
||||
|
||||
if (showOtherText) {
|
||||
addOtherText(
|
||||
cardOptions,
|
||||
parentTitleUnderneath,
|
||||
isOuterFooter,
|
||||
item,
|
||||
addTextLine,
|
||||
serverId
|
||||
);
|
||||
}
|
||||
|
||||
if (
|
||||
(showTitle || !imgUrl)
|
||||
&& forceName
|
||||
&& overlayText
|
||||
&& textLines.length === 1
|
||||
) {
|
||||
textLines = [];
|
||||
}
|
||||
|
||||
if (overlayText && showTitle) {
|
||||
textLines = [{ title: item.Name }];
|
||||
}
|
||||
|
||||
return {
|
||||
textLines
|
||||
};
|
||||
}
|
||||
123
src/components/cardbuilder/Card/useCard.ts
Normal file
123
src/components/cardbuilder/Card/useCard.ts
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
|
||||
import classNames from 'classnames';
|
||||
import useCardImageUrl from './useCardImageUrl';
|
||||
import {
|
||||
resolveAction,
|
||||
resolveMixedShapeByAspectRatio
|
||||
} from '../cardBuilderUtils';
|
||||
import { getDataAttributes } from 'utils/items';
|
||||
import { CardShape } from 'utils/card';
|
||||
import layoutManager from 'components/layoutManager';
|
||||
|
||||
import type { ItemDto } from 'types/base/models/item-dto';
|
||||
import type { CardOptions } from 'types/cardOptions';
|
||||
|
||||
interface UseCardProps {
|
||||
item: ItemDto;
|
||||
cardOptions: CardOptions;
|
||||
}
|
||||
|
||||
function useCard({ item, cardOptions }: UseCardProps) {
|
||||
const action = resolveAction({
|
||||
defaultAction: cardOptions.action ?? 'link',
|
||||
isFolder: item.IsFolder ?? false,
|
||||
isPhoto: item.MediaType === 'Photo'
|
||||
});
|
||||
|
||||
let shape = cardOptions.shape;
|
||||
|
||||
if (shape === CardShape.Mixed) {
|
||||
shape = resolveMixedShapeByAspectRatio(item.PrimaryImageAspectRatio);
|
||||
}
|
||||
|
||||
const imgInfo = useCardImageUrl({
|
||||
item: item.ProgramInfo ?? item,
|
||||
cardOptions,
|
||||
shape
|
||||
});
|
||||
const imgUrl = imgInfo.imgUrl;
|
||||
const blurhash = imgInfo.blurhash;
|
||||
const forceName = imgInfo.forceName;
|
||||
const coveredImage = cardOptions.coverImage ?? imgInfo.coverImage;
|
||||
const overlayText = cardOptions.overlayText;
|
||||
|
||||
const nameWithPrefix = item.SortName ?? item.Name ?? '';
|
||||
let prefix = nameWithPrefix.substring(
|
||||
0,
|
||||
Math.min(3, nameWithPrefix.length)
|
||||
);
|
||||
|
||||
if (prefix) {
|
||||
prefix = prefix.toUpperCase();
|
||||
}
|
||||
|
||||
const dataAttributes = getDataAttributes(
|
||||
{
|
||||
action,
|
||||
itemServerId: item.ServerId ?? cardOptions.serverId,
|
||||
context: cardOptions.context,
|
||||
parentId: cardOptions.parentId,
|
||||
collectionId: cardOptions.collectionId,
|
||||
playlistId: cardOptions.playlistId,
|
||||
itemId: item.Id,
|
||||
itemTimerId: item.TimerId,
|
||||
itemSeriesTimerId: item.SeriesTimerId,
|
||||
itemChannelId: item.ChannelId,
|
||||
itemType: item.Type,
|
||||
itemMediaType: item.MediaType,
|
||||
itemCollectionType: item.CollectionType,
|
||||
itemIsFolder: item.IsFolder,
|
||||
itemPath: item.Path,
|
||||
itemStartDate: item.StartDate,
|
||||
itemEndDate: item.EndDate,
|
||||
itemUserData: item.UserData,
|
||||
prefix
|
||||
}
|
||||
);
|
||||
|
||||
const cardClass = classNames(
|
||||
'card',
|
||||
{ [`${shape}Card`]: shape },
|
||||
cardOptions.cardCssClass,
|
||||
cardOptions.cardClass,
|
||||
{ 'card-hoverable': layoutManager.desktop },
|
||||
{ groupedCard: cardOptions.showChildCountIndicator && item.ChildCount },
|
||||
{
|
||||
'card-withuserdata':
|
||||
item.Type !== BaseItemKind.MusicAlbum
|
||||
&& item.Type !== BaseItemKind.MusicArtist
|
||||
&& item.Type !== BaseItemKind.Audio
|
||||
},
|
||||
{ itemAction: layoutManager.tv }
|
||||
);
|
||||
|
||||
const cardBoxClass = classNames(
|
||||
'cardBox',
|
||||
{ visualCardBox: cardOptions.cardLayout },
|
||||
{ 'cardBox-bottompadded': !cardOptions.cardLayout }
|
||||
);
|
||||
|
||||
const getCardWrapperProps = () => ({
|
||||
className: cardClass,
|
||||
dataAttributes
|
||||
});
|
||||
|
||||
const getCardBoxProps = () => ({
|
||||
item,
|
||||
cardOptions,
|
||||
className: cardBoxClass,
|
||||
shape,
|
||||
imgUrl,
|
||||
blurhash,
|
||||
forceName,
|
||||
coveredImage,
|
||||
overlayText
|
||||
});
|
||||
|
||||
return {
|
||||
getCardWrapperProps,
|
||||
getCardBoxProps
|
||||
};
|
||||
}
|
||||
|
||||
export default useCard;
|
||||
298
src/components/cardbuilder/Card/useCardImageUrl.ts
Normal file
298
src/components/cardbuilder/Card/useCardImageUrl.ts
Normal file
|
|
@ -0,0 +1,298 @@
|
|||
import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
|
||||
import { ImageType } from '@jellyfin/sdk/lib/generated-client/models/image-type';
|
||||
import { getImageApi } from '@jellyfin/sdk/lib/utils/api/image-api';
|
||||
import { useApi } from 'hooks/useApi';
|
||||
import { getDesiredAspect } from '../cardBuilderUtils';
|
||||
import { CardShape } from 'utils/card';
|
||||
import type { NullableNumber, NullableString } from 'types/base/common/shared/types';
|
||||
import type { ItemDto } from 'types/base/models/item-dto';
|
||||
import type { CardOptions } from 'types/cardOptions';
|
||||
|
||||
function getPreferThumbInfo(item: ItemDto, cardOptions: CardOptions) {
|
||||
let imgType;
|
||||
let itemId;
|
||||
let imgTag;
|
||||
let forceName = false;
|
||||
|
||||
if (item.ImageTags?.Thumb) {
|
||||
imgType = ImageType.Thumb;
|
||||
imgTag = item.ImageTags.Thumb;
|
||||
itemId = item.Id;
|
||||
} else if (item.SeriesThumbImageTag && cardOptions.inheritThumb !== false) {
|
||||
imgType = ImageType.Thumb;
|
||||
imgTag = item.SeriesThumbImageTag;
|
||||
itemId = item.SeriesId;
|
||||
} else if (
|
||||
item.ParentThumbItemId
|
||||
&& cardOptions.inheritThumb !== false
|
||||
&& item.MediaType !== 'Photo'
|
||||
) {
|
||||
imgType = ImageType.Thumb;
|
||||
imgTag = item.ParentThumbImageTag;
|
||||
itemId = item.ParentThumbItemId;
|
||||
} else if (item.BackdropImageTags?.length) {
|
||||
imgType = ImageType.Backdrop;
|
||||
imgTag = item.BackdropImageTags[0];
|
||||
itemId = item.Id;
|
||||
forceName = true;
|
||||
} else if (
|
||||
item.ParentBackdropImageTags?.length
|
||||
&& cardOptions.inheritThumb !== false
|
||||
&& item.Type === BaseItemKind.Episode
|
||||
) {
|
||||
imgType = ImageType.Backdrop;
|
||||
imgTag = item.ParentBackdropImageTags[0];
|
||||
itemId = item.ParentBackdropItemId;
|
||||
}
|
||||
return {
|
||||
itemId: itemId,
|
||||
imgTag: imgTag,
|
||||
imgType: imgType,
|
||||
forceName: forceName
|
||||
};
|
||||
}
|
||||
|
||||
function getPreferLogoInfo(item: ItemDto) {
|
||||
let imgType;
|
||||
let itemId;
|
||||
let imgTag;
|
||||
|
||||
if (item.ImageTags?.Logo) {
|
||||
imgType = ImageType.Logo;
|
||||
imgTag = item.ImageTags.Logo;
|
||||
itemId = item.Id;
|
||||
} else if (item.ParentLogoImageTag && item.ParentLogoItemId) {
|
||||
imgType = ImageType.Logo;
|
||||
imgTag = item.ParentLogoImageTag;
|
||||
itemId = item.ParentLogoItemId;
|
||||
}
|
||||
return {
|
||||
itemId: itemId,
|
||||
imgTag: imgTag,
|
||||
imgType: imgType
|
||||
};
|
||||
}
|
||||
|
||||
function getCalculatedHeight(
|
||||
itemWidth: NullableNumber,
|
||||
itemPrimaryImageAspectRatio: NullableNumber
|
||||
) {
|
||||
if (itemWidth && itemPrimaryImageAspectRatio) {
|
||||
return Math.round(itemWidth / itemPrimaryImageAspectRatio);
|
||||
}
|
||||
}
|
||||
|
||||
function isForceName(cardOptions: CardOptions) {
|
||||
return !!(cardOptions.preferThumb && cardOptions.showTitle !== false);
|
||||
}
|
||||
|
||||
function isCoverImage(
|
||||
itemPrimaryImageAspectRatio: NullableNumber,
|
||||
uiAspect: NullableNumber
|
||||
) {
|
||||
if (itemPrimaryImageAspectRatio && uiAspect) {
|
||||
return Math.abs(itemPrimaryImageAspectRatio - uiAspect) / uiAspect <= 0.2;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function shouldShowPreferBanner(
|
||||
imageTagsBanner: NullableString,
|
||||
cardOptions: CardOptions,
|
||||
shape: CardShape | undefined
|
||||
): boolean {
|
||||
return (
|
||||
(cardOptions.preferBanner || shape === CardShape.Banner)
|
||||
&& Boolean(imageTagsBanner)
|
||||
);
|
||||
}
|
||||
|
||||
function shouldShowPreferDisc(
|
||||
imageTagsDisc: string | undefined,
|
||||
cardOptions: CardOptions
|
||||
): boolean {
|
||||
return cardOptions.preferDisc === true && Boolean(imageTagsDisc);
|
||||
}
|
||||
|
||||
function shouldShowImageTagsPrimary(item: ItemDto): boolean {
|
||||
return (
|
||||
Boolean(item.ImageTags?.Primary) && (item.Type !== BaseItemKind.Episode || item.ChildCount !== 0)
|
||||
);
|
||||
}
|
||||
|
||||
function shouldShowImageTagsThumb(item: ItemDto): boolean {
|
||||
return item.Type === BaseItemKind.Season && Boolean(item.ImageTags?.Thumb);
|
||||
}
|
||||
|
||||
function shouldShowSeriesThumbImageTag(
|
||||
itemSeriesThumbImageTag: NullableString,
|
||||
cardOptions: CardOptions
|
||||
): boolean {
|
||||
return (
|
||||
Boolean(itemSeriesThumbImageTag) && cardOptions.inheritThumb !== false
|
||||
);
|
||||
}
|
||||
|
||||
function shouldShowParentThumbImageTag(
|
||||
itemParentThumbItemId: NullableString,
|
||||
cardOptions: CardOptions
|
||||
): boolean {
|
||||
return (
|
||||
Boolean(itemParentThumbItemId) && cardOptions.inheritThumb !== false
|
||||
);
|
||||
}
|
||||
|
||||
function shouldShowParentBackdropImageTags(item: ItemDto): boolean {
|
||||
return Boolean(item.AlbumId) && Boolean(item.AlbumPrimaryImageTag);
|
||||
}
|
||||
|
||||
function shouldShowPreferThumb(itemType: NullableString, cardOptions: CardOptions): boolean {
|
||||
return Boolean(cardOptions.preferThumb) && !(itemType === BaseItemKind.Program || itemType === BaseItemKind.Episode);
|
||||
}
|
||||
|
||||
function getCardImageInfo(
|
||||
item: ItemDto,
|
||||
cardOptions: CardOptions,
|
||||
shape: CardShape | undefined
|
||||
) {
|
||||
const width = cardOptions.width;
|
||||
let height;
|
||||
const primaryImageAspectRatio = item.PrimaryImageAspectRatio;
|
||||
let forceName = false;
|
||||
let imgTag;
|
||||
let coverImage = false;
|
||||
const uiAspect = getDesiredAspect(shape);
|
||||
let imgType;
|
||||
let itemId;
|
||||
|
||||
if (shouldShowPreferThumb(item.Type, cardOptions)) {
|
||||
const preferThumbInfo = getPreferThumbInfo(item, cardOptions);
|
||||
imgType = preferThumbInfo.imgType;
|
||||
imgTag = preferThumbInfo.imgTag;
|
||||
itemId = preferThumbInfo.itemId;
|
||||
forceName = preferThumbInfo.forceName;
|
||||
} else if (shouldShowPreferBanner(item.ImageTags?.Banner, cardOptions, shape)) {
|
||||
imgType = ImageType.Banner;
|
||||
imgTag = item.ImageTags?.Banner;
|
||||
itemId = item.Id;
|
||||
} else if (shouldShowPreferDisc(item.ImageTags?.Disc, cardOptions)) {
|
||||
imgType = ImageType.Disc;
|
||||
imgTag = item.ImageTags?.Disc;
|
||||
itemId = item.Id;
|
||||
} else if (cardOptions.preferLogo) {
|
||||
const preferLogoInfo = getPreferLogoInfo(item);
|
||||
imgType = preferLogoInfo.imgType;
|
||||
imgTag = preferLogoInfo.imgType;
|
||||
itemId = preferLogoInfo.itemId;
|
||||
} else if (shouldShowImageTagsPrimary(item)) {
|
||||
imgType = ImageType.Primary;
|
||||
imgTag = item.ImageTags?.Primary;
|
||||
itemId = item.Id;
|
||||
height = getCalculatedHeight(width, primaryImageAspectRatio);
|
||||
forceName = isForceName(cardOptions);
|
||||
coverImage = isCoverImage(primaryImageAspectRatio, uiAspect);
|
||||
} else if (item.SeriesPrimaryImageTag) {
|
||||
imgType = ImageType.Primary;
|
||||
imgTag = item.SeriesPrimaryImageTag;
|
||||
itemId = item.SeriesId;
|
||||
} else if (item.PrimaryImageTag) {
|
||||
imgType = ImageType.Primary;
|
||||
imgTag = item.PrimaryImageTag;
|
||||
itemId = item.PrimaryImageItemId;
|
||||
height = getCalculatedHeight(width, primaryImageAspectRatio);
|
||||
forceName = isForceName(cardOptions);
|
||||
coverImage = isCoverImage(primaryImageAspectRatio, uiAspect);
|
||||
} else if (item.ParentPrimaryImageTag) {
|
||||
imgType = ImageType.Primary;
|
||||
imgTag = item.ParentPrimaryImageTag;
|
||||
itemId = item.ParentPrimaryImageItemId;
|
||||
} else if (shouldShowParentBackdropImageTags(item)) {
|
||||
imgType = ImageType.Primary;
|
||||
imgTag = item.AlbumPrimaryImageTag;
|
||||
itemId = item.AlbumId;
|
||||
height = getCalculatedHeight(width, primaryImageAspectRatio);
|
||||
forceName = isForceName(cardOptions);
|
||||
coverImage = isCoverImage(primaryImageAspectRatio, uiAspect);
|
||||
} else if (shouldShowImageTagsThumb(item)) {
|
||||
imgType = ImageType.Thumb;
|
||||
imgTag = item.ImageTags?.Thumb;
|
||||
itemId = item.Id;
|
||||
} else if (item.BackdropImageTags?.length) {
|
||||
imgType = ImageType.Backdrop;
|
||||
imgTag = item.BackdropImageTags[0];
|
||||
itemId = item.Id;
|
||||
} else if (shouldShowSeriesThumbImageTag(item.SeriesThumbImageTag, cardOptions)) {
|
||||
imgType = ImageType.Thumb;
|
||||
imgTag = item.SeriesThumbImageTag;
|
||||
itemId = item.SeriesId;
|
||||
} else if (shouldShowParentThumbImageTag(item.ParentThumbItemId, cardOptions)) {
|
||||
imgType = ImageType.Thumb;
|
||||
imgTag = item.ParentThumbImageTag;
|
||||
itemId = item.ParentThumbItemId;
|
||||
} else if (
|
||||
item.ParentBackdropImageTags?.length
|
||||
&& cardOptions.inheritThumb !== false
|
||||
) {
|
||||
imgType = ImageType.Backdrop;
|
||||
imgTag = item.ParentBackdropImageTags[0];
|
||||
itemId = item.ParentBackdropItemId;
|
||||
}
|
||||
|
||||
return {
|
||||
imgType,
|
||||
imgTag,
|
||||
itemId,
|
||||
width,
|
||||
height,
|
||||
forceName,
|
||||
coverImage
|
||||
};
|
||||
}
|
||||
|
||||
interface UseCardImageUrlProps {
|
||||
item: ItemDto;
|
||||
cardOptions: CardOptions;
|
||||
shape: CardShape | undefined;
|
||||
}
|
||||
|
||||
function useCardImageUrl({ item, cardOptions, shape }: UseCardImageUrlProps) {
|
||||
const { api } = useApi();
|
||||
const imgInfo = getCardImageInfo(item, cardOptions, shape);
|
||||
|
||||
let width = imgInfo.width;
|
||||
let height = imgInfo.height;
|
||||
const imgTag = imgInfo.imgTag;
|
||||
const imgType = imgInfo.imgType;
|
||||
const itemId = imgInfo.itemId;
|
||||
const ratio = window.devicePixelRatio || 1;
|
||||
let imgUrl;
|
||||
let blurhash;
|
||||
|
||||
if (api && imgTag && imgType && itemId) {
|
||||
if (width) {
|
||||
width = Math.round(width * ratio);
|
||||
}
|
||||
|
||||
if (height) {
|
||||
height = Math.round(height * ratio);
|
||||
}
|
||||
imgUrl = getImageApi(api).getItemImageUrlById(itemId, imgType, {
|
||||
quality: 96,
|
||||
fillWidth: width,
|
||||
fillHeight: height,
|
||||
tag: imgTag
|
||||
});
|
||||
|
||||
blurhash = item?.ImageBlurHashes?.[imgType]?.[imgTag];
|
||||
}
|
||||
|
||||
return {
|
||||
imgUrl: imgUrl,
|
||||
blurhash: blurhash,
|
||||
forceName: imgInfo.forceName,
|
||||
coverImage: imgInfo.coverImage
|
||||
};
|
||||
}
|
||||
|
||||
export default useCardImageUrl;
|
||||
113
src/components/cardbuilder/Card/useCardText.tsx
Normal file
113
src/components/cardbuilder/Card/useCardText.tsx
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
import React from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import classNames from 'classnames';
|
||||
import layoutManager from 'components/layoutManager';
|
||||
import CardText from './CardText';
|
||||
import { getCardTextLines } from './cardHelper';
|
||||
|
||||
import type { ItemDto } from 'types/base/models/item-dto';
|
||||
import type { CardOptions } from 'types/cardOptions';
|
||||
|
||||
const enableRightMargin = (
|
||||
isOuterFooter: boolean,
|
||||
cardLayout: boolean | null | undefined,
|
||||
centerText: boolean | undefined,
|
||||
cardFooterAside: string | undefined
|
||||
) => {
|
||||
return (
|
||||
isOuterFooter
|
||||
&& cardLayout
|
||||
&& !centerText
|
||||
&& cardFooterAside !== 'none'
|
||||
&& layoutManager.mobile
|
||||
);
|
||||
};
|
||||
|
||||
interface UseCardTextProps {
|
||||
item: ItemDto;
|
||||
cardOptions: CardOptions;
|
||||
forceName: boolean;
|
||||
overlayText: boolean | undefined;
|
||||
imgUrl: string | undefined;
|
||||
isOuterFooter: boolean;
|
||||
cssClass: string;
|
||||
forceLines: boolean;
|
||||
maxLines: number | undefined;
|
||||
}
|
||||
|
||||
function useCardText({
|
||||
item,
|
||||
cardOptions,
|
||||
forceName,
|
||||
imgUrl,
|
||||
overlayText,
|
||||
isOuterFooter,
|
||||
cssClass,
|
||||
forceLines,
|
||||
maxLines
|
||||
}: UseCardTextProps) {
|
||||
const { textLines } = getCardTextLines({
|
||||
isOuterFooter,
|
||||
overlayText,
|
||||
forceName,
|
||||
item,
|
||||
cardOptions,
|
||||
imgUrl
|
||||
});
|
||||
|
||||
const addRightMargin = enableRightMargin(
|
||||
isOuterFooter,
|
||||
cardOptions.cardLayout,
|
||||
cardOptions.centerText,
|
||||
cardOptions.cardFooterAside
|
||||
);
|
||||
|
||||
const renderCardTextLines = () => {
|
||||
const components: React.ReactNode[] = [];
|
||||
let valid = 0;
|
||||
for (const textLine of textLines) {
|
||||
const currentCssClass = classNames(
|
||||
cssClass,
|
||||
{
|
||||
'cardText-secondary':
|
||||
valid > 0 && isOuterFooter
|
||||
},
|
||||
{ 'cardText-first': valid === 0 && isOuterFooter },
|
||||
{ 'cardText-rightmargin': addRightMargin }
|
||||
);
|
||||
|
||||
if (textLine) {
|
||||
components.push(
|
||||
<CardText key={valid} className={currentCssClass} textLine={textLine} />
|
||||
);
|
||||
|
||||
valid++;
|
||||
if (maxLines && valid >= maxLines) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (forceLines) {
|
||||
const linesLength = maxLines ?? Math.min(textLines.length, maxLines ?? textLines.length);
|
||||
while (valid < linesLength) {
|
||||
components.push(
|
||||
<Box key={valid} className={cssClass}>
|
||||
|
||||
</Box>
|
||||
);
|
||||
valid++;
|
||||
}
|
||||
}
|
||||
|
||||
return components;
|
||||
};
|
||||
|
||||
const cardTextLines = renderCardTextLines();
|
||||
|
||||
return {
|
||||
cardTextLines
|
||||
};
|
||||
}
|
||||
|
||||
export default useCardText;
|
||||
|
|
@ -378,7 +378,7 @@ button::-moz-focus-inner {
|
|||
margin-right: 2em;
|
||||
}
|
||||
|
||||
.cardDefaultText {
|
||||
.cardImageContainer > .cardDefaultText {
|
||||
white-space: normal;
|
||||
text-align: center;
|
||||
font-size: 2em;
|
||||
|
|
@ -408,6 +408,7 @@ button::-moz-focus-inner {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
contain: layout style;
|
||||
z-index: 1;
|
||||
|
||||
[dir="ltr"] & {
|
||||
right: 0.225em;
|
||||
|
|
@ -852,7 +853,7 @@ button::-moz-focus-inner {
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
.cardOverlayFab-primary {
|
||||
.cardOverlayContainer > .cardOverlayFab-primary {
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
font-size: 130%;
|
||||
padding: 0;
|
||||
|
|
@ -865,7 +866,7 @@ button::-moz-focus-inner {
|
|||
left: 50%;
|
||||
}
|
||||
|
||||
.cardOverlayFab-primary:hover {
|
||||
.cardOverlayContainer > .cardOverlayFab-primary:hover {
|
||||
transform: scale(1.4, 1.4);
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@ function getImageWidth(shape, screenWidth, isOrientationLandscape) {
|
|||
* @param {Object} items - A set of items.
|
||||
* @param {Object} options - Options for handling the items.
|
||||
*/
|
||||
function setCardData(items, options) {
|
||||
export function setCardData(items, options) {
|
||||
options.shape = options.shape || 'auto';
|
||||
|
||||
const primaryImageAspectRatio = imageLoader.getPrimaryImageAspectRatio(items);
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import { CardShape } from '../../utils/card';
|
||||
import { randomInt } from '../../utils/number';
|
||||
import classNames from 'classnames';
|
||||
|
||||
|
|
@ -10,10 +11,10 @@ const ASPECT_RATIOS = {
|
|||
|
||||
/**
|
||||
* Determines if the item is live TV.
|
||||
* @param {string} itemType - Item type to use for the check.
|
||||
* @param {string | null | undefined} itemType - Item type to use for the check.
|
||||
* @returns {boolean} Flag showing if the item is live TV.
|
||||
*/
|
||||
export const isUsingLiveTvNaming = (itemType: string): boolean => itemType === 'Program' || itemType === 'Timer' || itemType === 'Recording';
|
||||
export const isUsingLiveTvNaming = (itemType: string | null | undefined): boolean => itemType === 'Program' || itemType === 'Timer' || itemType === 'Recording';
|
||||
|
||||
/**
|
||||
* Resolves Card action to display
|
||||
|
|
@ -54,15 +55,15 @@ export const isResizable = (windowWidth: number): boolean => {
|
|||
*/
|
||||
export const resolveMixedShapeByAspectRatio = (primaryImageAspectRatio: number | null | undefined) => {
|
||||
if (primaryImageAspectRatio === undefined || primaryImageAspectRatio === null) {
|
||||
return 'mixedSquare';
|
||||
return CardShape.MixedSquare;
|
||||
}
|
||||
|
||||
if (primaryImageAspectRatio >= 1.33) {
|
||||
return 'mixedBackdrop';
|
||||
return CardShape.MixedBackdrop;
|
||||
} else if (primaryImageAspectRatio > 0.71) {
|
||||
return 'mixedSquare';
|
||||
return CardShape.MixedSquare;
|
||||
} else {
|
||||
return 'mixedPortrait';
|
||||
return CardShape.MixedPortrait;
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
56
src/components/common/DefaultIconText.tsx
Normal file
56
src/components/common/DefaultIconText.tsx
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
|
||||
import React, { type FC } from 'react';
|
||||
import Icon from '@mui/material/Icon';
|
||||
import imageHelper from 'utils/image';
|
||||
import DefaultName from './DefaultName';
|
||||
import type { ItemDto } from 'types/base/models/item-dto';
|
||||
|
||||
interface DefaultIconTextProps {
|
||||
item: ItemDto;
|
||||
defaultCardImageIcon?: string;
|
||||
}
|
||||
|
||||
const DefaultIconText: FC<DefaultIconTextProps> = ({
|
||||
item,
|
||||
defaultCardImageIcon
|
||||
}) => {
|
||||
if (item.CollectionType) {
|
||||
return (
|
||||
<Icon
|
||||
className='cardImageIcon'
|
||||
sx={{ color: 'inherit', fontSize: '5em' }}
|
||||
aria-hidden='true'
|
||||
>
|
||||
{imageHelper.getLibraryIcon(item.CollectionType)}
|
||||
</Icon>
|
||||
);
|
||||
}
|
||||
|
||||
if (item.Type && !(item.Type === BaseItemKind.TvChannel || item.Type === BaseItemKind.Studio )) {
|
||||
return (
|
||||
<Icon
|
||||
className='cardImageIcon'
|
||||
sx={{ color: 'inherit', fontSize: '5em' }}
|
||||
aria-hidden='true'
|
||||
>
|
||||
{imageHelper.getItemTypeIcon(item.Type)}
|
||||
</Icon>
|
||||
);
|
||||
}
|
||||
|
||||
if (defaultCardImageIcon) {
|
||||
return (
|
||||
<Icon
|
||||
className='cardImageIcon'
|
||||
sx={{ color: 'inherit', fontSize: '5em' }}
|
||||
aria-hidden='true'
|
||||
>
|
||||
{defaultCardImageIcon}
|
||||
</Icon>
|
||||
);
|
||||
}
|
||||
|
||||
return <DefaultName item={item} />;
|
||||
};
|
||||
|
||||
export default DefaultIconText;
|
||||
22
src/components/common/DefaultName.tsx
Normal file
22
src/components/common/DefaultName.tsx
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import React, { type FC } from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import itemHelper from 'components/itemHelper';
|
||||
import { isUsingLiveTvNaming } from '../cardbuilder/cardBuilderUtils';
|
||||
import type { ItemDto } from 'types/base/models/item-dto';
|
||||
|
||||
interface DefaultNameProps {
|
||||
item: ItemDto;
|
||||
}
|
||||
|
||||
const DefaultName: FC<DefaultNameProps> = ({ item }) => {
|
||||
const defaultName = isUsingLiveTvNaming(item.Type) ?
|
||||
item.Name :
|
||||
itemHelper.getDisplayName(item);
|
||||
return (
|
||||
<Box className='cardText cardDefaultText'>
|
||||
{defaultName}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default DefaultName;
|
||||
67
src/components/common/Image.tsx
Normal file
67
src/components/common/Image.tsx
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
import React, { type FC, useCallback, useState } from 'react';
|
||||
import { BlurhashCanvas } from 'react-blurhash';
|
||||
import { LazyLoadImage } from 'react-lazy-load-image-component';
|
||||
|
||||
const imageStyle: React.CSSProperties = {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
zIndex: 0
|
||||
};
|
||||
|
||||
interface ImageProps {
|
||||
imgUrl: string;
|
||||
blurhash?: string;
|
||||
containImage: boolean;
|
||||
}
|
||||
|
||||
const Image: FC<ImageProps> = ({
|
||||
imgUrl,
|
||||
blurhash,
|
||||
containImage
|
||||
}) => {
|
||||
const [isLoaded, setIsLoaded] = useState(false);
|
||||
const [isLoadStarted, setIsLoadStarted] = useState(false);
|
||||
const handleLoad = useCallback(() => {
|
||||
setIsLoaded(true);
|
||||
}, []);
|
||||
|
||||
const handleLoadStarted = useCallback(() => {
|
||||
setIsLoadStarted(true);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{!isLoaded && isLoadStarted && blurhash && (
|
||||
<BlurhashCanvas
|
||||
hash={blurhash}
|
||||
width= {20}
|
||||
height={20}
|
||||
punch={1}
|
||||
style={{
|
||||
...imageStyle,
|
||||
borderRadius: '0.2em',
|
||||
pointerEvents: 'none'
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<LazyLoadImage
|
||||
key={imgUrl}
|
||||
src={imgUrl}
|
||||
style={{
|
||||
...imageStyle,
|
||||
objectFit: containImage ? 'contain' : 'cover'
|
||||
}}
|
||||
onLoad={handleLoad}
|
||||
beforeLoad={handleLoadStarted}
|
||||
/>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Image;
|
||||
22
src/components/common/InfoIconButton.tsx
Normal file
22
src/components/common/InfoIconButton.tsx
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import React, { type FC } from 'react';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import InfoIcon from '@mui/icons-material/Info';
|
||||
import globalize from 'scripts/globalize';
|
||||
|
||||
interface InfoIconButtonProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const InfoIconButton: FC<InfoIconButtonProps> = ({ className }) => {
|
||||
return (
|
||||
<IconButton
|
||||
className={className}
|
||||
data-action='link'
|
||||
title={globalize.translate('ButtonInfo')}
|
||||
>
|
||||
<InfoIcon />
|
||||
</IconButton>
|
||||
);
|
||||
};
|
||||
|
||||
export default InfoIconButton;
|
||||
36
src/components/common/Media.tsx
Normal file
36
src/components/common/Media.tsx
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
import { BaseItemKind, ImageType } from '@jellyfin/sdk/lib/generated-client';
|
||||
import React, { type FC } from 'react';
|
||||
import Image from './Image';
|
||||
import DefaultIconText from './DefaultIconText';
|
||||
import type { ItemDto } from 'types/base/models/item-dto';
|
||||
|
||||
interface MediaProps {
|
||||
item: ItemDto;
|
||||
imgUrl: string | undefined;
|
||||
blurhash: string | undefined;
|
||||
imageType?: ImageType
|
||||
defaultCardImageIcon?: string
|
||||
}
|
||||
|
||||
const Media: FC<MediaProps> = ({
|
||||
item,
|
||||
imgUrl,
|
||||
blurhash,
|
||||
imageType,
|
||||
defaultCardImageIcon
|
||||
}) => {
|
||||
return imgUrl ? (
|
||||
<Image
|
||||
imgUrl={imgUrl}
|
||||
blurhash={blurhash}
|
||||
containImage={item.Type === BaseItemKind.TvChannel || imageType === ImageType.Logo}
|
||||
/>
|
||||
) : (
|
||||
<DefaultIconText
|
||||
item={item}
|
||||
defaultCardImageIcon={defaultCardImageIcon}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default Media;
|
||||
23
src/components/common/MoreVertIconButton.tsx
Normal file
23
src/components/common/MoreVertIconButton.tsx
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
import React, { type FC } from 'react';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import MoreVertIcon from '@mui/icons-material/MoreVert';
|
||||
import globalize from 'scripts/globalize';
|
||||
|
||||
interface MoreVertIconButtonProps {
|
||||
className?: string;
|
||||
iconClassName?: string;
|
||||
}
|
||||
|
||||
const MoreVertIconButton: FC<MoreVertIconButtonProps> = ({ className, iconClassName }) => {
|
||||
return (
|
||||
<IconButton
|
||||
className={className}
|
||||
data-action='menu'
|
||||
title={globalize.translate('ButtonMore')}
|
||||
>
|
||||
<MoreVertIcon className={iconClassName} />
|
||||
</IconButton>
|
||||
);
|
||||
};
|
||||
|
||||
export default MoreVertIconButton;
|
||||
25
src/components/common/NoItemsMessage.tsx
Normal file
25
src/components/common/NoItemsMessage.tsx
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
import React, { type FC } from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import globalize from 'scripts/globalize';
|
||||
|
||||
interface NoItemsMessageProps {
|
||||
noItemsMessage?: string;
|
||||
}
|
||||
|
||||
const NoItemsMessage: FC<NoItemsMessageProps> = ({
|
||||
noItemsMessage = 'MessageNoItemsAvailable'
|
||||
}) => {
|
||||
return (
|
||||
<Box className='noItemsMessage centerMessage'>
|
||||
<Typography variant='h2'>
|
||||
{globalize.translate('MessageNothingHere')}
|
||||
</Typography>
|
||||
<Typography paragraph variant='h2'>
|
||||
{globalize.translate(noItemsMessage)}
|
||||
</Typography>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default NoItemsMessage;
|
||||
25
src/components/common/PlayArrowIconButton.tsx
Normal file
25
src/components/common/PlayArrowIconButton.tsx
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
import React, { type FC } from 'react';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import PlayArrowIcon from '@mui/icons-material/PlayArrow';
|
||||
import globalize from 'scripts/globalize';
|
||||
|
||||
interface PlayArrowIconButtonProps {
|
||||
className: string;
|
||||
action: string;
|
||||
title: string;
|
||||
iconClassName?: string;
|
||||
}
|
||||
|
||||
const PlayArrowIconButton: FC<PlayArrowIconButtonProps> = ({ className, action, title, iconClassName }) => {
|
||||
return (
|
||||
<IconButton
|
||||
className={className}
|
||||
data-action={action}
|
||||
title={globalize.translate(title)}
|
||||
>
|
||||
<PlayArrowIcon className={iconClassName} />
|
||||
</IconButton>
|
||||
);
|
||||
};
|
||||
|
||||
export default PlayArrowIconButton;
|
||||
22
src/components/common/PlaylistAddIconButton.tsx
Normal file
22
src/components/common/PlaylistAddIconButton.tsx
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import React, { type FC } from 'react';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import PlaylistAddIcon from '@mui/icons-material/PlaylistAdd';
|
||||
import globalize from 'scripts/globalize';
|
||||
|
||||
interface PlaylistAddIconButtonProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const PlaylistAddIconButton: FC<PlaylistAddIconButtonProps> = ({ className }) => {
|
||||
return (
|
||||
<IconButton
|
||||
className={className}
|
||||
data-action='addtoplaylist'
|
||||
title={globalize.translate('AddToPlaylist')}
|
||||
>
|
||||
<PlaylistAddIcon />
|
||||
</IconButton>
|
||||
);
|
||||
};
|
||||
|
||||
export default PlaylistAddIconButton;
|
||||
24
src/components/common/RightIconButtons.tsx
Normal file
24
src/components/common/RightIconButtons.tsx
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
import React, { type FC } from 'react';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
|
||||
interface RightIconButtonsProps {
|
||||
className?: string;
|
||||
id: string;
|
||||
icon: string;
|
||||
title: string;
|
||||
}
|
||||
|
||||
const RightIconButtons: FC<RightIconButtonsProps> = ({ className, id, title, icon }) => {
|
||||
return (
|
||||
<IconButton
|
||||
className={className}
|
||||
data-action='custom'
|
||||
data-customaction={id}
|
||||
title={title}
|
||||
>
|
||||
{icon}
|
||||
</IconButton>
|
||||
);
|
||||
};
|
||||
|
||||
export default RightIconButtons;
|
||||
|
|
@ -61,7 +61,7 @@ const UserCardBox: FunctionComponent<IProps> = ({ user = {} }: IProps) => {
|
|||
</div>`;
|
||||
|
||||
return (
|
||||
<div data-userid={user.Id} className={cssClass}>
|
||||
<div data-userid={user.Id} data-username={user.Name} className={cssClass}>
|
||||
<div className='cardBox visualCardBox'>
|
||||
<div className='cardScalable visualCardBox-cardScalable'>
|
||||
<div className='cardPadder cardPadder-square'></div>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,14 @@
|
|||
height: 0.28em;
|
||||
}
|
||||
|
||||
.itemLinearProgress {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
.itemProgressBarForeground {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
|
|||
261
src/components/indicators/useIndicator.tsx
Normal file
261
src/components/indicators/useIndicator.tsx
Normal file
|
|
@ -0,0 +1,261 @@
|
|||
import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
|
||||
import { LocationType } from '@jellyfin/sdk/lib/generated-client/models/location-type';
|
||||
import React from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import LinearProgress, {
|
||||
linearProgressClasses
|
||||
} from '@mui/material/LinearProgress';
|
||||
import FiberSmartRecordIcon from '@mui/icons-material/FiberSmartRecord';
|
||||
import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
|
||||
import CheckIcon from '@mui/icons-material/Check';
|
||||
import VideocamIcon from '@mui/icons-material/Videocam';
|
||||
import FolderIcon from '@mui/icons-material/Folder';
|
||||
import PhotoAlbumIcon from '@mui/icons-material/PhotoAlbum';
|
||||
import PhotoIcon from '@mui/icons-material/Photo';
|
||||
import classNames from 'classnames';
|
||||
import datetime from 'scripts/datetime';
|
||||
import itemHelper from 'components/itemHelper';
|
||||
import AutoTimeProgressBar from 'elements/emby-progressbar/AutoTimeProgressBar';
|
||||
import type { NullableString } from 'types/base/common/shared/types';
|
||||
import type { ItemDto } from 'types/base/models/item-dto';
|
||||
import type { ProgressOptions } from 'types/progressOptions';
|
||||
|
||||
const TypeIcon = {
|
||||
Video: <VideocamIcon className='indicatorIcon' />,
|
||||
Folder: <FolderIcon className='indicatorIcon' />,
|
||||
PhotoAlbum: <PhotoAlbumIcon className='indicatorIcon' />,
|
||||
Photo: <PhotoIcon className='indicatorIcon' />
|
||||
};
|
||||
|
||||
const getTypeIcon = (itemType: NullableString) => {
|
||||
return TypeIcon[itemType as keyof typeof TypeIcon];
|
||||
};
|
||||
|
||||
const enableProgressIndicator = (
|
||||
itemType: NullableString,
|
||||
itemMediaType: NullableString
|
||||
) => {
|
||||
return (
|
||||
(itemMediaType === 'Video' && itemType !== BaseItemKind.TvChannel)
|
||||
|| itemType === BaseItemKind.AudioBook
|
||||
|| itemType === 'AudioPodcast'
|
||||
);
|
||||
};
|
||||
|
||||
const enableAutoTimeProgressIndicator = (
|
||||
itemType: NullableString,
|
||||
itemStartDate: NullableString,
|
||||
itemEndDate: NullableString
|
||||
) => {
|
||||
return (
|
||||
(itemType === BaseItemKind.Program
|
||||
|| itemType === 'Timer'
|
||||
|| itemType === BaseItemKind.Recording)
|
||||
&& Boolean(itemStartDate)
|
||||
&& Boolean(itemEndDate)
|
||||
);
|
||||
};
|
||||
|
||||
const enablePlayedIndicator = (item: ItemDto) => {
|
||||
return itemHelper.canMarkPlayed(item);
|
||||
};
|
||||
|
||||
const useIndicator = (item: ItemDto) => {
|
||||
const getMediaSourceIndicator = () => {
|
||||
const mediaSourceCount = item.MediaSourceCount ?? 0;
|
||||
if (mediaSourceCount > 1) {
|
||||
return <Box className='mediaSourceIndicator'>{mediaSourceCount}</Box>;
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
const getMissingIndicator = () => {
|
||||
if (
|
||||
item.Type === BaseItemKind.Episode
|
||||
&& item.LocationType === LocationType.Virtual
|
||||
) {
|
||||
if (item.PremiereDate) {
|
||||
try {
|
||||
const premiereDate = datetime
|
||||
.parseISO8601Date(item.PremiereDate)
|
||||
.getTime();
|
||||
if (premiereDate > new Date().getTime()) {
|
||||
return <Box className='unairedIndicator'>Unaired</Box>;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
return <Box className='missingIndicator'>Missing</Box>;
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
const getTimerIndicator = (className?: string) => {
|
||||
const indicatorIconClass = classNames('timerIndicator', className);
|
||||
|
||||
let status;
|
||||
|
||||
if (item.Type === 'SeriesTimer') {
|
||||
return <FiberSmartRecordIcon className={indicatorIconClass} />;
|
||||
} else if (item.TimerId || item.SeriesTimerId) {
|
||||
status = item.Status || 'Cancelled';
|
||||
} else if (item.Type === 'Timer') {
|
||||
status = item.Status;
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (item.SeriesTimerId) {
|
||||
return (
|
||||
<FiberSmartRecordIcon
|
||||
className={`${indicatorIconClass} ${
|
||||
status === 'Cancelled' ? 'timerIndicator-inactive' : ''
|
||||
}`}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return <FiberManualRecordIcon className={indicatorIconClass} />;
|
||||
};
|
||||
|
||||
const getTypeIndicator = () => {
|
||||
const icon = getTypeIcon(item.Type);
|
||||
if (icon) {
|
||||
return <Box className='indicator videoIndicator'>{icon}</Box>;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const getChildCountIndicator = () => {
|
||||
const childCount = item.ChildCount ?? 0;
|
||||
|
||||
if (childCount > 1) {
|
||||
return (
|
||||
<Box className='countIndicator indicator childCountIndicator'>
|
||||
{datetime.toLocaleString(item.ChildCount)}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
const getPlayedIndicator = () => {
|
||||
if (enablePlayedIndicator(item)) {
|
||||
const userData = item.UserData || {};
|
||||
if (userData.UnplayedItemCount) {
|
||||
return (
|
||||
<Box className='countIndicator indicator unplayedItemCount'>
|
||||
{datetime.toLocaleString(userData.UnplayedItemCount)}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
if (
|
||||
(userData.PlayedPercentage
|
||||
&& userData.PlayedPercentage >= 100)
|
||||
|| userData.Played
|
||||
) {
|
||||
return (
|
||||
<Box className='playedIndicator indicator'>
|
||||
<CheckIcon className='indicatorIcon' />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
const getProgress = (pct: number, progressOptions?: ProgressOptions) => {
|
||||
const progressBarClass = classNames(
|
||||
'itemLinearProgress',
|
||||
progressOptions?.containerClass
|
||||
);
|
||||
|
||||
return (
|
||||
<LinearProgress
|
||||
className={progressBarClass}
|
||||
variant='determinate'
|
||||
value={pct}
|
||||
sx={{
|
||||
[`& .${linearProgressClasses.bar}`]: {
|
||||
borderRadius: 5,
|
||||
backgroundColor: '#00a4dc'
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const getProgressBar = (progressOptions?: ProgressOptions) => {
|
||||
if (
|
||||
enableProgressIndicator(item.Type, item.MediaType)
|
||||
&& item.Type !== BaseItemKind.Recording
|
||||
) {
|
||||
const playedPercentage = progressOptions?.userData?.PlayedPercentage ?
|
||||
progressOptions.userData.PlayedPercentage :
|
||||
item?.UserData?.PlayedPercentage;
|
||||
if (playedPercentage && playedPercentage < 100) {
|
||||
return getProgress(playedPercentage);
|
||||
}
|
||||
}
|
||||
|
||||
if (
|
||||
enableAutoTimeProgressIndicator(
|
||||
item.Type,
|
||||
item.StartDate,
|
||||
item.EndDate
|
||||
)
|
||||
) {
|
||||
let startDate = 0;
|
||||
let endDate = 1;
|
||||
|
||||
try {
|
||||
startDate = datetime.parseISO8601Date(item.StartDate).getTime();
|
||||
endDate = datetime.parseISO8601Date(item.EndDate).getTime();
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
|
||||
const now = new Date().getTime();
|
||||
const total = endDate - startDate;
|
||||
const pct = 100 * ((now - startDate) / total);
|
||||
|
||||
if (pct > 0 && pct < 100) {
|
||||
const isRecording =
|
||||
item.Type === 'Timer'
|
||||
|| item.Type === BaseItemKind.Recording
|
||||
|| Boolean(item.TimerId);
|
||||
return (
|
||||
<AutoTimeProgressBar
|
||||
pct={pct}
|
||||
progressOptions={progressOptions}
|
||||
isRecording={isRecording}
|
||||
starTtime={startDate}
|
||||
endTtime={endDate}
|
||||
dataAutoMode='time'
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
return {
|
||||
getProgress,
|
||||
getProgressBar,
|
||||
getMediaSourceIndicator,
|
||||
getMissingIndicator,
|
||||
getTimerIndicator,
|
||||
getTypeIndicator,
|
||||
getChildCountIndicator,
|
||||
getPlayedIndicator
|
||||
};
|
||||
};
|
||||
|
||||
export default useIndicator;
|
||||
|
|
@ -223,11 +223,7 @@ export function getCommands(options) {
|
|||
});
|
||||
}
|
||||
|
||||
if (canEdit && item.MediaType === 'Video' && item.Type !== 'TvChannel' && item.Type !== 'Program'
|
||||
&& item.LocationType !== 'Virtual'
|
||||
&& !(item.Type === 'Recording' && item.Status !== 'Completed')
|
||||
&& options.editSubtitles !== false
|
||||
) {
|
||||
if (itemHelper.canEditSubtitles(user, item) && options.editSubtitles !== false) {
|
||||
commands.push({
|
||||
name: globalize.translate('EditSubtitles'),
|
||||
id: 'editsubtitles',
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
import { appHost } from './apphost';
|
||||
import globalize from '../scripts/globalize';
|
||||
import { CollectionType } from '@jellyfin/sdk/lib/generated-client/models/collection-type';
|
||||
import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
|
||||
import { LocationType } from '@jellyfin/sdk/lib/generated-client/models/location-type';
|
||||
import { RecordingStatus } from '@jellyfin/sdk/lib/generated-client/models/recording-status';
|
||||
import { MediaType } from '@jellyfin/sdk/lib/generated-client/models/media-type';
|
||||
|
||||
export function getDisplayName(item, options = {}) {
|
||||
if (!item) {
|
||||
|
|
@ -155,6 +159,33 @@ export function canEditImages (user, item) {
|
|||
return itemType !== 'Timer' && itemType !== 'SeriesTimer' && canEdit(user, item) && !isLocalItem(item);
|
||||
}
|
||||
|
||||
export function canEditSubtitles (user, item) {
|
||||
if (item.MediaType !== MediaType.Video) {
|
||||
return false;
|
||||
}
|
||||
const itemType = item.Type;
|
||||
if (itemType === BaseItemKind.Recording && item.Status !== RecordingStatus.Completed) {
|
||||
return false;
|
||||
}
|
||||
if (itemType === BaseItemKind.TvChannel
|
||||
|| itemType === BaseItemKind.Program
|
||||
|| itemType === 'Timer'
|
||||
|| itemType === 'SeriesTimer'
|
||||
|| itemType === BaseItemKind.UserRootFolder
|
||||
|| itemType === BaseItemKind.UserView
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
if (isLocalItem(item)) {
|
||||
return false;
|
||||
}
|
||||
if (item.LocationType === LocationType.Virtual) {
|
||||
return false;
|
||||
}
|
||||
return user.Policy.EnableSubtitleManagement
|
||||
|| user.Policy.IsAdministrator;
|
||||
}
|
||||
|
||||
export function canShare (item, user) {
|
||||
if (item.Type === 'Program') {
|
||||
return false;
|
||||
|
|
@ -300,6 +331,7 @@ export default {
|
|||
canIdentify: canIdentify,
|
||||
canEdit: canEdit,
|
||||
canEditImages: canEditImages,
|
||||
canEditSubtitles,
|
||||
canShare: canShare,
|
||||
enableDateAddedDisplay: enableDateAddedDisplay,
|
||||
canMarkPlayed: canMarkPlayed,
|
||||
|
|
|
|||
|
|
@ -416,6 +416,8 @@ export function setContentType(parent, contentType) {
|
|||
}
|
||||
}
|
||||
|
||||
parent.querySelector('.chkUseReplayGainTagsContainer').classList.toggle('hide', contentType !== 'music');
|
||||
|
||||
parent.querySelector('.chkEnableLUFSScanContainer').classList.toggle('hide', contentType !== 'music');
|
||||
|
||||
if (contentType === 'tvshows') {
|
||||
|
|
@ -515,6 +517,7 @@ export function getLibraryOptions(parent) {
|
|||
EnablePhotos: parent.querySelector('.chkEnablePhotos').checked,
|
||||
EnableRealtimeMonitor: parent.querySelector('.chkEnableRealtimeMonitor').checked,
|
||||
EnableLUFSScan: parent.querySelector('.chkEnableLUFSScan').checked,
|
||||
UseReplayGainTags: parent.querySelector('.chkUseReplayGainTags').checked,
|
||||
ExtractChapterImagesDuringLibraryScan: parent.querySelector('.chkExtractChaptersDuringLibraryScan').checked,
|
||||
EnableChapterImageExtraction: parent.querySelector('.chkExtractChapterImages').checked,
|
||||
EnableInternetProviders: true,
|
||||
|
|
@ -577,6 +580,7 @@ export function setLibraryOptions(parent, options) {
|
|||
parent.querySelector('.chkEnablePhotos').checked = options.EnablePhotos;
|
||||
parent.querySelector('.chkEnableRealtimeMonitor').checked = options.EnableRealtimeMonitor;
|
||||
parent.querySelector('.chkEnableLUFSScan').checked = options.EnableLUFSScan;
|
||||
parent.querySelector('.chkUseReplayGainTags').checked = options.UseReplayGainTags;
|
||||
parent.querySelector('.chkExtractChaptersDuringLibraryScan').checked = options.ExtractChapterImagesDuringLibraryScan;
|
||||
parent.querySelector('.chkExtractChapterImages').checked = options.EnableChapterImageExtraction;
|
||||
parent.querySelector('#chkSaveLocal').checked = options.SaveLocalMetadata;
|
||||
|
|
|
|||
|
|
@ -55,6 +55,14 @@
|
|||
<div class="fieldDescription checkboxFieldDescription">${LabelEnableRealtimeMonitorHelp}</div>
|
||||
</div>
|
||||
|
||||
<div class="checkboxContainer checkboxContainer-withDescription chkUseReplayGainTagsContainer advanced">
|
||||
<label>
|
||||
<input type="checkbox" is="emby-checkbox" class="chkUseReplayGainTags" checked />
|
||||
<span>${LabelUseReplayGainTags}</span>
|
||||
</label>
|
||||
<div class="fieldDescription checkboxFieldDescription">${LabelUseReplayGainTagsHelp}</div>
|
||||
</div>
|
||||
|
||||
<div class="checkboxContainer checkboxContainer-withDescription chkEnableLUFSScanContainer advanced">
|
||||
<label>
|
||||
<input type="checkbox" is="emby-checkbox" class="chkEnableLUFSScan" checked />
|
||||
|
|
|
|||
32
src/components/listview/List/List.tsx
Normal file
32
src/components/listview/List/List.tsx
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
import React, { type FC } from 'react';
|
||||
import useList from './useList';
|
||||
import ListContent from './ListContent';
|
||||
import ListWrapper from './ListWrapper';
|
||||
import type { ItemDto } from 'types/base/models/item-dto';
|
||||
import type { ListOptions } from 'types/listOptions';
|
||||
import '../../mediainfo/mediainfo.scss';
|
||||
import '../../guide/programs.scss';
|
||||
|
||||
interface ListProps {
|
||||
index: number;
|
||||
item: ItemDto;
|
||||
listOptions?: ListOptions;
|
||||
}
|
||||
|
||||
const List: FC<ListProps> = ({ index, item, listOptions = {} }) => {
|
||||
const { getListdWrapperProps, getListContentProps } = useList({ item, listOptions } );
|
||||
const listWrapperProps = getListdWrapperProps();
|
||||
const listContentProps = getListContentProps();
|
||||
|
||||
return (
|
||||
<ListWrapper
|
||||
key={index}
|
||||
index={index}
|
||||
{...listWrapperProps}
|
||||
>
|
||||
<ListContent {...listContentProps} />
|
||||
</ListWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default List;
|
||||
106
src/components/listview/List/ListContent.tsx
Normal file
106
src/components/listview/List/ListContent.tsx
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
|
||||
import React, { type FC } from 'react';
|
||||
import DragHandleIcon from '@mui/icons-material/DragHandle';
|
||||
import Box from '@mui/material/Box';
|
||||
|
||||
import useIndicator from 'components/indicators/useIndicator';
|
||||
import PrimaryMediaInfo from '../../mediainfo/PrimaryMediaInfo';
|
||||
import ListContentWrapper from './ListContentWrapper';
|
||||
import ListItemBody from './ListItemBody';
|
||||
import ListImageContainer from './ListImageContainer';
|
||||
import ListViewUserDataButtons from './ListViewUserDataButtons';
|
||||
|
||||
import type { ItemDto } from 'types/base/models/item-dto';
|
||||
import type { ListOptions } from 'types/listOptions';
|
||||
|
||||
interface ListContentProps {
|
||||
item: ItemDto;
|
||||
listOptions: ListOptions;
|
||||
enableContentWrapper?: boolean;
|
||||
enableOverview?: boolean;
|
||||
enableSideMediaInfo?: boolean;
|
||||
clickEntireItem?: boolean;
|
||||
action?: string;
|
||||
isLargeStyle: boolean;
|
||||
downloadWidth?: number;
|
||||
}
|
||||
|
||||
const ListContent: FC<ListContentProps> = ({
|
||||
item,
|
||||
listOptions,
|
||||
enableContentWrapper,
|
||||
enableOverview,
|
||||
enableSideMediaInfo,
|
||||
clickEntireItem,
|
||||
action,
|
||||
isLargeStyle,
|
||||
downloadWidth
|
||||
}) => {
|
||||
const indicator = useIndicator(item);
|
||||
return (
|
||||
<ListContentWrapper
|
||||
itemOverview={item.Overview}
|
||||
enableContentWrapper={enableContentWrapper}
|
||||
enableOverview={enableOverview}
|
||||
>
|
||||
|
||||
{!clickEntireItem && listOptions.dragHandle && (
|
||||
<DragHandleIcon className='listViewDragHandle listItemIcon listItemIcon-transparent' />
|
||||
)}
|
||||
|
||||
{listOptions.image !== false && (
|
||||
<ListImageContainer
|
||||
item={item}
|
||||
listOptions={listOptions}
|
||||
action={action}
|
||||
isLargeStyle={isLargeStyle}
|
||||
clickEntireItem={clickEntireItem}
|
||||
downloadWidth={downloadWidth}
|
||||
/>
|
||||
)}
|
||||
|
||||
{listOptions.showIndexNumberLeft && (
|
||||
<Box className='listItem-indexnumberleft'>
|
||||
{item.IndexNumber ?? <span> </span>}
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<ListItemBody
|
||||
item={item}
|
||||
listOptions={listOptions}
|
||||
action={action}
|
||||
enableContentWrapper={enableContentWrapper}
|
||||
enableOverview={enableOverview}
|
||||
enableSideMediaInfo={enableSideMediaInfo}
|
||||
getMissingIndicator={indicator.getMissingIndicator}
|
||||
/>
|
||||
|
||||
{listOptions.mediaInfo !== false && enableSideMediaInfo && (
|
||||
<PrimaryMediaInfo
|
||||
className='secondary listItemMediaInfo'
|
||||
item={item}
|
||||
isRuntimeEnabled={true}
|
||||
isStarRatingEnabled={true}
|
||||
isCaptionIndicatorEnabled={true}
|
||||
isEpisodeTitleEnabled={true}
|
||||
isOfficialRatingEnabled={true}
|
||||
getMissingIndicator={indicator.getMissingIndicator}
|
||||
/>
|
||||
)}
|
||||
|
||||
{listOptions.recordButton
|
||||
&& (item.Type === 'Timer' || item.Type === BaseItemKind.Program) && (
|
||||
indicator.getTimerIndicator('listItemAside')
|
||||
)}
|
||||
|
||||
{!clickEntireItem && (
|
||||
<ListViewUserDataButtons
|
||||
item={item}
|
||||
listOptions={listOptions}
|
||||
/>
|
||||
)}
|
||||
</ListContentWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default ListContent;
|
||||
34
src/components/listview/List/ListContentWrapper.tsx
Normal file
34
src/components/listview/List/ListContentWrapper.tsx
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import React, { type FC } from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
|
||||
interface ListContentWrapperProps {
|
||||
itemOverview: string | null | undefined;
|
||||
enableContentWrapper?: boolean;
|
||||
enableOverview?: boolean;
|
||||
}
|
||||
|
||||
const ListContentWrapper: FC<ListContentWrapperProps> = ({
|
||||
itemOverview,
|
||||
enableContentWrapper,
|
||||
enableOverview,
|
||||
children
|
||||
}) => {
|
||||
if (enableContentWrapper) {
|
||||
return (
|
||||
<>
|
||||
<Box className='listItem-content'>{children}</Box>
|
||||
|
||||
{enableOverview && itemOverview && (
|
||||
<Box className='listItem-bottomoverview secondary'>
|
||||
<bdi>{itemOverview}</bdi>
|
||||
</Box>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
} else {
|
||||
// eslint-disable-next-line react/jsx-no-useless-fragment
|
||||
return <>{children}</>;
|
||||
}
|
||||
};
|
||||
|
||||
export default ListContentWrapper;
|
||||
30
src/components/listview/List/ListGroupHeaderWrapper.tsx
Normal file
30
src/components/listview/List/ListGroupHeaderWrapper.tsx
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
import React, { type FC } from 'react';
|
||||
import Typography from '@mui/material/Typography';
|
||||
|
||||
interface ListGroupHeaderWrapperProps {
|
||||
index?: number;
|
||||
}
|
||||
|
||||
const ListGroupHeaderWrapper: FC<ListGroupHeaderWrapperProps> = ({
|
||||
index,
|
||||
children
|
||||
}) => {
|
||||
if (index === 0) {
|
||||
return (
|
||||
<Typography
|
||||
className='listGroupHeader listGroupHeader-first'
|
||||
variant='h2'
|
||||
>
|
||||
{children}
|
||||
</Typography>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<Typography className='listGroupHeader' variant='h2'>
|
||||
{children}
|
||||
</Typography>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default ListGroupHeaderWrapper;
|
||||
103
src/components/listview/List/ListImageContainer.tsx
Normal file
103
src/components/listview/List/ListImageContainer.tsx
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
import React, { type FC } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import Box from '@mui/material/Box';
|
||||
import { useApi } from 'hooks/useApi';
|
||||
import useIndicator from '../../indicators/useIndicator';
|
||||
import layoutManager from '../../layoutManager';
|
||||
import { getDefaultBackgroundClass } from '../../cardbuilder/cardBuilderUtils';
|
||||
import {
|
||||
canResume,
|
||||
getChannelImageUrl,
|
||||
getImageUrl
|
||||
} from './listHelper';
|
||||
|
||||
import Media from 'components/common/Media';
|
||||
import PlayArrowIconButton from 'components/common/PlayArrowIconButton';
|
||||
import type { ItemDto } from 'types/base/models/item-dto';
|
||||
import type { ListOptions } from 'types/listOptions';
|
||||
|
||||
interface ListImageContainerProps {
|
||||
item: ItemDto;
|
||||
listOptions: ListOptions;
|
||||
action?: string | null;
|
||||
isLargeStyle: boolean;
|
||||
clickEntireItem?: boolean;
|
||||
downloadWidth?: number;
|
||||
}
|
||||
|
||||
const ListImageContainer: FC<ListImageContainerProps> = ({
|
||||
item = {},
|
||||
listOptions,
|
||||
action,
|
||||
isLargeStyle,
|
||||
clickEntireItem,
|
||||
downloadWidth
|
||||
}) => {
|
||||
const { api } = useApi();
|
||||
const { getMediaSourceIndicator, getProgressBar, getPlayedIndicator } = useIndicator(item);
|
||||
const imgInfo = listOptions.imageSource === 'channel' ?
|
||||
getChannelImageUrl(item, api, downloadWidth) :
|
||||
getImageUrl(item, api, downloadWidth);
|
||||
|
||||
const defaultCardImageIcon = listOptions.defaultCardImageIcon;
|
||||
const disableIndicators = listOptions.disableIndicators;
|
||||
const imgUrl = imgInfo?.imgUrl;
|
||||
const blurhash = imgInfo.blurhash;
|
||||
|
||||
const imageClass = classNames(
|
||||
'listItemImage',
|
||||
{ 'listItemImage-large': isLargeStyle },
|
||||
{ 'listItemImage-channel': listOptions.imageSource === 'channel' },
|
||||
{ 'listItemImage-large-tv': isLargeStyle && layoutManager.tv },
|
||||
{ itemAction: !clickEntireItem },
|
||||
{ [getDefaultBackgroundClass(item.Name)]: !imgUrl }
|
||||
);
|
||||
|
||||
const playOnImageClick = listOptions.imagePlayButton && !layoutManager.tv;
|
||||
|
||||
const imageAction = playOnImageClick ? 'link' : action;
|
||||
|
||||
const btnCssClass =
|
||||
'paper-icon-button-light listItemImageButton itemAction';
|
||||
|
||||
const mediaSourceIndicator = getMediaSourceIndicator();
|
||||
const playedIndicator = getPlayedIndicator();
|
||||
const progressBar = getProgressBar();
|
||||
const playbackPositionTicks = item?.UserData?.PlaybackPositionTicks;
|
||||
|
||||
return (
|
||||
<Box
|
||||
data-action={imageAction}
|
||||
className={imageClass}
|
||||
>
|
||||
|
||||
<Media item={item} imgUrl={imgUrl} blurhash={blurhash} defaultCardImageIcon={defaultCardImageIcon} />
|
||||
|
||||
{disableIndicators !== true && mediaSourceIndicator}
|
||||
|
||||
{playedIndicator && (
|
||||
<Box className='indicators listItemIndicators'>
|
||||
{playedIndicator}
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{playOnImageClick && (
|
||||
<PlayArrowIconButton
|
||||
className={btnCssClass}
|
||||
action={
|
||||
canResume(playbackPositionTicks) ? 'resume' : 'play'
|
||||
}
|
||||
title={
|
||||
canResume(playbackPositionTicks) ?
|
||||
'ButtonResume' :
|
||||
'Play'
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
{progressBar}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default ListImageContainer;
|
||||
65
src/components/listview/List/ListItemBody.tsx
Normal file
65
src/components/listview/List/ListItemBody.tsx
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
import React, { type FC } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import Box from '@mui/material/Box';
|
||||
import useListTextlines from './useListTextlines';
|
||||
import PrimaryMediaInfo from '../../mediainfo/PrimaryMediaInfo';
|
||||
|
||||
import type { ItemDto } from 'types/base/models/item-dto';
|
||||
import type { ListOptions } from 'types/listOptions';
|
||||
|
||||
interface ListItemBodyProps {
|
||||
item: ItemDto;
|
||||
listOptions: ListOptions;
|
||||
action?: string | null;
|
||||
isLargeStyle?: boolean;
|
||||
clickEntireItem?: boolean;
|
||||
enableContentWrapper?: boolean;
|
||||
enableOverview?: boolean;
|
||||
enableSideMediaInfo?: boolean;
|
||||
getMissingIndicator: () => React.JSX.Element | null
|
||||
}
|
||||
|
||||
const ListItemBody: FC<ListItemBodyProps> = ({
|
||||
item = {},
|
||||
listOptions = {},
|
||||
action,
|
||||
isLargeStyle,
|
||||
clickEntireItem,
|
||||
enableContentWrapper,
|
||||
enableOverview,
|
||||
enableSideMediaInfo,
|
||||
getMissingIndicator
|
||||
}) => {
|
||||
const { listTextLines } = useListTextlines({ item, listOptions, isLargeStyle });
|
||||
const cssClass = classNames(
|
||||
'listItemBody',
|
||||
{ 'itemAction': !clickEntireItem },
|
||||
{ 'listItemBody-noleftpadding': listOptions.image === false }
|
||||
);
|
||||
|
||||
return (
|
||||
<Box data-action={action} className={cssClass}>
|
||||
|
||||
{listTextLines}
|
||||
|
||||
{listOptions.mediaInfo !== false && !enableSideMediaInfo && (
|
||||
<PrimaryMediaInfo
|
||||
className='secondary listItemMediaInfo listItemBodyText'
|
||||
item={item}
|
||||
isEpisodeTitleEnabled={true}
|
||||
isOriginalAirDateEnabled={true}
|
||||
isCaptionIndicatorEnabled={true}
|
||||
getMissingIndicator={getMissingIndicator}
|
||||
/>
|
||||
)}
|
||||
|
||||
{!enableContentWrapper && enableOverview && item.Overview && (
|
||||
<Box className='secondary listItem-overview listItemBodyText'>
|
||||
<bdi>{item.Overview}</bdi>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default ListItemBody;
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue