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
- 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)
- 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
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>You can build a version of the above example HTML file with all the required dependencies by running the build_wc.sh script!
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.
TODO
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/
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:latestMake 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.
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.
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.