mod tracker #306

Manually merged
Johann150 merged 19 commits from puniko/FoundKey:feature/mod-tracker into main 2022-12-29 20:38:22 +00:00
Contributor

The scene is dead ;)

Adds a tracked music player (using chiptune2.js and libopenmpt) to the media list in notes

The scene is dead ;) Adds a tracked music player (using chiptune2.js and libopenmpt) to the media list in notes
puniko added 3 commits 2022-12-26 14:53:58 +00:00
ci/woodpecker/pr/lint-foundkey-js Pipeline was successful Details
ci/woodpecker/pr/lint-client Pipeline failed Details
ci/woodpecker/pr/lint-backend Pipeline failed Details
ci/woodpecker/pr/build Pipeline was successful Details
ci/woodpecker/pr/lint-sw Pipeline failed Details
ci/woodpecker/pr/test Pipeline failed Details
4234dfbdbc
retab
Johann150 reviewed 2022-12-26 17:25:43 +00:00
Johann150 left a comment
Owner

Since we're AGPL, just checking that the libopenmpt.js is the source for the wasm file? Otherwise we'd need the source for that wasm file in the repo, or as a git submodule, or maybe use it as an npm library if available.

Since we're AGPL, just checking that the libopenmpt.js is the source for the wasm file? Otherwise we'd need the source for that wasm file in the repo, or as a git submodule, or maybe use it as an npm library if available.
@ -0,0 +1,315 @@
<template>
<div class="mod-player-disabled" v-if="hide" @click="hide = false">
<div>
<b><i class="fas fa-exlamation-triangle"></i> {{ $ts.sensitive }}</b>
Owner

I think you should use i18n.ts instead of $ts because that is not set globally any more. Probably also need to add import { i18n } from '@/i18n';

I think you should use `i18n.ts` instead of `$ts` because that is not set globally any more. Probably also need to add `import { i18n } from '@/i18n';`
Author
Contributor

done

done
puniko marked this conversation as resolved
Author
Contributor

Since we're AGPL, just checking that the libopenmpt.js is the source for the wasm file? Otherwise we'd need the source for that wasm file in the repo, or as a git submodule, or maybe use it as an npm library if available.

https://lib.openmpt.org/libopenmpt/license/

iirc the license has to be included somewhere in code and in docs.

sadly no good and usable npm lib for this. chiptune2.js is modified by myself (especially to event handler stuff and the stuff reading pattern data)

> Since we're AGPL, just checking that the libopenmpt.js is the source for the wasm file? Otherwise we'd need the source for that wasm file in the repo, or as a git submodule, or maybe use it as an npm library if available. https://lib.openmpt.org/libopenmpt/license/ iirc the license has to be included somewhere in code and in docs. sadly no good and usable npm lib for this. chiptune2.js is modified by myself (especially to event handler stuff and the stuff reading pattern data)
Johann150 added the
feature
label 2022-12-26 21:32:24 +00:00
puniko added 2 commits 2022-12-27 13:46:17 +00:00
ci/woodpecker/pr/lint-foundkey-js Pipeline was successful Details
ci/woodpecker/pr/lint-client Pipeline failed Details
ci/woodpecker/pr/lint-backend Pipeline failed Details
ci/woodpecker/pr/build Pipeline was successful Details
ci/woodpecker/pr/lint-sw Pipeline failed Details
ci/woodpecker/pr/test Pipeline failed Details
6c5723c795
colours!!! 🌈
puniko added 2 commits 2022-12-27 14:23:47 +00:00
ci/woodpecker/pr/lint-foundkey-js Pipeline was successful Details
ci/woodpecker/pr/lint-client Pipeline failed Details
ci/woodpecker/pr/lint-backend Pipeline failed Details
ci/woodpecker/pr/build Pipeline was successful Details
ci/woodpecker/pr/lint-sw Pipeline failed Details
ci/woodpecker/pr/test Pipeline failed Details
f383aec1cd
repeat only once and proper handling of track ending
puniko added 1 commit 2022-12-27 14:32:51 +00:00
ci/woodpecker/pr/lint-client Pipeline failed Details
ci/woodpecker/pr/lint-backend Pipeline failed Details
ci/woodpecker/pr/build Pipeline was successful Details
ci/woodpecker/pr/lint-sw Pipeline failed Details
ci/woodpecker/pr/lint-foundkey-js Pipeline was successful Details
ci/woodpecker/pr/test Pipeline failed Details
794298c21c
little cleanup
puniko changed title from WIP: mod tracker to mod tracker 2022-12-27 14:33:30 +00:00
Author
Contributor

@Johann150 please review

@Johann150 please review
Author
Contributor

this is how it looks like btw

this is how it looks like btw
Owner

iirc the license has to be included somewhere in code and in docs.

This is still missing. Please at least put the license as a text file somewhere and reference it in the COPYING file. Also I think as I tried to explain that the wasm file would be considered "object code" under AGPL so we should be able to provide source code for it. Either add that in as a git submodule or its probably also fine if we just link to the original repo also in COPYING.

> iirc the license has to be included somewhere in code and in docs. This is still missing. Please at least put the license as a text file somewhere and reference it in the `COPYING` file. Also I think as I tried to explain that the `wasm` file would be considered "object code" under AGPL so we should be able to provide source code for it. Either add that in as a git submodule or its probably also fine if we just link to the original repo also in `COPYING`.
Johann150 requested review from Johann150 2022-12-27 21:23:06 +00:00
puniko added 1 commit 2022-12-28 08:13:34 +00:00
ci/woodpecker/pr/lint-foundkey-js Pipeline was successful Details
ci/woodpecker/pr/lint-client Pipeline failed Details
ci/woodpecker/pr/lint-backend Pipeline failed Details
ci/woodpecker/pr/build Pipeline was successful Details
ci/woodpecker/pr/lint-sw Pipeline failed Details
ci/woodpecker/pr/test Pipeline failed Details
bffd15daed
add chiptune2 and libopenmpt into COPYING
Author
Contributor

Please at least put the license as a text file somewhere and reference it in the COPYING file. Also I think as I tried to explain that the wasm file would be considered "object code" under AGPL so we should be able to provide source code for it. Either add that in as a git submodule or its probably also fine if we just link to the original repo also in COPYING.

is this ok? bffd15daed

> Please at least put the license as a text file somewhere and reference it in the `COPYING` file. Also I think as I tried to explain that the `wasm` file would be considered "object code" under AGPL so we should be able to provide source code for it. Either add that in as a git submodule or its probably also fine if we just link to the original repo also in `COPYING`. is this ok? https://akkoma.dev/FoundKeyGang/FoundKey/commit/bffd15daedf55f7623d6ebd777a12384274b89d6
Owner

Seems ok to me.
Are there any other concerns re: quality? I'm ok to merge otherwise.

P.S. We might move all external licenses to THIRD-PARTY.md or something later.

Seems ok to me. Are there any other concerns re: quality? I'm ok to merge otherwise. P.S. We might move all external licenses to THIRD-PARTY.md or something later.
Johann150 reviewed 2022-12-28 20:13:45 +00:00
Johann150 left a comment
Owner

Hiding and then showing the player again via the eye symbol leaves it blank. Maybe it should be reset to the start when displaying it again.

I find the styling of the volume slider confusing. At first I thought it works like the "progress bar" that is next to it but was confused why the colors are reversed. Since the two UI elements are next to each other and are both sliders I would expect them to look and operate similarly.

Hiding and then showing the player again via the eye symbol leaves it blank. Maybe it should be reset to the start when displaying it again. I find the styling of the volume slider confusing. At first I thought it works like the "progress bar" that is next to it but was confused why the colors are reversed. Since the two UI elements are next to each other and are both sliders I would expect them to look and operate similarly.
@ -127,1 +130,4 @@
};
const isModule = (file: foundkey.entities.DriveFile): boolean => {
return FILE_EXT_TRACKER_MODULES.filter((ext) => {
Owner

I think this should probably use some instead of filter(...).length > 0.

I think this should probably use [`some`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some) instead of `filter(...).length > 0`.
puniko marked this conversation as resolved
@ -0,0 +11,4 @@
<canvas class="pattern-canvas" ref="displayCanvas"></canvas>
</div>
<div class="controls">
<button class="play" accesskey="P" @click="playPause()">
Owner

I'm not sure about the accesskey attribute. We didn't use it anywhere else. According to MDN browser support is also flaky. I'm personally not familiar with them so wouldn't even know how to use them.

Maybe you would want to use the v-hotkey directive instead? (defined in packages/client/src/directives/hotkey.ts)

I'm not sure about the `accesskey` attribute. We didn't use it anywhere else. According to MDN browser support is also flaky. I'm personally not familiar with them so wouldn't even know how to use them. Maybe you would want to use the `v-hotkey` directive instead? (defined in `packages/client/src/directives/hotkey.ts`)
Author
Contributor

just removed it. v-hotkey can be added later i think

just removed it. v-hotkey can be added later i think
Owner

Sounds good to me. I think hotkeys aren't necessarily required even.

Sounds good to me. I think hotkeys aren't necessarily required even.
puniko marked this conversation as resolved
@ -0,0 +13,4 @@
<div class="controls">
<button class="play" accesskey="P" @click="playPause()">
<i class="fas fa-play" v-if="!playing"></i>
<i class="fas fa-pause" v-if="playing"></i>
Owner

I think this could use v-else.

I think this could use `v-else`.
puniko marked this conversation as resolved
Author
Contributor

Hiding and then showing the player again via the eye symbol leaves it blank. Maybe it should be reset to the start when displaying it again.

ye, i saw that too. can add a toggle function that also reloads the pattern display when it switches from hidden to visible.

I find the styling of the volume slider confusing. At first I thought it works like the "progress bar" that is next to it but was confused why the colors are reversed. Since the two UI elements are next to each other and are both sliders I would expect them to look and operate similarly.

not exactly. since chiptune2.js doesn't have a seek function implemented yet (and i don't have extended it yet due to time lack with one), the progress bar is just for display and doesn't let you seek through the track. i could try to implement seeking and replace the progress bar with a slider. might take a bit tho (yay reading up on libopenmpt docs again)

EDIT: oh wait lol, i actually have added a seek function to chiptune2.js. gonna make the progressbar seekable then. give me a bit

> Hiding and then showing the player again via the eye symbol leaves it blank. Maybe it should be reset to the start when displaying it again. ye, i saw that too. can add a toggle function that also reloads the pattern display when it switches from hidden to visible. > I find the styling of the volume slider confusing. At first I thought it works like the "progress bar" that is next to it but was confused why the colors are reversed. Since the two UI elements are next to each other and are both sliders I would expect them to look and operate similarly. not exactly. since chiptune2.js doesn't have a seek function implemented yet (and i don't have extended it yet due to time lack with one), the progress bar is just for display and doesn't let you seek through the track. i could try to implement seeking and replace the progress bar with a slider. might take a bit tho (yay reading up on libopenmpt docs again) EDIT: oh wait lol, i actually have added a seek function to chiptune2.js. gonna make the progressbar seekable then. give me a bit
puniko added 3 commits 2022-12-28 23:14:58 +00:00
Owner

the progress bar is just for display and doesn't let you seek through the track.

Oh, I didn't notice. 🥴

I mean if you want to that would be welcome too, but I had more in mind that the volume thingy should probably look more like a progress bar.

Or at least like it is right now it is confusing since it is not immediately clear that the green block there is a different kind of green block than in the progress bar. I'm not really sure what a better design of the volume slider would be. But "green rectangle" is definitely confusing.

> the progress bar is just for display and doesn't let you seek through the track. Oh, I didn't notice. 🥴 I mean if you want to that would be welcome too, but I had more in mind that the volume thingy should probably look more like a progress bar. Or at least like it is right now it is confusing since it is not immediately clear that the green block there is a different kind of green block than in the progress bar. I'm not really sure what a better design of the volume slider would be. But "green rectangle" is definitely confusing.
puniko added 1 commit 2022-12-28 23:57:56 +00:00
ci/woodpecker/pr/lint-foundkey-js Pipeline was successful Details
ci/woodpecker/pr/lint-client Pipeline failed Details
ci/woodpecker/pr/lint-backend Pipeline failed Details
ci/woodpecker/pr/build Pipeline was successful Details
ci/woodpecker/pr/lint-sw Pipeline failed Details
ci/woodpecker/pr/test Pipeline failed Details
c39e1671b2
make module seekable
puniko added 1 commit 2022-12-29 00:16:27 +00:00
ci/woodpecker/pr/lint-backend Pipeline failed Details
ci/woodpecker/pr/lint-foundkey-js Pipeline was successful Details
ci/woodpecker/pr/lint-client Pipeline failed Details
ci/woodpecker/pr/build Pipeline was successful Details
ci/woodpecker/pr/lint-sw Pipeline failed Details
ci/woodpecker/pr/test Pipeline failed Details
8a267c5cdc
restyling range inputs
Author
Contributor

the progress bar is just for display and doesn't let you seek through the track.

Oh, I didn't notice. 🥴

I mean if you want to that would be welcome too, but I had more in mind that the volume thingy should probably look more like a progress bar.

did kinda a blend of the two, see attached image (styling range input is pain tbh, -ms -webkit -moz everywhere). idk how to make this look the same on webkit tho.

also made it seekable ;)

can't manage to get pattern display to reappear on unhide (and on seek when stopped, not paused). chiptune2.js doesn't make it trivial to display patterns on a stopped (not paused) track, since it only ever loads the module into libopenmpt on play.
so i think its fine to let it be like this for now and maybe improve on this point on another PR maybe

> > the progress bar is just for display and doesn't let you seek through the track. > > Oh, I didn't notice. 🥴 > > I mean if you want to that would be welcome too, but I had more in mind that the volume thingy should probably look more like a progress bar. did kinda a blend of the two, see attached image (styling range input is pain tbh, -ms -webkit -moz everywhere). idk how to make this look the same on webkit tho. also made it seekable ;) can't manage to get pattern display to reappear on unhide (and on seek when stopped, not paused). chiptune2.js doesn't make it trivial to display patterns on a stopped (not paused) track, since it only ever loads the module into libopenmpt on play. so i think its fine to let it be like this for now and maybe improve on this point on another PR maybe
puniko added 1 commit 2022-12-29 09:37:09 +00:00
ci/woodpecker/pr/lint-foundkey-js Pipeline was successful Details
ci/woodpecker/pr/lint-client Pipeline failed Details
ci/woodpecker/pr/lint-backend Pipeline failed Details
ci/woodpecker/pr/build Pipeline was successful Details
ci/woodpecker/pr/lint-sw Pipeline failed Details
ci/woodpecker/pr/test Pipeline failed Details
6b7f13e8ef
make webkit style range slider the same
Author
Contributor

webkit is a pain 🥴

made the range slider look the same on webkit based browsers too. so from my side, its ready to go @Johann150

webkit is a pain 🥴 made the range slider look the same on webkit based browsers too. so from my side, its ready to go @Johann150
Johann150 reviewed 2022-12-29 19:48:12 +00:00
Johann150 left a comment
Owner

The redesign looks good to me.

The redesign looks good to me.
@ -0,0 +142,4 @@
}
function toggleVisible() {
hide.value = !hide.value;
Owner

The issue with hiding and unhiding still persists. I also noticed that if you hide while its playing it will stop but if you show it again it will continue to play. I tried also calling stop() here but that caused issues.

The issue with hiding and unhiding still persists. I also noticed that if you hide while its playing it will stop but if you show it again it will continue to play. I tried also calling `stop()` here but that caused issues.
Author
Contributor

6998cae7e3 this works, its just... terrible code. and i can't come up with another solution as of now without having to rewrite big chunks of chiptune2 or something

https://akkoma.dev/FoundKeyGang/FoundKey/commit/6998cae7e3a706b00c1b63320750dab279f13e3d this works, its just... terrible code. and i can't come up with another solution as of now without having to rewrite big chunks of chiptune2 or something
puniko marked this conversation as resolved
puniko added 1 commit 2022-12-29 20:01:48 +00:00
ci/woodpecker/pr/lint-client Pipeline failed Details
ci/woodpecker/pr/lint-backend Pipeline failed Details
ci/woodpecker/pr/build Pipeline was successful Details
ci/woodpecker/pr/lint-sw Pipeline failed Details
ci/woodpecker/pr/lint-foundkey-js Pipeline was successful Details
ci/woodpecker/pr/test Pipeline failed Details
79f546d150
stop player on hide/unhide
puniko added 1 commit 2022-12-29 20:15:09 +00:00
puniko added 1 commit 2022-12-29 20:27:22 +00:00
Johann150 approved these changes 2022-12-29 20:33:04 +00:00
Johann150 referenced this issue from a commit 2022-12-29 20:37:04 +00:00
puniko added 1 commit 2022-12-29 20:37:41 +00:00
Author
Contributor

alrightly, i think this is ready. also managed to make the patterns display when seeking while track is stopped

alrightly, i think this is ready. also managed to make the patterns display when seeking while track is stopped
Johann150 manually merged commit ed27f61a4d into main 2022-12-29 20:38:22 +00:00
Sign in to join this conversation.
No reviewers
No Label
feature
fix
upkeep
No Milestone
No Assignees
3 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: FoundKeyGang/FoundKey#306
No description provided.