velvettear/tabber
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

initial commit

Browse source
This commit is contained in:
Daniel Sommer 2022-01-31 16:36:53 +01:00
commit c2d7333228
27 changed files with 7487 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.gitignore vendored Normal file
View file

@ -0,0 +1,3 @@
node_modules
dist
yarn-error.log

22
.vscode/launch.json vendored Normal file
View file

@ -0,0 +1,22 @@
{
"version": "0.0.1",
"configurations": [
{
"type": "node-terminal",
"request": "launch",
"name": "debug",
"command": "yarn serve"
},
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://ws-dso:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
},
]
}

20
README.md Normal file
View file

@ -0,0 +1,20 @@
# autoscroll
tablature viewer with autoscroll and playback features
## yarn
### setup
```
yarn install
```
### compile and serve with hot-reloads for development
```
yarn run serve
```
### compile, minify and build for production
```
yarn run build
```

25
package.json Normal file
View file

@ -0,0 +1,25 @@
{
"name": "autoscroll",
"author": "Daniel Sommer <daniel.sommer@velvettear.de>",
"license": "MIT",
"version": "0.0.1",
"private": true,
"repository": {
"type": "git",
"url": "https://git.velvettear.de/velvettear/autoscroll.git"
},
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"howler": "^2.2.3",
"remixicon": "^2.5.0",
"vue": "^2.6.14",
"vue-router": "^3.5.3"
},
"devDependencies": {
"@vue/cli-service": "^4.5.0",
"vue-template-compiler": "^2.6.11"
}
}

BIN
public/favicon.ico Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.2 KiB

27
public/index.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lucaburgio/iconoir@master/css/iconoir.css">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
</body>
</html>

60
src/App.vue Normal file
View file

@ -0,0 +1,60 @@
<template>
<div>
<router-view></router-view>
<Footer />
</div>
</template>
<script>
import Footer from "@/components/Footer.vue";
export default {
name: "App",
components: {
Footer,
},
data() {
return {};
},
};
</script>
<style>
html {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
body {
font-family: "Fira Code", monospace;
font-weight: 300;
font-size: 1.5em;
text-align: center;
color: #f1f1f1;
margin: 0;
background: #000000;
}
a {
text-decoration: none;
color: #ff8800;
}
.content {
min-height: 100vh;
display: flex;
flex-direction: column;
}
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background: #3e3e3e99;
}
::-webkit-scrollbar-thumb {
background: #ff880099;
}
::-webkit-scrollbar-thumb:hover {
background: #ffffff99;
}
</style>

BIN
src/assets/img/Billy Idon - Rebel Yell.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 249 KiB

BIN
src/assets/img/Billy Idon - Rebel Yell_scaledwidth560.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 345 KiB

BIN
src/assets/img/Electric Wizard - Funeralopolis.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 470 KiB

BIN
src/assets/img/Electric Wizard - Funeralopolis_inverted.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 444 KiB

BIN
src/assets/img/Fu Manchu - Hell On Wheels.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 298 KiB

BIN
src/assets/img/Led Zeppelin - Kashmir.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 456 KiB

BIN
src/assets/img/Seven Nation Army Tab by The White Stripes _ Songsterr Tabs with Rhythm_cropped.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 207 KiB

BIN
src/assets/img/The Cranberries - Zombie.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 220 KiB

BIN
src/assets/img/The White Stripes - Seven Nation Army.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 167 KiB

7
src/assets/json/Electric Wizard - Funeralopolis.json Normal file
View file

@ -0,0 +1,7 @@
{
"artist": "Electric Wizard",
"title": "Funeralopolis",
"bass": "Electric Wizard - Funeralopolis_inverted.png",
"media": "Electric Wizard - Funeralopolis.mp3",
"duration": 140
}

BIN
src/assets/media/Electric Wizard - Funeralopolis.mp3 Normal file
View file

Binary file not shown.

48
src/components/Footer.vue Normal file
View file

@ -0,0 +1,48 @@
<template>
<footer>
<span>
<a :href="app.url">{{ app.name }}</a>
{{ app.version }} | made with <i class="ri-heart-fill"></i> by
<a :href="author.url">{{ author.name }}</a>
</span>
</footer>
</template>
<script>
import PackageJSON from "../../package.json";
export default {
name: "Heading",
data() {
return {
app: {
name: PackageJSON.name,
version: PackageJSON.version,
url: PackageJSON.repository.url,
},
author: {
name: "velvettear",
url: "https://velvettear.de",
},
};
},
};
</script>
<style scoped>
footer {
display: flex;
position: fixed;
bottom: 0;
justify-content: center;
width: 100%;
text-decoration: none;
font-size: 0.5em;
font-weight: 500;
background: #3e3e3e99;
border-top-width: 1px;
border-top-color: #ff880099;
border-top-style: solid;
padding: 2px;
}
</style>

61
src/components/Heading.vue Normal file
View file

@ -0,0 +1,61 @@
<template>
<div id="heading">
<h1>{{ title }}</h1>
<h2>{{ message }}</h2>
</div>
</template>
<script>
export default {
name: "Heading",
props: {
title: String,
message: String
},
data() {
return {};
},
};
</script>
<style scoped>
#heading {
text-decoration: none;
font-size: 0.5em;
font-weight: 500;
background: #3e3e3e99;
border-bottom-width: 1px;
border-bottom-color: #ff880099;
border-bottom-style: solid;
padding: 2px;
}
#heading-center {
flex-grow: 1;
}
#instrument {
display: relative;
float: left;
font-size: 2em;
font-weight: 900;
margin: 0;
padding: 0;
}
h1 {
font-size: 2em;
font-weight: 900;
margin: 0;
padding: 0;
}
h2 {
font-size: 1.25em;
font-weight: 600;
margin: 0;
padding: 0;
}
h3 {
font-size: 1em;
font-weight: 300;
margin: 0;
padding: 0;
}
</style>

109
src/components/List.vue Normal file
View file

@ -0,0 +1,109 @@
<template>
<div class="content">
<Heading title="welcome!" message="choose your song below" />
<div id="table">
<table>
<th>artist</th>
<th>title</th>
<tr
v-for="entry in getEntries()"
:key="entry.id"
v-on:click="link(entry)"
>
<td class="artist">
{{ entry.artist }}
</td>
<td class="title">{{ entry.title }}</td>
</tr>
</table>
</div>
</div>
</template>
<script>
import Config from "../config.json";
import Heading from "@/components/Heading.vue";
export default {
name: "List",
components: {
Heading,
},
data() {
return {};
},
methods: {
getEntries: function () {
var entries = [];
var tabs = Config.tabfiles;
for (var counter = 0; counter < tabs.length; counter++) {
var tab = require("@/assets/json/" + tabs[counter]);
tab.id = String(counter);
entries.push(tab);
}
var entries = entries.sort(function (a, b) {
if (a.artist < b.artist) {
return -1;
}
if (a.artist > b.artist) {
return 1;
}
return 0;
});
return entries;
},
link: function (entry) {
if (!entry) {
return;
}
this.$router.push({ path: entry.id, query: entry });
},
},
};
</script>
<style scoped>
#table {
margin-top: 2.5%;
}
.artist {
text-align: left;
padding-right: 12px;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.title {
text-align: right;
padding-left: 12px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
table {
margin: auto;
border-collapse: collapse;
cursor: default;
}
table,
th,
td {
padding: 6px;
}
th {
font-weight: 600;
}
td {
font-size: 0.75em;
font-weight: 300;
}
tr {
background-color: #1e1e1e99;
cursor: pointer;
}
tr:nth-child(even) {
background-color: #3e3e3e99;
}
tr:hover {
background: #ffffff99;
color: #000000;
}
</style>

264
src/components/Tab.vue Normal file
View file

@ -0,0 +1,264 @@
<template>
<div class="content">
<Heading :title="entry.artist" :message="entry.title" />
<img id="tab" v-if="entry[instrument]" :src="loadImage()" ref="tab" />
<div id="notabs" v-if="!entry[instrument]">
<span>sorry, no tabs available</span>
</div>
<div id="controls" ref="controls">
<button class="controls-button" v-on:click="toggleScroll()">
<i
v-bind:class="{
'ri-play-fill': !scrolling,
'ri-stop-fill': scrolling,
}"
></i>
</button>
</div>
</div>
</template>
<script>
import Heading from "@/components/Heading.vue";
export default {
name: "Tab",
components: {
Heading,
},
data() {
return {
scrolling: false,
entry: this.$route.query,
instrument: "bass",
};
},
methods: {
loadImage() {
if (!this.entry[this.instrument]) {
return;
}
return require("@/assets/img/" + this.entry[this.instrument]);
},
sleep(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
},
async toggleScroll() {
this.scrolling = !this.scrolling;
var pageEnd = document.documentElement.scrollHeight;
var pageLeft = pageEnd - this.getViewPortMax();
var percentagePageLeft = pageLeft / (pageEnd / 100);
var percentageDurationLeft = ((this.entry.duration * 1000) / 100) * percentagePageLeft;
console.log("DURATION LEFT " + this.entry.duration * (percentagePageLeft / 100))
var sleep = 10;
var sleeps = percentageDurationLeft / sleep;
var scrollHeight = pageLeft / sleeps;
var heightDiff = 1 - scrollHeight;
if (heightDiff >= 0) {
scrollHeight = 1;
console.log("FIX HEIGHT BY: " + heightDiff)
sleep = sleep * (1 + heightDiff);
console.log("NEW SLEEP: " + sleep)
}
var scrolls = 0;
var start = new Date();
while (this.scrolling) {
var scrollTarget = this.getViewPortMax() + scrollHeight;
if (scrollTarget >= pageEnd) {
window.scrollTo(0, pageEnd);
this.scrolling = false;
var time = new Date().getTime() - start.getTime();
console.log(
"end of page reached after " +
time +
"ms - scrolls: " +
scrolls +
" times"
);
return;
}
scrolls++;
window.scrollBy(0, scrollHeight);
await this.sleep(sleep);
}
this.scrolling = false;
return;
var viewPortPercent = window.innerHeight / 100;
console.log("SCROLL PERCENT: " + viewPortPercent);
var percentagePageLeft = pageLeft / (pageEnd / 100);
console.log("percentage to scroll: " + percentagePageLeft + "%");
var scrollsNeeded = pageLeft / viewPortPercent;
console.log("SCROLLS NEEDED: " + scrollsNeeded);
var sleep = (this.entry.duration * 1000) / scrollsNeeded;
console.log("SLEEP PER SCROLL: " + sleep + "ms");
// var durationLeft =
// ((this.entry.duration * 1000) / 1000) * percentagePageLeft;
// console.log("duration left: " + durationLeft + "ms");
// var scrollPercentage = this.getViewPortMax() / 1000;
// console.log("SCROLL BY: " + scrollPercentage);
// var scrollsNeeded = pageLeft / scrollPercentage;
// console.log("1% scrolls: " + scrollsNeeded);
// var sleep = durationLeft / scrollsNeeded;
// console.log("SLEEP:" + sleep);
// console.log("TOTAL TIME: " + sleep * scrollsNeeded);
var scrolls = 0;
var start = new Date();
while (this.scrolling) {
var innerstart = new Date();
var scrollTarget = this.getViewPortMax() + viewPortPercent;
if (scrollTarget >= pageEnd) {
window.scrollTo(0, pageEnd);
this.scrolling = false;
var time = new Date().getTime() - start.getTime();
console.log(
"end of page reached after " +
time +
"ms - scrolls: " +
scrolls +
" times" +
" - DIFFERENCE: "
);
return;
}
scrolls++;
window.scrollBy(0, viewPortPercent);
await this.sleep(sleep);
}
// window.scrollBy(0, scrollPercentage);
// await this.sleep(sleep);
// if (scrolls >= scrollsNeeded) {
// var time = new Date().getTime() - start.getTime();
// console.log(
// "end of page reached after " +
// time +
// "ms - scrolls: " +
// scrolls +
// " times" +
// " - DIFFERENCE: " +
// (time - durationLeft)
// );
// return;
// }
},
getViewPortMax() {
return window.innerHeight + window.scrollY;
},
},
};
</script>
<style scoped>
#tab {
height: auto;
width: 85%;
margin-left: auto;
margin-right: auto;
margin-top: 5%;
margin-bottom: 5%;
}
#notabs {
margin: 5%;
font-size: 1.5em;
font-weight: 900;
}
#controls {
display: inline-flex;
justify-content: center;
flex-direction: column;
align-items: center;
position: fixed;
top: 50%;
background: #3e3e3e99;
color: #ff8800;
border-style: solid;
border-width: 1px;
border-color: #ff880099;
transform: translateY(-50%);
}
.fade-enter-active,
.fade-leave-active {
transition: transform 2s;
}
.fade-enter,
.fade-leave-to {
transform: translateX(-100%);
}
.controls-button {
display: flex;
justify-content: center;
align-items: center;
border: none;
border-radius: 2px;
margin: 6px;
background: #00000000;
color: #ff8800;
font-size: 1em;
font-weight: 900;
width: 32px;
height: 32px;
}
.controls-button:hover {
border: none;
background: #3e3e3e99;
color: #ffffff;
cursor: pointer;
}
@keyframes blink {
0% {
background: #ffffff;
}
50% {
background: #008800;
}
100% {
background: #ffffff;
}
}
.blink {
animation-name: blink;
animation-duration: 5s;
}
.controls-active {
-webkit-transform: scale(2);
-moz-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
}
.controls-inactive {
-webkit-transition: -webkit-transform 0.2s ease-out;
-moz-transition: -moz-transform 0.2s ease-out;
-o-transition: -o-transform 0.2s ease-out;
-ms-transition: -ms-transform 0.2s ease-out;
transition: transform 0.2s ease-out;
}
.control-button {
background-color: #4caf50; /* Green */
border: none;
color: white;
text-align: center;
text-decoration: none;
display: flex;
max-width: 100%;
}
</style>

19
src/config.json Normal file
View file

@ -0,0 +1,19 @@
{
"tabfiles": [
"Electric Wizard - Funeralopolis.json"
],
"tabs": [
{
"artist": "Electric Wizard",
"title": "Funeralopolis",
"instrument": "bass",
"tabs": "Electric Wizard - Funeralopolis_inverted.png"
},
{
"artist": "Fu Manchu",
"title": "Hell On Wheels",
"instrument": "bass",
"tabs": "Fu Manchu - Hell On Wheels.png"
}
]
}

11
src/main.js Normal file
View file

@ -0,0 +1,11 @@
import Vue from 'vue'
import App from './App.vue'
import router from './router/router.js'
import '../node_modules/remixicon/fonts/remixicon.css'
Vue.config.productionTip = false
const app = new Vue({
router,
render: h => h(App),
}).$mount('#app')

19
src/router/router.js Normal file
View file

@ -0,0 +1,19 @@
import Vue from 'vue';
import VueRouter from 'vue-router';
import List from '@/components/List.vue'
import Tab from '@/components/Tab.vue'
Vue.use(VueRouter);
const routes = [
{ path: '/', name: 'List', component: List },
{ path: '/:id', name: 'Tab', component: Tab }
];
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router;

3
vue.config.js Normal file
View file

@ -0,0 +1,3 @@
module.exports = {
runtimeCompiler: true
}

6789
yarn.lock Normal file
View file

File diff suppressed because it is too large Load diff