diff --git a/.ci/azure-pipelines.yml b/.ci/azure-pipelines.yml index 48f042d72..95bb416d2 100644 --- a/.ci/azure-pipelines.yml +++ b/.ci/azure-pipelines.yml @@ -2,8 +2,7 @@ trigger: batch: true branches: include: - - master - - release-* + - '*' tags: include: - '*' @@ -13,12 +12,9 @@ pr: - '*' jobs: - - job: build + - job: Build displayName: 'Build' - pool: - vmImage: 'ubuntu-latest' - strategy: matrix: Development: @@ -27,13 +23,15 @@ jobs: BuildConfiguration: production Standalone: BuildConfiguration: standalone - maxParallel: 3 + + pool: + vmImage: 'ubuntu-latest' steps: - task: NodeTool@0 displayName: 'Install Node' inputs: - versionSpec: '10.x' + versionSpec: '12.x' - task: Cache@2 displayName: 'Check Cache' @@ -63,16 +61,14 @@ jobs: - script: 'mv dist jellyfin-web' displayName: 'Rename Directory' - condition: succeeded() - task: PublishPipelineArtifact@1 displayName: 'Publish Release' - condition: succeeded() inputs: targetPath: '$(Build.SourcesDirectory)/jellyfin-web' artifactName: 'jellyfin-web-$(BuildConfiguration)' - - job: lint + - job: Lint displayName: 'Lint' pool: @@ -82,7 +78,7 @@ jobs: - task: NodeTool@0 displayName: 'Install Node' inputs: - versionSpec: '10.x' + versionSpec: '12.x' - task: Cache@2 displayName: 'Check Cache' @@ -95,7 +91,7 @@ jobs: displayName: 'Install Dependencies' condition: ne(variables.CACHE_RESTORED, 'true') - - script: 'yarn run lint' + - script: 'yarn run lint --quiet' displayName: 'Run ESLint' - script: 'yarn run stylelint' diff --git a/.eslintrc.yml b/.eslintrc.yml index 4bc22fc1d..a3348b70d 100644 --- a/.eslintrc.yml +++ b/.eslintrc.yml @@ -1,15 +1,31 @@ env: - es6: true - browser: true amd: true + browser: true + es6: true + es2017: true + es2020: true + +parserOptions: + ecmaVersion: 2020 + sourceType: module + ecmaFeatures: + impliedStrict: true + +plugins: + - promise + - import + - eslint-comments + +extends: + - eslint:recommended + - plugin:promise/recommended + - plugin:import/errors + - plugin:import/warnings + - plugin:eslint-comments/recommended globals: - # New browser globals - DataView: readonly + # Browser globals MediaMetadata: readonly - Promise: readonly - # Deprecated browser globals - DocumentTouch: readonly # Tizen globals tizen: readonly webapis: readonly @@ -18,7 +34,6 @@ globals: # Dependency globals $: readonly jQuery: readonly - queryString: readonly requirejs: readonly # Jellyfin globals ApiClient: writable @@ -34,8 +49,7 @@ globals: getWindowLocationSearch: writable Globalize: writable Hls: writable - humaneDate: writable - humaneElapsed: writable + dfnshelper: writable LibraryMenu: writable LinkParser: writable LiveTvHelpers: writable @@ -46,9 +60,6 @@ globals: UserParentalControlPage: writable Windows: readonly -extends: - - eslint:recommended - rules: block-spacing: ["error"] brace-style: ["error"] @@ -63,9 +74,14 @@ rules: no-multiple-empty-lines: ["error", { "max": 1 }] no-trailing-spaces: ["error"] one-var: ["error", "never"] - semi: ["warn"] + semi: ["error"] space-before-blocks: ["error"] # TODO: Fix warnings and remove these rules no-redeclare: ["warn"] no-unused-vars: ["warn"] no-useless-escape: ["warn"] + promise/catch-or-return: ["warn"] + promise/always-return: ["warn"] + promise/no-return-wrap: ["warn"] + # TODO: Remove after ES6 migration is complete + import/no-unresolved: ["warn"] diff --git a/.gitignore b/.gitignore index aafa7ae75..4adf9558b 100644 --- a/.gitignore +++ b/.gitignore @@ -1,580 +1,11 @@ +# config +config.json -# Created by https://www.gitignore.io/api/node,rider,macos,linux,windows,visualstudio,visualstudiocode -# Edit at https://www.gitignore.io/?templates=node,rider,macos,linux,windows,visualstudio,visualstudiocode - -### Linux ### -*~ - -# temporary files which can be created if a process still has a handle open of a deleted file -.fuse_hidden* - -# KDE directory preferences -.directory - -# Linux trash folder which might appear on any partition or disk -.Trash-* - -# .nfs files are created when an open file is removed but is still being accessed -.nfs* - -### macOS ### -# General -.DS_Store -.AppleDouble -.LSOverride - -# Icon must end with two \r -Icon - -# Thumbnails -._* - -# Files that might appear in the root of a volume -.DocumentRevisions-V100 -.fseventsd -.Spotlight-V100 -.TemporaryItems -.Trashes -.VolumeIcon.icns -.com.apple.timemachine.donotpresent - -# Directories potentially created on remote AFP share -.AppleDB -.AppleDesktop -Network Trash Folder -Temporary Items -.apdisk - -### Node ### -# Logs -logs -*.log -npm-debug.log* -yarn-debug.log* -yarn-error.log* - -# Runtime data -pids -*.pid -*.seed -*.pid.lock - -# Directory for instrumented libs generated by jscoverage/JSCover -lib-cov - -# Coverage directory used by tools like istanbul -coverage - -# nyc test coverage -.nyc_output - -# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) -.grunt - -# node-waf configuration -.lock-wscript - -# Compiled binary addons (https://nodejs.org/api/addons.html) -build/Release - -# Dependency directories -node_modules/ -jspm_packages/ - -# Dependency lockfile -package-lock.json - -# TypeScript v1 declaration files -typings/ - -# Optional npm cache directory -.npm - -# Optional eslint cache -.eslintcache - -# Optional REPL history -.node_repl_history - -# Output of 'npm pack' -*.tgz - -# Yarn Integrity file -.yarn-integrity - -# dotenv environment variables file -.env -.env.test - -# parcel-bundler cache (https://parceljs.org/) -.cache - -# next.js build output -.next - -# nuxt.js build output -.nuxt - -# vuepress build output -.vuepress/dist - -# Serverless directories -.serverless/ - -# FuseBox cache -.fusebox/ - -# DynamoDB Local files -.dynamodb/ - -### Rider ### -# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and WebStorm -# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839 - -# User-specific stuff -.idea/**/workspace.xml -.idea/**/tasks.xml -.idea/**/usage.statistics.xml -.idea/**/dictionaries -.idea/**/shelf - -# Generated files -.idea/**/contentModel.xml - -# Sensitive or high-churn files -.idea/**/dataSources/ -.idea/**/dataSources.ids -.idea/**/dataSources.local.xml -.idea/**/sqlDataSources.xml -.idea/**/dynamic.xml -.idea/**/uiDesigner.xml -.idea/**/dbnavigator.xml - -# Gradle -.idea/**/gradle.xml -.idea/**/libraries - -# Gradle and Maven with auto-import -# When using Gradle or Maven with auto-import, you should exclude module files, -# since they will be recreated, and may cause churn. Uncomment if using -# auto-import. -# .idea/modules.xml -# .idea/*.iml -# .idea/modules - -# CMake -cmake-build-*/ - -# Mongo Explorer plugin -.idea/**/mongoSettings.xml - -# File-based project format -*.iws - -# IntelliJ -out/ - -# mpeltonen/sbt-idea plugin -.idea_modules/ - -# JIRA plugin -atlassian-ide-plugin.xml - -# Cursive Clojure plugin -.idea/replstate.xml - -# Crashlytics plugin (for Android Studio and IntelliJ) -com_crashlytics_export_strings.xml -crashlytics.properties -crashlytics-build.properties -fabric.properties - -# Editor-based Rest Client -.idea/httpRequests - -# Android studio 3.1+ serialized cache file -.idea/caches/build_file_checksums.ser - -### VisualStudioCode ### -.vscode/* -!.vscode/settings.json -!.vscode/tasks.json -!.vscode/launch.json -!.vscode/extensions.json - -### VisualStudioCode Patch ### -# Ignore all local history of files -.history - -### Windows ### -# Windows thumbnail cache files -Thumbs.db -ehthumbs.db -ehthumbs_vista.db - -# Dump file -*.stackdump - -# Folder config file -[Dd]esktop.ini - -# Recycle Bin used on file shares -$RECYCLE.BIN/ - -# Windows Installer files -*.cab -*.msi -*.msix -*.msm -*.msp - -# Windows shortcuts -*.lnk - -### VisualStudio ### -## Ignore Visual Studio temporary files, build results, and -## files generated by popular Visual Studio add-ons. -## -## Get latest from https://github.com/github/gitignore/blob/master/VisualStudio.gitignore - -# User-specific files -*.rsuser -*.suo -*.user -*.userosscache -*.sln.docstates - -# User-specific files (MonoDevelop/Xamarin Studio) -*.userprefs - -# Build results -[Dd]ebug/ -[Dd]ebugPublic/ -[Rr]elease/ -[Rr]eleases/ -x64/ -x86/ -[Aa][Rr][Mm]/ -[Aa][Rr][Mm]64/ -bld/ -[Bb]in/ -[Oo]bj/ -[Ll]og/ - -# Visual Studio 2015/2017 cache/options directory -.vs/ -# Uncomment if you have tasks that create the project's static files in wwwroot -#wwwroot/ - -# Visual Studio 2017 auto generated files -Generated\ Files/ - -# MSTest test Results -[Tt]est[Rr]esult*/ -[Bb]uild[Ll]og.* - -# NUNIT -*.VisualState.xml -TestResult.xml - -# Build Results of an ATL Project -[Dd]ebugPS/ -[Rr]eleasePS/ -dlldata.c - -# Benchmark Results -BenchmarkDotNet.Artifacts/ - -# .NET Core -project.lock.json -project.fragment.lock.json -artifacts/ - -# StyleCop -StyleCopReport.xml - -# Files built by Visual Studio -*_i.c -*_p.c -*_h.h -*.ilk -*.meta -*.obj -*.iobj -*.pch -*.pdb -*.ipdb -*.pgc -*.pgd -*.rsp -*.sbr -*.tlb -*.tli -*.tlh -*.tmp -*.tmp_proj -*_wpftmp.csproj -*.vspscc -*.vssscc -.builds -*.pidb -*.svclog -*.scc - -# Chutzpah Test files -_Chutzpah* - -# Visual C++ cache files -ipch/ -*.aps -*.ncb -*.opendb -*.opensdf -*.sdf -*.cachefile -*.VC.db -*.VC.VC.opendb - -# Visual Studio profiler -*.psess -*.vsp -*.vspx -*.sap - -# Visual Studio Trace Files -*.e2e - -# TFS 2012 Local Workspace -$tf/ - -# Guidance Automation Toolkit -*.gpState - -# ReSharper is a .NET coding add-in -_ReSharper*/ -*.[Rr]e[Ss]harper -*.DotSettings.user - -# JustCode is a .NET coding add-in -.JustCode - -# TeamCity is a build add-in -_TeamCity* - -# DotCover is a Code Coverage Tool -*.dotCover - -# AxoCover is a Code Coverage Tool -.axoCover/* -!.axoCover/settings.json - -# Visual Studio code coverage results -*.coverage -*.coveragexml - -# NCrunch -_NCrunch_* -.*crunch*.local.xml -nCrunchTemp_* - -# MightyMoose -*.mm.* -AutoTest.Net/ - -# Web workbench (sass) -.sass-cache/ - -# Installshield output folder -[Ee]xpress/ - -# DocProject is a documentation generator add-in -DocProject/buildhelp/ -DocProject/Help/*.HxT -DocProject/Help/*.HxC -DocProject/Help/*.hhc -DocProject/Help/*.hhk -DocProject/Help/*.hhp -DocProject/Help/Html2 -DocProject/Help/html - -# Click-Once directory -publish/ - -# Publish Web Output -*.[Pp]ublish.xml -*.azurePubxml -# Note: Comment the next line if you want to checkin your web deploy settings, -# but database connection strings (with potential passwords) will be unencrypted -*.pubxml -*.publishproj - -# Microsoft Azure Web App publish settings. Comment the next line if you want to -# checkin your Azure Web App publish settings, but sensitive information contained -# in these scripts will be unencrypted -PublishScripts/ - -# NuGet Packages -*.nupkg -# The packages folder can be ignored because of Package Restore -**/[Pp]ackages/* -# except build/, which is used as an MSBuild target. -!**/[Pp]ackages/build/ -# Uncomment if necessary however generally it will be regenerated when needed -#!**/[Pp]ackages/repositories.config -# NuGet v3's project.json files produces more ignorable files -*.nuget.props -*.nuget.targets - -# Microsoft Azure Build Output -csx/ -*.build.csdef - -# Microsoft Azure Emulator -ecf/ -rcf/ - -# Windows Store app package directories and files -AppPackages/ -BundleArtifacts/ -Package.StoreAssociation.xml -_pkginfo.txt -*.appx - -# Visual Studio cache files -# files ending in .cache can be ignored -*.[Cc]ache -# but keep track of directories ending in .cache -!?*.[Cc]ache/ - -# Others -ClientBin/ -~$* -*.dbmdl -*.dbproj.schemaview -*.jfm -*.pfx -*.publishsettings -orleans.codegen.cs - -# Including strong name files can present a security risk -# (https://github.com/github/gitignore/pull/2483#issue-259490424) -#*.snk - -# Since there are multiple workflows, uncomment next line to ignore bower_components -# (https://github.com/github/gitignore/pull/1529#issuecomment-104372622) -#bower_components/ -# ASP.NET Core default setup: bower directory is configured as wwwroot/lib/ and bower restore is true -**/wwwroot/lib/ - -# RIA/Silverlight projects -Generated_Code/ - -# Backup & report files from converting an old project file -# to a newer Visual Studio version. Backup files are not needed, -# because we have git ;-) -_UpgradeReport_Files/ -Backup*/ -UpgradeLog*.XML -UpgradeLog*.htm -ServiceFabricBackup/ -*.rptproj.bak - -# SQL Server files -*.mdf -*.ldf -*.ndf - -# Business Intelligence projects -*.rdl.data -*.bim.layout -*.bim_*.settings -*.rptproj.rsuser -*- Backup*.rdl - -# Microsoft Fakes -FakesAssemblies/ - -# GhostDoc plugin setting file -*.GhostDoc.xml - -# Node.js Tools for Visual Studio -.ntvs_analysis.dat - -# Visual Studio 6 build log -*.plg - -# Visual Studio 6 workspace options file -*.opt - -# Visual Studio 6 auto-generated workspace file (contains which files were open etc.) -*.vbw - -# Visual Studio LightSwitch build output -**/*.HTMLClient/GeneratedArtifacts -**/*.DesktopClient/GeneratedArtifacts -**/*.DesktopClient/ModelManifest.xml -**/*.Server/GeneratedArtifacts -**/*.Server/ModelManifest.xml -_Pvt_Extensions - -# Paket dependency manager -.paket/paket.exe -paket-files/ - -# FAKE - F# Make -.fake/ - -# JetBrains Rider -.idea/ -*.sln.iml - -# CodeRush personal settings -.cr/personal - -# Python Tools for Visual Studio (PTVS) -__pycache__/ -*.pyc - -# Cake - Uncomment if you are using it -# tools/** -# !tools/packages.config - -# Tabs Studio -*.tss - -# Telerik's JustMock configuration file -*.jmconfig - -# BizTalk build output -*.btp.cs -*.btm.cs -*.odx.cs -*.xsd.cs - -# OpenCover UI analysis results -OpenCover/ - -# Azure Stream Analytics local run output -ASALocalRun/ - -# MSBuild Binary and Structured Log -*.binlog - -# NVidia Nsight GPU debugger configuration file -*.nvuser - -# MFractors (Xamarin productivity tool) working folder -.mfractor/ - -# Local History for Visual Studio -.localhistory/ - -# BeatPulse healthcheck temp database -healthchecksdb - -# End of https://www.gitignore.io/api/node,rider,macos,linux,windows,visualstudio,visualstudiocode - -# dist for webpack output +# npm dist web node_modules + +# ide +.idea +.vscode \ No newline at end of file diff --git a/babel.config.json b/babel.config.json new file mode 100644 index 000000000..1320b9a32 --- /dev/null +++ b/babel.config.json @@ -0,0 +1,3 @@ +{ + "presets": ["@babel/preset-env"] +} diff --git a/gulpfile.js b/gulpfile.js index ca6cf36dd..0eb559354 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -18,16 +18,42 @@ const stream = require('webpack-stream'); const inject = require('gulp-inject'); const postcss = require('gulp-postcss'); const sass = require('gulp-sass'); - -sass.compiler = require('node-sass') +const gulpif = require('gulp-if'); +const lazypipe = require('lazypipe'); +sass.compiler = require('node-sass'); +let config; if (mode.production()) { - var config = require('./webpack.prod.js'); + config = require('./webpack.prod.js'); } else { - var config = require('./webpack.dev.js'); + config = require('./webpack.dev.js'); } +const options = { + javascript: { + query: ['src/**/*.js', '!src/bundle.js', '!src/standalone.js', '!src/scripts/apploader.js'] + }, + apploader: { + query: ['src/standalone.js', 'src/scripts/apploader.js'] + }, + css: { + query: ['src/**/*.css', 'src/**/*.scss'] + }, + html: { + query: ['src/**/*.html', '!src/index.html'] + }, + images: { + query: ['src/**/*.png', 'src/**/*.jpg', 'src/**/*.gif', 'src/**/*.svg'] + }, + copy: { + query: ['src/**/*.json', 'src/**/*.ico'] + }, + injectBundle: { + query: 'src/index.html' + } +}; + function serve() { browserSync.init({ server: { @@ -36,51 +62,99 @@ function serve() { port: 8080 }); - watch(['src/**/*.js', '!src/bundle.js'], javascript); - watch('src/bundle.js', webpack); - watch('src/**/*.css', css); - watch(['src/**/*.html', '!src/index.html'], html); - watch(['src/**/*.png', 'src/**/*.jpg', 'src/**/*.gif', 'src/**/*.svg'], images); - watch(['src/**/*.json', 'src/**/*.ico'], copy); - watch('src/index.html', injectBundle); - watch(['src/standalone.js', 'src/scripts/apploader.js'], standalone); -} + let events = ['add', 'change']; -function standalone() { - return src(['src/standalone.js', 'src/scripts/apploader.js'], { base: './src/' }) - .pipe(concat('scripts/apploader.js')) - .pipe(dest('dist/')); + watch(options.javascript.query).on('all', function (event, path) { + if (events.includes(event)) { + javascript(path); + } + }); + + watch(options.apploader.query, apploader(true)); + + watch('src/bundle.js', webpack); + + watch(options.css.query).on('all', function (event, path) { + if (events.includes(event)) { + css(path); + } + }); + + watch(options.html.query).on('all', function (event, path) { + if (events.includes(event)) { + html(path); + } + }); + + watch(options.images.query).on('all', function (event, path) { + if (events.includes(event)) { + images(path); + } + }); + + watch(options.copy.query).on('all', function (event, path) { + if (events.includes(event)) { + copy(path); + } + }); + + watch(options.injectBundle.query, injectBundle); } function clean() { return del(['dist/']); } -function javascript() { - return src(['src/**/*.js', '!src/bundle.js'], { base: './src/' }) - .pipe(mode.development(sourcemaps.init({ loadMaps: true }))) - .pipe(babel({ +let pipelineJavascript = lazypipe() + .pipe(function () { + return mode.development(sourcemaps.init({ loadMaps: true })); + }) + .pipe(function () { + return babel({ presets: [ ['@babel/preset-env'] ] - })) - .pipe(terser({ + }); + }) + .pipe(function () { + return terser({ keep_fnames: true, mangle: false - })) - .pipe(mode.development(sourcemaps.write('.'))) + }); + }) + .pipe(function () { + return mode.development(sourcemaps.write('.')); + }); + +function javascript(query) { + return src(typeof query !== 'function' ? query : options.javascript.query, { base: './src/' }) + .pipe(pipelineJavascript()) .pipe(dest('dist/')) .pipe(browserSync.stream()); } +function apploader(standalone) { + function task() { + return src(options.apploader.query, { base: './src/' }) + .pipe(gulpif(standalone, concat('scripts/apploader.js'))) + .pipe(pipelineJavascript()) + .pipe(dest('dist/')) + .pipe(browserSync.stream()); + }; + + task.displayName = 'apploader'; + + return task; +} + function webpack() { return stream(config) .pipe(dest('dist/')) .pipe(browserSync.stream()); } -function css() { - return src(['src/**/*.css', 'src/**/*.scss'], { base: './src/' }) +function css(query) { + return src(typeof query !== 'function' ? query : options.css.query, { base: './src/' }) .pipe(mode.development(sourcemaps.init({ loadMaps: true }))) .pipe(sass().on('error', sass.logError)) .pipe(postcss()) @@ -89,28 +163,28 @@ function css() { .pipe(browserSync.stream()); } -function html() { - return src(['src/**/*.html', '!src/index.html'], { base: './src/' }) +function html(query) { + return src(typeof query !== 'function' ? query : options.html.query, { base: './src/' }) .pipe(mode.production(htmlmin({ collapseWhitespace: true }))) .pipe(dest('dist/')) .pipe(browserSync.stream()); } -function images() { - return src(['src/**/*.png', 'src/**/*.jpg', 'src/**/*.gif', 'src/**/*.svg'], { base: './src/' }) +function images(query) { + return src(typeof query !== 'function' ? query : options.images.query, { base: './src/' }) .pipe(mode.production(imagemin())) .pipe(dest('dist/')) .pipe(browserSync.stream()); } -function copy() { - return src(['src/**/*.json', 'src/**/*.ico'], { base: './src/' }) +function copy(query) { + return src(typeof query !== 'function' ? query : options.copy.query, { base: './src/' }) .pipe(dest('dist/')) .pipe(browserSync.stream()); } function injectBundle() { - return src('src/index.html', { base: './src/' }) + return src(options.injectBundle.query, { base: './src/' }) .pipe(inject( src(['src/scripts/apploader.js'], { read: false }, { base: './src/' }), { relative: true } )) @@ -118,6 +192,10 @@ function injectBundle() { .pipe(browserSync.stream()); } -exports.default = series(clean, parallel(javascript, webpack, css, html, images, copy), injectBundle) -exports.standalone = series(exports.default, standalone) -exports.serve = series(exports.standalone, serve) +function build(standalone) { + return series(clean, parallel(javascript, apploader(standalone), webpack, css, html, images, copy), injectBundle); +} + +exports.default = build(false); +exports.standalone = build(true); +exports.serve = series(exports.standalone, serve); diff --git a/package.json b/package.json index 6d07f9a6f..af74087e7 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "license": "GPL-2.0-or-later", "devDependencies": { "@babel/core": "^7.8.6", + "@babel/plugin-transform-modules-amd": "^7.8.3", "@babel/polyfill": "^7.8.7", "@babel/preset-env": "^7.8.6", "autoprefixer": "^9.7.4", @@ -17,12 +18,16 @@ "cssnano": "^4.1.10", "del": "^5.1.0", "eslint": "^6.8.0", - "file-loader": "^5.0.2", + "eslint-plugin-eslint-comments": "^3.1.2", + "eslint-plugin-import": "^2.20.2", + "eslint-plugin-promise": "^4.2.1", + "file-loader": "^6.0.0", "gulp": "^4.0.2", "gulp-babel": "^8.0.0", "gulp-cli": "^2.2.0", "gulp-concat": "^2.6.1", "gulp-htmlmin": "^5.0.1", + "gulp-if": "^3.0.0", "gulp-imagemin": "^7.1.0", "gulp-inject": "^5.0.5", "gulp-mode": "^1.0.2", @@ -30,7 +35,8 @@ "gulp-sass": "^4.0.2", "gulp-sourcemaps": "^2.6.5", "gulp-terser": "^1.2.0", - "html-webpack-plugin": "^3.2.0", + "html-webpack-plugin": "^4.0.2", + "lazypipe": "^1.0.2", "node-sass": "^4.13.1", "postcss-loader": "^3.0.0", "postcss-preset-env": "^6.7.0", @@ -48,7 +54,9 @@ }, "dependencies": { "alameda": "^1.4.0", + "classlist.js": "https://github.com/eligrey/classList.js/archive/1.2.20180112.tar.gz", "core-js": "^3.6.4", + "date-fns": "^2.11.1", "document-register-element": "^1.14.3", "flv.js": "^1.5.0", "hls.js": "^0.13.1", @@ -56,14 +64,13 @@ "jellyfin-noto": "https://github.com/jellyfin/jellyfin-noto", "jquery": "^3.4.1", "jstree": "^3.3.7", - "libass-wasm": "https://github.com/jellyfin/JavascriptSubtitlesOctopus", - "libjass": "^0.11.0", + "libass-wasm": "https://github.com/jellyfin/JavascriptSubtitlesOctopus#4.0.0-jf-cordova", "material-design-icons-iconfont": "^5.0.1", "native-promise-only": "^0.8.0-a", "page": "^1.11.5", "query-string": "^6.11.1", "resize-observer-polyfill": "^1.5.1", - "shaka-player": "^2.5.9", + "shaka-player": "^2.5.10", "sortablejs": "^1.10.2", "swiper": "^5.3.1", "webcomponents.js": "^0.7.24", @@ -72,6 +79,28 @@ "babel": { "presets": [ "@babel/preset-env" + ], + "overrides": [ + { + "test": [ + "src/components/autoFocuser.js", + "src/components/cardbuilder/cardBuilder.js", + "src/components/dom.js", + "src/components/filedownloader.js", + "src/components/filesystem.js", + "src/components/input/keyboardnavigation.js", + "src/components/scrollManager.js", + "src/components/sanatizefilename.js", + "src/scripts/settings/webSettings.js", + "src/scripts/settings/appSettings.js", + "src/scripts/settings/userSettings.js", + "src/scripts/imagehelper.js", + "src/scripts/dfnshelper.js" + ], + "plugins": [ + "@babel/plugin-transform-modules-amd" + ] + } ] }, "browserslist": [ diff --git a/src/assets/css/dashboard.css b/src/assets/css/dashboard.css index 8c8a9ca7f..894d7332f 100644 --- a/src/assets/css/dashboard.css +++ b/src/assets/css/dashboard.css @@ -63,6 +63,10 @@ progress[aria-valuenow]::before { } .adminDrawerLogo { + display: none; +} + +.layout-mobile .adminDrawerLogo { padding: 1.5em 1em 1.2em; border-bottom: 1px solid #e0e0e0; margin-bottom: 1em; @@ -161,7 +165,7 @@ div[data-role=controlgroup] a.ui-btn-active { @media all and (min-width: 40em) { .content-primary { - padding-top: 7em; + padding-top: 4.6em; } .withTabs .content-primary { diff --git a/src/assets/css/librarybrowser.css b/src/assets/css/librarybrowser.css index 0bf65d83a..f0865815f 100644 --- a/src/assets/css/librarybrowser.css +++ b/src/assets/css/librarybrowser.css @@ -21,7 +21,7 @@ } .libraryPage { - padding-top: 7em !important; + padding-top: 7em; } .itemDetailPage { @@ -242,7 +242,7 @@ } .mainDrawer-scrollContainer { - padding-bottom: 10vh; + margin-bottom: 10vh; } @media all and (min-width: 40em) { @@ -313,7 +313,7 @@ } .dashboardDocument .mainDrawer-scrollContainer { - margin-top: 6em !important; + margin-top: 4.6em !important; } } @@ -1119,3 +1119,50 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards { .itemsViewSettingsContainer > .button-flat { margin: 0; } + +.layout-mobile #myPreferencesMenuPage { + padding-top: 3.75em; +} + +.itemDetailsGroup { + margin-bottom: 1.5em; +} + +.trackSelections { + max-width: 44em; +} + +.detailsGroupItem, +.trackSelections .selectContainer { + display: flex; + max-width: 44em; + margin: 0 0 0.5em !important; +} + +.trackSelections .selectContainer { + margin: 0 0 0.3em !important; +} + +.detailsGroupItem .label, +.trackSelections .selectContainer .selectLabel { + cursor: default; + flex-grow: 0; + flex-shrink: 0; + flex-basis: 6.25em; + margin: 0 0.6em 0 0; +} + +.trackSelections .selectContainer .selectLabel { + margin: 0 0.2em 0 0; +} + +.trackSelections .selectContainer .detailTrackSelect { + font-size: inherit; + padding: 0; + overflow: hidden; +} + +.trackSelections .selectContainer .selectArrowContainer .selectArrow { + margin-top: 0; + font-size: 1.4em; +} diff --git a/src/bundle.js b/src/bundle.js index c5c5e1bca..11379c9d8 100644 --- a/src/bundle.js +++ b/src/bundle.js @@ -13,7 +13,7 @@ _define("document-register-element", function() { // fetch var fetch = require("whatwg-fetch"); _define("fetch", function() { - return fetch + return fetch; }); // query-string @@ -84,13 +84,6 @@ _define("webcomponents", function() { return webcomponents; }); -// libjass -var libjass = require("libjass"); -require("libjass/libjass.css"); -_define("libjass", function() { - return libjass; -}); - // libass-wasm var libass_wasm = require("libass-wasm"); _define("JavascriptSubtitlesOctopus", function() { @@ -119,3 +112,20 @@ var polyfill = require("@babel/polyfill/dist/polyfill"); _define("polyfill", function () { return polyfill; }); + +// domtokenlist-shim +var classlist = require("classlist.js"); +_define("classlist-polyfill", function () { + return classlist; +}); + +// Date-FNS +var date_fns = require("date-fns"); +_define("date-fns", function () { + return date_fns; +}); + +var date_fns_locale = require("date-fns/locale"); +_define("date-fns/locale", function () { + return date_fns_locale; +}); diff --git a/src/components/activitylog.js b/src/components/activitylog.js index 05971f01b..62eda74d5 100644 --- a/src/components/activitylog.js +++ b/src/components/activitylog.js @@ -1,4 +1,4 @@ -define(["events", "globalize", "dom", "datetime", "userSettings", "serverNotifications", "connectionManager", "emby-button", "listViewStyle"], function (events, globalize, dom, datetime, userSettings, serverNotifications, connectionManager) { +define(["events", "globalize", "dom", "date-fns", "dfnshelper", "userSettings", "serverNotifications", "connectionManager", "emby-button", "listViewStyle"], function (events, globalize, dom, datefns, dfnshelper, userSettings, serverNotifications, connectionManager) { "use strict"; function getEntryHtml(entry, apiClient) { @@ -16,7 +16,7 @@ define(["events", "globalize", "dom", "datetime", "userSettings", "serverNotific html += 'dvr" + }) + "');background-repeat:no-repeat;background-position:center center;background-size: cover;\">dvr"; } else { html += '' + icon + ''; } @@ -26,8 +26,7 @@ define(["events", "globalize", "dom", "datetime", "userSettings", "serverNotific html += entry.Name; html += ""; html += '
'; - var date = datetime.parseISO8601Date(entry.Date, true); - html += datetime.toLocaleString(date).toLowerCase(); + html += datefns.formatRelative(Date.parse(entry.Date), Date.parse(new Date()), { locale: dfnshelper.getLocale() }); html += "
"; html += '
'; html += entry.ShortOverview || ""; diff --git a/src/components/appRouter.js b/src/components/appRouter.js index efb58a089..23934467b 100644 --- a/src/components/appRouter.js +++ b/src/components/appRouter.js @@ -511,9 +511,16 @@ define(['loading', 'globalize', 'events', 'viewManager', 'layoutManager', 'skinM return baseRoute; } + var popstateOccurred = false; + window.addEventListener('popstate', function () { + popstateOccurred = true; + }); + function getHandler(route) { return function (ctx, next) { + ctx.isBack = popstateOccurred; handleRoute(ctx, next, route); + popstateOccurred = false; }; } @@ -570,8 +577,8 @@ define(['loading', 'globalize', 'events', 'viewManager', 'layoutManager', 'skinM function showDirect(path) { return new Promise(function(resolve, reject) { - resolveOnNextShow = resolve, page.show(baseUrl()+path) - }) + resolveOnNextShow = resolve, page.show(baseUrl()+path); + }); } function show(path, options) { diff --git a/src/components/apphost.js b/src/components/apphost.js index 5d033ce6f..e4bce62ce 100644 --- a/src/components/apphost.js +++ b/src/components/apphost.js @@ -1,4 +1,4 @@ -define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSettings, browser, events, htmlMediaHelper) { +define(["appSettings", "browser", "events", "htmlMediaHelper", "webSettings"], function (appSettings, browser, events, htmlMediaHelper, webSettings) { "use strict"; function getBaseProfileOptions(item) { @@ -276,15 +276,17 @@ define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSet features.push("otherapppromotions"); features.push("displaymode"); features.push("targetblank"); - // allows users to connect to more than one server - //features.push("multiserver"); features.push("screensaver"); - if (!browser.orsay && !browser.tizen && !browser.msie && (browser.firefox || browser.ps4 || browser.edge || supportsCue())) { + webSettings.enableMultiServer().then(enabled => { + if (enabled) features.push("multiserver"); + }); + + if (!browser.orsay && !browser.msie && (browser.firefox || browser.ps4 || browser.edge || supportsCue())) { features.push("subtitleappearancesettings"); } - if (!browser.orsay && !browser.tizen) { + if (!browser.orsay) { features.push("subtitleburnsettings"); } @@ -381,7 +383,7 @@ define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSet return window.NativeShell.AppHost.getDefaultLayout(); } - return getDefaultLayout() + return getDefaultLayout(); }, getDeviceProfile: getDeviceProfile, init: function () { diff --git a/src/components/autoFocuser.js b/src/components/autoFocuser.js index 6d99009e6..43c341bfd 100644 --- a/src/components/autoFocuser.js +++ b/src/components/autoFocuser.js @@ -1,22 +1,29 @@ -define(["focusManager", "layoutManager"], function (focusManager, layoutManager) { - "use strict"; +/* eslint-disable indent */ + +/** + * Module for performing auto-focus. + * @module components/autoFocuser + */ + +import focusManager from "focusManager"; +import layoutManager from "layoutManager"; /** * Previously selected element. */ - var activeElement; + let activeElement; /** - * Returns true if AutoFocuser is enabled. + * Returns _true_ if AutoFocuser is enabled. */ - function isEnabled() { + export function isEnabled() { return layoutManager.tv; } /** - * Start AutoFocuser + * Start AutoFocuser. */ - function enable() { + export function enable() { if (!isEnabled()) { return; } @@ -28,24 +35,19 @@ define(["focusManager", "layoutManager"], function (focusManager, layoutManager) console.debug("AutoFocuser enabled"); } - /** - * Create an array from some source. - */ - var arrayFrom = Array.prototype.from || function (src) { - return Array.prototype.slice.call(src); - } - /** * Set focus on a suitable element, taking into account the previously selected. + * @param {HTMLElement} [container] - Element to limit scope. + * @returns {HTMLElement} Focused element. */ - function autoFocus(container) { + export function autoFocus(container) { if (!isEnabled()) { - return; + return null; } container = container || document.body; - var candidates = []; + let candidates = []; if (activeElement) { // These elements are recreated @@ -62,10 +64,10 @@ define(["focusManager", "layoutManager"], function (focusManager, layoutManager) candidates.push(activeElement); } - candidates = candidates.concat(arrayFrom(container.querySelectorAll(".btnResume"))); - candidates = candidates.concat(arrayFrom(container.querySelectorAll(".btnPlay"))); + candidates = candidates.concat(Array.from(container.querySelectorAll(".btnResume"))); + candidates = candidates.concat(Array.from(container.querySelectorAll(".btnPlay"))); - var focusedElement; + let focusedElement; candidates.every(function (element) { if (focusManager.isCurrentlyFocusable(element)) { @@ -79,7 +81,7 @@ define(["focusManager", "layoutManager"], function (focusManager, layoutManager) if (!focusedElement) { // FIXME: Multiple itemsContainers - var itemsContainer = container.querySelector(".itemsContainer"); + const itemsContainer = container.querySelector(".itemsContainer"); if (itemsContainer) { focusedElement = focusManager.autoFocus(itemsContainer); @@ -93,9 +95,10 @@ define(["focusManager", "layoutManager"], function (focusManager, layoutManager) return focusedElement; } - return { - isEnabled: isEnabled, - enable: enable, - autoFocus: autoFocus - }; -}); +/* eslint-enable indent */ + +export default { + isEnabled: isEnabled, + enable: enable, + autoFocus: autoFocus +}; diff --git a/src/components/backdropscreensaver/plugin.js b/src/components/backdropscreensaver/plugin.js index c0bd31fb8..55de27a13 100644 --- a/src/components/backdropscreensaver/plugin.js +++ b/src/components/backdropscreensaver/plugin.js @@ -52,5 +52,5 @@ define(["connectionManager"], function (connectionManager) { currentSlideshow = null; } }; - } + }; }); diff --git a/src/components/cardbuilder/cardBuilder.js b/src/components/cardbuilder/cardBuilder.js index 7f562f1fd..a4cf6edad 100644 --- a/src/components/cardbuilder/cardBuilder.js +++ b/src/components/cardbuilder/cardBuilder.js @@ -1,10 +1,36 @@ -define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusManager', 'indicators', 'globalize', 'layoutManager', 'apphost', 'dom', 'browser', 'playbackManager', 'itemShortcuts', 'scripts/imagehelper', 'css!./card', 'paper-icon-button-light', 'programStyles'], - function (datetime, imageLoader, connectionManager, itemHelper, focusManager, indicators, globalize, layoutManager, appHost, dom, browser, playbackManager, itemShortcuts, imageHelper) { - 'use strict'; +/* eslint-disable indent */ - var enableFocusTransform = !browser.slow && !browser.edge; +/** + * Module for building cards from item data. + * @module components/cardBuilder/cardBuilder + */ - function getCardsHtml(items, options) { +import datetime from 'datetime'; +import imageLoader from 'imageLoader'; +import connectionManager from 'connectionManager'; +import itemHelper from 'itemHelper'; +import focusManager from 'focusManager'; +import indicators from 'indicators'; +import globalize from 'globalize'; +import layoutManager from 'layoutManager'; +import dom from 'dom'; +import browser from 'browser'; +import playbackManager from 'playbackManager'; +import itemShortcuts from 'itemShortcuts'; +import imageHelper from 'scripts/imagehelper'; +import 'css!./card'; +import 'paper-icon-button-light'; +import 'programStyles'; + + const enableFocusTransform = !browser.slow && !browser.edge; + + /** + * Generate the HTML markup for cards for a set of items. + * @param items - The items used to generate cards. + * @param options - The options of the cards. + * @returns {string} The HTML markup for the cards. + */ + export function getCardsHtml(items, options) { if (arguments.length === 1) { options = arguments[0]; items = options.items; @@ -13,6 +39,13 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana return buildCardsHtmlInternal(items, options); } + /** + * Computes the number of posters per row. + * @param {string} shape - Shape of the cards. + * @param {number} screenWidth - Width of the screen. + * @param {boolean} isOrientationLandscape - Flag for the orientation of the screen. + * @returns {number} Number of cards per row for an itemsContainer. + */ function getPostersPerRow(shape, screenWidth, isOrientationLandscape) { switch (shape) { case 'portrait': @@ -217,10 +250,15 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana } } + /** + * Checks if the window is resizable. + * @param {number} windowWidth - Width of the device's screen. + * @returns {boolean} - Result of the check. + */ function isResizable(windowWidth) { - var screen = window.screen; + const screen = window.screen; if (screen) { - var screenWidth = screen.availWidth; + const screenWidth = screen.availWidth; if ((screenWidth - windowWidth) > 20) { return true; @@ -230,22 +268,31 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana return false; } + /** + * Gets the width of a card's image according to the shape and amount of cards per row. + * @param {string} shape - Shape of the card. + * @param {number} screenWidth - Width of the screen. + * @param {boolean} isOrientationLandscape - Flag for the orientation of the screen. + * @returns {number} Width of the image for a card. + */ function getImageWidth(shape, screenWidth, isOrientationLandscape) { - var imagesPerRow = getPostersPerRow(shape, screenWidth, isOrientationLandscape); - var shapeWidth = Math.round(screenWidth / imagesPerRow) * 2; - - return shapeWidth; + const imagesPerRow = getPostersPerRow(shape, screenWidth, isOrientationLandscape); + return Math.round(screenWidth / imagesPerRow) * 2; } + /** + * Normalizes the options for a card. + * @param {Object} items - A set of items. + * @param {Object} options - Options for handling the items. + */ function setCardData(items, options) { - options.shape = options.shape || "auto"; - var primaryImageAspectRatio = imageLoader.getPrimaryImageAspectRatio(items); + const primaryImageAspectRatio = imageLoader.getPrimaryImageAspectRatio(items); - if (options.shape === 'auto' || options.shape === 'autohome' || options.shape === 'autooverflow' || options.shape === 'autoVertical') { + if (['auto', 'autohome', 'autooverflow', 'autoVertical'].includes(options.shape)) { - var requestedShape = options.shape; + const requestedShape = options.shape; options.shape = null; if (primaryImageAspectRatio) { @@ -283,11 +330,11 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana } if (!options.width) { - var screenWidth = dom.getWindowSize().innerWidth; - var screenHeight = dom.getWindowSize().innerHeight; + let screenWidth = dom.getWindowSize().innerWidth; + const screenHeight = dom.getWindowSize().innerHeight; if (isResizable(screenWidth)) { - var roundScreenTo = 100; + const roundScreenTo = 100; screenWidth = Math.floor(screenWidth / roundScreenTo) * roundScreenTo; } @@ -295,9 +342,14 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana } } + /** + * Generates the internal HTML markup for cards. + * @param {Object} items - Items for which to generate the markup. + * @param {Object} options - Options for generating the markup. + * @returns {string} The internal HTML markup of the cards. + */ function buildCardsHtmlInternal(items, options) { - - var isVertical; + let isVertical = false; if (options.shape === 'autoVertical') { isVertical = true; @@ -305,24 +357,21 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana setCardData(items, options); - var html = ''; - var itemsInRow = 0; + let html = ''; + let itemsInRow = 0; - var currentIndexValue; - var hasOpenRow; - var hasOpenSection; + let currentIndexValue; + let hasOpenRow; + let hasOpenSection; - var sectionTitleTagName = options.sectionTitleTagName || 'div'; - var apiClient; - var lastServerId; + let sectionTitleTagName = options.sectionTitleTagName || 'div'; + let apiClient; + let lastServerId; - var i; - var length; + for (let i = 0; i < items.length; i++) { - for (i = 0, length = items.length; i < length; i++) { - - var item = items[i]; - var serverId = item.ServerId || options.serverId; + let item = items[i]; + let serverId = item.ServerId || options.serverId; if (serverId !== lastServerId) { lastServerId = serverId; @@ -330,14 +379,14 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana } if (options.indexBy) { - var newIndexValue = ''; + let newIndexValue = ''; if (options.indexBy === 'PremiereDate') { if (item.PremiereDate) { try { newIndexValue = datetime.toLocaleDateString(datetime.parseISO8601Date(item.PremiereDate), { weekday: 'long', month: 'long', day: 'numeric' }); - } catch (err) { - console.error('error parsing timestamp for premiere date'); + } catch (error) { + console.error('error parsing timestamp for premiere date', error); } } } else if (options.indexBy === 'ProductionYear') { @@ -412,21 +461,15 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana } } - var cardFooterHtml = ''; - for (i = 0, length = (options.lines || 0); i < length; i++) { - - if (i === 0) { - cardFooterHtml += '
 
'; - } else { - cardFooterHtml += '
 
'; - } - } - return html; } + /** + * Computes the aspect ratio for a card given its shape. + * @param {string} shape - Shape for which to get the aspect ratio. + * @returns {null|number} Ratio of the shape. + */ function getDesiredAspect(shape) { - if (shape) { shape = shape.toLowerCase(); if (shape.indexOf('portrait') !== -1) { @@ -445,18 +488,23 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana return null; } + /** Get the URL of the card's image. + * @param {Object} item - Item for which to generate a card. + * @param {Object} apiClient - API client object. + * @param {Object} options - Options of the card. + * @param {string} shape - Shape of the desired image. + * @returns {Object} Object representing the URL of the card's image. + */ function getCardImageUrl(item, apiClient, options, shape) { + item = item.ProgramInfo || item; - var imageItem = item.ProgramInfo || item; - item = imageItem; - - var width = options.width; - var height = null; - var primaryImageAspectRatio = item.PrimaryImageAspectRatio; - var forceName = false; - var imgUrl = null; - var coverImage = false; - var uiAspect = null; + const width = options.width; + let height = null; + const primaryImageAspectRatio = item.PrimaryImageAspectRatio; + let forceName = false; + let imgUrl = null; + let coverImage = false; + let uiAspect = null; if (options.preferThumb && item.ImageTags && item.ImageTags.Thumb) { @@ -663,21 +711,32 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana }; } + /** + * Generates a random integer in a given range. + * @param {number} min - Minimum of the range. + * @param {number} max - Maximum of the range. + * @returns {number} Randomly generated number. + */ function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } - var numRandomColors = 5; + /** + * Generates an index used to select the default color of a card based on a string. + * @param {string} str - String to use for generating the index. + * @returns {number} Index of the color. + */ function getDefaultColorIndex(str) { + const numRandomColors = 5; if (str) { - var charIndex = Math.floor(str.length / 2); - var character = String(str.substr(charIndex, 1).charCodeAt()); - var sum = 0; - for (var i = 0; i < character.length; i++) { + const charIndex = Math.floor(str.length / 2); + const character = String(str.substr(charIndex, 1).charCodeAt()); + let sum = 0; + for (let i = 0; i < character.length; i++) { sum += parseInt(character.charAt(i)); } - var index = String(sum).substr(-1); + let index = String(sum).substr(-1); return (index % numRandomColors) + 1; } else { @@ -685,18 +744,26 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana } } + /** + * Generates the HTML markup for a card's text. + * @param {Array} lines - Array containing the text lines. + * @param {string} cssClass - Base CSS class to use for the lines. + * @param {boolean} forceLines - Flag to force the rendering of all lines. + * @param {boolean} isOuterFooter - Flag to mark the text lines as outer footer. + * @param {string} cardLayout - DEPRECATED + * @param {boolean} addRightMargin - Flag to add a right margin to the text. + * @param {number} maxLines - Maximum number of lines to render. + * @returns {string} HTML markup for the card's text. + */ function getCardTextLines(lines, cssClass, forceLines, isOuterFooter, cardLayout, addRightMargin, maxLines) { + let html = ''; - var html = ''; + let valid = 0; - var valid = 0; - var i; - var length; + for (let i = 0; i < lines.length; i++) { - for (i = 0, length = lines.length; i < length; i++) { - - var currentCssClass = cssClass; - var text = lines[i]; + let currentCssClass = cssClass; + let text = lines[i]; if (valid > 0 && isOuterFooter) { currentCssClass += ' cardText-secondary'; @@ -722,9 +789,9 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana if (forceLines) { - length = maxLines || Math.min(lines.length, maxLines || lines.length); + let linesLength = maxLines || Math.min(lines.length, maxLines || lines.length); - while (valid < length) { + while (valid < linesLength) { html += "
 
"; valid++; } @@ -733,17 +800,29 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana return html; } + /** + * Determines if the item is live TV. + * @param {Object} item - Item to use for the check. + * @returns {boolean} Flag showing if the item is live TV. + */ function isUsingLiveTvNaming(item) { return item.Type === 'Program' || item.Type === 'Timer' || item.Type === 'Recording'; } + /** + * Returns the air time text for the item based on the given times. + * @param {object} item - Item used to generate the air time text. + * @param {string} showAirDateTime - ISO8601 date for the start of the show. + * @param {string} showAirEndTime - ISO8601 date for the end of the show. + * @returns {string} The air time text for the item based on the given dates. + */ function getAirTimeText(item, showAirDateTime, showAirEndTime) { + let airTimeText = ''; - var airTimeText = ''; if (item.StartDate) { try { - var date = datetime.parseISO8601Date(item.StartDate); + let date = datetime.parseISO8601Date(item.StartDate); if (showAirDateTime) { airTimeText += datetime.toLocaleDateString(date, { weekday: 'short', month: 'short', day: 'numeric' }) + ' '; @@ -763,15 +842,29 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana return airTimeText; } + /** + * Generates the HTML markup for the card's footer text. + * @param {Object} item - Item used to generate the footer text. + * @param {Object} apiClient - API client instance. + * @param {Object} options - Options used to generate the footer text. + * @param {string} showTitle - Flag to show the title in the footer. + * @param {boolean} forceName - Flag to force showing the name of the item. + * @param {boolean} overlayText - Flag to show overlay text. + * @param {Object} imgUrl - Object representing the card's image URL. + * @param {string} footerClass - CSS classes of the footer element. + * @param {string} progressHtml - HTML markup of the progress bar element. + * @param {string} logoUrl - URL of the logo for the item. + * @param {boolean} isOuterFooter - Flag to mark the text as outer footer. + * @returns {string} HTML markup of the card's footer text element. + */ function getCardFooterText(item, apiClient, options, showTitle, forceName, overlayText, imgUrl, footerClass, progressHtml, logoUrl, isOuterFooter) { - - var html = ''; + let html = ''; if (logoUrl) { html += ''; } - var showOtherText = isOuterFooter ? !overlayText : overlayText; + const showOtherText = isOuterFooter ? !overlayText : overlayText; if (isOuterFooter && options.cardLayout && layoutManager.mobile) { @@ -780,12 +873,12 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana } } - var cssClass = options.centerText ? "cardText cardTextCentered" : "cardText"; - var serverId = item.ServerId || options.serverId; + const cssClass = options.centerText ? "cardText cardTextCentered" : "cardText"; + const serverId = item.ServerId || options.serverId; - var lines = []; - var parentTitleUnderneath = item.Type === 'MusicAlbum' || item.Type === 'Audio' || item.Type === 'MusicVideo'; - var titleAdded; + let lines = []; + const parentTitleUnderneath = item.Type === 'MusicAlbum' || item.Type === 'Audio' || item.Type === 'MusicVideo'; + let titleAdded; if (showOtherText) { if ((options.showParentTitle || options.showParentTitleOrTitle) && !parentTitleUnderneath) { @@ -814,7 +907,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana } } else { - var parentTitle = item.SeriesName || item.Series || item.Album || item.AlbumArtist || ""; + const parentTitle = item.SeriesName || item.Series || item.Album || item.AlbumArtist || ""; if (parentTitle || showTitle) { lines.push(parentTitle); @@ -824,14 +917,14 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana } } - var showMediaTitle = (showTitle && !titleAdded) || (options.showParentTitleOrTitle && !lines.length); + let showMediaTitle = (showTitle && !titleAdded) || (options.showParentTitleOrTitle && !lines.length); if (!showMediaTitle && !titleAdded && (showTitle || forceName)) { showMediaTitle = true; } if (showMediaTitle) { - var name = options.showTitle === 'auto' && !item.IsFolder && item.MediaType === 'Photo' ? '' : itemHelper.getDisplayName(item, { + const name = options.showTitle === 'auto' && !item.IsFolder && item.MediaType === 'Photo' ? '' : itemHelper.getDisplayName(item, { includeParentInfo: options.includeParentInfoInTitle }); @@ -858,22 +951,18 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana } if (options.showItemCounts) { - - var itemCountHtml = getItemCountsHtml(options, item); - - lines.push(itemCountHtml); + lines.push(getItemCountsHtml(options, item)); } if (options.textLines) { - var additionalLines = options.textLines(item); - for (var i = 0, length = additionalLines.length; i < length; i++) { + const additionalLines = options.textLines(item); + for (let i = 0; i < additionalLines.length; i++) { lines.push(additionalLines[i]); } } if (options.showSongCount) { - - var songLine = ''; + let songLine = ''; if (item.SongCount) { songLine = item.SongCount === 1 ? @@ -911,7 +1000,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana } else { if (item.EndDate && item.ProductionYear) { - var endYear = datetime.parseISO8601Date(item.EndDate).getFullYear(); + const endYear = datetime.parseISO8601Date(item.EndDate).getFullYear(); lines.push(item.ProductionYear + ((endYear === item.ProductionYear) ? '' : (' - ' + endYear))); } else { lines.push(item.ProductionYear || ''); @@ -993,11 +1082,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana if (options.showPersonRoleOrType) { if (item.Role) { - lines.push('as ' + item.Role); - } else if (item.Type) { - lines.push(globalize.translate('' + item.Type)); - } else { - lines.push(''); + lines.push(globalize.translate('PersonRole', item.Role)); } } } @@ -1006,7 +1091,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana lines = []; } - var addRightTextMargin = isOuterFooter && options.cardLayout && !options.centerText && options.cardFooterAside !== 'none' && layoutManager.mobile; + const addRightTextMargin = isOuterFooter && options.cardLayout && !options.centerText && options.cardFooterAside !== 'none' && layoutManager.mobile; html += getCardTextLines(lines, cssClass, !options.overlayText, isOuterFooter, options.cardLayout, addRightTextMargin, options.lines); @@ -1027,8 +1112,14 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana return html; } + /** + * Generates the HTML markup for the action button. + * @param {Object} item - Item used to generate the action button. + * @param {string} text - Text of the action button. + * @param {string} serverId - ID of the server. + * @returns {string} HTML markup of the action button. + */ function getTextActionButton(item, text, serverId) { - if (!text) { text = itemHelper.getDisplayName(item); } @@ -1037,18 +1128,22 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana return text; } - var html = ''; return html; } + /** + * Generates HTML markup for the item count indicator. + * @param {Object} options - Options used to generate the item count. + * @param {Object} item - Item used to generate the item count. + * @returns {string} HTML markup for the item count indicator. + */ function getItemCountsHtml(options, item) { - - var counts = []; - - var childText; + let counts = []; + let childText; if (item.Type === 'Playlist') { @@ -1056,7 +1151,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana if (item.RunTimeTicks) { - var minutes = item.RunTimeTicks / 600000000; + let minutes = item.RunTimeTicks / 600000000; minutes = minutes || 1; @@ -1135,49 +1230,37 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana return counts.join(', '); } - function getProgramIndicators(item) { + let refreshIndicatorLoaded; - item = item.ProgramInfo || item; - - var html = ''; - - if (item.IsLive) { - html += '
' + globalize.translate('Live') + '
'; - } - - if (item.IsPremiere) { - html += '
' + globalize.translate('Premiere') + '
'; - } else if (item.IsSeries && !item.IsRepeat) { - html += '
' + globalize.translate('AttributeNew') + '
'; - } - //else if (item.IsRepeat) { - // html += '
' + globalize.translate('Repeat') + '
'; - //} - - if (html) { - html = '
' + html; - html += '
'; - } - - return html; - } - - var refreshIndicatorLoaded; + /** + * Imports the refresh indicator element. + */ function requireRefreshIndicator() { - if (!refreshIndicatorLoaded) { refreshIndicatorLoaded = true; require(['emby-itemrefreshindicator']); } } - function getDefaultBackgroundClass(str) { + /** + * Returns the default background class for a card based on a string. + * @param {string} str - Text used to generate the background class. + * @returns {string} CSS classes for default card backgrounds. + */ + export function getDefaultBackgroundClass(str) { return 'defaultCardBackground defaultCardBackground' + getDefaultColorIndex(str); } + /** + * Builds the HTML markup for an individual card. + * @param {number} index - Index of the card + * @param {object} item - Item used to generate the card. + * @param {object} apiClient - API client instance. + * @param {object} options - Options used to generate the card. + * @returns {string} HTML markup for the generated card. + */ function buildCard(index, item, apiClient, options) { - - var action = options.action || 'link'; + let action = options.action || 'link'; if (action === 'play' && item.IsFolder) { // If this hard-coding is ever removed make sure to test nested photo albums @@ -1186,13 +1269,13 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana action = 'play'; } - var shape = options.shape; + let shape = options.shape; if (shape === 'mixed') { shape = null; - var primaryImageAspectRatio = item.PrimaryImageAspectRatio; + const primaryImageAspectRatio = item.PrimaryImageAspectRatio; if (primaryImageAspectRatio) { @@ -1210,7 +1293,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana // TODO move card creation code to Card component - var className = 'card'; + let className = 'card'; if (shape) { className += ' ' + shape + 'Card'; @@ -1236,16 +1319,16 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana } } - var imgInfo = getCardImageUrl(item, apiClient, options, shape); - var imgUrl = imgInfo.imgUrl; + const imgInfo = getCardImageUrl(item, apiClient, options, shape); + const imgUrl = imgInfo.imgUrl; - var forceName = imgInfo.forceName; + const forceName = imgInfo.forceName; - var showTitle = options.showTitle === 'auto' ? true : (options.showTitle || item.Type === 'PhotoAlbum' || item.Type === 'Folder'); - var overlayText = options.overlayText; + const showTitle = options.showTitle === 'auto' ? true : (options.showTitle || item.Type === 'PhotoAlbum' || item.Type === 'Folder'); + const overlayText = options.overlayText; - var cardImageContainerClass = 'cardImageContainer'; - var coveredImage = options.coverImage || imgInfo.coverImage; + let cardImageContainerClass = 'cardImageContainer'; + const coveredImage = options.coverImage || imgInfo.coverImage; if (coveredImage) { cardImageContainerClass += ' coveredImage'; @@ -1259,17 +1342,17 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana cardImageContainerClass += ' ' + getDefaultBackgroundClass(item.Name); } - var cardBoxClass = options.cardLayout ? 'cardBox visualCardBox' : 'cardBox'; + let cardBoxClass = options.cardLayout ? 'cardBox visualCardBox' : 'cardBox'; - var footerCssClass; - var progressHtml = indicators.getProgressBarHtml(item); + let footerCssClass; + let progressHtml = indicators.getProgressBarHtml(item); - var innerCardFooter = ''; + let innerCardFooter = ''; - var footerOverlayed = false; + let footerOverlayed = false; - var logoUrl; - var logoHeight = 40; + let logoUrl; + const logoHeight = 40; if (options.showChannelLogo && item.ChannelPrimaryImageTag) { logoUrl = apiClient.getScaledImageUrl(item.ChannelId, { @@ -1300,12 +1383,12 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana progressHtml = ''; } - var mediaSourceCount = item.MediaSourceCount || 1; + const mediaSourceCount = item.MediaSourceCount || 1; if (mediaSourceCount > 1) { innerCardFooter += '
' + mediaSourceCount + '
'; } - var outerCardFooter = ''; + let outerCardFooter = ''; if (!overlayText && !footerOverlayed) { footerCssClass = options.cardLayout ? 'cardFooter' : 'cardFooter cardFooter-transparent'; @@ -1324,15 +1407,15 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana cardBoxClass += ' cardBox-bottompadded'; } - var overlayButtons = ''; + let overlayButtons = ''; if (layoutManager.mobile) { - var overlayPlayButton = options.overlayPlayButton; + let overlayPlayButton = options.overlayPlayButton; if (overlayPlayButton == null && !options.overlayMoreButton && !options.overlayInfoButton && !options.cardLayout) { overlayPlayButton = item.MediaType === 'Video'; } - var btnCssClass = 'cardOverlayButton cardOverlayButton-br itemAction'; + const btnCssClass = 'cardOverlayButton cardOverlayButton-br itemAction'; if (options.centerPlayButton) { overlayButtons += ''; @@ -1352,12 +1435,12 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana } // cardBox can be it's own separate element if an outer footer is ever needed - var cardImageContainerOpen; - var cardImageContainerClose = ''; - var cardBoxClose = ''; - var cardScalableClose = ''; + let cardImageContainerOpen; + let cardImageContainerClose = ''; + let cardBoxClose = ''; + let cardScalableClose = ''; - var cardContentClass = 'cardContent'; + let cardContentClass = 'cardContent'; if (!options.cardLayout) { cardContentClass += ' cardContent-shadow'; } @@ -1375,13 +1458,13 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana cardImageContainerClose = ''; } - var cardScalableClass = 'cardScalable'; + let cardScalableClass = 'cardScalable'; cardImageContainerOpen = '
' + cardImageContainerOpen; cardBoxClose = '
'; cardScalableClose = '
'; - var indicatorsHtml = ''; + let indicatorsHtml = ''; if (options.missingIndicator !== false) { indicatorsHtml += indicators.getMissingIndicator(item); @@ -1402,7 +1485,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana } if (item.Type === 'CollectionFolder' || item.CollectionType) { - var refreshClass = item.RefreshProgress ? '' : ' class="hide"'; + const refreshClass = item.RefreshProgress ? '' : ' class="hide"'; indicatorsHtml += '
'; requireRefreshIndicator(); } @@ -1411,24 +1494,20 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana cardImageContainerOpen += '
' + indicatorsHtml + '
'; } - //if (item.Type === 'Program' || item.Type === 'Timer') { - // cardImageContainerOpen += getProgramIndicators(item); - //} - if (!imgUrl) { cardImageContainerOpen += getDefaultText(item, options); } - var tagName = (layoutManager.tv) && !overlayButtons ? 'button' : 'div'; + const tagName = (layoutManager.tv) && !overlayButtons ? 'button' : 'div'; - var nameWithPrefix = (item.SortName || item.Name || ''); - var prefix = nameWithPrefix.substring(0, Math.min(3, nameWithPrefix.length)); + const nameWithPrefix = (item.SortName || item.Name || ''); + let prefix = nameWithPrefix.substring(0, Math.min(3, nameWithPrefix.length)); if (prefix) { prefix = prefix.toUpperCase(); } - var timerAttributes = ''; + let timerAttributes = ''; if (item.TimerId) { timerAttributes += ' data-timerid="' + item.TimerId + '"'; } @@ -1436,7 +1515,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana timerAttributes += ' data-seriestimerid="' + item.SeriesTimerId + '"'; } - var actionAttribute; + let actionAttribute; if (tagName === 'button') { className += " itemAction"; @@ -1449,16 +1528,16 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana className += ' card-withuserdata'; } - var positionTicksData = item.UserData && item.UserData.PlaybackPositionTicks ? (' data-positionticks="' + item.UserData.PlaybackPositionTicks + '"') : ''; - var collectionIdData = options.collectionId ? (' data-collectionid="' + options.collectionId + '"') : ''; - var playlistIdData = options.playlistId ? (' data-playlistid="' + options.playlistId + '"') : ''; - var mediaTypeData = item.MediaType ? (' data-mediatype="' + item.MediaType + '"') : ''; - var collectionTypeData = item.CollectionType ? (' data-collectiontype="' + item.CollectionType + '"') : ''; - var channelIdData = item.ChannelId ? (' data-channelid="' + item.ChannelId + '"') : ''; - var contextData = options.context ? (' data-context="' + options.context + '"') : ''; - var parentIdData = options.parentId ? (' data-parentid="' + options.parentId + '"') : ''; + const positionTicksData = item.UserData && item.UserData.PlaybackPositionTicks ? (' data-positionticks="' + item.UserData.PlaybackPositionTicks + '"') : ''; + const collectionIdData = options.collectionId ? (' data-collectionid="' + options.collectionId + '"') : ''; + const playlistIdData = options.playlistId ? (' data-playlistid="' + options.playlistId + '"') : ''; + const mediaTypeData = item.MediaType ? (' data-mediatype="' + item.MediaType + '"') : ''; + const collectionTypeData = item.CollectionType ? (' data-collectiontype="' + item.CollectionType + '"') : ''; + const channelIdData = item.ChannelId ? (' data-channelid="' + item.ChannelId + '"') : ''; + const contextData = options.context ? (' data-context="' + options.context + '"') : ''; + const parentIdData = options.parentId ? (' data-parentid="' + options.parentId + '"') : ''; - var additionalCardContent = ''; + let additionalCardContent = ''; if (layoutManager.desktop) { additionalCardContent += getHoverMenuHtml(item, action); @@ -1467,13 +1546,18 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana return '<' + tagName + ' data-index="' + index + '"' + timerAttributes + actionAttribute + ' data-isfolder="' + (item.IsFolder || false) + '" data-serverid="' + (item.ServerId || options.serverId) + '" data-id="' + (item.Id || item.ItemId) + '" data-type="' + item.Type + '"' + mediaTypeData + collectionTypeData + channelIdData + positionTicksData + collectionIdData + playlistIdData + contextData + parentIdData + ' data-prefix="' + prefix + '" class="' + className + '">' + cardImageContainerOpen + innerCardFooter + cardImageContainerClose + overlayButtons + additionalCardContent + cardScalableClose + outerCardFooter + cardBoxClose + ''; } + /** + * Generates HTML markup for the card overlay. + * @param {object} item - Item used to generate the card overlay. + * @param {string} action - Action assigned to the overlay. + * @returns {string} HTML markup of the card overlay. + */ function getHoverMenuHtml(item, action) { - - var html = ''; + let html = ''; html += '
'; - var btnCssClass = 'cardOverlayButton cardOverlayButton-hover itemAction paper-icon-button-light'; + const btnCssClass = 'cardOverlayButton cardOverlayButton-hover itemAction paper-icon-button-light'; if (playbackManager.canPlay(item)) { html += ''; @@ -1481,7 +1565,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana html += '
'; - var userData = item.UserData || {}; + const userData = item.UserData || {}; if (itemHelper.canMarkPlayed(item)) { require(['emby-playstatebutton']); @@ -1490,7 +1574,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana if (itemHelper.canRate(item)) { - var likes = userData.Likes == null ? '' : userData.Likes; + const likes = userData.Likes == null ? '' : userData.Likes; require(['emby-ratingbutton']); html += ''; @@ -1504,9 +1588,15 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana return html; } - function getDefaultText(item, options) { + /** + * Generates the text or icon used for default card backgrounds. + * @param {object} item - Item used to generate the card overlay. + * @param {object} options - Options used to generate the card overlay. + * @returns {string} HTML markup of the card overlay. + */ + export function getDefaultText(item, options) { if (item.CollectionType) { - return '' + return ''; } switch (item.Type) { @@ -1529,12 +1619,16 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana return '' + options.defaultCardImageIcon + ''; } - var defaultName = isUsingLiveTvNaming(item) ? item.Name : itemHelper.getDisplayName(item); + const defaultName = isUsingLiveTvNaming(item) ? item.Name : itemHelper.getDisplayName(item); return '
' + defaultName + '
'; } - function buildCards(items, options) { - + /** + * Builds a set of cards and inserts them into the page. + * @param {Array} items - Array of items used to build the cards. + * @param {options} options - Options of the cards to build. + */ + export function buildCards(items, options) { // Abort if the container has been disposed if (!document.body.contains(options.itemsContainer)) { return; @@ -1549,7 +1643,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana } } - var html = buildCardsHtmlInternal(items, options); + const html = buildCardsHtmlInternal(items, options); if (html) { @@ -1575,8 +1669,13 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana } } + /** + * Ensures the indicators for a card exist and creates them if they don't exist. + * @param {HTMLDivElement} card - DOM element of the card. + * @param {HTMLDivElement} indicatorsElem - DOM element of the indicators. + * @returns {HTMLDivElement} - DOM element of the indicators. + */ function ensureIndicators(card, indicatorsElem) { - if (indicatorsElem) { return indicatorsElem; } @@ -1585,7 +1684,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana if (!indicatorsElem) { - var cardImageContainer = card.querySelector('.cardImageContainer'); + const cardImageContainer = card.querySelector('.cardImageContainer'); indicatorsElem = document.createElement('div'); indicatorsElem.classList.add('cardIndicators'); cardImageContainer.appendChild(indicatorsElem); @@ -1594,14 +1693,18 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana return indicatorsElem; } + /** + * Adds user data to the card such as progress indicators and played status. + * @param {HTMLDivElement} card - DOM element of the card. + * @param {Object} userData - User data to apply to the card. + */ function updateUserData(card, userData) { - - var type = card.getAttribute('data-type'); - var enableCountIndicator = type === 'Series' || type === 'BoxSet' || type === 'Season'; - var indicatorsElem = null; - var playedIndicator = null; - var countIndicator = null; - var itemProgressBar = null; + const type = card.getAttribute('data-type'); + const enableCountIndicator = type === 'Series' || type === 'BoxSet' || type === 'Season'; + let indicatorsElem = null; + let playedIndicator = null; + let countIndicator = null; + let itemProgressBar = null; if (userData.Played) { @@ -1644,7 +1747,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana } } - var progressHtml = indicators.getProgressBarHtml({ + const progressHtml = indicators.getProgressBarHtml({ Type: type, UserData: userData, MediaType: 'Video' @@ -1658,11 +1761,11 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana itemProgressBar = document.createElement('div'); itemProgressBar.classList.add('itemProgressBar'); - var innerCardFooter = card.querySelector('.innerCardFooter'); + let innerCardFooter = card.querySelector('.innerCardFooter'); if (!innerCardFooter) { innerCardFooter = document.createElement('div'); innerCardFooter.classList.add('innerCardFooter'); - var cardImageContainer = card.querySelector('.cardImageContainer'); + const cardImageContainer = card.querySelector('.cardImageContainer'); cardImageContainer.appendChild(innerCardFooter); } innerCardFooter.appendChild(itemProgressBar); @@ -1678,37 +1781,50 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana } } - function onUserDataChanged(userData, scope) { + /** + * Handles when user data has changed. + * @param {Object} userData - User data to apply to the card. + * @param {HTMLElement} scope - DOM element to use as a scope when selecting cards. + */ + export function onUserDataChanged(userData, scope) { + const cards = (scope || document.body).querySelectorAll('.card-withuserdata[data-id="' + userData.ItemId + '"]'); - var cards = (scope || document.body).querySelectorAll('.card-withuserdata[data-id="' + userData.ItemId + '"]'); - - for (var i = 0, length = cards.length; i < length; i++) { + for (let i = 0, length = cards.length; i < length; i++) { updateUserData(cards[i], userData); } } - function onTimerCreated(programId, newTimerId, itemsContainer) { + /** + * Handles when a timer has been created. + * @param {string} programId - ID of the program. + * @param {string} newTimerId - ID of the new timer. + * @param {HTMLElement} itemsContainer - DOM element of the itemsContainer. + */ + export function onTimerCreated(programId, newTimerId, itemsContainer) { + const cells = itemsContainer.querySelectorAll('.card[data-id="' + programId + '"]'); - var cells = itemsContainer.querySelectorAll('.card[data-id="' + programId + '"]'); - - for (var i = 0, length = cells.length; i < length; i++) { - var cell = cells[i]; - var icon = cell.querySelector('.timerIndicator'); + for (let i = 0, length = cells.length; i < length; i++) { + let cell = cells[i]; + const icon = cell.querySelector('.timerIndicator'); if (!icon) { - var indicatorsElem = ensureIndicators(cell); + const indicatorsElem = ensureIndicators(cell); indicatorsElem.insertAdjacentHTML('beforeend', ''); } cell.setAttribute('data-timerid', newTimerId); } } - function onTimerCancelled(id, itemsContainer) { + /** + * Handles when a timer has been cancelled. + * @param {string} timerId - ID of the cancelled timer. + * @param {HTMLElement} itemsContainer - DOM element of the itemsContainer. + */ + export function onTimerCancelled(timerId, itemsContainer) { + const cells = itemsContainer.querySelectorAll('.card[data-timerid="' + timerId + '"]'); - var cells = itemsContainer.querySelectorAll('.card[data-timerid="' + id + '"]'); - - for (var i = 0, length = cells.length; i < length; i++) { - var cell = cells[i]; - var icon = cell.querySelector('.timerIndicator'); + for (let i = 0; i < cells.length; i++) { + let cell = cells[i]; + let icon = cell.querySelector('.timerIndicator'); if (icon) { icon.parentNode.removeChild(icon); } @@ -1716,13 +1832,17 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana } } - function onSeriesTimerCancelled(id, itemsContainer) { + /** + * Handles when a series timer has been cancelled. + * @param {string} cancelledTimerId - ID of the cancelled timer. + * @param {HTMLElement} itemsContainer - DOM element of the itemsContainer. + */ + export function onSeriesTimerCancelled(cancelledTimerId, itemsContainer) { + const cells = itemsContainer.querySelectorAll('.card[data-seriestimerid="' + cancelledTimerId + '"]'); - var cells = itemsContainer.querySelectorAll('.card[data-seriestimerid="' + id + '"]'); - - for (var i = 0, length = cells.length; i < length; i++) { - var cell = cells[i]; - var icon = cell.querySelector('.timerIndicator'); + for (let i = 0; i < cells.length; i++) { + let cell = cells[i]; + let icon = cell.querySelector('.timerIndicator'); if (icon) { icon.parentNode.removeChild(icon); } @@ -1730,14 +1850,15 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana } } - return { - getCardsHtml: getCardsHtml, - getDefaultBackgroundClass: getDefaultBackgroundClass, - getDefaultText: getDefaultText, - buildCards: buildCards, - onUserDataChanged: onUserDataChanged, - onTimerCreated: onTimerCreated, - onTimerCancelled: onTimerCancelled, - onSeriesTimerCancelled: onSeriesTimerCancelled - }; - }); +/* eslint-enable indent */ + +export default { + getCardsHtml: getCardsHtml, + getDefaultBackgroundClass: getDefaultBackgroundClass, + getDefaultText: getDefaultText, + buildCards: buildCards, + onUserDataChanged: onUserDataChanged, + onTimerCreated: onTimerCreated, + onTimerCancelled: onTimerCancelled, + onSeriesTimerCancelled: onSeriesTimerCancelled +}; diff --git a/src/components/channelmapper/channelmapper.js b/src/components/channelmapper/channelmapper.js index 1b536f440..2ea7a3a13 100644 --- a/src/components/channelmapper/channelmapper.js +++ b/src/components/channelmapper/channelmapper.js @@ -1,18 +1,7 @@ -define(["dialogHelper", "loading", "connectionManager", "globalize", "actionsheet", "emby-input", "paper-icon-button-light", "emby-button", "listViewStyle", "material-icons", "formDialogStyle"], function (dialogHelper, loading, connectionManager, globalize, actionsheet) { +define(["dom", "dialogHelper", "loading", "connectionManager", "globalize", "actionsheet", "emby-input", "paper-icon-button-light", "emby-button", "listViewStyle", "material-icons", "formDialogStyle"], function (dom, dialogHelper, loading, connectionManager, globalize, actionsheet) { "use strict"; return function (options) { - function parentWithClass(elem, className) { - while (!elem.classList || !elem.classList.contains(className)) { - elem = elem.parentNode; - if (!elem) { - return null; - } - } - - return elem; - } - function mapChannel(button, channelId, providerChannelId) { loading.show(); var providerId = options.providerId; @@ -26,7 +15,7 @@ define(["dialogHelper", "loading", "connectionManager", "globalize", "actionshee }, dataType: "json" }).then(function (mapping) { - var listItem = parentWithClass(button, "listItem"); + var listItem = dom.parentWithClass(button, "listItem"); button.setAttribute("data-providerid", mapping.ProviderChannelId); listItem.querySelector(".secondary").innerHTML = getMappingSecondaryName(mapping, currentMappingOptions.ProviderName); loading.hide(); @@ -34,7 +23,7 @@ define(["dialogHelper", "loading", "connectionManager", "globalize", "actionshee } function onChannelsElementClick(e) { - var btnMap = parentWithClass(e.target, "btnMap"); + var btnMap = dom.parentWithClass(e.target, "btnMap"); if (btnMap) { var channelId = btnMap.getAttribute("data-id"); diff --git a/src/components/chromecast/chromecasthelpers.js b/src/components/chromecast/chromecasthelpers.js index 2fef0c68b..9967a4d96 100644 --- a/src/components/chromecast/chromecasthelpers.js +++ b/src/components/chromecast/chromecasthelpers.js @@ -188,9 +188,9 @@ define(['events'], function (events) { return apiClient.getEndpointInfo().then(function (endpoint) { if (endpoint.IsInNetwork) { return apiClient.getPublicSystemInfo().then(function (info) { - var localAddress = info.LocalAddress + var localAddress = info.LocalAddress; if (!localAddress) { - console.debug("No valid local address returned, defaulting to external one") + console.debug("No valid local address returned, defaulting to external one"); localAddress = serverAddress; } addToCache(serverAddress, localAddress); diff --git a/src/components/collectioneditor/collectioneditor.js b/src/components/collectioneditor/collectioneditor.js index 79220ac33..49784df49 100644 --- a/src/components/collectioneditor/collectioneditor.js +++ b/src/components/collectioneditor/collectioneditor.js @@ -1,25 +1,12 @@ -define(['dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectionManager', 'appRouter', 'globalize', 'emby-checkbox', 'emby-input', 'paper-icon-button-light', 'emby-select', 'material-icons', 'css!./../formdialog', 'emby-button', 'flexStyles'], function (dialogHelper, loading, appHost, layoutManager, connectionManager, appRouter, globalize) { +define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectionManager', 'appRouter', 'globalize', 'emby-checkbox', 'emby-input', 'paper-icon-button-light', 'emby-select', 'material-icons', 'css!./../formdialog', 'emby-button', 'flexStyles'], function (dom, dialogHelper, loading, appHost, layoutManager, connectionManager, appRouter, globalize) { 'use strict'; var currentServerId; - function parentWithClass(elem, className) { - - while (!elem.classList || !elem.classList.contains(className)) { - elem = elem.parentNode; - - if (!elem) { - return null; - } - } - - return elem; - } - function onSubmit(e) { loading.show(); - var panel = parentWithClass(this, 'dialog'); + var panel = dom.parentWithClass(this, 'dialog'); var collectionId = panel.querySelector('#selectCollectionToAddTo').value; diff --git a/src/components/directorybrowser/directorybrowser.js b/src/components/directorybrowser/directorybrowser.js index b71f7bbb0..fc976068e 100644 --- a/src/components/directorybrowser/directorybrowser.js +++ b/src/components/directorybrowser/directorybrowser.js @@ -7,11 +7,11 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper- systemInfo = info; return info; } - ) + ); } function onDialogClosed() { - loading.hide() + loading.hide(); } function refreshDirectoryBrowser(page, path, fileOptions, updatePathOnError) { @@ -24,7 +24,7 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper- var promises = []; if ("Network" === path) { - promises.push(ApiClient.getNetworkDevices()) + promises.push(ApiClient.getNetworkDevices()); } else { if (path) { promises.push(ApiClient.getDirectoryContents(path, fileOptions)); @@ -89,7 +89,7 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper- var instruction = options.instruction ? options.instruction + "

" : ""; html += '
'; html += instruction; - html += Globalize.translate("MessageDirectoryPickerInstruction").replace("{0}", "\\\\server").replace("{1}", "\\\\192.168.1.101"); + html += Globalize.translate("MessageDirectoryPickerInstruction", "\\\\server", "\\\\192.168.1.101"); if ("bsd" === systemInfo.OperatingSystem.toLowerCase()) { html += "
"; html += "
"; @@ -101,7 +101,7 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper- html += Globalize.translate("MessageDirectoryPickerLinuxInstruction"); html += "
"; } - html += "
" + html += "
"; } html += '
'; html += '
'; @@ -144,13 +144,13 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper- function alertText(text) { alertTextWithOptions({ text: text - }) + }); } function alertTextWithOptions(options) { require(["alert"], function(alert) { - alert(options) - }) + alert(options); + }); } function validatePath(path, validateWriteable, apiClient) { @@ -163,21 +163,20 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper- } }).catch(function(response) { if (response) { - // TODO All alerts (across the project), should use Globalize.translate() if (response.status === 404) { - alertText("The path could not be found. Please ensure the path is valid and try again."); + alertText(Globalize.translate("PathNotFound")); return Promise.reject(); } if (response.status === 500) { if (validateWriteable) { - alertText("Jellyfin Server requires write access to this folder. Please ensure write access and try again."); + alertText(Globalize.translate("WriteAccessRequired")); } else { - alertText("The path could not be found. Please ensure the path is valid and try again.") + alertText(Globalize.translate("PathNotFound")); } - return Promise.reject() + return Promise.reject(); } } - return Promise.resolve() + return Promise.resolve(); }); } @@ -189,7 +188,7 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper- if (lnkPath.classList.contains("lnkFile")) { content.querySelector("#txtDirectoryPickerPath").value = path; } else { - refreshDirectoryBrowser(content, path, fileOptions, true) + refreshDirectoryBrowser(content, path, fileOptions, true); } } }); @@ -276,7 +275,7 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper- dlg.addEventListener("close", onDialogClosed); dialogHelper.open(dlg); dlg.querySelector(".btnCloseDialog").addEventListener("click", function() { - dialogHelper.close(dlg) + dialogHelper.close(dlg); }); currentDialog = dlg; dlg.querySelector("#txtDirectoryPickerPath").value = initialPath; @@ -294,9 +293,9 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper- if (currentDialog) { dialogHelper.close(currentDialog); } - } + }; } var systemInfo; - return directoryBrowser + return directoryBrowser; }); diff --git a/src/components/displaysettings/displaysettings.template.html b/src/components/displaysettings/displaysettings.template.html index 16bbf0dd8..4ef8c8b1c 100644 --- a/src/components/displaysettings/displaysettings.template.html +++ b/src/components/displaysettings/displaysettings.template.html @@ -63,7 +63,7 @@
'; diff --git a/src/components/libraryoptionseditor/libraryoptionseditor.js b/src/components/libraryoptionseditor/libraryoptionseditor.js index a398d7043..08197299e 100644 --- a/src/components/libraryoptionseditor/libraryoptionseditor.js +++ b/src/components/libraryoptionseditor/libraryoptionseditor.js @@ -36,7 +36,7 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct html += ""; } select.innerHTML = html; - }) + }); } function populateRefreshInterval(select) { @@ -120,7 +120,7 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct html += plugin.Name; html += ""; html += "
"; - i > 0 ? html += '' : plugins.length > 1 && (html += ''), html += "
" + i > 0 ? html += '' : plugins.length > 1 && (html += ''), html += "
"; } html += "
"; html += '
' + globalize.translate("LabelMetadataDownloadersHelp") + "
"; @@ -265,10 +265,10 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct renderMetadataFetchers(parent, availableOptions, {}); renderSubtitleFetchers(parent, availableOptions, {}); renderImageFetchers(parent, availableOptions, {}); - availableOptions.SubtitleFetchers.length ? parent.querySelector(".subtitleDownloadSettings").classList.remove("hide") : parent.querySelector(".subtitleDownloadSettings").classList.add("hide") + availableOptions.SubtitleFetchers.length ? parent.querySelector(".subtitleDownloadSettings").classList.remove("hide") : parent.querySelector(".subtitleDownloadSettings").classList.add("hide"); }).catch(function() { return Promise.resolve(); - }) + }); } function adjustSortableListElement(elem) { @@ -296,8 +296,8 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct Type: type }, currentLibraryOptions.TypeOptions.push(typeOptions)); var availableOptions = getTypeOptions(currentAvailableOptions || {}, type); - (new ImageOptionsEditor).show(type, typeOptions, availableOptions) - }) + (new ImageOptionsEditor).show(type, typeOptions, availableOptions); + }); } function onImageFetchersContainerClick(e) { @@ -315,12 +315,12 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct var list = dom.parentWithClass(li, "paperList"); if (btnSortable.classList.contains("btnSortableMoveDown")) { var next = li.nextSibling; - next && (li.parentNode.removeChild(li), next.parentNode.insertBefore(li, next.nextSibling)) + next && (li.parentNode.removeChild(li), next.parentNode.insertBefore(li, next.nextSibling)); } else { var prev = li.previousSibling; - prev && (li.parentNode.removeChild(li), prev.parentNode.insertBefore(li, prev)) + prev && (li.parentNode.removeChild(li), prev.parentNode.insertBefore(li, prev)); } - Array.prototype.forEach.call(list.querySelectorAll(".sortableOption"), adjustSortableListElement) + Array.prototype.forEach.call(list.querySelectorAll(".sortableOption"), adjustSortableListElement); } } @@ -407,13 +407,13 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct function setSubtitleFetchersIntoOptions(parent, options) { options.DisabledSubtitleFetchers = Array.prototype.map.call(Array.prototype.filter.call(parent.querySelectorAll(".chkSubtitleFetcher"), function(elem) { - return !elem.checked + return !elem.checked; }), function(elem) { - return elem.getAttribute("data-pluginname") + return elem.getAttribute("data-pluginname"); }); options.SubtitleFetcherOrder = Array.prototype.map.call(parent.querySelectorAll(".subtitleFetcherItem"), function(elem) { - return elem.getAttribute("data-pluginname") + return elem.getAttribute("data-pluginname"); }); } @@ -455,13 +455,13 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct } typeOptions.ImageFetchers = Array.prototype.map.call(Array.prototype.filter.call(section.querySelectorAll(".chkImageFetcher"), function(elem) { - return elem.checked + return elem.checked; }), function(elem) { - return elem.getAttribute("data-pluginname") + return elem.getAttribute("data-pluginname"); }); typeOptions.ImageFetcherOrder = Array.prototype.map.call(section.querySelectorAll(".imageFetcherItem"), function(elem) { - return elem.getAttribute("data-pluginname") + return elem.getAttribute("data-pluginname"); }); } } @@ -505,20 +505,20 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct SaveSubtitlesWithMedia: parent.querySelector("#chkSaveSubtitlesLocally").checked, RequirePerfectSubtitleMatch: parent.querySelector("#chkRequirePerfectMatch").checked, MetadataSavers: Array.prototype.map.call(Array.prototype.filter.call(parent.querySelectorAll(".chkMetadataSaver"), function(elem) { - return elem.checked + return elem.checked; }), function(elem) { - return elem.getAttribute("data-pluginname") + return elem.getAttribute("data-pluginname"); }), TypeOptions: [] }; options.LocalMetadataReaderOrder = Array.prototype.map.call(parent.querySelectorAll(".localReaderOption"), function(elem) { - return elem.getAttribute("data-pluginname") + return elem.getAttribute("data-pluginname"); }); options.SubtitleDownloadLanguages = Array.prototype.map.call(Array.prototype.filter.call(parent.querySelectorAll(".chkSubtitleLanguage"), function(elem) { - return elem.checked + return elem.checked; }), function(elem) { - return elem.getAttribute("data-lang") + return elem.getAttribute("data-lang"); }); setSubtitleFetchersIntoOptions(parent, options); setMetadataFetchersIntoOptions(parent, options); @@ -531,7 +531,7 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct function getOrderedPlugins(plugins, configuredOrder) { plugins = plugins.slice(0); plugins.sort(function(a, b) { - return a = configuredOrder.indexOf(a.Name), b = configuredOrder.indexOf(b.Name), a < b ? -1 : a > b ? 1 : 0 + return a = configuredOrder.indexOf(a.Name), b = configuredOrder.indexOf(b.Name), a < b ? -1 : a > b ? 1 : 0; }); return plugins; } @@ -558,10 +558,10 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct parent.querySelector("#chkSkipIfAudioTrackPresent").checked = options.SkipSubtitlesIfAudioTrackMatches; parent.querySelector("#chkRequirePerfectMatch").checked = options.RequirePerfectSubtitleMatch; Array.prototype.forEach.call(parent.querySelectorAll(".chkMetadataSaver"), function(elem) { - elem.checked = options.MetadataSavers ? -1 !== options.MetadataSavers.indexOf(elem.getAttribute("data-pluginname")) : "true" === elem.getAttribute("data-defaultenabled") + elem.checked = options.MetadataSavers ? -1 !== options.MetadataSavers.indexOf(elem.getAttribute("data-pluginname")) : "true" === elem.getAttribute("data-defaultenabled"); }); Array.prototype.forEach.call(parent.querySelectorAll(".chkSubtitleLanguage"), function(elem) { - elem.checked = !!options.SubtitleDownloadLanguages && -1 !== options.SubtitleDownloadLanguages.indexOf(elem.getAttribute("data-lang")) + elem.checked = !!options.SubtitleDownloadLanguages && -1 !== options.SubtitleDownloadLanguages.indexOf(elem.getAttribute("data-lang")); }); renderMetadataReaders(parent, getOrderedPlugins(parent.availableOptions.MetadataReaders, options.LocalMetadataReaderOrder || [])); renderMetadataFetchers(parent, parent.availableOptions, options); @@ -578,5 +578,5 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct getLibraryOptions: getLibraryOptions, setLibraryOptions: setLibraryOptions, setAdvancedVisible: setAdvancedVisible - } + }; }); diff --git a/src/components/logoscreensaver/plugin.js b/src/components/logoscreensaver/plugin.js index 7716bbf6e..2becfad0c 100644 --- a/src/components/logoscreensaver/plugin.js +++ b/src/components/logoscreensaver/plugin.js @@ -188,5 +188,5 @@ define(["pluginManager"], function (pluginManager) { } } }; - } + }; }); diff --git a/src/components/metadataeditor/metadataeditor.js b/src/components/metadataeditor/metadataeditor.js index e8736258f..8a64cac7e 100644 --- a/src/components/metadataeditor/metadataeditor.js +++ b/src/components/metadataeditor/metadataeditor.js @@ -465,7 +465,12 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi var id = "txt1" + idInfo.Key; var formatString = idInfo.UrlFormatString || ''; - var labelText = globalize.translate('LabelDynamicExternalId').replace('{0}', idInfo.Name); + var fullName = idInfo.Name; + if (idInfo.Type) { + fullName = idInfo.Name + " " + globalize.translate(idInfo.Type); + } + + var labelText = globalize.translate('LabelDynamicExternalId', fullName); html += '
'; html += '
'; diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js index 2c3e45b63..c8a79a362 100644 --- a/src/components/notifications/notifications.js +++ b/src/components/notifications/notifications.js @@ -173,15 +173,15 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir }; if (status === 'completed') { - notification.title = globalize.translate('PackageInstallCompleted').replace('{0}', installation.Name + ' ' + installation.Version); + notification.title = globalize.translate('PackageInstallCompleted', installation.Name, installation.Version); notification.vibrate = true; } else if (status === 'cancelled') { - notification.title = globalize.translate('PackageInstallCancelled').replace('{0}', installation.Name + ' ' + installation.Version); + notification.title = globalize.translate('PackageInstallCancelled', installation.Name, installation.Version); } else if (status === 'failed') { - notification.title = globalize.translate('PackageInstallFailed').replace('{0}', installation.Name + ' ' + installation.Version); + notification.title = globalize.translate('PackageInstallFailed', installation.Name, installation.Version); notification.vibrate = true; } else if (status === 'progress') { - notification.title = globalize.translate('InstallingPackage').replace('{0}', installation.Name + ' ' + installation.Version); + notification.title = globalize.translate('InstallingPackage', installation.Name, installation.Version); notification.actions = [ diff --git a/src/components/playback/playbackmanager.js b/src/components/playback/playbackmanager.js index 8de1ffc19..e9f744769 100644 --- a/src/components/playback/playbackmanager.js +++ b/src/components/playback/playbackmanager.js @@ -1633,29 +1633,29 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla self.supportSubtitleOffset = function(player) { player = player || self._currentPlayer; return player && 'setSubtitleOffset' in player; - } + }; self.enableShowingSubtitleOffset = function(player) { player = player || self._currentPlayer; player.enableShowingSubtitleOffset(); - } + }; self.disableShowingSubtitleOffset = function(player) { player = player || self._currentPlayer; if (player.disableShowingSubtitleOffset) { player.disableShowingSubtitleOffset(); } - } + }; self.isShowingSubtitleOffsetEnabled = function(player) { player = player || self._currentPlayer; return player.isShowingSubtitleOffsetEnabled(); - } + }; self.isSubtitleStreamExternal = function(index, player) { var stream = getSubtitleStream(player, index); return stream ? getDeliveryMethod(stream) === 'External' : false; - } + }; self.setSubtitleOffset = function (value, player) { player = player || self._currentPlayer; @@ -1669,12 +1669,12 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla if (player.getSubtitleOffset) { return player.getSubtitleOffset(); } - } + }; self.canHandleOffsetOnCurrentSubtitle = function(player) { var index = self.getSubtitleStreamIndex(player); return index !== -1 && self.isSubtitleStreamExternal(index, player); - } + }; self.seek = function (ticks, player) { diff --git a/src/components/playlisteditor/playlisteditor.js b/src/components/playlisteditor/playlisteditor.js index c274b4079..69356a38c 100644 --- a/src/components/playlisteditor/playlisteditor.js +++ b/src/components/playlisteditor/playlisteditor.js @@ -1,24 +1,10 @@ -define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackManager', 'connectionManager', 'userSettings', 'appRouter', 'globalize', 'emby-input', 'paper-icon-button-light', 'emby-select', 'material-icons', 'css!./../formdialog', 'emby-button'], function (shell, dialogHelper, loading, layoutManager, playbackManager, connectionManager, userSettings, appRouter, globalize) { +define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackManager', 'connectionManager', 'userSettings', 'appRouter', 'globalize', 'emby-input', 'paper-icon-button-light', 'emby-select', 'material-icons', 'css!./../formdialog', 'emby-button'], function (dom, shell, dialogHelper, loading, layoutManager, playbackManager, connectionManager, userSettings, appRouter, globalize) { 'use strict'; var currentServerId; - function parentWithClass(elem, className) { - - while (!elem.classList || !elem.classList.contains(className)) { - elem = elem.parentNode; - - if (!elem) { - return null; - } - } - - return elem; - } - function onSubmit(e) { - - var panel = parentWithClass(this, 'dialog'); + var panel = dom.parentWithClass(this, 'dialog'); var playlistId = panel.querySelector('#selectPlaylistToAddTo').value; var apiClient = connectionManager.getApiClient(currentServerId); @@ -35,11 +21,9 @@ define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackManager', } function createPlaylist(apiClient, dlg) { - loading.show(); var url = apiClient.getUrl("Playlists", { - Name: dlg.querySelector('#txtNewPlaylistName').value, Ids: dlg.querySelector('.fldSelectedItemIds').value || '', userId: apiClient.getCurrentUserId() @@ -50,9 +34,7 @@ define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackManager', type: "POST", url: url, dataType: "json" - }).then(function (result) { - loading.hide(); var id = result.Id; @@ -63,16 +45,13 @@ define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackManager', } function redirectToPlaylist(apiClient, id) { - appRouter.showItem(id, apiClient.serverId()); } function addToPlaylist(apiClient, dlg, id) { - var itemIds = dlg.querySelector('.fldSelectedItemIds').value || ''; if (id === 'queue') { - playbackManager.queue({ serverId: apiClient.serverId(), ids: itemIds.split(',') @@ -85,7 +64,6 @@ define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackManager', loading.show(); var url = apiClient.getUrl("Playlists/" + id + "/Items", { - Ids: itemIds, userId: apiClient.getCurrentUserId() }); @@ -95,7 +73,6 @@ define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackManager', url: url }).then(function () { - loading.hide(); dlg.submitted = true; @@ -108,7 +85,6 @@ define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackManager', } function populatePlaylists(editorOptions, panel) { - var select = panel.querySelector('#selectPlaylistToAddTo'); loading.hide(); @@ -116,7 +92,6 @@ define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackManager', panel.querySelector('.newPlaylistInfo').classList.add('hide'); var options = { - Recursive: true, IncludeItemTypes: "Playlist", SortBy: 'SortName', @@ -125,7 +100,6 @@ define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackManager', var apiClient = connectionManager.getApiClient(currentServerId); apiClient.getItems(apiClient.getCurrentUserId(), options).then(function (result) { - var html = ''; if (editorOptions.enableAddToPlayQueue !== false && playbackManager.isPlaying()) { @@ -135,7 +109,6 @@ define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackManager', html += ''; html += result.Items.map(function (i) { - return ''; }); @@ -159,7 +132,6 @@ define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackManager', } function getEditorHtml(items) { - var html = ''; html += '
'; @@ -195,7 +167,6 @@ define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackManager', } function initEditor(content, options, items) { - content.querySelector('#selectPlaylistToAddTo').addEventListener('change', function () { if (this.value) { content.querySelector('.newPlaylistInfo').classList.add('hide'); @@ -235,7 +206,6 @@ define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackManager', } PlaylistEditor.prototype.show = function (options) { - var items = options.items || {}; currentServerId = options.serverId; @@ -272,7 +242,6 @@ define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackManager', initEditor(dlg, options, items); dlg.querySelector('.btnCancel').addEventListener('click', function () { - dialogHelper.close(dlg); }); @@ -281,7 +250,6 @@ define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackManager', } return dialogHelper.open(dlg).then(function () { - if (layoutManager.tv) { centerFocus(dlg.querySelector('.formDialogContent'), false, false); } diff --git a/src/components/refreshdialog/refreshdialog.js b/src/components/refreshdialog/refreshdialog.js index b5730e592..1e54d9837 100644 --- a/src/components/refreshdialog/refreshdialog.js +++ b/src/components/refreshdialog/refreshdialog.js @@ -1,19 +1,6 @@ -define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'connectionManager', 'appRouter', 'globalize', 'emby-input', 'emby-checkbox', 'paper-icon-button-light', 'emby-select', 'material-icons', 'css!./../formdialog', 'emby-button'], function (shell, dialogHelper, loading, layoutManager, connectionManager, appRouter, globalize) { +define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'connectionManager', 'appRouter', 'globalize', 'emby-input', 'emby-checkbox', 'paper-icon-button-light', 'emby-select', 'material-icons', 'css!./../formdialog', 'emby-button'], function (dom, shell, dialogHelper, loading, layoutManager, connectionManager, appRouter, globalize) { 'use strict'; - function parentWithClass(elem, className) { - - while (!elem.classList || !elem.classList.contains(className)) { - elem = elem.parentNode; - - if (!elem) { - return null; - } - } - - return elem; - } - function getEditorHtml() { var html = ''; @@ -65,7 +52,7 @@ define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'connectionManager' loading.show(); var instance = this; - var dlg = parentWithClass(e.target, 'dialog'); + var dlg = dom.parentWithClass(e.target, 'dialog'); var options = instance.options; var apiClient = connectionManager.getApiClient(options.serverId); diff --git a/src/components/sanitizefilename.js b/src/components/sanitizefilename.js index f53ce613f..adfb852e1 100644 --- a/src/components/sanitizefilename.js +++ b/src/components/sanitizefilename.js @@ -1,96 +1,90 @@ // From https://github.com/parshap/node-sanitize-filename -define([], function () { - 'use strict'; +const illegalRe = /[\/\?<>\\:\*\|":]/g; +// eslint-disable-next-line no-control-regex +const controlRe = /[\x00-\x1f\x80-\x9f]/g; +const reservedRe = /^\.+$/; +const windowsReservedRe = /^(con|prn|aux|nul|com[0-9]|lpt[0-9])(\..*)?$/i; +const windowsTrailingRe = /[\. ]+$/; - var illegalRe = /[\/\?<>\\:\*\|":]/g; - // eslint-disable-next-line no-control-regex - var controlRe = /[\x00-\x1f\x80-\x9f]/g; - var reservedRe = /^\.+$/; - var windowsReservedRe = /^(con|prn|aux|nul|com[0-9]|lpt[0-9])(\..*)?$/i; - var windowsTrailingRe = /[\. ]+$/; +function isHighSurrogate(codePoint) { + return codePoint >= 0xd800 && codePoint <= 0xdbff; +} - function isHighSurrogate(codePoint) { - return codePoint >= 0xd800 && codePoint <= 0xdbff; +function isLowSurrogate(codePoint) { + return codePoint >= 0xdc00 && codePoint <= 0xdfff; +} + +function getByteLength(string) { + if (typeof string !== "string") { + throw new Error("Input must be string"); } - function isLowSurrogate(codePoint) { - return codePoint >= 0xdc00 && codePoint <= 0xdfff; - } - - function getByteLength(string) { - if (typeof string !== "string") { - throw new Error("Input must be string"); - } - - var charLength = string.length; - var byteLength = 0; - var codePoint = null; - var prevCodePoint = null; - for (var i = 0; i < charLength; i++) { - codePoint = string.charCodeAt(i); - // handle 4-byte non-BMP chars - // low surrogate - if (isLowSurrogate(codePoint)) { - // when parsing previous hi-surrogate, 3 is added to byteLength - if (prevCodePoint != null && isHighSurrogate(prevCodePoint)) { - byteLength += 1; - } else { - byteLength += 3; - } - } else if (codePoint <= 0x7f) { + const charLength = string.length; + let byteLength = 0; + let codePoint = null; + let prevCodePoint = null; + for (let i = 0; i < charLength; i++) { + codePoint = string.charCodeAt(i); + // handle 4-byte non-BMP chars + // low surrogate + if (isLowSurrogate(codePoint)) { + // when parsing previous hi-surrogate, 3 is added to byteLength + if (prevCodePoint != null && isHighSurrogate(prevCodePoint)) { byteLength += 1; - } else if (codePoint >= 0x80 && codePoint <= 0x7ff) { - byteLength += 2; - } else if (codePoint >= 0x800 && codePoint <= 0xffff) { + } else { byteLength += 3; } - prevCodePoint = codePoint; + } else if (codePoint <= 0x7f) { + byteLength += 1; + } else if (codePoint >= 0x80 && codePoint <= 0x7ff) { + byteLength += 2; + } else if (codePoint >= 0x800 && codePoint <= 0xffff) { + byteLength += 3; } - - return byteLength; + prevCodePoint = codePoint; } - function truncate(string, byteLength) { - if (typeof string !== "string") { - throw new Error("Input must be string"); - } + return byteLength; +} - var charLength = string.length; - var curByteLength = 0; - var codePoint; - var segment; - - for (var i = 0; i < charLength; i += 1) { - codePoint = string.charCodeAt(i); - segment = string[i]; - - if (isHighSurrogate(codePoint) && isLowSurrogate(string.charCodeAt(i + 1))) { - i += 1; - segment += string[i]; - } - - curByteLength += getByteLength(segment); - - if (curByteLength === byteLength) { - return string.slice(0, i + 1); - } else if (curByteLength > byteLength) { - return string.slice(0, i - segment.length + 1); - } - } - - return string; +function truncate(string, byteLength) { + if (typeof string !== "string") { + throw new Error("Input must be string"); } - return { - sanitize: function (input, replacement) { - var sanitized = input - .replace(illegalRe, replacement) - .replace(controlRe, replacement) - .replace(reservedRe, replacement) - .replace(windowsReservedRe, replacement) - .replace(windowsTrailingRe, replacement); - return truncate(sanitized, 255); + const charLength = string.length; + let curByteLength = 0; + let codePoint; + let segment; + + for (let i = 0; i < charLength; i += 1) { + codePoint = string.charCodeAt(i); + segment = string[i]; + + if (isHighSurrogate(codePoint) && isLowSurrogate(string.charCodeAt(i + 1))) { + i += 1; + segment += string[i]; } - }; -}); + + curByteLength += getByteLength(segment); + + if (curByteLength === byteLength) { + return string.slice(0, i + 1); + } else if (curByteLength > byteLength) { + return string.slice(0, i - segment.length + 1); + } + } + + return string; +} + +export function sanitize(input, replacement) { + const sanitized = input + .replace(illegalRe, replacement) + .replace(controlRe, replacement) + .replace(reservedRe, replacement) + .replace(windowsReservedRe, replacement) + .replace(windowsTrailingRe, replacement); + return truncate(sanitized, 255); +} diff --git a/src/components/scrollManager.js b/src/components/scrollManager.js index 5fc3729ba..6a626cd25 100644 --- a/src/components/scrollManager.js +++ b/src/components/scrollManager.js @@ -1,38 +1,46 @@ -define(["dom", "browser", "layoutManager"], function (dom, browser, layoutManager) { - "use strict"; +/* eslint-disable indent */ + +/** + * Module for controlling scroll behavior. + * @module components/scrollManager + */ + +import dom from "dom"; +import browser from "browser"; +import layoutManager from "layoutManager"; /** * Scroll time in ms. */ - var ScrollTime = 270; + const ScrollTime = 270; /** * Epsilon for comparing values. */ - var Epsilon = 1e-6; + const Epsilon = 1e-6; // FIXME: Need to scroll to top of page to fully show the top menu. This can be solved by some marker of top most elements or their containers /** * Returns minimum vertical scroll. * Scroll less than that value will be zeroed. * - * @return {number} minimum vertical scroll + * @return {number} Minimum vertical scroll. */ function minimumScrollY() { - var topMenu = document.querySelector(".headerTop"); + const topMenu = document.querySelector(".headerTop"); if (topMenu) { return topMenu.clientHeight; } return 0; } - var supportsSmoothScroll = "scrollBehavior" in document.documentElement.style; + const supportsSmoothScroll = "scrollBehavior" in document.documentElement.style; - var supportsScrollToOptions = false; + let supportsScrollToOptions = false; try { - var elem = document.createElement("div"); + const elem = document.createElement("div"); - var opts = Object.defineProperty({}, "behavior", { + const opts = Object.defineProperty({}, "behavior", { // eslint-disable-next-line getter-return get: function () { supportsScrollToOptions = true; @@ -47,10 +55,10 @@ define(["dom", "browser", "layoutManager"], function (dom, browser, layoutManage /** * Returns value clamped by range [min, max]. * - * @param {number} value clamped value - * @param {number} min begining of range - * @param {number} max ending of range - * @return {number} clamped value + * @param {number} value - Clamped value. + * @param {number} min - Begining of range. + * @param {number} max - Ending of range. + * @return {number} Clamped value. */ function clamp(value, min, max) { return value <= min ? min : value >= max ? max : value; @@ -60,15 +68,15 @@ define(["dom", "browser", "layoutManager"], function (dom, browser, layoutManage * Returns the required delta to fit range 1 into range 2. * In case of range 1 is bigger than range 2 returns delta to fit most out of range part. * - * @param {number} begin1 begining of range 1 - * @param {number} end1 ending of range 1 - * @param {number} begin2 begining of range 2 - * @param {number} end2 ending of range 2 - * @return {number} delta: <0 move range1 to the left, >0 - to the right + * @param {number} begin1 - Begining of range 1. + * @param {number} end1 - Ending of range 1. + * @param {number} begin2 - Begining of range 2. + * @param {number} end2 - Ending of range 2. + * @return {number} Delta: <0 move range1 to the left, >0 - to the right. */ function fitRange(begin1, end1, begin2, end2) { - var delta1 = begin1 - begin2; - var delta2 = end2 - end1; + const delta1 = begin1 - begin2; + const delta2 = end2 - end1; if (delta1 < 0 && delta1 < delta2) { return -delta1; } else if (delta2 < 0) { @@ -80,13 +88,21 @@ define(["dom", "browser", "layoutManager"], function (dom, browser, layoutManage /** * Ease value. * - * @param {number} t value in range [0, 1] - * @return {number} eased value in range [0, 1] + * @param {number} t - Value in range [0, 1]. + * @return {number} Eased value in range [0, 1]. */ function ease(t) { return t*(2 - t); // easeOutQuad === ease-out } + /** + * @typedef {Object} Rect + * @property {number} left - X coordinate of top-left corner. + * @property {number} top - Y coordinate of top-left corner. + * @property {number} width - Width. + * @property {number} height - Height. + */ + /** * Document scroll wrapper helps to unify scrolling and fix issues of some browsers. * @@ -100,41 +116,68 @@ define(["dom", "browser", "layoutManager"], function (dom, browser, layoutManage * * Tizen 5 Browser/Native: scrolls documentElement (and window); has a document.scrollingElement */ - function DocumentScroller() { - } - - DocumentScroller.prototype = { + class DocumentScroller { + /** + * Horizontal scroll position. + * @type {number} + */ get scrollLeft() { return window.pageXOffset; - }, + } + set scrollLeft(val) { window.scroll(val, window.pageYOffset); - }, + } + /** + * Vertical scroll position. + * @type {number} + */ get scrollTop() { return window.pageYOffset; - }, + } + set scrollTop(val) { window.scroll(window.pageXOffset, val); - }, + } + /** + * Horizontal scroll size (scroll width). + * @type {number} + */ get scrollWidth() { return Math.max(document.documentElement.scrollWidth, document.body.scrollWidth); - }, + } + /** + * Vertical scroll size (scroll height). + * @type {number} + */ get scrollHeight() { return Math.max(document.documentElement.scrollHeight, document.body.scrollHeight); - }, + } + /** + * Horizontal client size (client width). + * @type {number} + */ get clientWidth() { return Math.min(document.documentElement.clientWidth, document.body.clientWidth); - }, + } + /** + * Vertical client size (client height). + * @type {number} + */ get clientHeight() { return Math.min(document.documentElement.clientHeight, document.body.clientHeight); - }, + } - getBoundingClientRect: function() { + /** + * Returns bounding client rect. + * @return {Rect} Bounding client rect. + */ + getBoundingClientRect() { // Make valid viewport coordinates: documentElement.getBoundingClientRect returns rect of entire document relative to viewport return { left: 0, @@ -142,26 +185,34 @@ define(["dom", "browser", "layoutManager"], function (dom, browser, layoutManage width: this.clientWidth, height: this.clientHeight }; - }, + } - scrollTo: function() { + /** + * Scrolls window. + * @param {...mixed} args See window.scrollTo. + */ + scrollTo() { window.scrollTo.apply(window, arguments); } - }; - - var documentScroller = new DocumentScroller(); + } /** - * Returns parent element that can be scrolled. If no such, returns documentElement. + * Default (document) scroller. + */ + const documentScroller = new DocumentScroller(); + + /** + * Returns parent element that can be scrolled. If no such, returns document scroller. * - * @param {HTMLElement} element element for which parent is being searched - * @param {boolean} vertical search for vertical scrollable parent + * @param {HTMLElement} element - Element for which parent is being searched. + * @param {boolean} vertical - Search for vertical scrollable parent. + * @param {HTMLElement|DocumentScroller} Parent element that can be scrolled or document scroller. */ function getScrollableParent(element, vertical) { if (element) { - var nameScroll = "scrollWidth"; - var nameClient = "clientWidth"; - var nameClass = "scrollX"; + let nameScroll = "scrollWidth"; + let nameClient = "clientWidth"; + let nameClass = "scrollX"; if (vertical) { nameScroll = "scrollHeight"; @@ -169,7 +220,7 @@ define(["dom", "browser", "layoutManager"], function (dom, browser, layoutManage nameClass = "scrollY"; } - var parent = element.parentElement; + let parent = element.parentElement; while (parent) { // Skip 'emby-scroller' because it scrolls by itself @@ -187,20 +238,20 @@ define(["dom", "browser", "layoutManager"], function (dom, browser, layoutManage /** * @typedef {Object} ScrollerData - * @property {number} scrollPos current scroll position - * @property {number} scrollSize scroll size - * @property {number} clientSize client size + * @property {number} scrollPos - Current scroll position. + * @property {number} scrollSize - Scroll size. + * @property {number} clientSize - Client size. */ /** - * Returns scroll data for specified orientation. + * Returns scroller data for specified orientation. * - * @param {HTMLElement} scroller scroller - * @param {boolean} vertical vertical scroll data - * @return {ScrollerData} scroll data + * @param {HTMLElement} scroller - Scroller. + * @param {boolean} vertical - Vertical scroller data. + * @return {ScrollerData} Scroller data. */ function getScrollerData(scroller, vertical) { - var data = {}; + let data = {}; if (!vertical) { data.scrollPos = scroller.scrollLeft; @@ -218,14 +269,14 @@ define(["dom", "browser", "layoutManager"], function (dom, browser, layoutManage /** * Returns position of child of scroller for specified orientation. * - * @param {HTMLElement} scroller scroller - * @param {HTMLElement} element child of scroller - * @param {boolean} vertical vertical scroll - * @return {number} child position + * @param {HTMLElement} scroller - Scroller. + * @param {HTMLElement} element - Child of scroller. + * @param {boolean} vertical - Vertical scroll. + * @return {number} Child position. */ function getScrollerChildPos(scroller, element, vertical) { - var elementRect = element.getBoundingClientRect(); - var scrollerRect = scroller.getBoundingClientRect(); + const elementRect = element.getBoundingClientRect(); + const scrollerRect = scroller.getBoundingClientRect(); if (!vertical) { return scroller.scrollLeft + elementRect.left - scrollerRect.left; @@ -237,21 +288,21 @@ define(["dom", "browser", "layoutManager"], function (dom, browser, layoutManage /** * Returns scroll position for element. * - * @param {ScrollerData} scrollerData scroller data - * @param {number} elementPos child element position - * @param {number} elementSize child element size - * @param {boolean} centered scroll to center - * @return {number} scroll position + * @param {ScrollerData} scrollerData - Scroller data. + * @param {number} elementPos - Child element position. + * @param {number} elementSize - Child element size. + * @param {boolean} centered - Scroll to center. + * @return {number} Scroll position. */ function calcScroll(scrollerData, elementPos, elementSize, centered) { - var maxScroll = scrollerData.scrollSize - scrollerData.clientSize; + const maxScroll = scrollerData.scrollSize - scrollerData.clientSize; - var scroll; + let scroll; if (centered) { scroll = elementPos + (elementSize - scrollerData.clientSize) / 2; } else { - var delta = fitRange(elementPos, elementPos + elementSize - 1, scrollerData.scrollPos, scrollerData.scrollPos + scrollerData.clientSize - 1); + const delta = fitRange(elementPos, elementPos + elementSize - 1, scrollerData.scrollPos, scrollerData.scrollPos + scrollerData.clientSize - 1); scroll = scrollerData.scrollPos - delta; } @@ -261,14 +312,14 @@ define(["dom", "browser", "layoutManager"], function (dom, browser, layoutManage /** * Calls scrollTo function in proper way. * - * @param {HTMLElement} scroller scroller - * @param {ScrollToOptions} options scroll options + * @param {HTMLElement} scroller - Scroller. + * @param {ScrollToOptions} options - Scroll options. */ function scrollToHelper(scroller, options) { if ("scrollTo" in scroller) { if (!supportsScrollToOptions) { - var scrollX = (options.left !== undefined ? options.left : scroller.scrollLeft); - var scrollY = (options.top !== undefined ? options.top : scroller.scrollTop); + const scrollX = (options.left !== undefined ? options.left : scroller.scrollLeft); + const scrollY = (options.top !== undefined ? options.top : scroller.scrollTop); scroller.scrollTo(scrollX, scrollY); } else { scroller.scrollTo(options); @@ -286,14 +337,14 @@ define(["dom", "browser", "layoutManager"], function (dom, browser, layoutManage /** * Performs built-in scroll. * - * @param {HTMLElement} xScroller horizontal scroller - * @param {number} scrollX horizontal coordinate - * @param {HTMLElement} yScroller vertical scroller - * @param {number} scrollY vertical coordinate - * @param {boolean} smooth smooth scrolling + * @param {HTMLElement} xScroller - Horizontal scroller. + * @param {number} scrollX - Horizontal coordinate. + * @param {HTMLElement} yScroller - Vertical scroller. + * @param {number} scrollY - Vertical coordinate. + * @param {boolean} smooth - Smooth scrolling. */ function builtinScroll(xScroller, scrollX, yScroller, scrollY, smooth) { - var scrollBehavior = smooth ? "smooth" : "instant"; + const scrollBehavior = smooth ? "smooth" : "instant"; if (xScroller !== yScroller) { scrollToHelper(xScroller, {left: scrollX, behavior: scrollBehavior}); @@ -303,7 +354,10 @@ define(["dom", "browser", "layoutManager"], function (dom, browser, layoutManage } } - var scrollTimer; + /** + * Requested frame for animated scroll. + */ + let scrollTimer; /** * Resets scroll timer to stop scrolling. @@ -316,29 +370,29 @@ define(["dom", "browser", "layoutManager"], function (dom, browser, layoutManage /** * Performs animated scroll. * - * @param {HTMLElement} xScroller horizontal scroller - * @param {number} scrollX horizontal coordinate - * @param {HTMLElement} yScroller vertical scroller - * @param {number} scrollY vertical coordinate + * @param {HTMLElement} xScroller - Horizontal scroller. + * @param {number} scrollX - Horizontal coordinate. + * @param {HTMLElement} yScroller - Vertical scroller. + * @param {number} scrollY - Vertical coordinate. */ function animateScroll(xScroller, scrollX, yScroller, scrollY) { - var ox = xScroller.scrollLeft; - var oy = yScroller.scrollTop; - var dx = scrollX - ox; - var dy = scrollY - oy; + const ox = xScroller.scrollLeft; + const oy = yScroller.scrollTop; + const dx = scrollX - ox; + const dy = scrollY - oy; if (Math.abs(dx) < Epsilon && Math.abs(dy) < Epsilon) { return; } - var start; + let start; function scrollAnim(currentTimestamp) { start = start || currentTimestamp; - var k = Math.min(1, (currentTimestamp - start) / ScrollTime); + let k = Math.min(1, (currentTimestamp - start) / ScrollTime); if (k === 1) { resetScrollTimer(); @@ -348,8 +402,8 @@ define(["dom", "browser", "layoutManager"], function (dom, browser, layoutManage k = ease(k); - var x = ox + dx*k; - var y = oy + dy*k; + const x = ox + dx*k; + const y = oy + dy*k; builtinScroll(xScroller, x, yScroller, y, false); @@ -362,11 +416,11 @@ define(["dom", "browser", "layoutManager"], function (dom, browser, layoutManage /** * Performs scroll. * - * @param {HTMLElement} xScroller horizontal scroller - * @param {number} scrollX horizontal coordinate - * @param {HTMLElement} yScroller vertical scroller - * @param {number} scrollY vertical coordinate - * @param {boolean} smooth smooth scrolling + * @param {HTMLElement} xScroller - Horizontal scroller. + * @param {number} scrollX - Horizontal coordinate. + * @param {HTMLElement} yScroller - Vertical scroller. + * @param {number} scrollY - Vertical coordinate. + * @param {boolean} smooth - Smooth scrolling. */ function doScroll(xScroller, scrollX, yScroller, scrollY, smooth) { @@ -403,26 +457,26 @@ define(["dom", "browser", "layoutManager"], function (dom, browser, layoutManage /** * Returns true if scroll manager is enabled. */ - var isEnabled = function() { + export function isEnabled() { return layoutManager.tv; - }; + } /** * Scrolls the document to a given position. * - * @param {number} scrollX horizontal coordinate - * @param {number} scrollY vertical coordinate - * @param {boolean} [smooth=false] smooth scrolling + * @param {number} scrollX - Horizontal coordinate. + * @param {number} scrollY - Vertical coordinate. + * @param {boolean} [smooth=false] - Smooth scrolling. */ - var scrollTo = function(scrollX, scrollY, smooth) { + export function scrollTo(scrollX, scrollY, smooth) { smooth = !!smooth; // Scroller is document itself by default - var scroller = getScrollableParent(null, false); + const scroller = getScrollableParent(null, false); - var xScrollerData = getScrollerData(scroller, false); - var yScrollerData = getScrollerData(scroller, true); + const xScrollerData = getScrollerData(scroller, false); + const yScrollerData = getScrollerData(scroller, true); scrollX = clamp(Math.round(scrollX), 0, xScrollerData.scrollSize - xScrollerData.clientSize); scrollY = clamp(Math.round(scrollY), 0, yScrollerData.scrollSize - yScrollerData.clientSize); @@ -433,39 +487,39 @@ define(["dom", "browser", "layoutManager"], function (dom, browser, layoutManage /** * Scrolls the document to a given element. * - * @param {HTMLElement} element target element of scroll task - * @param {boolean} [smooth=false] smooth scrolling + * @param {HTMLElement} element - Target element of scroll task. + * @param {boolean} [smooth=false] - Smooth scrolling. */ - var scrollToElement = function(element, smooth) { + export function scrollToElement(element, smooth) { smooth = !!smooth; - var scrollCenterX = true; - var scrollCenterY = true; + let scrollCenterX = true; + let scrollCenterY = true; - var offsetParent = element.offsetParent; + const offsetParent = element.offsetParent; // In Firefox offsetParent.offsetParent is BODY - var isFixed = offsetParent && (!offsetParent.offsetParent || window.getComputedStyle(offsetParent).position === "fixed"); + const isFixed = offsetParent && (!offsetParent.offsetParent || window.getComputedStyle(offsetParent).position === "fixed"); // Scroll fixed elements to nearest edge (or do not scroll at all) if (isFixed) { scrollCenterX = scrollCenterY = false; } - var xScroller = getScrollableParent(element, false); - var yScroller = getScrollableParent(element, true); + const xScroller = getScrollableParent(element, false); + const yScroller = getScrollableParent(element, true); - var elementRect = element.getBoundingClientRect(); + const elementRect = element.getBoundingClientRect(); - var xScrollerData = getScrollerData(xScroller, false); - var yScrollerData = getScrollerData(yScroller, true); + const xScrollerData = getScrollerData(xScroller, false); + const yScrollerData = getScrollerData(yScroller, true); - var xPos = getScrollerChildPos(xScroller, element, false); - var yPos = getScrollerChildPos(yScroller, element, true); + const xPos = getScrollerChildPos(xScroller, element, false); + const yPos = getScrollerChildPos(yScroller, element, true); - var scrollX = calcScroll(xScrollerData, xPos, elementRect.width, scrollCenterX); - var scrollY = calcScroll(yScrollerData, yPos, elementRect.height, scrollCenterY); + const scrollX = calcScroll(xScrollerData, xPos, elementRect.width, scrollCenterX); + let scrollY = calcScroll(yScrollerData, yPos, elementRect.height, scrollCenterY); // HACK: Scroll to top for top menu because it is hidden // FIXME: Need a marker to scroll top/bottom @@ -490,9 +544,10 @@ define(["dom", "browser", "layoutManager"], function (dom, browser, layoutManage }, {capture: true}); } - return { - isEnabled: isEnabled, - scrollTo: scrollTo, - scrollToElement: scrollToElement - }; -}); +/* eslint-enable indent */ + +export default { + isEnabled: isEnabled, + scrollTo: scrollTo, + scrollToElement: scrollToElement +}; diff --git a/src/components/shell.js b/src/components/shell.js index f82f5eea3..4f1aa0c8d 100644 --- a/src/components/shell.js +++ b/src/components/shell.js @@ -10,12 +10,6 @@ define([], function () { } }, - canExec: false, - exec: function (options) { - // options.path - // options.arguments - return Promise.reject(); - }, enableFullscreen: function () { if (window.NativeShell) { window.NativeShell.enableFullscreen(); diff --git a/src/components/skinManager.js b/src/components/skinManager.js index b81e7c3a4..d5b045c44 100644 --- a/src/components/skinManager.js +++ b/src/components/skinManager.js @@ -116,8 +116,8 @@ define(['apphost', 'userSettings', 'browser', 'events', 'pluginManager', 'backdr var linkUrl = info.stylesheetPath; unloadTheme(); - var link = document.createElement('link'); + var link = document.createElement('link'); link.setAttribute('rel', 'stylesheet'); link.setAttribute('type', 'text/css'); link.onload = function () { diff --git a/src/components/slideshow/slideshow.js b/src/components/slideshow/slideshow.js index 4d426f248..26dc303de 100644 --- a/src/components/slideshow/slideshow.js +++ b/src/components/slideshow/slideshow.js @@ -1,8 +1,18 @@ -define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'focusManager', 'browser', 'apphost', 'loading', 'css!./style', 'material-icons', 'paper-icon-button-light'], function (dialogHelper, inputManager, connectionManager, layoutManager, focusManager, browser, appHost, loading) { +/** + * Image viewer component + * @module components/slideshow/slideshow + */ +define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'focusManager', 'browser', 'apphost', 'css!./style', 'material-icons', 'paper-icon-button-light'], function (dialogHelper, inputManager, connectionManager, layoutManager, focusManager, browser, appHost) { 'use strict'; + /** + * Retrieves an item's image URL from the API. + * @param {object|string} item - Item used to generate the image URL. + * @param {object} options - Options of the image. + * @param {object} apiClient - API client instance used to retrieve the image. + * @returns {null|string} URL of the item's image. + */ function getImageUrl(item, options, apiClient) { - options = options || {}; options.type = options.type || "Primary"; @@ -11,7 +21,6 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f } if (item.ImageTags && item.ImageTags[options.type]) { - options.tag = item.ImageTags[options.type]; return apiClient.getScaledImageUrl(item.Id, options); } @@ -27,8 +36,14 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f return null; } + /** + * Retrieves a backdrop's image URL from the API. + * @param {object} item - Item used to generate the image URL. + * @param {object} options - Options of the image. + * @param {object} apiClient - API client instance used to retrieve the image. + * @returns {null|string} URL of the item's backdrop. + */ function getBackdropImageUrl(item, options, apiClient) { - options = options || {}; options.type = options.type || "Backdrop"; @@ -46,19 +61,19 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f return null; } - function getImgUrl(item, original) { - + /** + * Dispatches a request for an item's image to its respective handler. + * @param {object} item - Item used to generate the image URL. + * @returns {string} URL of the item's image. + */ + function getImgUrl(item) { var apiClient = connectionManager.getApiClient(item.ServerId); var imageOptions = {}; - if (!original) { - imageOptions.maxWidth = screen.availWidth; - } if (item.BackdropImageTags && item.BackdropImageTags.length) { return getBackdropImageUrl(item, imageOptions, apiClient); } else { - - if (item.MediaType === 'Photo' && original) { + if (item.MediaType === 'Photo') { return apiClient.getItemDownloadUrl(item.Id); } imageOptions.type = "Primary"; @@ -66,15 +81,25 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f } } + /** + * Generates a button using the specified icon, classes and properties. + * @param {string} icon - Name of the material icon on the button + * @param {string} cssClass - CSS classes to assign to the button + * @param {boolean} canFocus - Flag to set the tabindex attribute on the button to -1. + * @param {boolean} autoFocus - Flag to set the autofocus attribute on the button. + * @returns {string} The HTML markup of the button. + */ function getIcon(icon, cssClass, canFocus, autoFocus) { - var tabIndex = canFocus ? '' : ' tabindex="-1"'; autoFocus = autoFocus ? ' autofocus' : ''; return ''; } + /** + * Sets the viewport meta tag to enable or disable scaling by the user. + * @param {boolean} scalable - Flag to set the scalability of the viewport. + */ function setUserScalable(scalable) { - try { appHost.setUserScalable(scalable); } catch (err) { @@ -83,23 +108,31 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f } return function (options) { - var self = this; + /** Initialized instance of Swiper. */ var swiperInstance; - var dlg; - var currentTimeout; - var currentIntervalMs; + /** Initialized instance of the dialog containing the Swiper instance. */ + var dialog; + /** Options of the slideshow components */ var currentOptions; - var currentIndex; + /** ID of the timeout used to hide the OSD. */ + var hideTimeout; + /** Last coordinates of the mouse pointer. */ + var lastMouseMoveData; + /** Visibility status of the OSD. */ + var _osdOpen = false; - // small hack since this is not possible anyway - if (browser.chromecast) { - options.interactive = false; - } + // Use autoplay on Chromecast since it is non-interactive. + options.interactive = !browser.chromecast; + /** + * Creates the HTML markup for the dialog and the OSD. + * @param {Object} options - Options used to create the dialog and slideshow. + */ function createElements(options) { + currentOptions = options; - dlg = dialogHelper.createDialog({ + dialog = dialogHelper.createDialog({ exitAnimationDuration: options.interactive ? 400 : 800, size: 'fullscreen', autoFocus: false, @@ -108,17 +141,15 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f removeOnClose: true }); - dlg.classList.add('slideshowDialog'); + dialog.classList.add('slideshowDialog'); var html = ''; - if (options.interactive) { + html += '
'; + if (options.interactive && !layoutManager.tv) { var actionButtonsOnTop = layoutManager.mobile; - html += '
'; - html += '
'; - html += getIcon('keyboard_arrow_left', 'btnSlideshowPrevious slideshowButton hide-mouse-idle-tv', false); html += getIcon('keyboard_arrow_right', 'btnSlideshowNext slideshowButton hide-mouse-idle-tv', false); @@ -137,7 +168,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f if (!actionButtonsOnTop) { html += '
'; - html += getIcon('pause', 'btnSlideshowPause slideshowButton', true, true); + html += getIcon('play_arrow', 'btnSlideshowPause slideshowButton', true, true); if (appHost.supports('filedownload')) { html += getIcon('file_download', 'btnDownload slideshowButton', true); } @@ -148,33 +179,28 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f html += '
'; } - html += '
'; - } else { html += '

'; } - dlg.innerHTML = html; + dialog.innerHTML = html; - if (options.interactive) { - dlg.querySelector('.btnSlideshowExit').addEventListener('click', function (e) { - - dialogHelper.close(dlg); + if (options.interactive && !layoutManager.tv) { + dialog.querySelector('.btnSlideshowExit').addEventListener('click', function (e) { + dialogHelper.close(dialog); }); - dlg.querySelector('.btnSlideshowNext').addEventListener('click', nextImage); - dlg.querySelector('.btnSlideshowPrevious').addEventListener('click', previousImage); - var btnPause = dlg.querySelector('.btnSlideshowPause'); + var btnPause = dialog.querySelector('.btnSlideshowPause'); if (btnPause) { btnPause.addEventListener('click', playPause); } - var btnDownload = dlg.querySelector('.btnDownload'); + var btnDownload = dialog.querySelector('.btnDownload'); if (btnDownload) { btnDownload.addEventListener('click', download); } - var btnShare = dlg.querySelector('.btnShare'); + var btnShare = dialog.querySelector('.btnShare'); if (btnShare) { btnShare.addEventListener('click', share); } @@ -182,78 +208,104 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f setUserScalable(true); - dialogHelper.open(dlg).then(function () { - + dialogHelper.open(dialog).then(function () { setUserScalable(false); - stopInterval(); }); inputManager.on(window, onInputCommand); document.addEventListener((window.PointerEvent ? 'pointermove' : 'mousemove'), onPointerMove); - dlg.addEventListener('close', onDialogClosed); + dialog.addEventListener('close', onDialogClosed); - if (options.interactive) { - loadSwiper(dlg); - } + loadSwiper(dialog, options); } + /** + * Handles OSD changes when the autoplay is started. + */ function onAutoplayStart() { - var btnSlideshowPause = dlg.querySelector('.btnSlideshowPause i'); + var btnSlideshowPause = dialog.querySelector('.btnSlideshowPause i'); if (btnSlideshowPause) { - btnSlideshowPause.classList.remove("play_arrow"); - btnSlideshowPause.classList.add("pause"); + btnSlideshowPause.classList.replace("play_arrow", "pause"); } } + /** + * Handles OSD changes when the autoplay is stopped. + */ function onAutoplayStop() { - var btnSlideshowPause = dlg.querySelector('.btnSlideshowPause i'); + var btnSlideshowPause = dialog.querySelector('.btnSlideshowPause i'); if (btnSlideshowPause) { - btnSlideshowPause.classList.remove("pause"); - btnSlideshowPause.classList.add("play_arrow"); + btnSlideshowPause.classList.replace("pause", "play_arrow"); } } - function loadSwiper(dlg) { - + /** + * Initializes the Swiper instance and binds the relevant events. + * @param {HTMLElement} dialog - Element containing the dialog. + * @param {Object} options - Options used to initialize the Swiper instance. + */ + function loadSwiper(dialog, options) { + var slides; if (currentOptions.slides) { - dlg.querySelector('.swiper-wrapper').innerHTML = currentOptions.slides.map(getSwiperSlideHtmlFromSlide).join(''); + slides = currentOptions.slides; } else { - dlg.querySelector('.swiper-wrapper').innerHTML = currentOptions.items.map(getSwiperSlideHtmlFromItem).join(''); + slides = currentOptions.items; } require(['swiper'], function (Swiper) { - - swiperInstance = new Swiper(dlg.querySelector('.slideshowSwiperContainer'), { - // Optional parameters + swiperInstance = new Swiper(dialog.querySelector('.slideshowSwiperContainer'), { direction: 'horizontal', - loop: options.loop !== false, - autoplay: { - delay: options.interval || 8000 + // Loop is disabled due to the virtual slides option not supporting it. + loop: false, + autoplay: !options.interactive, + keyboard: { + enabled: true }, - // Disable preloading of all images - preloadImages: false, - // Enable lazy loading - lazy: true, - loadPrevNext: true, - disableOnInteraction: false, + preloadImages: true, + slidesPerView: 1, + slidesPerColumn: 1, initialSlide: options.startIndex || 0, - speed: 240 + speed: 240, + navigation: { + nextEl: '.btnSlideshowNext', + prevEl: '.btnSlideshowPrevious' + }, + // Virtual slides reduce memory consumption for large libraries while allowing preloading of images; + virtual: { + slides: slides, + cache: true, + renderSlide: getSwiperSlideHtml, + addSlidesBefore: 1, + addSlidesAfter: 1 + } }); swiperInstance.on('autoplayStart', onAutoplayStart); swiperInstance.on('autoplayStop', onAutoplayStop); - - if (layoutManager.mobile) { - pause(); - } else { - play(); - } }); } - function getSwiperSlideHtmlFromItem(item) { + /** + * Renders the HTML markup of a slide for an item or a slide. + * @param {Object} item - The item used to render the slide. + * @param {number} index - The index of the item in the Swiper instance. + * @returns {string} The HTML markup of the slide. + */ + function getSwiperSlideHtml(item, index) { + if (currentOptions.slides) { + return getSwiperSlideHtmlFromSlide(item); + } else { + return getSwiperSlideHtmlFromItem(item); + } + } + /** + * Renders the HTML markup of a slide for an item. + * @param {Object} item - Item used to generate the slide. + * @returns {string} The HTML markup of the slide. + */ + function getSwiperSlideHtmlFromItem(item) { return getSwiperSlideHtmlFromSlide({ imageUrl: getImgUrl(item), originalImage: getImgUrl(item, true), @@ -264,11 +316,17 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f }); } + /** + * Renders the HTML markup of a slide for a slide object. + * @param {Object} item - Slide object used to generate the slide. + * @returns {string} The HTML markup of the slide. + */ function getSwiperSlideHtmlFromSlide(item) { - var html = ''; - html += '
'; - html += ''; + html += '
'; + html += '
'; + html += ''; + html += '
'; if (item.title || item.subtitle) { html += '
'; html += '
'; @@ -290,42 +348,18 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f return html; } - function previousImage() { - if (swiperInstance) { - swiperInstance.slidePrev(); - } else { - stopInterval(); - showNextImage(currentIndex - 1); - } - } - - function nextImage() { - if (swiperInstance) { - - if (options.loop === false) { - - if (swiperInstance.activeIndex >= swiperInstance.slides.length - 1) { - dialogHelper.close(dlg); - return; - } - } - - swiperInstance.slideNext(); - } else { - stopInterval(); - showNextImage(currentIndex + 1); - } - } - + /** + * Fetches the information of the currently displayed slide. + * @returns {null|{itemId: string, shareUrl: string, serverId: string, url: string}} Object containing the information of the currently displayed slide. + */ function getCurrentImageInfo() { - if (swiperInstance) { var slide = document.querySelector('.swiper-slide-active'); if (slide) { return { url: slide.getAttribute('data-original'), - shareUrl: slide.getAttribute('data-imageurl'), + shareUrl: slide.getAttribute('data-original'), itemId: slide.getAttribute('data-itemid'), serverId: slide.getAttribute('data-serverid') }; @@ -336,8 +370,10 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f } } + /** + * Starts a download for the currently displayed slide. + */ function download() { - var imageInfo = getCurrentImageInfo(); require(['fileDownloader'], function (fileDownloader) { @@ -345,8 +381,10 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f }); } + /** + * Shares the currently displayed slide using the browser's built-in sharing feature. + */ function share() { - var imageInfo = getCurrentImageInfo(); navigator.share({ @@ -354,20 +392,29 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f }); } + /** + * Starts the autoplay feature of the Swiper instance. + */ function play() { if (swiperInstance.autoplay) { swiperInstance.autoplay.start(); } } + /** + * Pauses the autoplay feature of the Swiper instance; + */ function pause() { if (swiperInstance.autoplay) { swiperInstance.autoplay.stop(); } } + /** + * Toggles the autoplay feature of the Swiper instance. + */ function playPause() { - var paused = !dlg.querySelector('.btnSlideshowPause i').classList.contains("pause"); + var paused = !dialog.querySelector('.btnSlideshowPause i').classList.contains("pause"); if (paused) { play(); } else { @@ -375,8 +422,10 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f } } + /** + * Closes the dialog and destroys the Swiper instance. + */ function onDialogClosed() { - var swiper = swiperInstance; if (swiper) { swiper.destroy(true, true); @@ -387,53 +436,38 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f document.removeEventListener((window.PointerEvent ? 'pointermove' : 'mousemove'), onPointerMove); } - function startInterval(options) { - - currentOptions = options; - - stopInterval(); - createElements(options); - - if (!options.interactive) { - currentIntervalMs = options.interval || 11000; - showNextImage(options.startIndex || 0, true); - } - } - - var _osdOpen = false; - - function isOsdOpen() { - return _osdOpen; - } - - function getOsdBottom() { - return dlg.querySelector('.slideshowBottomBar'); - } - + /** + * Shows the OSD. + */ function showOsd() { - - var bottom = getOsdBottom(); + var bottom = dialog.querySelector('.slideshowBottomBar'); if (bottom) { slideUpToShow(bottom); startHideTimer(); } } + /** + * Hides the OSD. + */ function hideOsd() { - - var bottom = getOsdBottom(); + var bottom = dialog.querySelector('.slideshowBottomBar'); if (bottom) { slideDownToHide(bottom); } } - var hideTimeout; - + /** + * Starts the timer used to automatically hide the OSD. + */ function startHideTimer() { stopHideTimer(); - hideTimeout = setTimeout(hideOsd, 4000); + hideTimeout = setTimeout(hideOsd, 3000); } + /** + * Stops the timer used to automatically hide the OSD. + */ function stopHideTimer() { if (hideTimeout) { clearTimeout(hideTimeout); @@ -441,71 +475,76 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f } } - function slideUpToShow(elem) { - - if (!elem.classList.contains('hide')) { + /** + * Shows the OSD by sliding it into view. + * @param {HTMLElement} element - Element containing the OSD. + */ + function slideUpToShow(element) { + if (!element.classList.contains('hide')) { return; } _osdOpen = true; - elem.classList.remove('hide'); + element.classList.remove('hide'); var onFinish = function () { - focusManager.focus(elem.querySelector('.btnSlideshowPause')); + focusManager.focus(element.querySelector('.btnSlideshowPause')); }; - if (!elem.animate) { + if (!element.animate) { onFinish(); return; } requestAnimationFrame(function () { - var keyframes = [ - { transform: 'translate3d(0,' + elem.offsetHeight + 'px,0)', opacity: '.3', offset: 0 }, + { transform: 'translate3d(0,' + element.offsetHeight + 'px,0)', opacity: '.3', offset: 0 }, { transform: 'translate3d(0,0,0)', opacity: '1', offset: 1 } ]; var timing = { duration: 300, iterations: 1, easing: 'ease-out' }; - elem.animate(keyframes, timing).onfinish = onFinish; + element.animate(keyframes, timing).onfinish = onFinish; }); } - function slideDownToHide(elem) { - - if (elem.classList.contains('hide')) { + /** + * Hides the OSD by sliding it out of view. + * @param {HTMLElement} element - Element containing the OSD. + */ + function slideDownToHide(element) { + if (element.classList.contains('hide')) { return; } var onFinish = function () { - elem.classList.add('hide'); + element.classList.add('hide'); _osdOpen = false; }; - if (!elem.animate) { + if (!element.animate) { onFinish(); return; } requestAnimationFrame(function () { - var keyframes = [ { transform: 'translate3d(0,0,0)', opacity: '1', offset: 0 }, - { transform: 'translate3d(0,' + elem.offsetHeight + 'px,0)', opacity: '.3', offset: 1 } + { transform: 'translate3d(0,' + element.offsetHeight + 'px,0)', opacity: '.3', offset: 1 } ]; var timing = { duration: 300, iterations: 1, easing: 'ease-out' }; - elem.animate(keyframes, timing).onfinish = onFinish; + element.animate(keyframes, timing).onfinish = onFinish; }); } - var lastMouseMoveData; - - function onPointerMove(e) { - - var pointerType = e.pointerType || (layoutManager.mobile ? 'touch' : 'mouse'); + /** + * Shows the OSD when moving the mouse pointer or touching the screen. + * @param {Event} event - Pointer movement event. + */ + function onPointerMove(event) { + var pointerType = event.pointerType || (layoutManager.mobile ? 'touch' : 'mouse'); if (pointerType === 'mouse') { - var eventX = e.screenX || 0; - var eventY = e.screenY || 0; + var eventX = event.screenX || 0; + var eventY = event.screenY || 0; var obj = lastMouseMoveData; if (!obj) { @@ -528,125 +567,46 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f } } - function onInputCommand(e) { - - switch (e.detail.command) { - - case 'left': - if (!isOsdOpen()) { - e.preventDefault(); - e.stopPropagation(); - previousImage(); - } - break; - case 'right': - if (!isOsdOpen()) { - e.preventDefault(); - e.stopPropagation(); - nextImage(); - } - break; + /** + * Dispatches keyboard inputs to their proper handlers. + * @param {Event} event - Keyboard input event. + */ + function onInputCommand(event) { + switch (event.detail.command) { case 'up': case 'down': case 'select': case 'menu': case 'info': - case 'play': - case 'playpause': - case 'pause': showOsd(); break; + case 'play': + play(); + break; + case 'pause': + pause(); + break; + case 'playpause': + playPause(); + break; default: break; } } - function showNextImage(index, skipPreload) { - - index = Math.max(0, index); - if (index >= currentOptions.items.length) { - index = 0; - } - currentIndex = index; - - var options = currentOptions; - var items = options.items; - var item = items[index]; - var imgUrl = getImgUrl(item); - - var onSrcLoaded = function () { - var cardImageContainer = dlg.querySelector('.slideshowImage'); - - var newCardImageContainer = document.createElement('div'); - newCardImageContainer.className = cardImageContainer.className; - - if (options.cover) { - newCardImageContainer.classList.add('slideshowImage-cover'); - } - - newCardImageContainer.style.backgroundImage = "url('" + imgUrl + "')"; - newCardImageContainer.classList.add('hide'); - cardImageContainer.parentNode.appendChild(newCardImageContainer); - - if (options.showTitle) { - dlg.querySelector('.slideshowImageText').innerHTML = item.Name; - } else { - dlg.querySelector('.slideshowImageText').innerHTML = ''; - } - - newCardImageContainer.classList.remove('hide'); - var onAnimationFinished = function () { - - var parentNode = cardImageContainer.parentNode; - if (parentNode) { - parentNode.removeChild(cardImageContainer); - } - }; - - if (newCardImageContainer.animate) { - - var keyframes = [ - { opacity: '0', offset: 0 }, - { opacity: '1', offset: 1 } - ]; - var timing = { duration: 1200, iterations: 1 }; - newCardImageContainer.animate(keyframes, timing).onfinish = onAnimationFinished; - } else { - onAnimationFinished(); - } - - stopInterval(); - currentTimeout = setTimeout(function () { - showNextImage(index + 1, true); - - }, currentIntervalMs); - }; - - if (!skipPreload) { - var img = new Image(); - img.onload = onSrcLoaded; - img.src = imgUrl; - } else { - onSrcLoaded(); - } - } - - function stopInterval() { - if (currentTimeout) { - clearTimeout(currentTimeout); - currentTimeout = null; - } - } - + /** + * Shows the slideshow component. + */ self.show = function () { - startInterval(options); + createElements(options); }; + /** + * Hides the slideshow element. + */ self.hide = function () { - - var dialog = dlg; + var dialog = dialog; if (dialog) { - dialogHelper.close(dialog); } }; diff --git a/src/components/subtitlesettings/subtitlesettings.js b/src/components/subtitlesettings/subtitlesettings.js index 69de536e4..2c8692919 100644 --- a/src/components/subtitlesettings/subtitlesettings.js +++ b/src/components/subtitlesettings/subtitlesettings.js @@ -2,15 +2,11 @@ define(['require', 'globalize', 'appSettings', 'apphost', 'focusManager', 'loadi "use strict"; function populateLanguages(select, languages) { - var html = ""; html += ""; - for (var i = 0, length = languages.length; i < length; i++) { - var culture = languages[i]; - html += ""; } @@ -18,7 +14,6 @@ define(['require', 'globalize', 'appSettings', 'apphost', 'focusManager', 'loadi } function getSubtitleAppearanceObject(context) { - var appearanceSettings = {}; appearanceSettings.textSize = context.querySelector('#selectTextSize').value; @@ -102,14 +97,12 @@ define(['require', 'globalize', 'appSettings', 'apphost', 'focusManager', 'loadi } function onSubmit(e) { - var self = this; var apiClient = connectionManager.getApiClient(self.options.serverId); var userId = self.options.userId; var userSettings = self.options.userSettings; userSettings.setUserInfo(userId, apiClient).then(function () { - var enableSaveConfirmation = self.options.enableSaveConfirmation; save(self, self.options.element, userId, userSettings, apiClient, enableSaveConfirmation); }); @@ -118,6 +111,7 @@ define(['require', 'globalize', 'appSettings', 'apphost', 'focusManager', 'loadi if (e) { e.preventDefault(); } + return false; } @@ -197,9 +191,7 @@ define(['require', 'globalize', 'appSettings', 'apphost', 'focusManager', 'loadi var userSettings = self.options.userSettings; apiClient.getUser(userId).then(function (user) { - userSettings.setUserInfo(userId, apiClient).then(function () { - self.dataLoaded = true; var appearanceSettings = userSettings.getSubtitleAppearanceSettings(self.options.appearanceKey); @@ -214,7 +206,6 @@ define(['require', 'globalize', 'appSettings', 'apphost', 'focusManager', 'loadi }; SubtitleSettings.prototype.destroy = function () { - this.options = null; }; diff --git a/src/components/subtitlesettings/subtitlesettings.template.html b/src/components/subtitlesettings/subtitlesettings.template.html index cc2788397..716296a25 100644 --- a/src/components/subtitlesettings/subtitlesettings.template.html +++ b/src/components/subtitlesettings/subtitlesettings.template.html @@ -1,7 +1,5 @@ -
-

${Subtitles}

@@ -9,6 +7,7 @@
+
@@ -34,7 +34,6 @@
-

${HeaderSubtitleAppearance}

@@ -61,6 +60,7 @@
+
+
+
+
+ + + +
${DeinterlaceMethodHelp}
+
+