vue-jukebox

[{"_1":2,"_176":-5,"_177":-5},"loaderData",{"_3":4,"_13":14,"_21":22,"_155":156},"root",{"_5":-5,"_6":-7,"_7":8,"_9":-7,"_10":11,"_12":-7},"currentUser","primaryEmail","siteVerification","6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI","toast","enableDev",false,"incidentStatus","routes/_layout",{"_15":-5,"_16":17,"_18":17,"_19":11,"_20":11},"username","isAskGordonEnabled",true,"isUsingNewTemplate","showMinimalLanding","showHoneypotTrap","routes/_layout.r.$namespace.$reponame",{"_23":24,"_25":-5,"_26":11,"_27":11,"_28":29,"_30":31,"_32":-5,"_33":11,"_34":35,"_84":85,"_108":109,"_148":-5,"_149":11,"_150":17,"_151":11,"_152":-5,"_153":154},"canonicalUrl","https://hub.docker.com/r/mimicmobile/flask-vue-jukebox/tags","mcpServer","canSeeDockerfile","canSeeAutobuilds","namespace","mimicmobile","reponame","flask-vue-jukebox","cloudBuildSource","isAutobuildsAvailable","repo",{"_36":37,"_38":39,"_41":42,"_43":44,"_45":11,"_46":47,"_48":49,"_50":51,"_53":31,"_28":29,"_54":55,"_56":40,"_57":58,"_59":60,"_61":62,"_63":-5,"_64":58,"_65":66,"_67":11,"_68":29,"_69":70,"_75":17,"_76":77,"_81":29,"_82":83},"categories",[],"content_types",[40],"image","date_registered","2018-10-11T20:48:01.599271Z","description","Jukebox backend that serves paginated song lists and encoded mp3 links","is_private","last_updated","2022-04-11T00:50:49.338536Z","last_modified","2024-10-16T13:48:34.145251Z","media_types",[52],"application/vnd.docker.container.image.v1+json","name","pull_count",535,"repository_type","star_count",0,"status",1,"status_description","active","source","collaborator_count","full_description","# Vue Jukebox\n\n[![Docker Automated buil](https://img.shields.io/docker/automated/mimicmobile/flask-vue-jukebox.svg)](https://hub.docker.com/r/mimicmobile/flask-vue-jukebox/)\n[![Docker Stars](https://img.shields.io/docker/stars/mimicmobile/flask-vue-jukebox.svg)](https://hub.docker.com/r/mimicmobile/flask-vue-jukebox/)\n[![Docker Pulls](https://img.shields.io/docker/pulls/mimicmobile/flask-vue-jukebox.svg)](https://hub.docker.com/r/mimicmobile/flask-vue-jukebox/)\n[![](https://images.microbadger.com/badges/image/mimicmobile/flask-vue-jukebox.svg)](https://microbadger.com/images/mimicmobile/flask-vue-jukebox \"Get your own image badge on microbadger.com\")\n[![](https://images.microbadger.com/badges/commit/mimicmobile/flask-vue-jukebox.svg)](https://microbadger.com/images/mimicmobile/flask-vue-jukebox \"Get your own commit badge on microbadger.com\")\n\n\n`vue-jukebox` is a project that is part web component jukebox and part Python backend service.\n\nIt can be used as either a standalone web component or as a vue component\n\n## Features\n- Run directly as a web component in any project, vue or otherwise.\n- Encode mp3 links to help obfuscate\n- Randomize list of songs\n- Keyboard shortcuts to control playback (right, left, space)\n\n## Screenshots\n

\n\n## TODO\n- Instantiate component with configuration props\n- Customize colors, logo and background, etc\n- Allow JSON path to be provided for users not intending to use backend service\n\n## Web component \nThe web component can be loaded into your project by including the required dependencies and the juke-box element itself.\n```html\n\n\n \n \n vue-jukebox\n\n \n \n \n \n\n \n \n \n \n\n\n```\n### Getting started\nYou can build a version of the above example HTML file with all the required dependencies by running the `build_wc.sh` script!\n\n#### Steps\n\nInstall `@vue/cli` and `@vue/web-component-wrapper`\n\n npm install -g @vue/cli @vue/web-component-wrapper\nInstall dependencies\n\n npm install\nBuild web component\n\n ./build_wc.sh\nNext copy necessary files and directories from dist/ (`juke-box.min.js` `fonts/` `img/`) into your project.\n\nIf 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.\n\n## Vue component\nTODO\n\n## Backend service\nService 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/`\n\n### Docker\nOptionally modify `server/variables.env` and then build your container\n```bash\ndocker run --rm \\\n-p 5001:5001 \\\n-v /tmp/static/:/usr/src/app/static/ \\\n--env-file server/variables.env \\\n--name flask-vue-jukebox mimicmobile/flask-vue-jukebox:latest\n```\n\nMake sure to provide a static files volume to the container under `/usr/src/app/static`\n\n_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._\n\n\n## Serving MP3s\nSongs should be put in the static files volume/directory under `/usr/src/app/static/mp3s/`\n\nThe mp3s directory will automatically create a sqlite db on service start.\n\n## License\n\n Copyright 2018 Mimic Mobile Limited\n\n Licensed under the Apache License, Version 2.0 (the \"License\");\n you may not use this file except in compliance with the License.\n You may obtain a copy of the License at\n\n http://www.apache.org/licenses/LICENSE-2.0\n\n Unless required by applicable law or agreed to in writing, software\n distributed under the License is distributed on an \"AS IS\" BASIS,\n WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n See the License for the specific language governing permissions and\n limitations under the License.\n","has_starred","hub_user","immutable_tags_settings",{"_71":11,"_72":73},"enabled","rules",[74],".*","is_automated","permissions",{"_78":17,"_79":11,"_80":11},"read","write","admin","user","storage_size",1587648381,"orgData",{"_86":87,"_88":89,"_90":91,"_92":29,"_93":94,"_95":96,"_97":94,"_98":99,"_100":101,"_102":103,"_104":105,"_106":105,"_107":17},"id","1229787760494e33a1af99dab0d089ed","uuid","12297877-6049-4e33-a1af-99dab0d089ed","type","organization","orgname","full_name","Mimic Mobile","location","Toronto","company","profile_url","http://www.mimic.ca","date_joined","2018-01-12T09:46:04.934004Z","gravatar_url","https://www.gravatar.com/avatar/25795e15ff454520bd7c917317af2c8b?s=80&r=g&d=mm","gravatar_email","","badge","is_active","recentTags",[110],{"_111":40,"_112":113,"_114":115,"_86":116,"_117":118,"_46":135,"_136":137,"_138":139,"_140":52,"_53":141,"_142":143,"_144":126,"_145":135,"_146":62,"_147":17},"content_type","creator",2599396,"full_size",362446499,37303034,"images",[119],{"_120":121,"_122":123,"_124":105,"_125":126,"_127":128,"_129":130,"_131":105,"_132":-5,"_133":115,"_59":62,"_134":-5},"architecture","amd64","digest","sha256:58ff49267651c6545de88f868daa94cbf7b15d6d3e7600a9dfc5cde855905585","features","last_pulled","2026-09-16T15:48:08.15631887Z","last_pushed","2022-04-11T00:50:50Z","os","linux","os_features","os_version","size","variant","2022-04-11T00:50:49.226414Z","last_updater",184287,"last_updater_username","jcorcoran","media_type","latest","repository",6138112,"tag_last_pulled","tag_last_pushed","tag_status","v2","sbxKitMetadata","isPotentialSpam","isHubSbxKitsEnabled","displaySecurityMetadata","tagAttestations","tagsHaveAttestations",[],"routes/_layout.r.$namespace.$reponame.tags",{"_34":157,"_164":165,"_153":174,"_175":11},{"_36":158,"_38":159,"_41":42,"_43":44,"_45":11,"_46":47,"_48":49,"_50":160,"_53":31,"_28":29,"_54":55,"_56":40,"_57":58,"_59":60,"_61":62,"_63":-5,"_64":58,"_65":66,"_67":11,"_68":29,"_69":161,"_75":17,"_76":163,"_81":29,"_82":83},[],[40],[52],{"_71":11,"_72":162},[74],{"_78":17,"_79":11,"_80":11},"tags",{"_166":60,"_167":-5,"_168":-5,"_169":170},"count","next","previous","results",[171],{"_111":40,"_112":113,"_114":115,"_86":116,"_117":172,"_46":135,"_136":137,"_138":139,"_140":52,"_53":141,"_142":143,"_144":126,"_145":135,"_146":62,"_147":17},[173],{"_120":121,"_122":123,"_124":105,"_125":126,"_127":128,"_129":130,"_131":105,"_132":-5,"_133":115,"_59":62,"_134":-5},[],"canDeleteTags","actionData","errors"]

mimicmobile/flask-vue-jukebox

Tags for mimicmobile/flask-vue-jukebox