Skip to content

A jukebox widget written in Vue with an optional backend service that uses Flask

License

Notifications You must be signed in to change notification settings

mimicmobile/vue-jukebox

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Vue Jukebox

Docker Automated buil Docker Stars Docker Pulls

vue-jukebox is a project that is part web component jukebox and part Python backend service.

It can be used as either a standalone web component or as a vue component

Features

  • Run directly as a web component in any project, vue or otherwise.
  • Encode mp3 links to help obfuscate
  • Randomize list of songs
  • Keyboard shortcuts to control playback (right, left, space)

Screenshots

TODO

  • Instantiate component with configuration props
  • Customize colors, logo and background, etc
  • Allow JSON path to be provided for users not intending to use backend service

Web component

The web component can be loaded into your project by including the required dependencies and the juke-box element itself.

<!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>vue-jukebox</title>

      <style>
        @font-face {
          font-family: 'Arcade';
          src: url('/static/fonts/arcade_classic.ttf') format('truetype');
        }

        @font-face {
          font-family: 'Material Icons';
          font-style: normal;
          font-weight: 400;
          src: local('Material Icons'), local('MaterialIcons-Regular'), url('/static/fonts/material-icons.woff2') format('woff2');
        }

        html {
          background-color: #000;
        }
      </style>
    </head>
    <body>
        <juke-box></juke-box>

        <script type="text/javascript" src="https://unpkg.com/@webcomponents/[email protected]/webcomponents-loader.js"></script>
        <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue.runtime.min.js"></script>
        <script type="text/javascript" src="/juke-box.min.js"></script>
    </body>
</html>

Getting started

You can build a version of the above example HTML file with all the required dependencies by running the build_wc.sh script!

Steps

Install @vue/cli and @vue/web-component-wrapper

npm install -g @vue/cli @vue/web-component-wrapper

Install dependencies

npm install

Build web component

./build_wc.sh

Next copy necessary files and directories from dist/ (juke-box.min.js fonts/ img/) into your project.

If embedding in existing project, you use demo.html as a "basis". Make sure to include the required fonts, juke-box.js, the jukebox image and optionally the polyfill webcomponents javascript library.

Vue component

TODO

Backend service

Service can be started in Docker Compose: docker-compose up or by running ./start.sh. The static volume is by default mounted under /tmp/vue-jukebox/static/

Docker

Optionally modify server/variables.env and then build your container

docker run --rm \
-p 5001:5001 \
-v /tmp/static/:/usr/src/app/static/ \
--env-file server/variables.env \
--name flask-vue-jukebox mimicmobile/flask-vue-jukebox:latest

Make sure to provide a static files volume to the container under /usr/src/app/static

You can serve your entire project from the backend service by creating /usr/src/app/static/index.html. Files in /static/ will be served as requested.

Serving MP3s

Songs should be put in the static files volume/directory under /usr/src/app/static/mp3s/

The mp3s directory will automatically create a sqlite db on service start.

License

Copyright 2018 Mimic Mobile Limited

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.