Merge forked-daapd-web into forked-daapd

web-src/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    ["env", {
+      "modules": false,
+      "targets": {
+        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+      }
+    }],
+    "stage-2"
+  ],
+  "plugins": ["transform-vue-jsx", "transform-runtime"]
+}

web-src/.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

web-src/.eslintignore

@@ -0,0 +1,4 @@
+/build/
+/config/
+/dist/
+/*.js

web-src/.eslintrc.js

@@ -0,0 +1,29 @@
+// https://eslint.org/docs/user-guide/configuring
+
+module.exports = {
+  root: true,
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  env: {
+    browser: true,
+  },
+  extends: [
+    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
+    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
+    'plugin:vue/essential', 
+    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
+    'standard'
+  ],
+  // required to lint *.vue files
+  plugins: [
+    'vue'
+  ],
+  // add your custom rules here
+  rules: {
+    // allow async-await
+    'generator-star-spacing': 'off',
+    // allow debugger during development
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+  }
+}

web-src/.gitignore

@@ -0,0 +1,64 @@
+# 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 (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# 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
+
+# next.js build output
+.next
+
+# dist directory
+dist/

web-src/.postcssrc.js

@@ -0,0 +1,10 @@
+// https://github.com/michael-ciniawsky/postcss-load-config
+
+module.exports = {
+  "plugins": {
+    "postcss-import": {},
+    "postcss-url": {},
+    // to edit target browsers: use "browserslist" field in package.json
+    "autoprefixer": {}
+  }
+}

web-src/build/build.js

@@ -0,0 +1,41 @@
+'use strict'
+require('./check-versions')()
+
+process.env.NODE_ENV = 'production'
+
+const ora = require('ora')
+const rm = require('rimraf')
+const path = require('path')
+const chalk = require('chalk')
+const webpack = require('webpack')
+const config = require('../config')
+const webpackConfig = require('./webpack.prod.conf')
+
+const spinner = ora('building for production...')
+spinner.start()
+
+rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
+  if (err) throw err
+  webpack(webpackConfig, (err, stats) => {
+    spinner.stop()
+    if (err) throw err
+    process.stdout.write(stats.toString({
+      colors: true,
+      modules: false,
+      children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
+      chunks: false,
+      chunkModules: false
+    }) + '\n\n')
+
+    if (stats.hasErrors()) {
+      console.log(chalk.red('  Build failed with errors.\n'))
+      process.exit(1)
+    }
+
+    console.log(chalk.cyan('  Build complete.\n'))
+    console.log(chalk.yellow(
+      '  Tip: built files are meant to be served over an HTTP server.\n' +
+      '  Opening index.html over file:// won\'t work.\n'
+    ))
+  })
+})

web-src/build/check-versions.js

@@ -0,0 +1,54 @@
+'use strict'
+const chalk = require('chalk')
+const semver = require('semver')
+const packageConfig = require('../package.json')
+const shell = require('shelljs')
+
+function exec (cmd) {
+  return require('child_process').execSync(cmd).toString().trim()
+}
+
+const versionRequirements = [
+  {
+    name: 'node',
+    currentVersion: semver.clean(process.version),
+    versionRequirement: packageConfig.engines.node
+  }
+]
+
+if (shell.which('npm')) {
+  versionRequirements.push({
+    name: 'npm',
+    currentVersion: exec('npm --version'),
+    versionRequirement: packageConfig.engines.npm
+  })
+}
+
+module.exports = function () {
+  const warnings = []
+
+  for (let i = 0; i < versionRequirements.length; i++) {
+    const mod = versionRequirements[i]
+
+    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
+      warnings.push(mod.name + ': ' +
+        chalk.red(mod.currentVersion) + ' should be ' +
+        chalk.green(mod.versionRequirement)
+      )
+    }
+  }
+
+  if (warnings.length) {
+    console.log('')
+    console.log(chalk.yellow('To use this template, you must update following to modules:'))
+    console.log()
+
+    for (let i = 0; i < warnings.length; i++) {
+      const warning = warnings[i]
+      console.log('  ' + warning)
+    }
+
+    console.log()
+    process.exit(1)
+  }
+}

web-src/build/utils.js

@@ -0,0 +1,101 @@
+'use strict'
+const path = require('path')
+const config = require('../config')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const packageConfig = require('../package.json')
+
+exports.assetsPath = function (_path) {
+  const assetsSubDirectory = process.env.NODE_ENV === 'production'
+    ? config.build.assetsSubDirectory
+    : config.dev.assetsSubDirectory
+
+  return path.posix.join(assetsSubDirectory, _path)
+}
+
+exports.cssLoaders = function (options) {
+  options = options || {}
+
+  const cssLoader = {
+    loader: 'css-loader',
+    options: {
+      sourceMap: options.sourceMap
+    }
+  }
+
+  const postcssLoader = {
+    loader: 'postcss-loader',
+    options: {
+      sourceMap: options.sourceMap
+    }
+  }
+
+  // generate loader string to be used with extract text plugin
+  function generateLoaders (loader, loaderOptions) {
+    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
+
+    if (loader) {
+      loaders.push({
+        loader: loader + '-loader',
+        options: Object.assign({}, loaderOptions, {
+          sourceMap: options.sourceMap
+        })
+      })
+    }
+
+    // Extract CSS when that option is specified
+    // (which is the case during production build)
+    if (options.extract) {
+      return ExtractTextPlugin.extract({
+        use: loaders,
+        fallback: 'vue-style-loader'
+      })
+    } else {
+      return ['vue-style-loader'].concat(loaders)
+    }
+  }
+
+  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
+  return {
+    css: generateLoaders(),
+    postcss: generateLoaders(),
+    less: generateLoaders('less'),
+    sass: generateLoaders('sass', { indentedSyntax: true }),
+    scss: generateLoaders('sass'),
+    stylus: generateLoaders('stylus'),
+    styl: generateLoaders('stylus')
+  }
+}
+
+// Generate loaders for standalone style files (outside of .vue)
+exports.styleLoaders = function (options) {
+  const output = []
+  const loaders = exports.cssLoaders(options)
+
+  for (const extension in loaders) {
+    const loader = loaders[extension]
+    output.push({
+      test: new RegExp('\\.' + extension + '$'),
+      use: loader
+    })
+  }
+
+  return output
+}
+
+exports.createNotifierCallback = () => {
+  const notifier = require('node-notifier')
+
+  return (severity, errors) => {
+    if (severity !== 'error') return
+
+    const error = errors[0]
+    const filename = error.file && error.file.split('!').pop()
+
+    notifier.notify({
+      title: packageConfig.name,
+      message: severity + ': ' + error.name,
+      subtitle: filename || '',
+      icon: path.join(__dirname, 'logo.png')
+    })
+  }
+}

web-src/build/vue-loader.conf.js

@@ -0,0 +1,22 @@
+'use strict'
+const utils = require('./utils')
+const config = require('../config')
+const isProduction = process.env.NODE_ENV === 'production'
+const sourceMapEnabled = isProduction
+  ? config.build.productionSourceMap
+  : config.dev.cssSourceMap
+
+module.exports = {
+  loaders: utils.cssLoaders({
+    sourceMap: sourceMapEnabled,
+    extract: isProduction
+  }),
+  cssSourceMap: sourceMapEnabled,
+  cacheBusting: config.dev.cacheBusting,
+  transformToRequire: {
+    video: ['src', 'poster'],
+    source: 'src',
+    img: 'src',
+    image: 'xlink:href'
+  }
+}

web-src/build/webpack.base.conf.js

@@ -0,0 +1,92 @@
+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const config = require('../config')
+const vueLoaderConfig = require('./vue-loader.conf')
+
+function resolve (dir) {
+  return path.join(__dirname, '..', dir)
+}
+
+const createLintingRule = () => ({
+  test: /\.(js|vue)$/,
+  loader: 'eslint-loader',
+  enforce: 'pre',
+  include: [resolve('src'), resolve('test')],
+  options: {
+    formatter: require('eslint-friendly-formatter'),
+    emitWarning: !config.dev.showEslintErrorsInOverlay
+  }
+})
+
+module.exports = {
+  context: path.resolve(__dirname, '../'),
+  entry: {
+    app: './src/main.js'
+  },
+  output: {
+    path: config.build.assetsRoot,
+    filename: '[name].js',
+    publicPath: process.env.NODE_ENV === 'production'
+      ? config.build.assetsPublicPath
+      : config.dev.assetsPublicPath
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: {
+      'vue$': 'vue/dist/vue.esm.js',
+      '@': resolve('src'),
+    }
+  },
+  module: {
+    rules: [
+      ...(config.dev.useEslint ? [createLintingRule()] : []),
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: vueLoaderConfig
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('img/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('media/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+        }
+      }
+    ]
+  },
+  node: {
+    // prevent webpack from injecting useless setImmediate polyfill because Vue
+    // source contains it (although only uses it if it's native).
+    setImmediate: false,
+    // prevent webpack from injecting mocks to Node native modules
+    // that does not make sense for the client
+    dgram: 'empty',
+    fs: 'empty',
+    net: 'empty',
+    tls: 'empty',
+    child_process: 'empty'
+  }
+}

web-src/build/webpack.dev.conf.js

@@ -0,0 +1,95 @@
+'use strict'
+const utils = require('./utils')
+const webpack = require('webpack')
+const config = require('../config')
+const merge = require('webpack-merge')
+const path = require('path')
+const baseWebpackConfig = require('./webpack.base.conf')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
+const portfinder = require('portfinder')
+
+const HOST = process.env.HOST
+const PORT = process.env.PORT && Number(process.env.PORT)
+
+const devWebpackConfig = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
+  },
+  // cheap-module-eval-source-map is faster for development
+  devtool: config.dev.devtool,
+
+  // these devServer options should be customized in /config/index.js
+  devServer: {
+    clientLogLevel: 'warning',
+    historyApiFallback: {
+      rewrites: [
+        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
+      ],
+    },
+    hot: true,
+    contentBase: false, // since we use CopyWebpackPlugin.
+    compress: true,
+    host: HOST || config.dev.host,
+    port: PORT || config.dev.port,
+    open: config.dev.autoOpenBrowser,
+    overlay: config.dev.errorOverlay
+      ? { warnings: false, errors: true }
+      : false,
+    publicPath: config.dev.assetsPublicPath,
+    proxy: config.dev.proxyTable,
+    quiet: true, // necessary for FriendlyErrorsPlugin
+    watchOptions: {
+      poll: config.dev.poll,
+    }
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': require('../config/dev.env')
+    }),
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
+    new webpack.NoEmitOnErrorsPlugin(),
+    // https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: 'index.html',
+      inject: true
+    }),
+    // copy custom static assets
+    new CopyWebpackPlugin([
+      {
+        from: path.resolve(__dirname, '../static'),
+        to: config.dev.assetsSubDirectory,
+        ignore: ['.*']
+      }
+    ])
+  ]
+})
+
+module.exports = new Promise((resolve, reject) => {
+  portfinder.basePort = process.env.PORT || config.dev.port
+  portfinder.getPort((err, port) => {
+    if (err) {
+      reject(err)
+    } else {
+      // publish the new Port, necessary for e2e tests
+      process.env.PORT = port
+      // add port to devServer config
+      devWebpackConfig.devServer.port = port
+
+      // Add FriendlyErrorsPlugin
+      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
+        compilationSuccessInfo: {
+          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
+        },
+        onErrors: config.dev.notifyOnErrors
+        ? utils.createNotifierCallback()
+        : undefined
+      }))
+
+      resolve(devWebpackConfig)
+    }
+  })
+})

web-src/build/webpack.prod.conf.js

@@ -0,0 +1,145 @@
+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const webpack = require('webpack')
+const config = require('../config')
+const merge = require('webpack-merge')
+const baseWebpackConfig = require('./webpack.base.conf')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+
+const env = require('../config/prod.env')
+
+const webpackConfig = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({
+      sourceMap: config.build.productionSourceMap,
+      extract: true,
+      usePostCSS: true
+    })
+  },
+  devtool: config.build.productionSourceMap ? config.build.devtool : false,
+  output: {
+    path: config.build.assetsRoot,
+    filename: utils.assetsPath('js/[name].js'),
+    chunkFilename: utils.assetsPath('js/[id].js')
+  },
+  plugins: [
+    // http://vuejs.github.io/vue-loader/en/workflow/production.html
+    new webpack.DefinePlugin({
+      'process.env': env
+    }),
+    new UglifyJsPlugin({
+      uglifyOptions: {
+        compress: {
+          warnings: false
+        }
+      },
+      sourceMap: config.build.productionSourceMap,
+      parallel: true
+    }),
+    // extract css into its own file
+    new ExtractTextPlugin({
+      filename: utils.assetsPath('css/[name].css'),
+      // Setting the following option to `false` will not extract CSS from codesplit chunks.
+      // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
+      // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
+      // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
+      allChunks: true,
+    }),
+    // Compress extracted CSS. We are using this plugin so that possible
+    // duplicated CSS from different components can be deduped.
+    new OptimizeCSSPlugin({
+      cssProcessorOptions: config.build.productionSourceMap
+        ? { safe: true, map: { inline: false } }
+        : { safe: true }
+    }),
+    // generate dist index.html with correct asset hash for caching.
+    // you can customize output by editing /index.html
+    // see https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: config.build.index,
+      template: 'index.html',
+      inject: true,
+      minify: {
+        removeComments: true,
+        collapseWhitespace: true,
+        removeAttributeQuotes: true
+        // more options:
+        // https://github.com/kangax/html-minifier#options-quick-reference
+      },
+      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
+      chunksSortMode: 'dependency'
+    }),
+    // keep module.id stable when vendor modules does not change
+    new webpack.HashedModuleIdsPlugin(),
+    // enable scope hoisting
+    new webpack.optimize.ModuleConcatenationPlugin(),
+    // split vendor js into its own file
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      minChunks (module) {
+        // any required modules inside node_modules are extracted to vendor
+        return (
+          module.resource &&
+          /\.js$/.test(module.resource) &&
+          module.resource.indexOf(
+            path.join(__dirname, '../node_modules')
+          ) === 0
+        )
+      }
+    }),
+    // extract webpack runtime and module manifest to its own file in order to
+    // prevent vendor hash from being updated whenever app bundle is updated
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'manifest',
+      minChunks: Infinity
+    }),
+    // This instance extracts shared chunks from code splitted chunks and bundles them
+    // in a separate chunk, similar to the vendor chunk
+    // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'app',
+      async: 'vendor-async',
+      children: true,
+      minChunks: 3
+    }),
+
+    // copy custom static assets
+    new CopyWebpackPlugin([
+      {
+        from: path.resolve(__dirname, '../static'),
+        to: config.build.assetsSubDirectory,
+        ignore: ['.*']
+      }
+    ])
+  ]
+})
+
+if (config.build.productionGzip) {
+  const CompressionWebpackPlugin = require('compression-webpack-plugin')
+
+  webpackConfig.plugins.push(
+    new CompressionWebpackPlugin({
+      asset: '[path].gz[query]',
+      algorithm: 'gzip',
+      test: new RegExp(
+        '\\.(' +
+        config.build.productionGzipExtensions.join('|') +
+        ')$'
+      ),
+      threshold: 10240,
+      minRatio: 0.8
+    })
+  )
+}
+
+if (config.build.bundleAnalyzerReport) {
+  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
+}
+
+module.exports = webpackConfig

web-src/config/dev.env.js

@@ -0,0 +1,7 @@
+'use strict'
+const merge = require('webpack-merge')
+const prodEnv = require('./prod.env')
+
+module.exports = merge(prodEnv, {
+  NODE_ENV: '"development"'
+})

web-src/config/index.js

@@ -0,0 +1,83 @@
+'use strict'
+// Template version: 1.3.1
+// see http://vuejs-templates.github.io/webpack for documentation.
+
+const path = require('path')
+
+module.exports = {
+  dev: {
+
+    // Paths
+    assetsSubDirectory: '',
+    assetsPublicPath: '/',
+    proxyTable: {
+      // proxy all requests starting with /api to local forked-daapd instance
+      '/api': {
+        target: 'http://localhost:3689',
+        changeOrigin: true,
+        pathRewrite: { }
+      }
+    },
+
+    // Various Dev Server settings
+    host: 'localhost', // can be overwritten by process.env.HOST
+    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
+    autoOpenBrowser: false,
+    errorOverlay: true,
+    notifyOnErrors: true,
+    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
+
+    // Use Eslint Loader?
+    // If true, your code will be linted during bundling and
+    // linting errors and warnings will be shown in the console.
+    useEslint: true,
+    // If true, eslint errors and warnings will also be shown in the error overlay
+    // in the browser.
+    showEslintErrorsInOverlay: false,
+
+    /**
+     * Source Maps
+     */
+
+    // https://webpack.js.org/configuration/devtool/#development
+    devtool: 'cheap-module-eval-source-map',
+
+    // If you have problems debugging vue-files in devtools,
+    // set this to false - it *may* help
+    // https://vue-loader.vuejs.org/en/options.html#cachebusting
+    cacheBusting: true,
+
+    cssSourceMap: true
+  },
+
+  build: {
+    // Template for index.html
+    index: path.resolve(__dirname, '../../htdocs/index.html'),
+
+    // Paths
+    assetsRoot: path.resolve(__dirname, '../../htdocs/player'),
+    assetsSubDirectory: '',
+    assetsPublicPath: '/player/',
+
+    /**
+     * Source Maps
+     */
+
+    productionSourceMap: true,
+    // https://webpack.js.org/configuration/devtool/#production
+    devtool: '#source-map',
+
+    // Gzip off by default as many popular static hosts such as
+    // Surge or Netlify already gzip all static assets for you.
+    // Before setting to `true`, make sure to:
+    // npm install --save-dev compression-webpack-plugin
+    productionGzip: false,
+    productionGzipExtensions: ['js', 'css'],
+
+    // Run the build command with an extra argument to
+    // View the bundle analyzer report after build finishes:
+    // `npm run build --report`
+    // Set to `true` or `false` to always turn it on or off
+    bundleAnalyzerReport: process.env.npm_config_report
+  }
+}

web-src/config/prod.env.js

@@ -0,0 +1,6 @@
+'use strict'
+module.exports = {
+  NODE_ENV: '"production"',
+  VERSION: '"123"',
+  V2: JSON.stringify(require("../package.json").version)
+}

web-src/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="has-navbar-fixed-top has-navbar-fixed-bottom">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>forked-daapd-web</title>
+    <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+    <link rel="manifest" href="/site.webmanifest">
+    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
+    <meta name="msapplication-TileColor" content="#da532c">
+    <meta name="theme-color" content="#ffffff">
+  </head>
+  <body>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

web-src/package.json

@@ -0,0 +1,88 @@
+{
+  "name": "forked-daapd-web",
+  "version": "0.1.1",
+  "description": "forked-daapd web interface",
+  "author": "chme <christian.meffert@googlemail.com>",
+  "license": "GPL-2.0",
+  "private": true,
+  "scripts": {
+    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
+    "start": "npm run dev",
+    "lint": "eslint --ext .js,.vue src",
+    "build": "node build/build.js"
+  },
+  "dependencies": {
+    "axios": "^0.18.0",
+    "bulma": "^0.7.1",
+    "mdi": "^2.1.99",
+    "moment": "^2.22.1",
+    "moment-duration-format": "^2.2.2",
+    "npm": "^5.8.0",
+    "reconnectingwebsocket": "^1.0.0",
+    "spotify-web-api-js": "^0.23.0",
+    "vue": "^2.5.16",
+    "vue-infinite-loading": "^2.2.3",
+    "vue-progressbar": "^0.7.4",
+    "vue-range-slider": "^0.6.0",
+    "vue-router": "^3.0.1",
+    "vue2-touch-events": "^1.0.0",
+    "vuedraggable": "^2.16.0",
+    "vuex": "^3.0.1"
+  },
+  "devDependencies": {
+    "autoprefixer": "^7.2.6",
+    "babel-core": "^6.22.1",
+    "babel-eslint": "^8.2.2",
+    "babel-helper-vue-jsx-merge-props": "^2.0.3",
+    "babel-loader": "^7.1.4",
+    "babel-plugin-syntax-jsx": "^6.18.0",
+    "babel-plugin-transform-runtime": "^6.22.0",
+    "babel-plugin-transform-vue-jsx": "^3.7.0",
+    "babel-preset-env": "^1.3.2",
+    "babel-preset-stage-2": "^6.22.0",
+    "chalk": "^2.3.2",
+    "copy-webpack-plugin": "^4.5.1",
+    "css-loader": "^0.28.11",
+    "eslint": "^4.19.1",
+    "eslint-config-standard": "^10.2.1",
+    "eslint-friendly-formatter": "^3.0.0",
+    "eslint-loader": "^1.7.1",
+    "eslint-plugin-import": "^2.9.0",
+    "eslint-plugin-node": "^5.2.0",
+    "eslint-plugin-promise": "^3.7.0",
+    "eslint-plugin-standard": "^3.0.1",
+    "eslint-plugin-vue": "^4.4.0",
+    "extract-text-webpack-plugin": "^3.0.0",
+    "file-loader": "^1.1.11",
+    "friendly-errors-webpack-plugin": "^1.6.1",
+    "html-webpack-plugin": "^2.30.1",
+    "node-notifier": "^5.1.2",
+    "optimize-css-assets-webpack-plugin": "^3.2.0",
+    "ora": "^1.4.0",
+    "portfinder": "^1.0.13",
+    "postcss-import": "^11.1.0",
+    "postcss-loader": "^2.1.3",
+    "postcss-url": "^7.3.1",
+    "rimraf": "^2.6.0",
+    "semver": "^5.3.0",
+    "shelljs": "^0.7.6",
+    "uglifyjs-webpack-plugin": "^1.2.4",
+    "url-loader": "^0.5.8",
+    "vue-loader": "^13.7.1",
+    "vue-style-loader": "^3.1.2",
+    "vue-template-compiler": "^2.5.16",
+    "webpack": "^3.11.0",
+    "webpack-bundle-analyzer": "^2.11.1",
+    "webpack-dev-server": "^2.11.2",
+    "webpack-merge": "^4.1.2"
+  },
+  "engines": {
+    "node": ">= 6.0.0",
+    "npm": ">= 3.0.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}

web-src/src/App.vue

@@ -0,0 +1,193 @@
+<template>
+  <div id="app">
+    <navbar-top />
+    <vue-progress-bar class="fd-progress-bar" />
+    <transition name="fade">
+      <router-view v-show="!show_burger_menu" />
+    </transition>
+    <notifications v-show="!show_burger_menu" />
+    <navbar-bottom v-show="!show_burger_menu" />
+  </div>
+</template>
+
+<script>
+import NavbarTop from '@/components/NavbarTop'
+import NavbarBottom from '@/components/NavbarBottom'
+import Notifications from '@/components/Notifications'
+import webapi from '@/webapi'
+import * as types from '@/store/mutation_types'
+import ReconnectingWebSocket from 'reconnectingwebsocket'
+
+export default {
+  name: 'App',
+  components: { NavbarTop, NavbarBottom, Notifications },
+  template: '<App/>',
+
+  data () {
+    return {
+      token_timer_id: 0
+    }
+  },
+
+  computed: {
+    show_burger_menu () {
+      return this.$store.state.show_burger_menu
+    }
+  },
+
+  created: function () {
+    this.connect()
+
+    //  Start the progress bar on app start
+    this.$Progress.start()
+
+    //  Hook the progress bar to start before we move router-view
+    this.$router.beforeEach((to, from, next) => {
+      if (to.meta.show_progress) {
+        if (to.meta.progress !== undefined) {
+          let meta = to.meta.progress
+          this.$Progress.parseMeta(meta)
+        }
+        this.$Progress.start()
+      }
+      next()
+    })
+
+    //  hook the progress bar to finish after we've finished moving router-view
+    this.$router.afterEach((to, from) => {
+      if (to.meta.show_progress) {
+        this.$Progress.finish()
+      }
+    })
+  },
+
+  methods: {
+    connect: function () {
+      this.$store.dispatch('add_notification', { text: 'Connecting to forked-daapd', type: 'info', topic: 'connection', timeout: 2000 })
+
+      webapi.config().then(({ data }) => {
+        this.$store.commit(types.UPDATE_CONFIG, data)
+        this.$store.commit(types.HIDE_SINGLES, data.hide_singles)
+        document.title = data.library_name
+
+        this.open_ws()
+        this.$Progress.finish()
+      }).catch(() => {
+        this.$store.dispatch('add_notification', { text: 'Failed to connect to forked-daapd', type: 'danger', topic: 'connection' })
+      })
+    },
+
+    open_ws: function () {
+      if (this.$store.state.config.websocket_port <= 0) {
+        this.$store.dispatch('add_notification', { text: 'Missing websocket port', type: 'danger' })
+        return
+      }
+
+      const vm = this
+
+      var socket = new ReconnectingWebSocket(
+        'ws://' + window.location.hostname + ':' + vm.$store.state.config.websocket_port,
+        'notify',
+        { reconnectInterval: 5000 }
+      )
+
+      socket.onopen = function () {
+        vm.$store.dispatch('add_notification', { text: 'Connection to server established', type: 'primary', topic: 'connection', timeout: 2000 })
+        socket.send(JSON.stringify({ notify: ['update', 'player', 'options', 'outputs', 'volume', 'spotify'] }))
+
+        vm.update_outputs()
+        vm.update_player_status()
+        vm.update_library_stats()
+        vm.update_queue()
+        vm.update_spotify()
+      }
+      socket.onclose = function () {
+        // vm.$store.dispatch('add_notification', { text: 'Connection closed', type: 'danger', timeout: 2000 })
+      }
+      socket.onerror = function () {
+        vm.$store.dispatch('add_notification', { text: 'Connection lost. Reconnecting ...', type: 'danger', topic: 'connection' })
+      }
+      socket.onmessage = function (response) {
+        var data = JSON.parse(response.data)
+        if (data.notify.includes('update')) {
+          vm.update_library_stats()
+        }
+        if (data.notify.includes('player') || data.notify.includes('options') || data.notify.includes('volume')) {
+          vm.update_player_status()
+        }
+        if (data.notify.includes('outputs') || data.notify.includes('volume')) {
+          vm.update_outputs()
+        }
+        if (data.notify.includes('queue')) {
+          vm.update_queue()
+        }
+        if (data.notify.includes('spotify')) {
+          vm.update_spotify()
+        }
+      }
+    },
+
+    update_library_stats: function () {
+      webapi.library_stats().then(({ data }) => {
+        this.$store.commit(types.UPDATE_LIBRARY_STATS, data)
+      })
+      webapi.library_count('media_kind is audiobook').then(({ data }) => {
+        this.$store.commit(types.UPDATE_LIBRARY_AUDIOBOOKS_COUNT, data)
+      })
+      webapi.library_count('media_kind is podcast').then(({ data }) => {
+        this.$store.commit(types.UPDATE_LIBRARY_PODCASTS_COUNT, data)
+      })
+    },
+
+    update_outputs: function () {
+      webapi.outputs().then(({ data }) => {
+        this.$store.commit(types.UPDATE_OUTPUTS, data.outputs)
+      })
+    },
+
+    update_player_status: function () {
+      webapi.player_status().then(({ data }) => {
+        this.$store.commit(types.UPDATE_PLAYER_STATUS, data)
+      })
+    },
+
+    update_queue: function () {
+      webapi.queue().then(({ data }) => {
+        this.$store.commit(types.UPDATE_QUEUE, data)
+      })
+    },
+
+    update_spotify: function () {
+      webapi.spotify().then(({ data }) => {
+        this.$store.commit(types.UPDATE_SPOTIFY, data)
+
+        if (this.token_timer_id > 0) {
+          console.log('clear old timer: ' + this.token_timer_id)
+          window.clearTimeout(this.token_timer_id)
+          this.token_timer_id = 0
+        }
+        if (data.webapi_token_expires_in > 0 && data.webapi_token) {
+          this.token_timer_id = window.setTimeout(this.update_spotify, 1000 * data.webapi_token_expires_in)
+          console.log('new timer: ' + this.token_timer_id + ', expires in ' + data.webapi_token_expires_in + ' seconds')
+        }
+      })
+    }
+  },
+
+  watch: {
+    '$route' (to, from) {
+      this.$store.commit(types.SHOW_BURGER_MENU, false)
+    },
+    'show_burger_menu' () {
+      if (this.show_burger_menu) {
+        document.querySelector('html').classList.add('is-clipped')
+      } else {
+        document.querySelector('html').classList.remove('is-clipped')
+      }
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/components/ListItemAlbum.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="media">
+    <div class="media-content fd-has-action is-clipped" v-on:click="open_album">
+      <h1 class="title is-6">{{ album.name }}</h1>
+      <h2 class="subtitle is-7 has-text-grey"><b>{{ album.artist }}</b></h2>
+    </div>
+    <div class="media-right">
+      <a @click="show_details_modal = true">
+        <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
+      </a>
+      <modal-dialog :show="show_details_modal" @close="show_details_modal = false">
+        <template slot="modal-content">
+          <div class="card">
+            <div class="card-content">
+              <p class="title is-4">
+                <a class="has-text-link" @click="open_album">{{ album.name }}</a>
+              </p>
+              <div class="content is-small">
+                <p v-if="album.artist && media_kind !== 'audiobook'">
+                  <span class="heading">Album artist</span>
+                  <a class="title is-6 has-text-link" @click="open_artist">{{ album.artist }}</a>
+                </p>
+                <p v-if="album.artist && media_kind === 'audiobook'">
+                  <span class="heading">Album artist</span>
+                  <span class="title is-6">{{ album.artist }}</span>
+                </p>
+                <p>
+                  <span class="heading">Tracks</span>
+                  <span class="title is-6">{{ album.track_count }}</span>
+                </p>
+              </div>
+            </div>
+            <footer class="card-footer">
+              <a class="card-footer-item has-text-dark" @click="queue_add">
+                <span class="icon"><i class="mdi mdi-playlist-plus mdi-18px"></i></span> <span>Add</span>
+              </a>
+              <a class="card-footer-item has-text-dark" @click="play">
+                <span class="icon"><i class="mdi mdi-play mdi-18px"></i></span> <span>Play</span>
+              </a>
+            </footer>
+          </div>
+        </template>
+      </modal-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import ModalDialog from '@/components/ModalDialog'
+import webapi from '@/webapi'
+
+export default {
+  name: 'ListItemAlbum',
+  components: { ModalDialog },
+
+  props: ['album', 'media_kind'],
+
+  data () {
+    return {
+      show_details_modal: false
+    }
+  },
+
+  methods: {
+    play: function () {
+      this.show_details_modal = false
+      webapi.queue_clear().then(() =>
+        webapi.queue_add(this.album.uri).then(() =>
+          webapi.player_play()
+        )
+      )
+    },
+
+    queue_add: function () {
+      this.show_details_modal = false
+      webapi.queue_add(this.album.uri).then(() =>
+        this.$store.dispatch('add_notification', { text: 'Album tracks appended to queue', type: 'info', timeout: 2000 })
+      )
+    },
+
+    open_album: function () {
+      this.show_details_modal = false
+      if (this.media_kind === 'podcast') {
+        this.$router.push({ path: '/podcasts/' + this.album.id })
+      } else if (this.media_kind === 'audiobook') {
+        this.$router.push({ path: '/audiobooks/' + this.album.id })
+      } else {
+        this.$router.push({ path: '/music/albums/' + this.album.id })
+      }
+    },
+
+    open_artist: function () {
+      this.show_details_modal = false
+      this.$router.push({ path: '/music/artists/' + this.album.artist_id })
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/components/ListItemArtist.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="media">
+    <div class="media-content fd-has-action is-clipped" v-on:click="open_artist">
+      <h1 class="title is-6">{{ artist.name }}</h1>
+    </div>
+    <div class="media-right">
+      <a @click="show_details_modal = true">
+        <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
+      </a>
+      <modal-dialog :show="show_details_modal" @close="show_details_modal = false">
+        <template slot="modal-content">
+          <div class="card">
+            <div class="card-content">
+              <p class="title is-4">
+                <a class="has-text-link" @click="open_artist">{{ artist.name }}</a>
+              </p>
+              <div class="content is-small">
+                <p>
+                  <span class="heading">Albums</span>
+                  <span class="title is-6">{{ artist.album_count }}</span>
+                </p>
+                <p>
+                  <span class="heading">Tracks</span>
+                  <span class="title is-6">{{ artist.track_count }}</span>
+                </p>
+              </div>
+            </div>
+            <footer class="card-footer">
+              <a class="card-footer-item has-text-dark" @click="queue_add">
+                <span class="icon"><i class="mdi mdi-playlist-plus mdi-18px"></i></span> <span>Add</span>
+              </a>
+              <a class="card-footer-item has-text-dark" @click="play">
+                <span class="icon"><i class="mdi mdi-play mdi-18px"></i></span> <span>Play</span>
+              </a>
+            </footer>
+          </div>
+        </template>
+      </modal-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import ModalDialog from '@/components/ModalDialog'
+import webapi from '@/webapi'
+
+export default {
+  name: 'PartArtist',
+  components: { ModalDialog },
+
+  props: ['artist'],
+
+  data () {
+    return {
+      show_details_modal: false
+    }
+  },
+
+  methods: {
+    play: function () {
+      this.show_details_modal = false
+      webapi.queue_clear().then(() =>
+        webapi.queue_add(this.artist.uri).then(() =>
+          webapi.player_play()
+        )
+      )
+    },
+
+    queue_add: function () {
+      this.show_details_modal = false
+      webapi.queue_add(this.artist.uri).then(() =>
+        this.$store.dispatch('add_notification', { text: 'Artist tracks appended to queue', type: 'info', timeout: 2000 })
+      )
+    },
+
+    open_artist: function () {
+      this.show_details_modal = false
+      this.$router.push({ path: '/music/artists/' + this.artist.id })
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/components/ListItemPlaylist.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="media">
+    <div class="media-content fd-has-action is-clipped" v-on:click="open_playlist">
+      <h1 class="title is-6">{{ playlist.name }}</h1>
+    </div>
+    <div class="media-right">
+      <a @click="show_details_modal = true">
+        <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
+      </a>
+      <modal-dialog :show="show_details_modal" @close="show_details_modal = false">
+        <template slot="modal-content">
+          <div class="card">
+            <div class="card-content">
+              <p class="title is-4">
+                <a class="has-text-link" @click="open_playlist">{{ playlist.name }}</a>
+              </p>
+              <div class="content is-small">
+                <p>
+                  <span class="heading">Path</span>
+                  <span class="title is-6">{{ playlist.path }}</span>
+                </p>
+              </div>
+            </div>
+            <footer class="card-footer">
+              <a class="card-footer-item has-text-dark" @click="queue_add">
+                <span class="icon"><i class="mdi mdi-playlist-plus mdi-18px"></i></span> <span>Add</span>
+              </a>
+              <a class="card-footer-item has-text-dark" @click="play">
+                <span class="icon"><i class="mdi mdi-play mdi-18px"></i></span> <span>Play</span>
+              </a>
+            </footer>
+          </div>
+        </template>
+      </modal-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import ModalDialog from '@/components/ModalDialog'
+import webapi from '@/webapi'
+
+export default {
+  name: 'PartPlaylist',
+  components: { ModalDialog },
+
+  props: ['playlist'],
+
+  data () {
+    return {
+      show_details_modal: false
+    }
+  },
+
+  methods: {
+    play: function () {
+      this.show_details_modal = false
+      webapi.queue_clear().then(() =>
+        webapi.queue_add(this.playlist.uri).then(() =>
+          webapi.player_play()
+        )
+      )
+    },
+
+    queue_add: function () {
+      this.show_details_modal = false
+      webapi.queue_add(this.playlist.uri).then(() =>
+        this.$store.dispatch('add_notification', { text: 'Playlist appended to queue', type: 'info', timeout: 2000 })
+      )
+    },
+
+    open_playlist: function () {
+      this.show_details_modal = false
+      this.$router.push({ path: '/playlists/' + this.playlist.id })
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/components/ListItemQueueItem.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="media" v-if="is_next || !show_only_next_items">
+    <!---->
+    <div class="media-left" v-if="edit_mode">
+      <span class="icon has-text-grey fd-is-movable handle"><i class="mdi mdi-drag-horizontal mdi-18px"></i></span>
+    </div>
+
+    <div class="media-content fd-has-action is-clipped" v-on:click="play">
+      <h1 class="title is-6" :class="{ 'has-text-primary': item.id === state.item_id, 'has-text-grey-light': !is_next }">{{ item.title }}</h1>
+      <h2 class="subtitle is-7" :class="{ 'has-text-primary': item.id === state.item_id, 'has-text-grey-light': !is_next, 'has-text-grey': is_next && item.id !== state.item_id }"><b>{{ item.artist }}</b></h2>
+      <h2 class="subtitle is-7" :class="{ 'has-text-primary': item.id === state.item_id, 'has-text-grey-light': !is_next, 'has-text-grey': is_next && item.id !== state.item_id }">{{ item.album }}</h2>
+    </div>
+    <div class="media-right">
+      <a v-on:click="remove" v-if="item.id !== state.item_id && edit_mode">
+        <span class="icon has-text-grey"><i class="mdi mdi-delete mdi-18px"></i></span>
+      </a>
+      <a @click="show_details_modal = true" v-if="!edit_mode">
+        <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
+      </a>
+      <modal-dialog v-if="!edit_mode" :show="show_details_modal" @close="show_details_modal = false">
+        <template slot="modal-content">
+          <div class="card">
+            <div class="card-content">
+              <p class="title is-4">
+                {{ item.title }}
+              </p>
+              <p class="subtitle">
+                {{ item.artist }}
+              </p>
+              <div class="content is-small">
+                <p>
+                  <span class="heading">Album</span>
+                  <span class="title is-6">{{ item.album }}</span>
+                </p>
+                <p v-if="item.album_artist">
+                  <span class="heading">Album artist</span>
+                  <span class="title is-6">{{ item.album_artist }}</span>
+                </p>
+                <p v-if="item.year > 0">
+                  <span class="heading">Year</span>
+                  <span class="title is-6">{{ item.year }}</span>
+                </p>
+                <p>
+                  <span class="heading">Genre</span>
+                  <span class="title is-6">{{ item.genre }}</span>
+                </p>
+                <p>
+                  <span class="heading">Track / Disc</span>
+                  <span class="title is-6">{{ item.track_number }} / {{ item.disc_number }}</span>
+                </p>
+                <p>
+                  <span class="heading">Length</span>
+                  <span class="title is-6">{{ item.length_ms | duration }}</span>
+                </p>
+                <p>
+                  <span class="heading">Path</span>
+                  <span class="title is-6">{{ item.path }}</span>
+                </p>
+              </div>
+            </div>
+            <footer class="card-footer">
+              <a class="card-footer-item has-text-dark" @click="remove">
+                <span class="icon"><i class="mdi mdi-delete mdi-18px"></i></span> <span>Remove</span>
+              </a>
+              <a class="card-footer-item has-text-dark" @click="play">
+                <span class="icon"><i class="mdi mdi-play mdi-18px"></i></span> <span>Play</span>
+              </a>
+            </footer>
+          </div>
+        </template>
+      </modal-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import ModalDialog from '@/components/ModalDialog'
+import webapi from '@/webapi'
+
+export default {
+  name: 'PartQueueItem',
+  components: { ModalDialog },
+
+  props: ['item', 'position', 'current_position', 'show_only_next_items', 'edit_mode'],
+
+  data () {
+    return {
+      show_details_modal: false
+    }
+  },
+
+  computed: {
+    state () {
+      return this.$store.state.player
+    },
+
+    is_next () {
+      return this.current_position < 0 || this.position >= this.current_position
+    }
+  },
+
+  methods: {
+    remove: function () {
+      this.show_details_modal = false
+      webapi.queue_remove(this.item.id)
+    },
+
+    play: function () {
+      this.show_details_modal = false
+      webapi.player_playid(this.item.id)
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/components/ListItemTrack.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="media">
+    <div class="media-content fd-has-action is-clipped" v-on:click="play">
+      <h1 class="title is-6">{{ track.title }}</h1>
+      <h2 class="subtitle is-7 has-text-grey"><b>{{ track.artist }}</b></h2>
+      <h2 class="subtitle is-7 has-text-grey">{{ track.album }}</h2>
+    </div>
+    <div class="media-right">
+      <a @click="show_details_modal = true">
+        <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
+      </a>
+      <modal-dialog :show="show_details_modal" @close="show_details_modal = false">
+        <template slot="modal-content">
+          <div class="card">
+            <div class="card-content">
+              <p class="title is-4">
+                {{ track.title }}
+              </p>
+              <p class="subtitle">
+                {{ track.artist }}
+              </p>
+              <div class="content is-small">
+                <p>
+                  <span class="heading">Album</span>
+                  <a class="title is-6 has-text-link" @click="open_album">{{ track.album }}</a>
+                </p>
+                <p v-if="track.album_artist && track.media_kind !== 'audiobook'">
+                  <span class="heading">Album artist</span>
+                  <a class="title is-6 has-text-link" @click="open_artist">{{ track.album_artist }}</a>
+                </p>
+                <p v-if="track.date_released">
+                  <span class="heading">Release date</span>
+                  <span class="title is-6">{{ track.date_released | time('L')}}</span>
+                </p>
+                <p v-else-if="track.year > 0">
+                  <span class="heading">Year</span>
+                  <span class="title is-6">{{ track.year }}</span>
+                </p>
+                <p>
+                  <span class="heading">Genre</span>
+                  <span class="title is-6">{{ track.genre }}</span>
+                </p>
+                <p>
+                  <span class="heading">Track / Disc</span>
+                  <span class="title is-6">{{ track.track_number }} / {{ track.disc_number }}</span>
+                </p>
+                <p>
+                  <span class="heading">Length</span>
+                  <span class="title is-6">{{ track.length_ms | duration }}</span>
+                </p>
+                <p>
+                  <span class="heading">Path</span>
+                  <span class="title is-6">{{ track.path }}</span>
+                </p>
+                <p>
+                  <span class="heading">Type</span>
+                  <span class="title is-6">{{ track.media_kind }} - {{ track.data_kind }}</span>
+                </p>
+                <p>
+                  <span class="heading">Added at</span>
+                  <span class="title is-6">{{ track.time_added | time('L LT')}}</span>
+                </p>
+              </div>
+            </div>
+            <footer class="card-footer">
+              <a class="card-footer-item has-text-dark" @click="queue_add">
+                <span class="icon"><i class="mdi mdi-playlist-plus mdi-18px"></i></span> <span>Add</span>
+              </a>
+              <a class="card-footer-item has-text-dark" @click="play_track">
+                <span class="icon"><i class="mdi mdi-play mdi-18px"></i></span> <span>Play</span>
+              </a>
+            </footer>
+          </div>
+        </template>
+      </modal-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import ModalDialog from '@/components/ModalDialog'
+import webapi from '@/webapi'
+
+export default {
+  name: 'PartTrack',
+  components: { ModalDialog },
+
+  props: ['track', 'position', 'context_uri'],
+
+  data () {
+    return {
+      show_details_modal: false
+    }
+  },
+
+  methods: {
+    play: function () {
+      this.show_details_modal = false
+      webapi.queue_clear().then(() =>
+        webapi.queue_add(this.context_uri).then(() =>
+          webapi.player_playpos(this.position)
+        )
+      )
+    },
+
+    play_track: function () {
+      this.show_details_modal = false
+      webapi.queue_clear().then(() =>
+        webapi.queue_add(this.track.uri).then(() =>
+          webapi.player_play()
+        )
+      )
+    },
+
+    queue_add: function () {
+      this.show_details_modal = false
+      webapi.queue_add(this.track.uri).then(() =>
+        this.$store.dispatch('add_notification', { text: 'Track appended to queue', type: 'info', timeout: 2000 })
+      )
+    },
+
+    open_album: function () {
+      this.show_details_modal = false
+      if (this.track.media_kind === 'podcast') {
+        this.$router.push({ path: '/podcasts/' + this.track.album_id })
+      } else if (this.track.media_kind === 'audiobook') {
+        this.$router.push({ path: '/audiobooks/' + this.track.album_id })
+      } else {
+        this.$router.push({ path: '/music/albums/' + this.track.album_id })
+      }
+    },
+
+    open_artist: function () {
+      this.show_details_modal = false
+      this.$router.push({ path: '/music/artists/' + this.track.album_artist_id })
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/components/ModalDialog.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <transition name="fade">
+      <div class="modal is-active" v-if="show">
+        <div class="modal-background" @click="$emit('close')"></div>
+        <div class="modal-content fd-modal-card">
+          <slot name="modal-content"></slot>
+        </div>
+        <button class="modal-close is-large" aria-label="close" @click="$emit('close')"></button>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ModalDialog',
+  props: [ 'show' ]
+}
+</script>
+
+<style>
+</style>

web-src/src/components/NavBarItemOutput.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="navbar-item">
+    <div class="level is-mobile">
+      <div class="level-left fd-expanded">
+        <div class="level-item" style="flex-grow: 0;">
+          <span class="icon fd-has-action" :class="{ 'has-text-grey-light': !output.selected }" v-on:click="set_enabled"><i class="mdi mdi-18px" v-bind:class="type_class"></i></span>
+        </div>
+        <div class="level-item fd-expanded">
+          <div class="fd-expanded">
+            <p class="heading" :class="{ 'has-text-grey-light': !output.selected }">{{ output.name }}</p>
+            <range-slider
+              class="slider fd-has-action"
+              min="0"
+              max="100"
+              step="1"
+              :disabled="!output.selected"
+              :value="volume"
+              @change="set_volume" >
+            </range-slider>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import RangeSlider from 'vue-range-slider'
+import webapi from '@/webapi'
+
+export default {
+  name: 'NavBarItemOutput',
+  components: { RangeSlider },
+
+  props: [ 'output' ],
+
+  computed: {
+    type_class () {
+      if (this.output.type === 'AirPlay') {
+        return 'mdi-airplay'
+      } else if (this.output.type === 'fifo') {
+        return 'mdi-pipe'
+      } else {
+        return 'mdi-server'
+      }
+    },
+
+    volume () {
+      return this.output.selected ? this.output.volume : 0
+    }
+  },
+
+  methods: {
+    play_next: function () {
+      webapi.player_next()
+    },
+
+    set_volume: function (newVolume) {
+      webapi.player_output_volume(this.output.id, newVolume)
+    },
+
+    set_enabled: function () {
+      const values = {
+        'selected': !this.output.selected
+      }
+      webapi.output_update(this.output.id, values)
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/components/NavbarBottom.vue

@@ -0,0 +1,43 @@
+<template>
+  <nav class="navbar is-dark is-fixed-bottom" role="navigation" aria-label="player controls">
+    <div class="navbar-brand fd-expanded">
+      <router-link to="/" class="navbar-item" active-class="is-active" exact>
+        <span class="icon"><i class="mdi mdi-24px mdi-playlist-play"></i></span>
+      </router-link>
+      <router-link to="/now-playing" class="navbar-item is-expanded is-clipped" active-class="is-active" exact>
+        <div>
+          <p class="is-size-7 fd-is-text-clipped">
+            <strong>{{ now_playing.title }}</strong><br>
+            {{ now_playing.artist }}
+          </p>
+        </div>
+      </router-link>
+      <player-button-play-pause class="navbar-item fd-margin-left-auto" icon_style="mdi-36px"></player-button-play-pause>
+    </div>
+  </nav>
+</template>
+
+<script>
+import PlayerButtonPlayPause from './PlayerButtonPlayPause'
+
+export default {
+  name: 'NavbarBottom',
+  components: { PlayerButtonPlayPause },
+
+  data () {
+    return { }
+  },
+
+  computed: {
+    state () {
+      return this.$store.state.player
+    },
+    now_playing () {
+      return this.$store.getters.now_playing
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/components/NavbarTop.vue

@@ -0,0 +1,172 @@
+<template>
+  <nav class="navbar is-light is-fixed-top" role="navigation" aria-label="main navigation">
+    <div class="navbar-brand">
+      <router-link to="/playlists" class="navbar-item" active-class="is-active">
+        <span class="icon"><i class="mdi mdi-library-music"></i></span>
+      </router-link>
+      <router-link to="/music" class="navbar-item" active-class="is-active">
+        <span class="icon"><i class="mdi mdi-music"></i></span>
+      </router-link>
+      <router-link to="/podcasts" class="navbar-item" active-class="is-active" v-if="podcasts.tracks > 0">
+        <span class="icon"><i class="mdi mdi-microphone"></i></span>
+      </router-link>
+      <router-link to="/audiobooks" class="navbar-item" active-class="is-active" v-if="audiobooks.tracks > 0">
+        <span class="icon"><i class="mdi mdi-book-open-variant"></i></span>
+      </router-link>
+      <router-link to="/search" class="navbar-item" active-class="is-active">
+        <span class="icon"><i class="mdi mdi-magnify"></i></span>
+      </router-link>
+
+      <div class="navbar-burger" @click="update_show_burger_menu" :class="{ 'is-active': show_burger_menu }">
+        <span></span>
+        <span></span>
+        <span></span>
+      </div>
+    </div>
+    <div class="navbar-menu" :class="{ 'is-active': show_burger_menu }">
+      <div class="navbar-start">
+      </div>
+
+      <div class="navbar-end">
+        <div class="navbar-item has-dropdown is-hoverable">
+          <a class="navbar-link"><span class="icon is-hidden-mobile is-hidden-tablet-only"><i class="mdi mdi-volume-high"></i></span> <span class="is-hidden-desktop">Volume</span></a>
+
+          <div class="navbar-dropdown is-right">
+            <div class="navbar-item">
+              <div class="level is-mobile">
+                <div class="level-left fd-expanded">
+                  <div class="level-item" style="flex-grow: 0;">
+                    <span class="icon"><i class="mdi mdi-18px mdi-volume-high"></i></span>
+                  </div>
+                  <div class="level-item fd-expanded">
+                    <div class="fd-expanded">
+                      <p class="heading">Volume</p>
+                      <range-slider
+                        class="slider fd-has-action"
+                        min="0"
+                        max="100"
+                        step="1"
+                        :value="player.volume"
+                        @change="set_volume">
+                      </range-slider>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <hr class="navbar-divider">
+            <nav-bar-item-output v-for="output in outputs" :key="output.id" :output="output"></nav-bar-item-output>
+
+            <hr class="navbar-divider">
+            <div class="navbar-item">
+              <div class="level is-mobile">
+                <div class="level-left">
+                  <div class="level-item">
+                    <div class="buttons has-addons">
+                      <player-button-previous class="button"></player-button-previous>
+                      <player-button-play-pause class="button"></player-button-play-pause>
+                      <player-button-next class="button"></player-button-next>
+                    </div>
+                  </div>
+                  <div class="level-item">
+                    <div class="buttons has-addons">
+                      <player-button-repeat class="button is-light"></player-button-repeat>
+                      <player-button-shuffle class="button is-light"></player-button-shuffle>
+                      <player-button-consume class="button is-light"></player-button-consume>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="navbar-item has-dropdown is-hoverable">
+          <a class="navbar-link"><span class="icon is-hidden-mobile is-hidden-tablet-only"><i class="mdi mdi-settings"></i></span> <span class="is-hidden-desktop">Settings</span></a>
+
+          <div class="navbar-dropdown is-right">
+            <a class="navbar-item" href="/admin.html">Admin</a>
+            <hr class="navbar-divider">
+            <a class="navbar-item" v-on:click="open_about">
+              <div>
+                <p class="title is-7">forked-daapd</p>
+                <p class="subtitle is-7">{{ config.version }}</p>
+              </div>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </nav>
+</template>
+
+<script>
+import webapi from '@/webapi'
+import NavBarItemOutput from './NavBarItemOutput'
+import PlayerButtonPlayPause from './PlayerButtonPlayPause'
+import PlayerButtonNext from './PlayerButtonNext'
+import PlayerButtonPrevious from './PlayerButtonPrevious'
+import PlayerButtonShuffle from './PlayerButtonShuffle'
+import PlayerButtonConsume from './PlayerButtonConsume'
+import PlayerButtonRepeat from './PlayerButtonRepeat'
+import RangeSlider from 'vue-range-slider'
+import * as types from '@/store/mutation_types'
+
+export default {
+  name: 'NavbarTop',
+  components: { NavBarItemOutput, PlayerButtonPlayPause, PlayerButtonNext, PlayerButtonPrevious, PlayerButtonShuffle, PlayerButtonConsume, PlayerButtonRepeat, RangeSlider },
+
+  data () {
+    return {
+      search_query: ''
+    }
+  },
+
+  computed: {
+    outputs () {
+      return this.$store.state.outputs
+    },
+
+    player () {
+      return this.$store.state.player
+    },
+
+    config () {
+      return this.$store.state.config
+    },
+
+    library () {
+      return this.$store.state.library
+    },
+
+    audiobooks () {
+      return this.$store.state.audiobooks_count
+    },
+
+    podcasts () {
+      return this.$store.state.podcasts_count
+    },
+
+    show_burger_menu () {
+      return this.$store.state.show_burger_menu
+    }
+  },
+
+  methods: {
+    update_show_burger_menu: function () {
+      this.$store.commit(types.SHOW_BURGER_MENU, !this.show_burger_menu)
+    },
+
+    set_volume: function (newVolume) {
+      webapi.player_volume(newVolume)
+    },
+
+    open_about: function () {
+      this.$store.commit(types.SHOW_BURGER_MENU, false)
+      this.$router.push({ path: '/about' })
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/components/Notifications.vue

@@ -0,0 +1,52 @@
+<template>
+  <section class="fd-notifications">
+    <div class="columns is-centered">
+      <div class="column is-half">
+        <div class="notification has-shadow " v-for="notification in notifications" :key="notification.id" :class="['notification', notification.type ? `is-${notification.type}` : '']">
+          <button class="delete" v-on:click="remove(notification)"></button>
+          {{ notification.text }}
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+import * as types from '@/store/mutation_types'
+
+export default {
+  name: 'Notifications',
+  components: { },
+
+  data () {
+    return { showNav: false }
+  },
+
+  computed: {
+    notifications () {
+      return this.$store.state.notifications.list
+    }
+  },
+
+  methods: {
+    remove: function (notification) {
+      this.$store.commit(types.DELETE_NOTIFICATION, notification)
+    }
+  }
+}
+</script>
+
+<style>
+.fd-notifications {
+  position: fixed;
+  bottom: 60px;
+  z-index: 20000;
+  width: 100%;
+}
+.fd-notifications .notification {
+  margin-bottom: 10px;
+  margin-left: 24px;
+  margin-right: 24px;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
+</style>

web-src/src/components/PlayerButtonConsume.vue

@@ -0,0 +1,28 @@
+<template>
+  <a v-on:click="toggle_consume_mode" v-bind:class="{ 'is-warning': is_consume }">
+    <span class="icon"><i class="mdi mdi-fire"></i></span>
+  </a>
+</template>
+
+<script>
+import webapi from '@/webapi'
+
+export default {
+  name: 'PlayerButtonConsume',
+
+  computed: {
+    is_consume () {
+      return this.$store.state.player.consume
+    }
+  },
+
+  methods: {
+    toggle_consume_mode: function () {
+      webapi.player_consume(!this.is_consume)
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/components/PlayerButtonNext.vue

@@ -0,0 +1,22 @@
+<template>
+  <a v-on:click="play_next">
+    <span class="icon"><i class="mdi mdi-skip-forward"></i></span>
+  </a>
+</template>
+
+<script>
+import webapi from '@/webapi'
+
+export default {
+  name: 'PlayerButtonNext',
+
+  methods: {
+    play_next: function () {
+      webapi.player_next()
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/components/PlayerButtonPlayPause.vue

@@ -0,0 +1,34 @@
+<template>
+  <a v-on:click="toggle_play_pause">
+    <span class="icon"><i class="mdi" v-bind:class="[icon_style, { 'mdi-play': !is_playing, 'mdi-pause': is_playing }]"></i></span>
+  </a>
+</template>
+
+<script>
+import webapi from '@/webapi'
+
+export default {
+  name: 'PlayerButtonPlayPause',
+
+  props: ['icon_style'],
+
+  computed: {
+    is_playing () {
+      return this.$store.state.player.state === 'play'
+    }
+  },
+
+  methods: {
+    toggle_play_pause: function () {
+      if (this.is_playing) {
+        webapi.player_pause()
+      } else {
+        webapi.player_play()
+      }
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/components/PlayerButtonPrevious.vue

@@ -0,0 +1,22 @@
+<template>
+  <a v-on:click="play_previous">
+    <span class="icon"><i class="mdi mdi-skip-backward"></i></span>
+  </a>
+</template>
+
+<script>
+import webapi from '@/webapi'
+
+export default {
+  name: 'PlayerButtonPrevious',
+
+  methods: {
+    play_previous: function () {
+      webapi.player_previous()
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/components/PlayerButtonRepeat.vue

@@ -0,0 +1,44 @@
+<template>
+  <a v-on:click="toggle_repeat_mode" v-bind:class="{ 'is-warning': !is_repeat_off }">
+    <span class="icon"><i class="mdi" v-bind:class="{ 'mdi-repeat': is_repeat_all, 'mdi-repeat-once': is_repeat_single, 'mdi-repeat-off': is_repeat_off }"></i></span>
+  </a>
+</template>
+
+<script>
+import webapi from '@/webapi'
+
+export default {
+  name: 'PlayerButtonRepeat',
+
+  data () {
+    return { }
+  },
+
+  computed: {
+    is_repeat_all () {
+      return this.$store.state.player.repeat === 'all'
+    },
+    is_repeat_single () {
+      return this.$store.state.player.repeat === 'single'
+    },
+    is_repeat_off () {
+      return !this.is_repeat_all && !this.is_repeat_single
+    }
+  },
+
+  methods: {
+    toggle_repeat_mode: function () {
+      if (this.is_repeat_all) {
+        webapi.player_repeat('single')
+      } else if (this.is_repeat_single) {
+        webapi.player_repeat('off')
+      } else {
+        webapi.player_repeat('all')
+      }
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/components/PlayerButtonShuffle.vue

@@ -0,0 +1,28 @@
+<template>
+  <a v-on:click="toggle_shuffle_mode" v-bind:class="{ 'is-warning': is_shuffle }">
+    <span class="icon"><i class="mdi" v-bind:class="{ 'mdi-shuffle': is_shuffle, 'mdi-shuffle-disabled': !is_shuffle }"></i></span>
+  </a>
+</template>
+
+<script>
+import webapi from '@/webapi'
+
+export default {
+  name: 'PlayerButtonShuffle',
+
+  computed: {
+    is_shuffle () {
+      return this.$store.state.player.shuffle
+    }
+  },
+
+  methods: {
+    toggle_shuffle_mode: function () {
+      webapi.player_shuffle(!this.is_shuffle)
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/components/SpotifyListItemAlbum.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="media">
+    <div class="media-content fd-has-action is-clipped" v-on:click="open_album">
+      <h1 class="title is-6">{{ album.name }}</h1>
+      <h2 class="subtitle is-7 has-text-grey"><b>{{ album.artists[0].name }}</b></h2>
+    </div>
+    <div class="media-right">
+      <a @click="show_details">
+        <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
+      </a>
+      <transition name="fade">
+        <div class="modal is-active" v-if="show_details_modal">
+          <div class="modal-background" @click="hide_details"></div>
+          <div class="modal-content">
+            <div class="card">
+              <div class="card-content">
+                <p class="title is-4">
+                  <a class="has-text-link" @click="open_album">{{ album.name }}</a>
+                </p>
+                <div class="content is-small">
+                  <p>
+                    <span class="heading">Album artist</span>
+                    <a class="title is-6 has-text-link" @click="open_artist">{{ album.artists[0].name }}</a>
+                  </p>
+                  <p>
+                    <span class="heading">Release date</span>
+                    <span class="title is-6">{{ album.release_date }}</span>
+                  </p>
+                  <p>
+                    <span class="heading">Type</span>
+                    <span class="title is-6">{{ album.album_type }}</span>
+                  </p>
+                </div>
+              </div>
+              <footer class="card-footer">
+                <a class="card-footer-item has-text-dark" @click="queue_add">
+                  <span class="icon"><i class="mdi mdi-playlist-plus mdi-18px"></i></span> <span>Add</span>
+                </a>
+                <a class="card-footer-item has-text-dark" @click="play">
+                  <span class="icon"><i class="mdi mdi-play mdi-18px"></i></span> <span>Play</span>
+                </a>
+              </footer>
+            </div>
+          </div>
+          <button class="modal-close is-large" aria-label="close" @click="hide_details"></button>
+        </div>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script>
+import webapi from '@/webapi'
+
+export default {
+  name: 'SpotifyListItemAlbum',
+
+  props: ['album'],
+
+  data () {
+    return {
+      show_details_modal: false
+    }
+  },
+
+  methods: {
+    play: function () {
+      webapi.queue_clear().then(() =>
+        webapi.queue_add(this.album.uri).then(() =>
+          webapi.player_play()
+        )
+      )
+      this.show_details_modal = false
+    },
+
+    queue_add: function () {
+      webapi.queue_add(this.album.uri).then(
+        // this.$store.commit(types.ADD_NOTIFICATION, { text: 'Album tracks appended to queue', timeout: 0 })
+        this.$store.dispatch('add_notification', { text: 'Album tracks appended to queue', type: 'info', timeout: 3000 })
+      )
+      this.show_details_modal = false
+    },
+
+    show_details: function () {
+      this.show_details_modal = true
+    },
+
+    hide_details: function () {
+      this.show_details_modal = false
+    },
+
+    open_album: function () {
+      this.$router.push({ path: '/music/spotify/albums/' + this.album.id })
+    },
+
+    open_artist: function () {
+      this.show_details_modal = false
+      this.$router.push({ path: '/music/spotify/artists/' + this.album.artists[0].id })
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/components/SpotifyListItemArtist.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="media">
+    <div class="media-content fd-has-action is-clipped" v-on:click="open_artist">
+      <h1 class="title is-6">{{ artist.name }}</h1>
+    </div>
+    <div class="media-right">
+      <a @click="show_details">
+        <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
+      </a>
+      <transition name="fade">
+        <div class="modal is-active" v-if="show_details_modal">
+          <div class="modal-background" @click="hide_details"></div>
+          <div class="modal-content">
+            <div class="card">
+              <div class="card-content">
+                <p class="title is-4">
+                  <a class="has-text-link" @click="open_artist">{{ artist.name }}</a>
+                </p>
+                <div class="content is-small">
+                  <p>
+                    <span class="heading">Popularity / Followers</span>
+                    <span class="title is-6">{{ artist.popularity }} / {{ artist.followers.total }}</span>
+                  </p>
+                  <p>
+                    <span class="heading">Genres</span>
+                    <span class="title is-6">{{ artist.genres.join(', ') }}</span>
+                  </p>
+                </div>
+              </div>
+              <footer class="card-footer">
+                <a class="card-footer-item has-text-dark" @click="queue_add">
+                  <span class="icon"><i class="mdi mdi-playlist-plus mdi-18px"></i></span> <span>Add</span>
+                </a>
+                <a class="card-footer-item has-text-dark" @click="play">
+                  <span class="icon"><i class="mdi mdi-play mdi-18px"></i></span> <span>Play</span>
+                </a>
+              </footer>
+            </div>
+          </div>
+          <button class="modal-close is-large" aria-label="close" @click="hide_details"></button>
+        </div>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script>
+import webapi from '@/webapi'
+
+export default {
+  name: 'SpotifyListItemArtist',
+
+  props: ['artist'],
+
+  data () {
+    return {
+      show_details_modal: false
+    }
+  },
+
+  methods: {
+    play: function () {
+      webapi.queue_clear().then(() =>
+        webapi.queue_add(this.artist.uri).then(() =>
+          webapi.player_play()
+        )
+      )
+      this.show_details_modal = false
+    },
+
+    queue_add: function () {
+      webapi.queue_add(this.artist.uri).then(() =>
+        this.$store.dispatch('add_notification', { text: 'Artist tracks appended to queue', type: 'info', timeout: 2000 })
+      )
+      this.show_details_modal = false
+    },
+
+    show_details: function () {
+      this.show_details_modal = true
+    },
+
+    hide_details: function () {
+      this.show_details_modal = false
+    },
+
+    open_artist: function () {
+      this.show_details_modal = false
+      this.$router.push({ path: '/music/spotify/artists/' + this.artist.id })
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/components/SpotifyListItemPlaylist.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="media">
+    <div class="media-content fd-has-action is-clipped" v-on:click="open_playlist">
+      <h1 class="title is-6">{{ playlist.name }}</h1>
+      <h2 class="subtitle is-7">{{ playlist.owner.display_name }}</h2>
+    </div>
+    <div class="media-right">
+      <a @click="show_details">
+        <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
+      </a>
+      <transition name="fade">
+        <div class="modal is-active" v-if="show_details_modal">
+          <div class="modal-background" @click="hide_details"></div>
+          <div class="modal-content">
+            <div class="card">
+              <div class="card-content">
+                <p class="title is-4">
+                  <a class="has-text-link" @click="open_playlist">{{ playlist.name }}</a>
+                </p>
+                <div class="content is-small">
+                  <p>
+                    <span class="heading">Owner</span>
+                    <span class="title is-6">{{ playlist.owner.display_name }}</span>
+                  </p>
+                  <p>
+                    <span class="heading">Tracks</span>
+                    <span class="title is-6">{{ playlist.tracks.total }}</span>
+                  </p>
+                  <p>
+                    <span class="heading">Path</span>
+                    <span class="title is-6">{{ playlist.uri }}</span>
+                  </p>
+                </div>
+              </div>
+              <footer class="card-footer">
+                <a class="card-footer-item has-text-dark" @click="queue_add">
+                  <span class="icon"><i class="mdi mdi-playlist-plus mdi-18px"></i></span> <span>Add</span>
+                </a>
+                <a class="card-footer-item has-text-dark" @click="play">
+                  <span class="icon"><i class="mdi mdi-play mdi-18px"></i></span> <span>Play</span>
+                </a>
+              </footer>
+            </div>
+          </div>
+          <button class="modal-close is-large" aria-label="close" @click="hide_details"></button>
+        </div>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script>
+import webapi from '@/webapi'
+
+export default {
+  name: 'SpotifyListItemPlaylist',
+
+  props: ['playlist'],
+
+  data () {
+    return {
+      show_details_modal: false
+    }
+  },
+
+  methods: {
+    play: function () {
+      webapi.queue_clear().then(() =>
+        webapi.queue_add(this.playlist.uri).then(() =>
+          webapi.player_play()
+        )
+      )
+      this.show_details_modal = false
+    },
+
+    queue_add: function () {
+      webapi.queue_add(this.playlist.uri).then(() =>
+        this.$store.dispatch('add_notification', { text: 'Playlist appended to queue', type: 'info', timeout: 2000 })
+      )
+      this.show_details_modal = false
+    },
+
+    show_details: function () {
+      this.show_details_modal = true
+    },
+
+    hide_details: function () {
+      this.show_details_modal = false
+    },
+
+    open_playlist: function () {
+      this.show_details_modal = false
+      this.$router.push({ path: '/music/spotify/playlists/' + this.playlist.owner.id + '/' + this.playlist.id })
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/components/SpotifyListItemTrack.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="media">
+    <div class="media-content fd-has-action is-clipped" v-on:click="play">
+      <h1 class="title is-6">{{ track.name }}</h1>
+      <h2 class="subtitle is-7 has-text-grey"><b>{{ track.artists[0].name }}</b></h2>
+    </div>
+    <div class="media-right">
+      <a @click="show_details">
+        <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
+      </a>
+      <transition name="fade">
+        <div class="modal is-active" v-if="show_details_modal">
+          <div class="modal-background" @click="hide_details"></div>
+          <div class="modal-content">
+            <div class="card">
+              <div class="card-content">
+                <p class="title is-4">
+                  {{ track.name }}
+                </p>
+                <p class="subtitle">
+                  {{ track.artists[0].name }}
+                </p>
+                <div class="content is-small">
+                  <p>
+                    <span class="heading">Album</span>
+                    <a class="title is-6 has-text-link" @click="open_album">{{ album.name }}</a>
+                  </p>
+                  <p>
+                    <span class="heading">Album artist</span>
+                    <a class="title is-6 has-text-link" @click="open_artist">{{ album.artists[0].name }}</a>
+                  </p>
+                  <p>
+                    <span class="heading">Release date</span>
+                    <span class="title is-6">{{ album.release_date }}</span>
+                  </p>
+                  <p>
+                    <span class="heading">Track / Disc</span>
+                    <span class="title is-6">{{ track.track_number }} / {{ track.disc_number }}</span>
+                  </p>
+                  <p>
+                    <span class="heading">Length</span>
+                    <span class="title is-6">{{ track.duration_ms | duration }}</span>
+                  </p>
+                  <p>
+                    <span class="heading">Path</span>
+                    <span class="title is-6">{{ track.uri }}</span>
+                  </p>
+                </div>
+              </div>
+              <footer class="card-footer">
+                <a class="card-footer-item has-text-dark" @click="queue_add">
+                  <span class="icon"><i class="mdi mdi-playlist-plus mdi-18px"></i></span> <span>Add</span>
+                </a>
+                <a class="card-footer-item has-text-dark" @click="play">
+                  <span class="icon"><i class="mdi mdi-play mdi-18px"></i></span> <span>Play</span>
+                </a>
+              </footer>
+            </div>
+          </div>
+          <button class="modal-close is-large" aria-label="close" @click="hide_details"></button>
+        </div>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script>
+import webapi from '@/webapi'
+
+export default {
+  name: 'SpotifyListItemTrack',
+
+  props: ['track', 'position', 'album', 'context_uri'],
+
+  data () {
+    return {
+      show_details_modal: false
+    }
+  },
+
+  methods: {
+    play: function () {
+      webapi.queue_clear().then(() =>
+        webapi.queue_add(this.context_uri).then(() =>
+          webapi.player_playpos(this.position)
+        )
+      )
+      this.show_details_modal = false
+    },
+
+    queue_add: function () {
+      webapi.queue_add(this.track.uri).then(() =>
+        this.$store.dispatch('add_notification', { text: 'Track appended to queue', type: 'info', timeout: 2000 })
+      )
+      this.show_details_modal = false
+    },
+
+    show_details: function () {
+      this.show_details_modal = true
+    },
+
+    hide_details: function () {
+      this.show_details_modal = false
+    },
+
+    open_album: function () {
+      this.show_details_modal = false
+      this.$router.push({ path: '/music/spotify/albums/' + this.album.id })
+    },
+
+    open_artist: function () {
+      this.show_details_modal = false
+      this.$router.push({ path: '/music/spotify/artists/' + this.album.artists[0].id })
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/components/TabsMusic.vue

@@ -0,0 +1,53 @@
+<template>
+  <section class="section fd-tabs-section">
+    <div class="container">
+      <div class="columns is-centered">
+        <div class="column is-four-fifths">
+          <div class="tabs is-centered is-small">
+            <ul>
+              <router-link tag="li" to="/music/browse" active-class="is-active">
+                <a>
+                  <span class="icon is-small"><i class="mdi mdi-web"></i></span>
+                  <span class="">Browse</span>
+                </a>
+              </router-link>
+              <router-link tag="li" to="/music/artists" active-class="is-active">
+                <a>
+                  <span class="icon is-small"><i class="mdi mdi-artist"></i></span>
+                  <span class="">Artists</span>
+                </a>
+              </router-link>
+              <router-link tag="li" to="/music/albums" active-class="is-active">
+                <a>
+                  <span class="icon is-small"><i class="mdi mdi-album"></i></span>
+                  <span class="">Albums</span>
+                </a>
+              </router-link>
+              <router-link tag="li" to="/music/spotify" v-if="spotify_enabled" active-class="is-active">
+                <a>
+                  <span class="icon is-small"><i class="mdi mdi-spotify"></i></span>
+                  <span class="">Spotify</span>
+                </a>
+              </router-link>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'TabsMusic',
+
+  computed: {
+    spotify_enabled () {
+      return this.$store.state.spotify.webapi_token_valid
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/components/TabsSearch.vue

@@ -0,0 +1,41 @@
+<template>
+  <section class="section fd-tabs-section" v-if="spotify_enabled">
+    <div class="container">
+      <div class="columns is-centered">
+        <div class="column is-four-fifths">
+          <div class="tabs is-centered is-small is-toggle is-toggle-rounded">
+            <ul>
+              <router-link tag="li" :to="{ path: '/search/library', query: $route.query }" active-class="is-active">
+                <a>
+                  <span class="icon is-small"><i class="mdi mdi-library-books"></i></span>
+                  <span class="">Library</span>
+                </a>
+              </router-link>
+              <router-link tag="li" :to="{ path: '/search/spotify', query: $route.query }" active-class="is-active">
+                <a>
+                  <span class="icon is-small"><i class="mdi mdi-spotify"></i></span>
+                  <span class="">Spotify</span>
+                </a>
+              </router-link>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'TabsSearch',
+
+  computed: {
+    spotify_enabled () {
+      return this.$store.state.spotify.webapi_token_valid
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/filter/index.js

@@ -0,0 +1,26 @@
+import Vue from 'vue'
+import moment from 'moment'
+import momentDurationFormatSetup from 'moment-duration-format'
+
+momentDurationFormatSetup(moment)
+Vue.filter('duration', function (value, format) {
+  if (format) {
+    return moment.duration(value).format(format)
+  }
+  return moment.duration(value).format('hh:*mm:ss')
+})
+
+Vue.filter('time', function (value, format) {
+  if (format) {
+    return moment(value).format(format)
+  }
+  return moment(value).format()
+})
+
+Vue.filter('timeFromNow', function (value, withoutSuffix) {
+  return moment(value).fromNow(withoutSuffix)
+})
+
+Vue.filter('number', function (value) {
+  return value.toLocaleString()
+})

web-src/src/main.js

@@ -0,0 +1,23 @@
+// The Vue build version to load with the `import` command
+// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+import Vue from 'vue'
+import App from './App'
+import { router } from './router'
+import store from './store'
+import './filter'
+import './progress'
+import 'bulma/css/bulma.css'
+import 'mdi/css/materialdesignicons.css'
+import 'vue-range-slider/dist/vue-range-slider.css'
+import './mystyles.css'
+
+Vue.config.productionTip = false
+
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  router,
+  store,
+  components: { App },
+  template: '<App/>'
+})

web-src/src/mystyles.css

@@ -0,0 +1,101 @@
+
+.slider {
+  min-width: 250px;
+  width: 100%;
+}
+.range-slider-fill {
+  background-color: hsl(0, 0%, 21%);
+}
+
+a.navbar-item {
+  outline: 0;
+  line-height: 1.5;
+  padding: .5rem 1rem;
+}
+
+.fd-expanded {
+  flex-grow: 1;
+  flex-shrink: 1;
+}
+
+.fd-margin-left-auto {
+  margin-left: auto;
+}
+
+.fd-has-action {
+  cursor: pointer;
+}
+
+.fd-is-movable {
+  cursor: move;
+}
+
+.fd-is-text-clipped {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.fd-tabs-section {
+  padding-bottom: 0;
+}
+
+.fd-progress-bar {
+  top: 52px !important;
+}
+
+.sortable-chosen .media-right {
+  visibility: hidden;
+}
+.sortable-ghost h1, .sortable-ghost h2 {
+  color: hsl(348, 100%, 61%) !important;
+}
+
+.media:first-of-type {
+  padding-top: 17px;
+  margin-top: 16px;
+}
+
+/* Transition effect */
+.fade-enter-active, .fade-leave-active {
+  transition: opacity .4s;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
+
+/* Now playing progress bar */
+.fd-progress-now-playing {
+}
+.seek-slider {
+  min-width: 250px;
+  max-width: 500px;
+  width: 100% !important;
+}
+.seek-slider .range-slider-fill {
+  background-color: hsl(171, 100%, 41%);
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
+.seek-slider .range-slider-knob {
+  width: 10px;
+  height: 10px;
+  background-color: hsl(171, 100%, 41%);
+  border-color: hsl(171, 100%, 41%);
+}
+
+/* Add a little bit of spacing between title and subtitle */
+.title:not(.is-spaced) + .subtitle {
+  margin-top: -1.3rem !important;
+}
+.title:not(.is-spaced) + .subtitle + .subtitle {
+  margin-top: -1.3rem !important;
+}
+
+/* Only scroll content if modal contains a card component */
+.fd-modal-card {
+  overflow: visible;
+}
+.fd-modal-card .card-content {
+  max-height: calc(100vh - 200px);
+  overflow: auto;
+}

web-src/src/pages/PageAbout.vue

@@ -0,0 +1,116 @@
+<template>
+  <div>
+    <section class="section">
+      <div class="container">
+        <div class="columns is-centered">
+          <div class="column is-four-fifths has-text-centered-mobile">
+            <p class="heading"><b>forked-daapd</b> - version {{ config.version }}</p>
+            <h1 class="title is-4">{{ config.library_name }}</h1>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="section">
+      <div class="container">
+        <div class="columns is-centered">
+          <div class="column is-four-fifths">
+            <div class="content">
+              <nav class="level is-mobile">
+                <!-- Left side -->
+                <div class="level-left">
+                  <div class="level-item">
+                    <h2 class="title is-5">Library</h2>
+                  </div>
+                </div>
+
+                <!-- Right side -->
+                <div class="level-right">
+                  <a class="button is-small is-outlined is-link" :class="{ 'is-loading': library.updating }" @click="update">Update</a>
+                </div>
+              </nav>
+
+              <table class="table">
+                <tbody>
+                  <tr>
+                    <th>Artists</th>
+                    <td class="has-text-right">{{ library.artists | number }}</td>
+                  </tr>
+                  <tr>
+                    <th>Albums</th>
+                    <td class="has-text-right">{{ library.albums | number }}</td>
+                  </tr>
+                  <tr>
+                    <th>Tracks</th>
+                    <td class="has-text-right">{{ library.songs | number }}</td>
+                  </tr>
+                  <tr>
+                    <th>Total playtime</th>
+                    <td class="has-text-right">{{ library.db_playtime * 1000 | duration('y [years], d [days], h [hours], m [minutes]') }}</td>
+                  </tr>
+                  <tr>
+                    <th>Library updated</th>
+                    <td class="has-text-right">{{ library.updated_at | timeFromNow }} <span class="has-text-grey">({{ library.updated_at | time('MMM Do, h:mm') }})</span></td>
+                  </tr>
+                  <tr>
+                    <th>Uptime</th>
+                    <td class="has-text-right">{{ library.started_at | timeFromNow(true) }} <span class="has-text-grey">({{ library.started_at | time('MMM Do, h:mm') }})</span></td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="section">
+      <div class="container">
+        <div class="columns is-centered">
+          <div class="column is-four-fifths">
+            <div class="content has-text-centered-mobile">
+              <p class="is-size-7">Compiled with support for {{ config.buildoptions | join }}.</p>
+              <p class="is-size-7"><a href="https://github.com/chme/forked-daapd-web">Web interface</a> v{{ version }} built with <a href="http://bulma.io">Bulma</a>, <a href="https://materialdesignicons.com/">Material Design Icons</a>, <a href="https://vuejs.org/">Vue.js</a>, <a href="https://github.com/mzabriskie/axios">axios</a> and <a href="https://github.com/chme/forked-daapd-web/network/dependencies">more</a>.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import webapi from '@/webapi'
+
+export default {
+  name: 'PageAbout',
+
+  data () {
+    return {
+      'version': process.env.V2
+    }
+  },
+
+  computed: {
+    config () {
+      return this.$store.state.config
+    },
+    library () {
+      return this.$store.state.library
+    }
+  },
+
+  methods: {
+    update: function () {
+      webapi.library_update()
+    }
+  },
+
+  filters: {
+    join: function (array) {
+      return array.join(', ')
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/pages/PageAlbum.vue

@@ -0,0 +1,72 @@
+<template>
+  <content-with-heading>
+    <template slot="heading-left">
+      <div class="title is-4">{{ album.name }}</div>
+      <a class="title is-4 has-text-link has-text-weight-normal" @click="open_artist">{{ album.artist }}</a>
+    </template>
+    <template slot="heading-right">
+      <a class="button is-small is-dark is-rounded" @click="play">
+        <span class="icon">
+          <i class="mdi mdi-play"></i>
+        </span>
+        <span>Play</span>
+      </a>
+    </template>
+    <template slot="content">
+      <p class="heading has-text-centered-mobile">{{ album.track_count }} tracks</p>
+      <list-item-track v-for="(track, index) in tracks" :key="track.id" :track="track" :position="index" :context_uri="album.uri"></list-item-track>
+    </template>
+  </content-with-heading>
+</template>
+
+<script>
+import { LoadDataBeforeEnterMixin } from './mixin'
+import ContentWithHeading from '@/templates/ContentWithHeading'
+import ListItemTrack from '@/components/ListItemTrack'
+import webapi from '@/webapi'
+
+const albumData = {
+  load: function (to) {
+    return Promise.all([
+      webapi.library_album(to.params.album_id),
+      webapi.library_album_tracks(to.params.album_id)
+    ])
+  },
+
+  set: function (vm, response) {
+    vm.album = response[0].data
+    vm.tracks = response[1].data.items
+  }
+}
+
+export default {
+  name: 'PageAlbum',
+  mixins: [ LoadDataBeforeEnterMixin(albumData) ],
+  components: { ContentWithHeading, ListItemTrack },
+
+  data () {
+    return {
+      album: {},
+      tracks: []
+    }
+  },
+
+  methods: {
+    open_artist: function () {
+      this.show_details_modal = false
+      this.$router.push({ path: '/music/artists/' + this.album.artist_id })
+    },
+
+    play: function () {
+      webapi.queue_clear().then(() =>
+        webapi.queue_add(this.album.uri).then(() =>
+          webapi.player_play()
+        )
+      )
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/pages/PageAlbums.vue

@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <tabs-music></tabs-music>
+
+    <content-with-heading>
+      <template slot="heading-left">
+        <p class="title is-4">Albums</p>
+        <p class="heading">{{ albums.total }} albums</p>
+      </template>
+      <template slot="heading-right">
+        <a class="button is-small" :class="{ 'is-info': hide_singles }" @click="update_hide_singles">
+          <span class="icon">
+            <i class="mdi mdi-numeric-1-box-multiple-outline"></i>
+          </span>
+          <span>Hide singles</span>
+        </a>
+      </template>
+      <template slot="content">
+        <list-item-album v-for="album in albums.items" :key="album.id" :album="album" v-if="!hide_singles || album.track_count > 2"></list-item-album>
+      </template>
+    </content-with-heading>
+  </div>
+</template>
+
+<script>
+import { LoadDataBeforeEnterMixin } from './mixin'
+import ContentWithHeading from '@/templates/ContentWithHeading'
+import TabsMusic from '@/components/TabsMusic'
+import ListItemAlbum from '@/components/ListItemAlbum'
+import webapi from '@/webapi'
+import * as types from '@/store/mutation_types'
+
+const albumsData = {
+  load: function (to) {
+    return webapi.library_albums()
+  },
+
+  set: function (vm, response) {
+    vm.albums = response.data
+  }
+}
+
+export default {
+  name: 'PageAlbums',
+  mixins: [ LoadDataBeforeEnterMixin(albumsData) ],
+  components: { ContentWithHeading, TabsMusic, ListItemAlbum },
+
+  data () {
+    return {
+      albums: {}
+    }
+  },
+
+  computed: {
+    hide_singles () {
+      return this.$store.state.hide_singles
+    }
+  },
+
+  methods: {
+    update_hide_singles: function (e) {
+      this.$store.commit(types.HIDE_SINGLES, !this.hide_singles)
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/pages/PageArtist.vue

@@ -0,0 +1,51 @@
+<template>
+  <content-with-heading>
+    <template slot="heading-left">
+      <p class="title is-4">{{ artist.name }}</p>
+    </template>
+    <template slot="content">
+      <p class="heading has-text-centered-mobile">{{ artist.album_count }} albums | {{ artist.track_count }} tracks</p>
+      <list-item-album v-for="album in albums.items" :key="album.id" :album="album"></list-item-album>
+    </template>
+  </content-with-heading>
+</template>
+
+<script>
+import { LoadDataBeforeEnterMixin } from './mixin'
+import ContentWithHeading from '@/templates/ContentWithHeading'
+import ListItemAlbum from '@/components/ListItemAlbum'
+import webapi from '@/webapi'
+
+const artistData = {
+  load: function (to) {
+    return Promise.all([
+      webapi.library_artist(to.params.artist_id),
+      webapi.library_albums(to.params.artist_id)
+    ])
+  },
+
+  set: function (vm, response) {
+    vm.artist = response[0].data
+    vm.albums = response[1].data
+  }
+}
+
+export default {
+  name: 'PageArtist',
+  mixins: [ LoadDataBeforeEnterMixin(artistData) ],
+  components: { ContentWithHeading, ListItemAlbum },
+
+  data () {
+    return {
+      artist: {},
+      albums: {}
+    }
+  },
+
+  methods: {
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/pages/PageArtists.vue

@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <tabs-music></tabs-music>
+
+    <content-with-heading>
+      <template slot="heading-left">
+        <p class="title is-4">Artists</p>
+        <p class="heading">{{ artists.total }} artists</p>
+      </template>
+      <template slot="heading-right">
+        <a class="button is-small" :class="{ 'is-info': hide_singles }" @click="update_hide_singles">
+          <span class="icon">
+            <i class="mdi mdi-numeric-1-box-multiple-outline"></i>
+          </span>
+          <span>Hide singles</span>
+        </a>
+      </template>
+      <template slot="content">
+        <list-item-artist v-for="artist in artists.items" :key="artist.id" :artist="artist" v-if="!hide_singles || artist.track_count > (artist.album_count * 2)"></list-item-artist>
+      </template>
+    </content-with-heading>
+  </div>
+</template>
+
+<script>
+import { LoadDataBeforeEnterMixin } from './mixin'
+import ContentWithHeading from '@/templates/ContentWithHeading'
+import TabsMusic from '@/components/TabsMusic'
+import ListItemArtist from '@/components/ListItemArtist'
+import webapi from '@/webapi'
+import * as types from '@/store/mutation_types'
+
+const artistsData = {
+  load: function (to) {
+    return webapi.library_artists()
+  },
+
+  set: function (vm, response) {
+    vm.artists = response.data
+  }
+}
+
+export default {
+  name: 'PageArtists',
+  mixins: [ LoadDataBeforeEnterMixin(artistsData) ],
+  components: { ContentWithHeading, TabsMusic, ListItemArtist },
+
+  data () {
+    return {
+      artists: {}
+    }
+  },
+
+  computed: {
+    hide_singles () {
+      return this.$store.state.hide_singles
+    }
+  },
+
+  methods: {
+    update_hide_singles: function (e) {
+      this.$store.commit(types.HIDE_SINGLES, !this.hide_singles)
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/pages/PageAudiobook.vue

@@ -0,0 +1,67 @@
+<template>
+  <content-with-heading>
+    <template slot="heading-left">
+      <div class="title is-4">{{ album.name }}</div>
+      <div class="title is-4 has-text-grey has-text-weight-normal">{{ album.artist }}</div>
+    </template>
+    <template slot="heading-right">
+      <a class="button is-small is-dark is-rounded" @click="play">
+        <span class="icon">
+          <i class="mdi mdi-play"></i>
+        </span>
+        <span>Play</span>
+      </a>
+    </template>
+    <template slot="content">
+      <p class="heading has-text-centered-mobile">{{ album.track_count }} tracks</p>
+      <list-item-track v-for="(track, index) in tracks" :key="track.id" :track="track" :position="index" :context_uri="album.uri"></list-item-track>
+    </template>
+  </content-with-heading>
+</template>
+
+<script>
+import { LoadDataBeforeEnterMixin } from './mixin'
+import ContentWithHeading from '@/templates/ContentWithHeading'
+import ListItemTrack from '@/components/ListItemTrack'
+import webapi from '@/webapi'
+
+const albumData = {
+  load: function (to) {
+    return Promise.all([
+      webapi.library_album(to.params.album_id),
+      webapi.library_album_tracks(to.params.album_id)
+    ])
+  },
+
+  set: function (vm, response) {
+    vm.album = response[0].data
+    vm.tracks = response[1].data.items
+  }
+}
+
+export default {
+  name: 'PageAudiobook',
+  mixins: [ LoadDataBeforeEnterMixin(albumData) ],
+  components: { ContentWithHeading, ListItemTrack },
+
+  data () {
+    return {
+      album: {},
+      tracks: []
+    }
+  },
+
+  methods: {
+    play: function () {
+      webapi.queue_clear().then(() =>
+        webapi.queue_add(this.album.uri).then(() =>
+          webapi.player_play()
+        )
+      )
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/pages/PageAudiobooks.vue

@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <content-with-heading>
+      <template slot="heading-left">
+        <p class="title is-4">Audiobooks</p>
+        <p class="heading">{{ albums.total }} audiobooks</p>
+      </template>
+      <template slot="content">
+        <list-item-album v-for="album in albums.items" :key="album.id" :album="album" :media_kind="'audiobook'"></list-item-album>
+      </template>
+    </content-with-heading>
+  </div>
+</template>
+
+<script>
+import { LoadDataBeforeEnterMixin } from './mixin'
+import ContentWithHeading from '@/templates/ContentWithHeading'
+import ListItemAlbum from '@/components/ListItemAlbum'
+import webapi from '@/webapi'
+
+const albumsData = {
+  load: function (to) {
+    return webapi.library_audiobooks()
+  },
+
+  set: function (vm, response) {
+    vm.albums = response.data
+  }
+}
+
+export default {
+  name: 'PageAudiobooks',
+  mixins: [ LoadDataBeforeEnterMixin(albumsData) ],
+  components: { ContentWithHeading, ListItemAlbum },
+
+  data () {
+    return {
+      albums: {}
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/pages/PageBrowse.vue

@@ -0,0 +1,86 @@
+<template>
+  <div>
+    <tabs-music></tabs-music>
+
+    <!-- Recently added -->
+    <content-with-heading>
+      <template slot="heading-left">
+        <p class="title is-4">Recently added</p>
+        <p class="heading">albums</p>
+      </template>
+      <template slot="content">
+        <list-item-album v-for="album in recently_added.items" :key="album.id" :album="album"></list-item-album>
+      </template>
+      <template slot="footer">
+        <nav class="level">
+          <p class="level-item">
+            <a class="button is-light is-small is-rounded" v-on:click="open_browse('recently_added')">Show more</a>
+          </p>
+        </nav>
+      </template>
+    </content-with-heading>
+
+    <!-- Recently played -->
+    <content-with-heading>
+      <template slot="heading-left">
+        <p class="title is-4">Recently played</p>
+        <p class="heading">tracks</p>
+      </template>
+      <template slot="content">
+        <list-item-track v-for="track in recently_played.items" :key="track.id" :track="track" :position="0" :context_uri="track.uri"></list-item-track>
+      </template>
+      <template slot="footer">
+        <nav class="level">
+          <p class="level-item">
+            <a class="button is-light is-small is-rounded" v-on:click="open_browse('recently_played')">Show more</a>
+          </p>
+        </nav>
+      </template>
+    </content-with-heading>
+  </div>
+</template>
+
+<script>
+import { LoadDataBeforeEnterMixin } from './mixin'
+import ContentWithHeading from '@/templates/ContentWithHeading'
+import TabsMusic from '@/components/TabsMusic'
+import ListItemAlbum from '@/components/ListItemAlbum'
+import ListItemTrack from '@/components/ListItemTrack'
+import webapi from '@/webapi'
+
+const browseData = {
+  load: function (to) {
+    return Promise.all([
+      webapi.search({ type: 'album', expression: 'time_added after 8 weeks ago having track_count > 3 order by time_added desc', limit: 3 }),
+      webapi.search({ type: 'track', expression: 'time_played after 8 weeks ago order by time_played desc', limit: 3 })
+    ])
+  },
+
+  set: function (vm, response) {
+    vm.recently_added = response[0].data.albums
+    vm.recently_played = response[1].data.tracks
+  }
+}
+
+export default {
+  name: 'PageBrowse',
+  mixins: [ LoadDataBeforeEnterMixin(browseData) ],
+  components: { ContentWithHeading, TabsMusic, ListItemAlbum, ListItemTrack },
+
+  data () {
+    return {
+      recently_added: {},
+      recently_played: {}
+    }
+  },
+
+  methods: {
+    open_browse: function (type) {
+      this.$router.push({ path: '/music/browse/' + type })
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/pages/PageBrowseRecentlyAdded.vue

@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <tabs-music></tabs-music>
+
+    <content-with-heading>
+      <template slot="heading-left">
+        <p class="title is-4">Recently added</p>
+        <p class="heading">albums</p>
+      </template>
+      <template slot="content">
+        <list-item-album v-for="album in recently_added.items" :key="album.id" :album="album"></list-item-album>
+      </template>
+    </content-with-heading>
+  </div>
+</template>
+
+<script>
+import { LoadDataBeforeEnterMixin } from './mixin'
+import ContentWithHeading from '@/templates/ContentWithHeading'
+import TabsMusic from '@/components/TabsMusic'
+import ListItemAlbum from '@/components/ListItemAlbum'
+import webapi from '@/webapi'
+
+const browseData = {
+  load: function (to) {
+    return webapi.search({
+      type: 'album',
+      expression: 'time_added after 8 weeks ago having track_count > 3 order by time_added desc',
+      limit: 50
+    })
+  },
+
+  set: function (vm, response) {
+    vm.recently_added = response.data.albums
+  }
+}
+
+export default {
+  name: 'PageBrowseType',
+  mixins: [ LoadDataBeforeEnterMixin(browseData) ],
+  components: { ContentWithHeading, TabsMusic, ListItemAlbum },
+
+  data () {
+    return {
+      recently_added: {}
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/pages/PageBrowseRecentlyPlayed.vue

@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <tabs-music></tabs-music>
+
+    <content-with-heading>
+      <template slot="heading-left">
+        <p class="title is-4">Recently played</p>
+        <p class="heading">tracks</p>
+      </template>
+      <template slot="content">
+        <list-item-track v-for="track in recently_played.items" :key="track.id" :track="track" :position="0" :context_uri="track.uri"></list-item-track>
+      </template>
+    </content-with-heading>
+  </div>
+</template>
+
+<script>
+import { LoadDataBeforeEnterMixin } from './mixin'
+import ContentWithHeading from '@/templates/ContentWithHeading'
+import TabsMusic from '@/components/TabsMusic'
+import ListItemTrack from '@/components/ListItemTrack'
+import webapi from '@/webapi'
+
+const browseData = {
+  load: function (to) {
+    return webapi.search({
+      type: 'track',
+      expression: 'time_played after 8 weeks ago order by time_played desc',
+      limit: 50
+    })
+  },
+
+  set: function (vm, response) {
+    vm.recently_played = response.data.tracks
+  }
+}
+
+export default {
+  name: 'PageBrowseType',
+  mixins: [ LoadDataBeforeEnterMixin(browseData) ],
+  components: { ContentWithHeading, TabsMusic, ListItemTrack },
+
+  data () {
+    return {
+      recently_played: {}
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/pages/PageNowPlaying.vue

@@ -0,0 +1,118 @@
+<template>
+  <section class="hero">
+    <div class="hero-body">
+      <div class="container has-text-centered">
+        <p class="heading">NOW PLAYING</p>
+        <h1 class="title is-3">
+          {{ now_playing.title }}
+        </h1>
+        <h2 class="title is-5">
+          {{ now_playing.artist }}
+        </h2>
+        <h3 class="subtitle is-5">
+          {{ now_playing.album }}
+        </h3>
+        <p class="control has-text-centered fd-progress-now-playing">
+          <range-slider
+            class="seek-slider fd-has-action"
+            min="0"
+            :max="state.item_length_ms"
+            :value="item_progress_ms"
+            :disabled="state.state === 'stop'"
+            step="1000"
+            @change="seek" >
+          </range-slider>
+        </p>
+        <p class="content">
+          <span>{{ item_progress_ms | duration }} / {{ now_playing.length_ms | duration }}</span>
+        </p>
+        <p class="control has-text-centered">
+          <player-button-previous class="button is-medium"></player-button-previous>
+          <player-button-play-pause class="button is-medium" icon_style="mdi-36px"></player-button-play-pause>
+          <player-button-next class="button is-medium"></player-button-next>
+          <player-button-repeat class="button is-medium is-light"></player-button-repeat>
+          <player-button-shuffle class="button is-medium is-light"></player-button-shuffle>
+          <player-button-consume class="button is-medium is-light"></player-button-consume>
+        </p>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+import PlayerButtonPlayPause from '@/components/PlayerButtonPlayPause'
+import PlayerButtonNext from '@/components/PlayerButtonNext'
+import PlayerButtonPrevious from '@/components/PlayerButtonPrevious'
+import PlayerButtonShuffle from '@/components/PlayerButtonShuffle'
+import PlayerButtonConsume from '@/components/PlayerButtonConsume'
+import PlayerButtonRepeat from '@/components/PlayerButtonRepeat'
+import RangeSlider from 'vue-range-slider'
+import webapi from '@/webapi'
+import * as types from '@/store/mutation_types'
+
+export default {
+  name: 'PageNowPlaying',
+  components: { PlayerButtonPlayPause, PlayerButtonNext, PlayerButtonPrevious, PlayerButtonShuffle, PlayerButtonConsume, PlayerButtonRepeat, RangeSlider },
+
+  data () {
+    return {
+      item_progress_ms: 0,
+      interval_id: 0
+    }
+  },
+
+  created () {
+    this.item_progress_ms = this.state.item_progress_ms
+    webapi.player_status().then(({ data }) => {
+      this.$store.commit(types.UPDATE_PLAYER_STATUS, data)
+      if (this.state.state === 'play') {
+        this.interval_id = window.setInterval(this.tick, 1000)
+      }
+    })
+  },
+
+  destroyed () {
+    if (this.interval_id > 0) {
+      window.clearTimeout(this.interval_id)
+      this.interval_id = 0
+    }
+  },
+
+  computed: {
+    state () {
+      return this.$store.state.player
+    },
+    now_playing () {
+      return this.$store.getters.now_playing
+    }
+  },
+
+  methods: {
+    tick: function () {
+      this.item_progress_ms += 1000
+    },
+
+    seek: function (newPosition) {
+      webapi.player_seek(newPosition).catch(() => {
+        this.item_progress_ms = this.state.item_progress_ms
+      })
+    }
+  },
+
+  watch: {
+    'state' () {
+      if (this.interval_id > 0) {
+        window.clearTimeout(this.interval_id)
+        this.interval_id = 0
+      }
+      this.item_progress_ms = this.state.item_progress_ms
+      if (this.state.state === 'play') {
+        this.interval_id = window.setInterval(this.tick, 1000)
+      }
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/pages/PagePlaylist.vue

@@ -0,0 +1,66 @@
+<template>
+  <content-with-heading>
+    <template slot="heading-left">
+      <div class="title is-4">{{ playlist.name }}</div>
+    </template>
+    <template slot="heading-right">
+      <a class="button is-small is-dark is-rounded" @click="play">
+        <span class="icon">
+          <i class="mdi mdi-play"></i>
+        </span>
+        <span>Play</span>
+      </a>
+    </template>
+    <template slot="content">
+      <p class="heading has-text-centered-mobile">{{ tracks.length }} tracks</p>
+      <list-item-track v-for="(track, index) in tracks" :key="track.id" :track="track" :position="index" :context_uri="playlist.uri"></list-item-track>
+    </template>
+  </content-with-heading>
+</template>
+
+<script>
+import { LoadDataBeforeEnterMixin } from './mixin'
+import ContentWithHeading from '@/templates/ContentWithHeading'
+import ListItemTrack from '@/components/ListItemTrack'
+import webapi from '@/webapi'
+
+const playlistData = {
+  load: function (to) {
+    return Promise.all([
+      webapi.library_playlist(to.params.playlist_id),
+      webapi.library_playlist_tracks(to.params.playlist_id)
+    ])
+  },
+
+  set: function (vm, response) {
+    vm.playlist = response[0].data
+    vm.tracks = response[1].data.items
+  }
+}
+
+export default {
+  name: 'PagePlaylist',
+  mixins: [ LoadDataBeforeEnterMixin(playlistData) ],
+  components: { ContentWithHeading, ListItemTrack },
+
+  data () {
+    return {
+      playlist: {},
+      tracks: []
+    }
+  },
+
+  methods: {
+    play: function () {
+      webapi.queue_clear().then(() =>
+        webapi.queue_add(this.playlist.uri).then(() =>
+          webapi.player_play()
+        )
+      )
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/pages/PagePlaylists.vue

@@ -0,0 +1,44 @@
+<template>
+  <content-with-heading>
+    <template slot="heading-left">
+      <p class="title is-4">Playlists</p>
+      <p class="heading">{{ playlists.total }} playlists</p>
+    </template>
+    <template slot="content">
+      <list-item-playlist v-for="playlist in playlists.items" :key="playlist.id" :playlist="playlist"></list-item-playlist>
+    </template>
+  </content-with-heading>
+</template>
+
+<script>
+import { LoadDataBeforeEnterMixin } from './mixin'
+import ContentWithHeading from '@/templates/ContentWithHeading'
+import TabsMusic from '@/components/TabsMusic'
+import ListItemPlaylist from '@/components/ListItemPlaylist'
+import webapi from '@/webapi'
+
+const playlistsData = {
+  load: function (to) {
+    return webapi.library_playlists()
+  },
+
+  set: function (vm, response) {
+    vm.playlists = response.data
+  }
+}
+
+export default {
+  name: 'PagePlaylists',
+  mixins: [ LoadDataBeforeEnterMixin(playlistsData) ],
+  components: { ContentWithHeading, TabsMusic, ListItemPlaylist },
+
+  data () {
+    return {
+      playlists: {}
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/pages/PagePodcast.vue

@@ -0,0 +1,66 @@
+<template>
+  <content-with-heading>
+    <template slot="heading-left">
+      <div class="title is-4">{{ album.name }}</div>
+    </template>
+    <template slot="heading-right">
+      <a class="button is-small is-dark is-rounded" @click="play">
+        <span class="icon">
+          <i class="mdi mdi-play"></i>
+        </span>
+        <span>Play</span>
+      </a>
+    </template>
+    <template slot="content">
+      <p class="heading has-text-centered-mobile">{{ album.track_count }} tracks</p>
+      <list-item-track v-for="(track, index) in tracks" :key="track.id" :track="track" :position="index" :context_uri="album.uri"></list-item-track>
+    </template>
+  </content-with-heading>
+</template>
+
+<script>
+import { LoadDataBeforeEnterMixin } from './mixin'
+import ContentWithHeading from '@/templates/ContentWithHeading'
+import ListItemTrack from '@/components/ListItemTrack'
+import webapi from '@/webapi'
+
+const albumData = {
+  load: function (to) {
+    return Promise.all([
+      webapi.library_album(to.params.album_id),
+      webapi.library_album_tracks(to.params.album_id)
+    ])
+  },
+
+  set: function (vm, response) {
+    vm.album = response[0].data
+    vm.tracks = response[1].data.items
+  }
+}
+
+export default {
+  name: 'PagePodcast',
+  mixins: [ LoadDataBeforeEnterMixin(albumData) ],
+  components: { ContentWithHeading, ListItemTrack },
+
+  data () {
+    return {
+      album: {},
+      tracks: []
+    }
+  },
+
+  methods: {
+    play: function () {
+      webapi.queue_clear().then(() =>
+        webapi.queue_add(this.album.uri).then(() =>
+          webapi.player_play()
+        )
+      )
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/pages/PagePodcasts.vue

@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <content-with-heading>
+      <template slot="heading-left">
+        <p class="title is-4">Podcasts</p>
+        <p class="heading">{{ albums.total }} podcasts</p>
+      </template>
+      <template slot="content">
+        <list-item-album v-for="album in albums.items" :key="album.id" :album="album" :media_kind="'podcast'"></list-item-album>
+      </template>
+    </content-with-heading>
+  </div>
+</template>
+
+<script>
+import { LoadDataBeforeEnterMixin } from './mixin'
+import ContentWithHeading from '@/templates/ContentWithHeading'
+import ListItemAlbum from '@/components/ListItemAlbum'
+import webapi from '@/webapi'
+
+const albumsData = {
+  load: function (to) {
+    return webapi.library_podcasts()
+  },
+
+  set: function (vm, response) {
+    vm.albums = response.data
+  }
+}
+
+export default {
+  name: 'PagePodcasts',
+  mixins: [ LoadDataBeforeEnterMixin(albumsData) ],
+  components: { ContentWithHeading, ListItemAlbum },
+
+  data () {
+    return {
+      albums: {}
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/pages/PageQueue.vue

@@ -0,0 +1,108 @@
+<template>
+  <content-with-heading>
+    <template slot="heading-left">
+      <p class="heading">{{ queue.count }} tracks</p>
+      <p class="title is-4">Queue</p>
+    </template>
+    <template slot="heading-right">
+      <div class="buttons is-centered">
+        <a class="button is-small" :class="{ 'is-info': show_only_next_items }" @click="update_show_next_items">
+          <span class="icon">
+            <i class="mdi mdi-arrow-collapse-down"></i>
+          </span>
+          <span>Hide previous</span>
+        </a>
+        <!--
+        <a class="button" :class="{ 'is-info': edit_mode }" @click="edit_mode = !edit_mode">
+          <span class="icon">
+            <i class="mdi mdi-content-save"></i>
+          </span>
+          <span>Save</span>
+        </a>
+        -->
+        <a class="button is-small" :class="{ 'is-info': edit_mode }" @click="edit_mode = !edit_mode">
+          <span class="icon">
+            <i class="mdi mdi-pencil"></i>
+          </span>
+          <span>Edit</span>
+        </a>
+        <a class="button is-small" @click="queue_clear">
+          <span class="icon">
+            <i class="mdi mdi-delete-empty"></i>
+          </span>
+          <span>Clear</span>
+        </a>
+      </div>
+    </template>
+    <template slot="content">
+      <draggable v-model="queue_items" :options="{handle:'.handle'}"  @end="move_item">
+        <list-item-queue-item v-for="(item, index) in queue_items"
+          :key="item.id" :item="item" :position="index"
+          :current_position="current_position"
+          :show_only_next_items="show_only_next_items"
+          :edit_mode="edit_mode"></list-item-queue-item>
+      </draggable>
+    </template>
+  </content-with-heading>
+</template>
+
+<script>
+import ContentWithHeading from '@/templates/ContentWithHeading'
+import ListItemQueueItem from '@/components/ListItemQueueItem'
+import webapi from '@/webapi'
+import * as types from '@/store/mutation_types'
+import draggable from 'vuedraggable'
+
+export default {
+  name: 'PageQueue',
+  components: { ContentWithHeading, ListItemQueueItem, draggable },
+
+  data () {
+    return {
+      edit_mode: false
+    }
+  },
+
+  computed: {
+    state () {
+      return this.$store.state.player
+    },
+    queue () {
+      return this.$store.state.queue
+    },
+    queue_items: {
+      get () { return this.$store.state.queue.items },
+      set (value) { /* Do nothing? Send move request in @end event */ }
+    },
+    current_position () {
+      const nowPlaying = this.$store.getters.now_playing
+      return nowPlaying === undefined || nowPlaying.position === undefined ? -1 : this.$store.getters.now_playing.position
+    },
+    show_only_next_items () {
+      return this.$store.state.show_only_next_items
+    }
+  },
+
+  methods: {
+    queue_clear: function () {
+      webapi.queue_clear()
+    },
+
+    update_show_next_items: function (e) {
+      this.$store.commit(types.SHOW_ONLY_NEXT_ITEMS, !this.show_only_next_items)
+    },
+
+    move_item: function (e) {
+      var oldPosition = !this.show_only_next_items ? e.oldIndex : e.oldIndex + this.current_position
+      var item = this.queue_items[oldPosition]
+      var newPosition = item.position + (e.newIndex - e.oldIndex)
+      if (newPosition !== oldPosition) {
+        webapi.queue_move(item.id, newPosition)
+      }
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/pages/PageSearch.vue

@@ -0,0 +1,260 @@
+<template>
+  <div>
+    <!-- Search field + recent searches -->
+    <section class="section fd-tabs-section">
+      <div class="container">
+        <div class="columns is-centered">
+          <div class="column is-four-fifths">
+            <form v-on:submit.prevent="new_search">
+              <div class="field">
+                <p class="control is-expanded has-icons-left">
+                  <input class="input is-rounded is-shadowless" type="text" placeholder="Search" v-model="search_query" ref="search_field">
+                  <span class="icon is-left">
+                    <i class="mdi mdi-magnify"></i>
+                  </span>
+                </p>
+              </div>
+            </form>
+            <div class="tags" style="margin-top: 16px;">
+              <a class="tag" v-for="recent_search in recent_searches" :key="recent_search" @click="open_recent_search(recent_search)">{{ recent_search }}</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <tabs-search></tabs-search>
+
+    <!-- Tracks -->
+    <content-with-heading v-if="show_tracks">
+      <template slot="heading-left">
+        <p class="title is-4">Tracks</p>
+      </template>
+      <template slot="content">
+        <list-item-track v-for="track in tracks.items" :key="track.id" :track="track" :position="0" :context_uri="track.uri"></list-item-track>
+      </template>
+      <template slot="footer">
+        <nav v-if="show_all_tracks_button" class="level">
+          <p class="level-item">
+            <a class="button is-light is-small is-rounded" v-on:click="open_search_tracks">Show all {{ tracks.total }} tracks</a>
+          </p>
+        </nav>
+        <p v-if="!tracks.total">No results</p>
+      </template>
+    </content-with-heading>
+
+    <!-- Artists -->
+    <content-with-heading v-if="show_artists">
+      <template slot="heading-left">
+        <p class="title is-4">Artists</p>
+      </template>
+      <template slot="content">
+        <list-item-artist v-for="artist in artists.items" :key="artist.id" :artist="artist"></list-item-artist>
+      </template>
+      <template slot="footer">
+        <nav v-if="show_all_artists_button" class="level">
+          <p class="level-item">
+            <a class="button is-light is-small is-rounded" v-on:click="open_search_artists">Show all {{ artists.total }} artists</a>
+          </p>
+        </nav>
+        <p v-if="!artists.total">No results</p>
+      </template>
+    </content-with-heading>
+
+    <!-- Albums -->
+    <content-with-heading v-if="show_albums">
+      <template slot="heading-left">
+        <p class="title is-4">Albums</p>
+      </template>
+      <template slot="content">
+        <list-item-album v-for="album in albums.items" :key="album.id" :album="album"></list-item-album>
+      </template>
+      <template slot="footer">
+        <nav v-if="show_all_albums_button" class="level">
+          <p class="level-item">
+            <a class="button is-light is-small is-rounded" v-on:click="open_search_albums">Show all {{ albums.total }} albums</a>
+          </p>
+        </nav>
+        <p v-if="!albums.total">No results</p>
+      </template>
+    </content-with-heading>
+
+    <!-- Playlists -->
+    <content-with-heading v-if="show_playlists">
+      <template slot="heading-left">
+        <p class="title is-4">Playlists</p>
+      </template>
+      <template slot="content">
+        <list-item-playlist v-for="playlist in playlists.items" :key="playlist.id" :playlist="playlist"></list-item-playlist>
+      </template>
+      <template slot="footer">
+        <nav v-if="show_all_playlists_button" class="level">
+          <p class="level-item">
+            <a class="button is-light is-small is-rounded" v-on:click="open_search_playlists">Show all {{ playlists.total }} playlists</a>
+          </p>
+        </nav>
+        <p v-if="!playlists.total">No results</p>
+      </template>
+    </content-with-heading>
+  </div>
+</template>
+
+<script>
+import ContentWithHeading from '@/templates/ContentWithHeading'
+import TabsSearch from '@/components/TabsSearch'
+import ListItemTrack from '@/components/ListItemTrack'
+import ListItemArtist from '@/components/ListItemArtist'
+import ListItemAlbum from '@/components/ListItemAlbum'
+import ListItemPlaylist from '@/components/ListItemPlaylist'
+import webapi from '@/webapi'
+import * as types from '@/store/mutation_types'
+
+export default {
+  name: 'PageSearch',
+  components: { ContentWithHeading, TabsSearch, ListItemTrack, ListItemArtist, ListItemAlbum, ListItemPlaylist },
+
+  data () {
+    return {
+      search_query: '',
+      tracks: { items: [], total: 0 },
+      artists: { items: [], total: 0 },
+      albums: { items: [], total: 0 },
+      playlists: { items: [], total: 0 }
+    }
+  },
+
+  computed: {
+    recent_searches () {
+      return this.$store.state.recent_searches
+    },
+
+    show_tracks () {
+      return this.$route.query.type && this.$route.query.type.includes('track')
+    },
+    show_all_tracks_button () {
+      return this.tracks.total > this.tracks.items.length
+    },
+
+    show_artists () {
+      return this.$route.query.type && this.$route.query.type.includes('artist')
+    },
+    show_all_artists_button () {
+      return this.artists.total > this.artists.items.length
+    },
+
+    show_albums () {
+      return this.$route.query.type && this.$route.query.type.includes('album')
+    },
+    show_all_albums_button () {
+      return this.albums.total > this.albums.items.length
+    },
+
+    show_playlists () {
+      return this.$route.query.type && this.$route.query.type.includes('playlist')
+    },
+    show_all_playlists_button () {
+      return this.playlists.total > this.playlists.items.length
+    }
+  },
+
+  methods: {
+    search: function (route) {
+      if (!route.query.query || route.query.query === '') {
+        this.search_query = ''
+        this.$refs.search_field.focus()
+        return
+      }
+
+      var searchParams = {
+        'type': route.query.type,
+        'query': route.query.query,
+        'media_kind': 'music'
+      }
+
+      if (route.query.limit) {
+        searchParams.limit = route.query.limit
+        searchParams.offset = route.query.offset
+      }
+
+      webapi.search(searchParams).then(({ data }) => {
+        this.tracks = data.tracks ? data.tracks : { items: [], total: 0 }
+        this.artists = data.artists ? data.artists : { items: [], total: 0 }
+        this.albums = data.albums ? data.albums : { items: [], total: 0 }
+        this.playlists = data.playlists ? data.playlists : { items: [], total: 0 }
+
+        this.$store.commit(types.ADD_RECENT_SEARCH, searchParams.query)
+      })
+    },
+
+    new_search: function () {
+      if (!this.search_query) {
+        return
+      }
+
+      this.$router.push({ path: '/search/library',
+        query: {
+          type: 'track,artist,album,playlist',
+          query: this.search_query,
+          limit: 3,
+          offset: 0
+        }
+      })
+      this.$refs.search_field.blur()
+    },
+
+    open_search_tracks: function () {
+      this.$router.push({ path: '/search/library',
+        query: {
+          type: 'track',
+          query: this.$route.query.query
+        }
+      })
+    },
+
+    open_search_artists: function () {
+      this.$router.push({ path: '/search/library',
+        query: {
+          type: 'artist',
+          query: this.$route.query.query
+        }
+      })
+    },
+
+    open_search_albums: function () {
+      this.$router.push({ path: '/search/library',
+        query: {
+          type: 'album',
+          query: this.$route.query.query
+        }
+      })
+    },
+
+    open_search_playlists: function () {
+      this.$router.push({ path: '/search/library',
+        query: {
+          type: 'playlist',
+          query: this.$route.query.query
+        }
+      })
+    },
+
+    open_recent_search: function (query) {
+      this.search_query = query
+      this.new_search()
+    }
+  },
+
+  mounted: function () {
+    this.search(this.$route)
+  },
+
+  watch: {
+    '$route' (to, from) {
+      this.search(to)
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/pages/SpotifyPageAlbum.vue

@@ -0,0 +1,71 @@
+<template>
+  <content-with-heading>
+    <template slot="heading-left">
+      <div class="title is-4">{{ album.name }}</div>
+      <a class="title is-4 has-text-link has-text-weight-normal" @click="open_artist">{{ album.artists[0].name }}</a>
+    </template>
+    <template slot="heading-right">
+      <a class="button is-small is-dark is-rounded" @click="play">
+        <span class="icon">
+          <i class="mdi mdi-play"></i>
+        </span>
+        <span>Play</span>
+      </a>
+    </template>
+    <template slot="content">
+      <p class="heading has-text-centered-mobile">{{ album.tracks.total }} tracks</p>
+      <spotify-list-item-track v-for="(track, index) in album.tracks.items" :key="track.id" :track="track" :position="index" :album="album" :context_uri="album.uri"></spotify-list-item-track>
+    </template>
+  </content-with-heading>
+</template>
+
+<script>
+import { LoadDataBeforeEnterMixin } from './mixin'
+import ContentWithHeading from '@/templates/ContentWithHeading'
+import SpotifyListItemTrack from '@/components/SpotifyListItemTrack'
+import store from '@/store'
+import webapi from '@/webapi'
+import SpotifyWebApi from 'spotify-web-api-js'
+
+const albumData = {
+  load: function (to) {
+    const spotifyApi = new SpotifyWebApi()
+    spotifyApi.setAccessToken(store.state.spotify.webapi_token)
+    return spotifyApi.getAlbum(to.params.album_id)
+  },
+
+  set: function (vm, response) {
+    vm.album = response
+  }
+}
+
+export default {
+  name: 'PageAlbum',
+  mixins: [ LoadDataBeforeEnterMixin(albumData) ],
+  components: { ContentWithHeading, SpotifyListItemTrack },
+
+  data () {
+    return {
+      album: {}
+    }
+  },
+
+  methods: {
+    open_artist: function () {
+      this.$router.push({ path: '/music/spotify/artists/' + this.album.artists[0].id })
+    },
+
+    play: function () {
+      webapi.queue_clear().then(() =>
+        webapi.queue_add(this.album.uri).then(() =>
+          webapi.player_play()
+        )
+      )
+      this.show_details_modal = false
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/pages/SpotifyPageArtist.vue

@@ -0,0 +1,82 @@
+<template>
+  <content-with-heading>
+    <template slot="heading-left">
+      <p class="title is-4">{{ artist.name }}</p>
+    </template>
+    <template slot="content">
+      <p class="heading has-text-centered-mobile">{{ total }} albums</p>
+      <spotify-list-item-album v-for="album in albums" :key="album.id" :album="album"></spotify-list-item-album>
+      <infinite-loading v-if="offset < total" @infinite="load_next"><span slot="no-more">.</span></infinite-loading>
+    </template>
+  </content-with-heading>
+</template>
+
+<script>
+import { LoadDataBeforeEnterMixin } from './mixin'
+import ContentWithHeading from '@/templates/ContentWithHeading'
+import SpotifyListItemAlbum from '@/components/SpotifyListItemAlbum'
+import store from '@/store'
+import SpotifyWebApi from 'spotify-web-api-js'
+import InfiniteLoading from 'vue-infinite-loading'
+
+const artistData = {
+  load: function (to) {
+    const spotifyApi = new SpotifyWebApi()
+    spotifyApi.setAccessToken(store.state.spotify.webapi_token)
+    return Promise.all([
+      spotifyApi.getArtist(to.params.artist_id),
+      spotifyApi.getArtistAlbums(to.params.artist_id, { limit: 50, offset: 0, include_groups: 'album,single' })
+    ])
+  },
+
+  set: function (vm, response) {
+    vm.artist = response[0]
+
+    vm.albums = []
+    vm.total = 0
+    vm.offset = 0
+    vm.append_albums(response[1])
+  }
+}
+
+export default {
+  name: 'SpotifyPageArtist',
+  mixins: [ LoadDataBeforeEnterMixin(artistData) ],
+  components: { ContentWithHeading, SpotifyListItemAlbum, InfiniteLoading },
+
+  data () {
+    return {
+      artist: {},
+      albums: [],
+      total: 0,
+      offset: 0
+    }
+  },
+
+  methods: {
+    load_next: function ($state) {
+      const spotifyApi = new SpotifyWebApi()
+      spotifyApi.setAccessToken(this.$store.state.spotify.webapi_token)
+      spotifyApi.getArtistAlbums(this.artist.id, { limit: 50, offset: this.offset, include_groups: 'album,single' }).then(data => {
+        this.append_albums(data, $state)
+      })
+    },
+
+    append_albums: function (data, $state) {
+      this.albums = this.albums.concat(data.items)
+      this.total = data.total
+      this.offset += data.limit
+
+      if ($state) {
+        $state.loaded()
+        if (this.offset >= this.total) {
+          $state.complete()
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/pages/SpotifyPageBrowse.vue

@@ -0,0 +1,95 @@
+<template>
+  <div>
+    <tabs-music></tabs-music>
+
+    <!-- New Releases -->
+    <content-with-heading>
+      <template slot="heading-left">
+        <p class="title is-4">New Releases</p>
+      </template>
+      <template slot="content">
+        <spotify-list-item-album v-for="album in new_releases" :key="album.id" :album="album"></spotify-list-item-album>
+      </template>
+      <template slot="footer">
+        <nav class="level">
+          <p class="level-item">
+            <router-link to="/music/spotify/new-releases" class="button is-light is-small is-rounded">
+              Show more
+            </router-link>
+          </p>
+        </nav>
+      </template>
+    </content-with-heading>
+
+    <!-- Featured Playlists -->
+    <content-with-heading>
+      <template slot="heading-left">
+        <p class="title is-4">Featured Playlists</p>
+      </template>
+      <template slot="content">
+        <spotify-list-item-playlist v-for="playlist in featured_playlists" :key="playlist.id" :playlist="playlist"></spotify-list-item-playlist>
+      </template>
+      <template slot="footer">
+        <nav class="level">
+          <p class="level-item">
+            <router-link to="/music/spotify/featured-playlists" class="button is-light is-small is-rounded">
+              Show more
+            </router-link>
+          </p>
+        </nav>
+      </template>
+    </content-with-heading>
+  </div>
+</template>
+
+<script>
+import { LoadDataBeforeEnterMixin } from './mixin'
+import ContentWithHeading from '@/templates/ContentWithHeading'
+import TabsMusic from '@/components/TabsMusic'
+import SpotifyListItemAlbum from '@/components/SpotifyListItemAlbum'
+import SpotifyListItemPlaylist from '@/components/SpotifyListItemPlaylist'
+import store from '@/store'
+import * as types from '@/store/mutation_types'
+import SpotifyWebApi from 'spotify-web-api-js'
+
+const browseData = {
+  load: function (to) {
+    if (store.state.spotify_new_releases.length > 0 && store.state.spotify_featured_playlists.length > 0) {
+      return Promise.resolve()
+    }
+
+    const spotifyApi = new SpotifyWebApi()
+    spotifyApi.setAccessToken(store.state.spotify.webapi_token)
+    return Promise.all([
+      spotifyApi.getNewReleases({ country: store.state.spotify.webapi_country, limit: 50 }),
+      spotifyApi.getFeaturedPlaylists({ country: store.state.spotify.webapi_country, limit: 50 })
+    ])
+  },
+
+  set: function (vm, response) {
+    if (response) {
+      store.commit(types.SPOTIFY_NEW_RELEASES, response[0].albums.items)
+      store.commit(types.SPOTIFY_FEATURED_PLAYLISTS, response[1].playlists.items)
+    }
+  }
+}
+
+export default {
+  name: 'SpotifyPageBrowse',
+  mixins: [ LoadDataBeforeEnterMixin(browseData) ],
+  components: { ContentWithHeading, TabsMusic, SpotifyListItemAlbum, SpotifyListItemPlaylist },
+
+  computed: {
+    new_releases () {
+      return this.$store.state.spotify_new_releases.slice(0, 3)
+    },
+
+    featured_playlists () {
+      return this.$store.state.spotify_featured_playlists.slice(0, 3)
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/pages/SpotifyPageBrowseFeaturedPlaylists.vue

@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <tabs-music></tabs-music>
+
+    <content-with-heading>
+      <template slot="heading-left">
+        <p class="title is-4">Featured Playlists</p>
+      </template>
+      <template slot="content">
+        <spotify-list-item-playlist v-for="playlist in featured_playlists" :key="playlist.id" :playlist="playlist"></spotify-list-item-playlist>
+      </template>
+    </content-with-heading>
+  </div>
+</template>
+
+<script>
+import { LoadDataBeforeEnterMixin } from './mixin'
+import ContentWithHeading from '@/templates/ContentWithHeading'
+import TabsMusic from '@/components/TabsMusic'
+import SpotifyListItemPlaylist from '@/components/SpotifyListItemPlaylist'
+import store from '@/store'
+import * as types from '@/store/mutation_types'
+import SpotifyWebApi from 'spotify-web-api-js'
+
+const browseData = {
+  load: function (to) {
+    if (store.state.spotify_featured_playlists.length > 0) {
+      return Promise.resolve()
+    }
+
+    const spotifyApi = new SpotifyWebApi()
+    spotifyApi.setAccessToken(store.state.spotify.webapi_token)
+    spotifyApi.getFeaturedPlaylists({ country: store.state.spotify.webapi_country, limit: 50 })
+  },
+
+  set: function (vm, response) {
+    if (response) {
+      store.commit(types.SPOTIFY_FEATURED_PLAYLISTS, response.playlists.items)
+    }
+  }
+}
+
+export default {
+  name: 'SpotifyPageBrowseFeaturedPlaylists',
+  mixins: [ LoadDataBeforeEnterMixin(browseData) ],
+  components: { ContentWithHeading, TabsMusic, SpotifyListItemPlaylist },
+
+  computed: {
+    featured_playlists () {
+      return this.$store.state.spotify_featured_playlists
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/pages/SpotifyPageBrowseNewReleases.vue

@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <tabs-music></tabs-music>
+
+    <content-with-heading>
+      <template slot="heading-left">
+        <p class="title is-4">New Releases</p>
+      </template>
+      <template slot="content">
+        <spotify-list-item-album v-for="album in new_releases" :key="album.id" :album="album"></spotify-list-item-album>
+      </template>
+    </content-with-heading>
+  </div>
+</template>
+
+<script>
+import { LoadDataBeforeEnterMixin } from './mixin'
+import ContentWithHeading from '@/templates/ContentWithHeading'
+import TabsMusic from '@/components/TabsMusic'
+import SpotifyListItemAlbum from '@/components/SpotifyListItemAlbum'
+import store from '@/store'
+import * as types from '@/store/mutation_types'
+import SpotifyWebApi from 'spotify-web-api-js'
+
+const browseData = {
+  load: function (to) {
+    if (store.state.spotify_new_releases.length > 0) {
+      return Promise.resolve()
+    }
+
+    const spotifyApi = new SpotifyWebApi()
+    spotifyApi.setAccessToken(store.state.spotify.webapi_token)
+    return spotifyApi.getNewReleases({ country: store.state.spotify.webapi_country, limit: 50 })
+  },
+
+  set: function (vm, response) {
+    if (response) {
+      store.commit(types.SPOTIFY_NEW_RELEASES, response.albums.items)
+    }
+  }
+}
+
+export default {
+  name: 'SpotifyPageBrowseNewReleases',
+  mixins: [ LoadDataBeforeEnterMixin(browseData) ],
+  components: { ContentWithHeading, TabsMusic, SpotifyListItemAlbum },
+
+  computed: {
+    new_releases () {
+      return this.$store.state.spotify_new_releases
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/pages/SpotifyPagePlaylist.vue

@@ -0,0 +1,99 @@
+<template>
+  <content-with-heading>
+    <template slot="heading-left">
+      <div class="title is-4">{{ playlist.name }}</div>
+    </template>
+    <template slot="heading-right">
+      <a class="button is-small is-dark is-rounded" @click="play">
+        <span class="icon">
+          <i class="mdi mdi-play"></i>
+        </span>
+        <span>Play</span>
+      </a>
+    </template>
+    <template slot="content">
+      <p class="heading has-text-centered-mobile">{{ playlist.tracks.total }} tracks</p>
+      <spotify-list-item-track v-for="(item, index) in tracks" :key="item.track.id" :track="item.track" :album="item.track.album" :position="index" :context_uri="playlist.uri"></spotify-list-item-track>
+      <infinite-loading v-if="offset < total" @infinite="load_next"><span slot="no-more">.</span></infinite-loading>
+    </template>
+  </content-with-heading>
+</template>
+
+<script>
+import { LoadDataBeforeEnterMixin } from './mixin'
+import ContentWithHeading from '@/templates/ContentWithHeading'
+import SpotifyListItemTrack from '@/components/SpotifyListItemTrack'
+import store from '@/store'
+import webapi from '@/webapi'
+import SpotifyWebApi from 'spotify-web-api-js'
+import InfiniteLoading from 'vue-infinite-loading'
+
+const playlistData = {
+  load: function (to) {
+    const spotifyApi = new SpotifyWebApi()
+    spotifyApi.setAccessToken(store.state.spotify.webapi_token)
+    return Promise.all([
+      spotifyApi.getPlaylist(to.params.user_id, to.params.playlist_id),
+      spotifyApi.getPlaylistTracks(to.params.user_id, to.params.playlist_id, { limit: 50, offset: 0 })
+    ])
+  },
+
+  set: function (vm, response) {
+    vm.playlist = response[0]
+    vm.tracks = []
+    vm.total = 0
+    vm.offset = 0
+    vm.append_tracks(response[1])
+  }
+}
+
+export default {
+  name: 'SpotifyPagePlaylist',
+  mixins: [ LoadDataBeforeEnterMixin(playlistData) ],
+  components: { ContentWithHeading, SpotifyListItemTrack, InfiniteLoading },
+
+  data () {
+    return {
+      playlist: {},
+      tracks: [],
+      total: 0,
+      offset: 0
+    }
+  },
+
+  methods: {
+    load_next: function ($state) {
+      const spotifyApi = new SpotifyWebApi()
+      spotifyApi.setAccessToken(this.$store.state.spotify.webapi_token)
+      spotifyApi.getPlaylistTracks(this.playlist.owner.id, this.playlist.id, { limit: 50, offset: this.offset }).then(data => {
+        this.append_tracks(data, $state)
+      })
+    },
+
+    append_tracks: function (data, $state) {
+      this.tracks = this.tracks.concat(data.items)
+      this.total = data.total
+      this.offset += data.limit
+
+      if ($state) {
+        $state.loaded()
+        if (this.offset >= this.total) {
+          $state.complete()
+        }
+      }
+    },
+
+    play: function () {
+      webapi.queue_clear().then(() =>
+        webapi.queue_add(this.playlist.uri).then(() =>
+          webapi.player_play()
+        )
+      )
+      this.show_details_modal = false
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/pages/SpotifyPageSearch.vue

@@ -0,0 +1,342 @@
+<template>
+  <div>
+    <!-- Search field + recent searches -->
+    <section class="section fd-tabs-section">
+      <div class="container">
+        <div class="columns is-centered">
+          <div class="column is-four-fifths">
+            <form v-on:submit.prevent="new_search">
+              <div class="field">
+                <p class="control is-expanded has-icons-left">
+                  <input class="input is-rounded is-shadowless" type="text" placeholder="Search" v-model="search_query" ref="search_field">
+                  <span class="icon is-left">
+                    <i class="mdi mdi-magnify"></i>
+                  </span>
+                </p>
+              </div>
+            </form>
+            <div class="tags" style="margin-top: 16px;">
+              <a class="tag" v-for="recent_search in recent_searches" :key="recent_search" @click="open_recent_search(recent_search)">{{ recent_search }}</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <tabs-search></tabs-search>
+
+    <!-- Tracks -->
+    <content-with-heading v-if="show_tracks">
+      <template slot="heading-left">
+        <p class="title is-4">Tracks</p>
+      </template>
+      <template slot="content">
+        <spotify-list-item-track v-for="track in tracks.items" :key="track.id" :track="track" :album="track.album" :position="0" :context_uri="track.uri"></spotify-list-item-track>
+        <infinite-loading v-if="query.type === 'track'" @infinite="search_tracks_next"><span slot="no-more">.</span></infinite-loading>
+      </template>
+      <template slot="footer">
+        <nav v-if="show_all_tracks_button" class="level">
+          <p class="level-item">
+            <a class="button is-light is-small is-rounded" v-on:click="open_search_tracks">Show all {{ tracks.total }} tracks</a>
+          </p>
+        </nav>
+        <p v-if="!tracks.total">No results</p>
+      </template>
+    </content-with-heading>
+
+    <!-- Artists -->
+    <content-with-heading v-if="show_artists">
+      <template slot="heading-left">
+        <p class="title is-4">Artists</p>
+      </template>
+      <template slot="content">
+        <spotify-list-item-artist v-for="artist in artists.items" :key="artist.id" :artist="artist"></spotify-list-item-artist>
+        <infinite-loading v-if="query.type === 'artist'" @infinite="search_artists_next"><span slot="no-more">.</span></infinite-loading>
+      </template>
+      <template slot="footer">
+        <nav v-if="show_all_artists_button" class="level">
+          <p class="level-item">
+            <a class="button is-light is-small is-rounded" v-on:click="open_search_artists">Show all {{ artists.total }} artists</a>
+          </p>
+        </nav>
+        <p v-if="!artists.total">No results</p>
+      </template>
+    </content-with-heading>
+
+    <!-- Albums -->
+    <content-with-heading v-if="show_albums">
+      <template slot="heading-left">
+        <p class="title is-4">Albums</p>
+      </template>
+      <template slot="content">
+        <spotify-list-item-album v-for="album in albums.items" :key="album.id" :album="album"></spotify-list-item-album>
+        <infinite-loading v-if="query.type === 'album'" @infinite="search_albums_next"><span slot="no-more">.</span></infinite-loading>
+      </template>
+      <template slot="footer">
+        <nav v-if="show_all_albums_button" class="level">
+          <p class="level-item">
+            <a class="button is-light is-small is-rounded" v-on:click="open_search_albums">Show all {{ albums.total }} albums</a>
+          </p>
+        </nav>
+        <p v-if="!albums.total">No results</p>
+      </template>
+    </content-with-heading>
+
+    <!-- Playlists -->
+    <content-with-heading v-if="show_playlists">
+      <template slot="heading-left">
+        <p class="title is-4">Playlists</p>
+      </template>
+      <template slot="content">
+        <spotify-list-item-playlist v-for="playlist in playlists.items" :key="playlist.id" :playlist="playlist"></spotify-list-item-playlist>
+        <infinite-loading v-if="query.type === 'playlist'" @infinite="search_playlists_next"><span slot="no-more">.</span></infinite-loading>
+      </template>
+      <template slot="footer">
+        <nav v-if="show_all_playlists_button" class="level">
+          <p class="level-item">
+            <a class="button is-light is-small is-rounded" v-on:click="open_search_playlists">Show all {{ playlists.total }} playlists</a>
+          </p>
+        </nav>
+        <p v-if="!playlists.total">No results</p>
+      </template>
+    </content-with-heading>
+  </div>
+</template>
+
+<script>
+import ContentWithHeading from '@/templates/ContentWithHeading'
+import TabsSearch from '@/components/TabsSearch'
+import SpotifyListItemTrack from '@/components/SpotifyListItemTrack'
+import SpotifyListItemArtist from '@/components/SpotifyListItemArtist'
+import SpotifyListItemAlbum from '@/components/SpotifyListItemAlbum'
+import SpotifyListItemPlaylist from '@/components/SpotifyListItemPlaylist'
+import SpotifyWebApi from 'spotify-web-api-js'
+import webapi from '@/webapi'
+import * as types from '@/store/mutation_types'
+import InfiniteLoading from 'vue-infinite-loading'
+
+export default {
+  name: 'SpotifyPageSearch',
+  components: { ContentWithHeading, TabsSearch, SpotifyListItemTrack, SpotifyListItemArtist, SpotifyListItemAlbum, SpotifyListItemPlaylist, InfiniteLoading },
+
+  data () {
+    return {
+      search_query: '',
+      tracks: { items: [], total: 0 },
+      artists: { items: [], total: 0 },
+      albums: { items: [], total: 0 },
+      playlists: { items: [], total: 0 },
+
+      query: {},
+      search_param: {}
+    }
+  },
+
+  computed: {
+    recent_searches () {
+      return this.$store.state.recent_searches
+    },
+
+    show_tracks () {
+      return this.$route.query.type && this.$route.query.type.includes('track')
+    },
+    show_all_tracks_button () {
+      return this.tracks.total > this.tracks.items.length
+    },
+
+    show_artists () {
+      return this.$route.query.type && this.$route.query.type.includes('artist')
+    },
+    show_all_artists_button () {
+      return this.artists.total > this.artists.items.length
+    },
+
+    show_albums () {
+      return this.$route.query.type && this.$route.query.type.includes('album')
+    },
+    show_all_albums_button () {
+      return this.albums.total > this.albums.items.length
+    },
+
+    show_playlists () {
+      return this.$route.query.type && this.$route.query.type.includes('playlist')
+    },
+    show_all_playlists_button () {
+      return this.playlists.total > this.playlists.items.length
+    }
+  },
+
+  methods: {
+    reset: function () {
+      this.tracks = { items: [], total: 0 }
+      this.artists = { items: [], total: 0 }
+      this.albums = { items: [], total: 0 }
+      this.playlists = { items: [], total: 0 }
+    },
+
+    search: function () {
+      this.reset()
+
+      // If no search query present reset and focus search field
+      if (!this.query.query || this.query.query === '') {
+        this.search_query = ''
+        this.$refs.search_field.focus()
+        return
+      }
+
+      this.search_param.limit = this.query.limit ? this.query.limit : 50
+      this.search_param.offset = this.query.offset ? this.query.offset : 0
+
+      this.$store.commit(types.ADD_RECENT_SEARCH, this.query.query)
+
+      if (this.query.type.includes(',')) {
+        this.search_all()
+      }
+    },
+
+    spotify_search: function () {
+      return webapi.spotify().then(({ data }) => {
+        this.search_param.market = data.webapi_country
+
+        var spotifyApi = new SpotifyWebApi()
+        spotifyApi.setAccessToken(data.webapi_token)
+
+        return spotifyApi.search(this.query.query, this.query.type.split(','), this.search_param)
+      })
+    },
+
+    search_all: function () {
+      this.spotify_search().then(data => {
+        this.tracks = data.tracks ? data.tracks : { items: [], total: 0 }
+        this.artists = data.artists ? data.artists : { items: [], total: 0 }
+        this.albums = data.albums ? data.albums : { items: [], total: 0 }
+        this.playlists = data.playlists ? data.playlists : { items: [], total: 0 }
+      })
+    },
+
+    search_tracks_next: function ($state) {
+      this.spotify_search().then(data => {
+        this.tracks.items = this.tracks.items.concat(data.tracks.items)
+        this.tracks.total = data.tracks.total
+        this.search_param.offset += data.tracks.limit
+
+        $state.loaded()
+        if (this.search_param.offset >= this.tracks.total) {
+          $state.complete()
+        }
+      })
+    },
+
+    search_artists_next: function ($state) {
+      this.spotify_search().then(data => {
+        this.artists.items = this.artists.items.concat(data.artists.items)
+        this.artists.total = data.artists.total
+        this.search_param.offset += data.artists.limit
+
+        $state.loaded()
+        if (this.search_param.offset >= this.artists.total) {
+          $state.complete()
+        }
+      })
+    },
+
+    search_albums_next: function ($state) {
+      this.spotify_search().then(data => {
+        this.albums.items = this.albums.items.concat(data.albums.items)
+        this.albums.total = data.albums.total
+        this.search_param.offset += data.albums.limit
+
+        $state.loaded()
+        if (this.search_param.offset >= this.albums.total) {
+          $state.complete()
+        }
+      })
+    },
+
+    search_playlists_next: function ($state) {
+      this.spotify_search().then(data => {
+        this.playlists.items = this.playlists.items.concat(data.playlists.items)
+        this.playlists.total = data.playlists.total
+        this.search_param.offset += data.playlists.limit
+
+        $state.loaded()
+        if (this.search_param.offset >= this.playlists.total) {
+          $state.complete()
+        }
+      })
+    },
+
+    new_search: function () {
+      if (!this.search_query) {
+        return
+      }
+
+      this.$router.push({ path: '/search/spotify',
+        query: {
+          type: 'track,artist,album,playlist',
+          query: this.search_query,
+          limit: 3,
+          offset: 0
+        }
+      })
+      this.$refs.search_field.blur()
+    },
+
+    open_search_tracks: function () {
+      this.$router.push({ path: '/search/spotify',
+        query: {
+          type: 'track',
+          query: this.$route.query.query
+        }
+      })
+    },
+
+    open_search_artists: function () {
+      this.$router.push({ path: '/search/spotify',
+        query: {
+          type: 'artist',
+          query: this.$route.query.query
+        }
+      })
+    },
+
+    open_search_albums: function () {
+      this.$router.push({ path: '/search/spotify',
+        query: {
+          type: 'album',
+          query: this.$route.query.query
+        }
+      })
+    },
+
+    open_search_playlists: function () {
+      this.$router.push({ path: '/search/spotify',
+        query: {
+          type: 'playlist',
+          query: this.$route.query.query
+        }
+      })
+    },
+
+    open_recent_search: function (query) {
+      this.search_query = query
+      this.new_search()
+    }
+  },
+
+  mounted: function () {
+    this.query = this.$route.query
+    this.search()
+  },
+
+  watch: {
+    '$route' (to, from) {
+      this.query = to.query
+      this.search()
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/pages/mixin.js

@@ -0,0 +1,17 @@
+
+export const LoadDataBeforeEnterMixin = function (dataObject) {
+  return {
+    beforeRouteEnter (to, from, next) {
+      dataObject.load(to).then((response) => {
+        next(vm => dataObject.set(vm, response))
+      })
+    },
+    beforeRouteUpdate (to, from, next) {
+      const vm = this
+      dataObject.load(to).then((response) => {
+        dataObject.set(vm, response)
+        next()
+      })
+    }
+  }
+}

web-src/src/progress/index.js

@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import VueProgressBar from 'vue-progressbar'
+
+Vue.use(VueProgressBar, {
+  color: 'hsl(204, 86%, 53%)',
+  failedColor: 'red',
+  height: '1px'
+})

web-src/src/router/index.js

@@ -0,0 +1,202 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import store from '@/store'
+import * as types from '@/store/mutation_types'
+import PageQueue from '@/pages/PageQueue'
+import PageNowPlaying from '@/pages/PageNowPlaying'
+import PageBrowse from '@/pages/PageBrowse'
+import PageBrowseRecentlyAdded from '@/pages/PageBrowseRecentlyAdded'
+import PageBrowseRecentlyPlayed from '@/pages/PageBrowseRecentlyPlayed'
+import PageArtists from '@/pages/PageArtists'
+import PageArtist from '@/pages/PageArtist'
+import PageAlbums from '@/pages/PageAlbums'
+import PageAlbum from '@/pages/PageAlbum'
+import PagePodcasts from '@/pages/PagePodcasts'
+import PagePodcast from '@/pages/PagePodcast'
+import PageAudiobooks from '@/pages/PageAudiobooks'
+import PageAudiobook from '@/pages/PageAudiobook'
+import PagePlaylists from '@/pages/PagePlaylists'
+import PagePlaylist from '@/pages/PagePlaylist'
+import PageSearch from '@/pages/PageSearch'
+import PageAbout from '@/pages/PageAbout'
+import SpotifyPageBrowse from '@/pages/SpotifyPageBrowse'
+import SpotifyPageBrowseNewReleases from '@/pages/SpotifyPageBrowseNewReleases'
+import SpotifyPageBrowseFeaturedPlaylists from '@/pages/SpotifyPageBrowseFeaturedPlaylists'
+import SpotifyPageArtist from '@/pages/SpotifyPageArtist'
+import SpotifyPageAlbum from '@/pages/SpotifyPageAlbum'
+import SpotifyPagePlaylist from '@/pages/SpotifyPagePlaylist'
+import SpotifyPageSearch from '@/pages/SpotifyPageSearch'
+
+Vue.use(VueRouter)
+
+export const router = new VueRouter({
+  routes: [
+    {
+      path: '/',
+      name: 'PageQueue',
+      component: PageQueue
+    },
+    {
+      path: '/about',
+      name: 'About',
+      component: PageAbout
+    },
+    {
+      path: '/now-playing',
+      name: 'Now playing',
+      component: PageNowPlaying
+    },
+    {
+      path: '/music',
+      redirect: '/music/browse'
+    },
+    {
+      path: '/music/browse',
+      name: 'Browse',
+      component: PageBrowse,
+      meta: { show_progress: true }
+    },
+    {
+      path: '/music/browse/recently_added',
+      name: 'Browse Recently Added',
+      component: PageBrowseRecentlyAdded,
+      meta: { show_progress: true }
+    },
+    {
+      path: '/music/browse/recently_played',
+      name: 'Browse Recently Played',
+      component: PageBrowseRecentlyPlayed,
+      meta: { show_progress: true }
+    },
+    {
+      path: '/music/artists',
+      name: 'Artists',
+      component: PageArtists,
+      meta: { show_progress: true }
+    },
+    {
+      path: '/music/artists/:artist_id',
+      name: 'Artist',
+      component: PageArtist,
+      meta: { show_progress: true }
+    },
+    {
+      path: '/music/albums',
+      name: 'Albums',
+      component: PageAlbums,
+      meta: { show_progress: true }
+    },
+    {
+      path: '/music/albums/:album_id',
+      name: 'Album',
+      component: PageAlbum,
+      meta: { show_progress: true }
+    },
+    {
+      path: '/podcasts',
+      name: 'Podcasts',
+      component: PagePodcasts,
+      meta: { show_progress: true }
+    },
+    {
+      path: '/podcasts/:album_id',
+      name: 'Podcast',
+      component: PagePodcast,
+      meta: { show_progress: true }
+    },
+    {
+      path: '/audiobooks',
+      name: 'Audiobooks',
+      component: PageAudiobooks,
+      meta: { show_progress: true }
+    },
+    {
+      path: '/audiobooks/:album_id',
+      name: 'Audiobook',
+      component: PageAudiobook,
+      meta: { show_progress: true }
+    },
+    {
+      path: '/playlists',
+      name: 'Playlists',
+      component: PagePlaylists,
+      meta: { show_progress: true }
+    },
+    {
+      path: '/playlists/:playlist_id',
+      name: 'Playlist',
+      component: PagePlaylist,
+      meta: { show_progress: true }
+    },
+    {
+      path: '/search',
+      redirect: '/search/library'
+    },
+    {
+      path: '/search/library',
+      name: 'Search Library',
+      component: PageSearch
+    },
+    {
+      path: '/music/spotify',
+      name: 'Spotify',
+      component: SpotifyPageBrowse,
+      meta: { show_progress: true }
+    },
+    {
+      path: '/music/spotify/new-releases',
+      name: 'Spotify Browse New Releases',
+      component: SpotifyPageBrowseNewReleases,
+      meta: { show_progress: true }
+    },
+    {
+      path: '/music/spotify/featured-playlists',
+      name: 'Spotify Browse Featured Playlists',
+      component: SpotifyPageBrowseFeaturedPlaylists,
+      meta: { show_progress: true }
+    },
+    {
+      path: '/music/spotify/artists/:artist_id',
+      name: 'Spotify Artist',
+      component: SpotifyPageArtist,
+      meta: { show_progress: true }
+    },
+    {
+      path: '/music/spotify/albums/:album_id',
+      name: 'Spotify Album',
+      component: SpotifyPageAlbum,
+      meta: { show_progress: true }
+    },
+    {
+      path: '/music/spotify/playlists/:user_id/:playlist_id',
+      name: 'Spotify Playlist',
+      component: SpotifyPagePlaylist,
+      meta: { show_progress: true }
+    },
+    {
+      path: '/search/spotify',
+      name: 'Spotify Search',
+      component: SpotifyPageSearch
+    }
+  ],
+  scrollBehavior (to, from, savedPosition) {
+    if (savedPosition) {
+      return new Promise((resolve, reject) => {
+        setTimeout(() => {
+          resolve(savedPosition)
+        }, 500)
+      })
+    } else {
+      return { x: 0, y: 0 }
+    }
+  }
+})
+
+router.beforeEach((to, from, next) => {
+  if (store.state.show_burger_menu) {
+    store.commit(types.SHOW_BURGER_MENU, false)
+    next(false)
+  } else {
+    next()
+  }
+})

web-src/src/store/index.js

@@ -0,0 +1,154 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import * as types from './mutation_types'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+    config: {
+      'websocket_port': 0,
+      'version': '',
+      'buildoptions': [ ]
+    },
+    library: {
+      'artists': 0,
+      'albums': 0,
+      'songs': 0,
+      'db_playtime': 0,
+      'updating': false
+    },
+    audiobooks_count: { },
+    podcasts_count: { },
+    outputs: [ ],
+    player: {
+      'state': 'stop',
+      'repeat': 'off',
+      'consume': false,
+      'shuffle': false,
+      'volume': 0,
+      'item_id': 0,
+      'item_length_ms': 0,
+      'item_progress_ms': 0
+    },
+    queue: {
+      'version': 0,
+      'count': 0,
+      'items': [ ]
+    },
+    spotify: {},
+
+    spotify_new_releases: [],
+    spotify_featured_playlists: [],
+
+    notifications: {
+      'next_id': 1,
+      'list': []
+    },
+    recent_searches: [],
+
+    hide_singles: false,
+    show_only_next_items: false,
+    show_burger_menu: false
+  },
+
+  getters: {
+    now_playing: state => {
+      var item = state.queue.items.find(function (item) {
+        return item.id === state.player.item_id
+      })
+      return (item === undefined) ? {} : item
+    }
+  },
+
+  mutations: {
+    [types.UPDATE_CONFIG] (state, config) {
+      state.config = config
+    },
+    [types.UPDATE_LIBRARY_STATS] (state, libraryStats) {
+      state.library = libraryStats
+    },
+    [types.UPDATE_LIBRARY_AUDIOBOOKS_COUNT] (state, count) {
+      state.audiobooks_count = count
+    },
+    [types.UPDATE_LIBRARY_PODCASTS_COUNT] (state, count) {
+      state.podcasts_count = count
+    },
+    [types.UPDATE_OUTPUTS] (state, outputs) {
+      state.outputs = outputs
+    },
+    [types.UPDATE_PLAYER_STATUS] (state, playerStatus) {
+      state.player = playerStatus
+    },
+    [types.UPDATE_QUEUE] (state, queue) {
+      state.queue = queue
+    },
+    [types.UPDATE_SPOTIFY] (state, spotify) {
+      state.spotify = spotify
+    },
+    [types.SPOTIFY_NEW_RELEASES] (state, newReleases) {
+      state.spotify_new_releases = newReleases
+    },
+    [types.SPOTIFY_FEATURED_PLAYLISTS] (state, featuredPlaylists) {
+      state.spotify_featured_playlists = featuredPlaylists
+    },
+    [types.ADD_NOTIFICATION] (state, notification) {
+      if (notification.topic) {
+        var index = state.notifications.list.findIndex(elem => elem.topic === notification.topic)
+        if (index >= 0) {
+          state.notifications.list.splice(index, 1, notification)
+          return
+        }
+      }
+      state.notifications.list.push(notification)
+    },
+    [types.DELETE_NOTIFICATION] (state, notification) {
+      const index = state.notifications.list.indexOf(notification)
+
+      if (index !== -1) {
+        state.notifications.list.splice(index, 1)
+      }
+    },
+    [types.ADD_RECENT_SEARCH] (state, query) {
+      var index = state.recent_searches.findIndex(elem => elem === query)
+      if (index >= 0) {
+        state.recent_searches.splice(index, 1)
+      }
+
+      state.recent_searches.splice(0, 0, query)
+
+      if (state.recent_searches.length > 5) {
+        state.recent_searches.pop()
+      }
+    },
+    [types.HIDE_SINGLES] (state, hideSingles) {
+      state.hide_singles = hideSingles
+    },
+    [types.SHOW_ONLY_NEXT_ITEMS] (state, showOnlyNextItems) {
+      state.show_only_next_items = showOnlyNextItems
+    },
+    [types.SHOW_BURGER_MENU] (state, showBurgerMenu) {
+      state.show_burger_menu = showBurgerMenu
+    }
+  },
+
+  actions: {
+    add_notification ({ commit, state }, notification) {
+      const newNotification = {
+        'id': state.notifications.next_id++,
+        'type': notification.type,
+        'text': notification.text,
+        'topic': notification.topic,
+        'timeout': notification.timeout
+      }
+
+      commit(types.ADD_NOTIFICATION, newNotification)
+
+      if (notification.timeout > 0) {
+        setTimeout(() => {
+          commit(types.DELETE_NOTIFICATION, newNotification)
+        }, notification.timeout)
+      }
+    }
+  }
+})

web-src/src/store/mutation_types.js

@@ -0,0 +1,19 @@
+export const UPDATE_CONFIG = 'UPDATE_CONFIG'
+export const UPDATE_LIBRARY_STATS = 'UPDATE_LIBRARY_STATS'
+export const UPDATE_LIBRARY_AUDIOBOOKS_COUNT = 'UPDATE_LIBRARY_AUDIOBOOKS_COUNT'
+export const UPDATE_LIBRARY_PODCASTS_COUNT = 'UPDATE_LIBRARY_PODCASTS_COUNT'
+export const UPDATE_OUTPUTS = 'UPDATE_OUTPUTS'
+export const UPDATE_PLAYER_STATUS = 'UPDATE_PLAYER_STATUS'
+export const UPDATE_QUEUE = 'UPDATE_QUEUE'
+export const UPDATE_SPOTIFY = 'UPDATE_SPOTIFY'
+
+export const SPOTIFY_NEW_RELEASES = 'SPOTIFY_NEW_RELEASES'
+export const SPOTIFY_FEATURED_PLAYLISTS = 'SPOTIFY_FEATURED_PLAYLISTS'
+
+export const ADD_NOTIFICATION = 'ADD_NOTIFICATION'
+export const DELETE_NOTIFICATION = 'DELETE_NOTIFICATION'
+export const ADD_RECENT_SEARCH = 'ADD_RECENT_SEARCH'
+
+export const HIDE_SINGLES = 'HIDE_SINGLES'
+export const SHOW_ONLY_NEXT_ITEMS = 'SHOW_ONLY_NEXT_ITEMS'
+export const SHOW_BURGER_MENU = 'SHOW_BURGER_MENU'

web-src/src/templates/ContentWithHeading.vue

@@ -0,0 +1,35 @@
+<template>
+  <section class="section">
+    <div class="container">
+      <div class="columns is-centered">
+        <div class="column is-four-fifths">
+          <nav class="level">
+            <!-- Left side -->
+            <div class="level-left">
+              <div class="level-item has-text-centered-mobile">
+                <div>
+                  <slot name="heading-left"></slot>
+                </div>
+              </div>
+            </div>
+
+            <!-- Right side -->
+            <div class="level-right has-text-centered-mobile">
+              <slot name="heading-right"></slot>
+            </div>
+          </nav>
+          <slot name="content"></slot>
+          <div style="margin-top: 16px;">
+            <slot name="footer"></slot>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

web-src/src/webapi/index.js

@@ -0,0 +1,162 @@
+import axios from 'axios'
+import store from '@/store'
+
+axios.interceptors.response.use(function (response) {
+  return response
+}, function (error) {
+  store.dispatch('add_notification', { text: 'Request failed (status: ' + error.request.status + ' ' + error.request.statusText + ', url: ' + error.request.responseURL + ')', type: 'danger' })
+  return Promise.reject(error)
+})
+
+export default {
+  config () {
+    return axios.get('/api/config')
+  },
+
+  library_stats () {
+    return axios.get('/api/library')
+  },
+
+  library_update () {
+    return axios.get('/api/update')
+  },
+
+  library_count (expression) {
+    return axios.get('/api/library/count?expression=' + expression)
+  },
+
+  queue () {
+    return axios.get('/api/queue')
+  },
+
+  queue_clear () {
+    return axios.put('/api/queue/clear')
+  },
+
+  queue_remove (itemId) {
+    return axios.delete('/api/queue/items/' + itemId)
+  },
+
+  queue_move (itemId, newPosition) {
+    return axios.put('/api/queue/items/' + itemId + '?new_position=' + newPosition)
+  },
+
+  queue_add (uri) {
+    return axios.post('/api/queue/items/add?uris=' + uri)
+  },
+
+  player_status () {
+    return axios.get('/api/player')
+  },
+
+  player_play () {
+    return axios.put('/api/player/play')
+  },
+
+  player_playpos (position) {
+    return axios.put('/api/player/play?position=' + position)
+  },
+
+  player_playid (itemId) {
+    return axios.put('/api/player/play?item_id=' + itemId)
+  },
+
+  player_pause () {
+    return axios.put('/api/player/pause')
+  },
+
+  player_next () {
+    return axios.put('/api/player/next')
+  },
+
+  player_previous () {
+    return axios.put('/api/player/previous')
+  },
+
+  player_shuffle (newState) {
+    var shuffle = newState ? 'true' : 'false'
+    return axios.put('/api/player/shuffle?state=' + shuffle)
+  },
+
+  player_consume (newState) {
+    var consume = newState ? 'true' : 'false'
+    return axios.put('/api/player/consume?state=' + consume)
+  },
+
+  player_repeat (newRepeatMode) {
+    return axios.put('/api/player/repeat?state=' + newRepeatMode)
+  },
+
+  player_volume (volume) {
+    return axios.put('/api/player/volume?volume=' + volume)
+  },
+
+  player_output_volume (outputId, outputVolume) {
+    return axios.put('/api/player/volume?volume=' + outputVolume + '&output_id=' + outputId)
+  },
+
+  player_seek (newPosition) {
+    return axios.put('/api/player/seek?position_ms=' + newPosition)
+  },
+
+  outputs () {
+    return axios.get('/api/outputs')
+  },
+
+  output_update (outputId, output) {
+    return axios.put('/api/outputs/' + outputId, output)
+  },
+
+  library_artists () {
+    return axios.get('/api/library/artists?media_kind=music')
+  },
+
+  library_artist (artistId) {
+    return axios.get('/api/library/artists/' + artistId)
+  },
+
+  library_albums (artistId) {
+    if (artistId) {
+      return axios.get('/api/library/artists/' + artistId + '/albums')
+    }
+    return axios.get('/api/library/albums?media_kind=music')
+  },
+
+  library_album (albumId) {
+    return axios.get('/api/library/albums/' + albumId)
+  },
+
+  library_album_tracks (albumId) {
+    return axios.get('/api/library/albums/' + albumId + '/tracks')
+  },
+
+  library_podcasts () {
+    return axios.get('/api/library/albums?media_kind=podcast')
+  },
+
+  library_audiobooks () {
+    return axios.get('/api/library/albums?media_kind=audiobook')
+  },
+
+  library_playlists () {
+    return axios.get('/api/library/playlists')
+  },
+
+  library_playlist (playlistId) {
+    return axios.get('/api/library/playlists/' + playlistId)
+  },
+
+  library_playlist_tracks (playlistId) {
+    return axios.get('/api/library/playlists/' + playlistId + '/tracks')
+  },
+
+  search (searchParams) {
+    return axios.get('/api/search', {
+      params: searchParams
+    })
+  },
+
+  spotify () {
+    return axios.get('/api/spotify')
+  }
+}