Skip to content

Commit

Permalink
Middle Song Player Layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@choptop84
choptop84 committed Apr 29, 2024
1 parent 56269b9 commit 47162f1
Show file tree
Hide file tree
Showing 4 changed files with 132 additions and 2 deletions.
32 changes: 32 additions & 0 deletions player/Layout.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@ export class SongPlayerLayout {
div.visualizer {
transform: scale(1);
}
.timelineContainer {
transform: translateX(0);
}
`,
"top": `
.songPlayerContainer {
Expand All @@ -25,6 +28,9 @@ export class SongPlayerLayout {
div.visualizer {
transform: scale(1);
}
.timelineContainer {
transform: translateX(0);
}
`,
"shitbox4": `
.songPlayerContainer {
Expand All @@ -36,6 +42,9 @@ export class SongPlayerLayout {
div.visualizer {
transform: skew(30deg,20deg) scale(0.5);
}
.timelineContainer {
transform: translateX(0);
}
`,
"boxbeep": `
.songPlayerContainer {
Expand All @@ -47,6 +56,9 @@ export class SongPlayerLayout {
div.visualizer {
transform: scale(-1);
}
.timelineContainer {
transform: translateX(0);
}
`,
"piano": `
.songPlayerContainer {
Expand All @@ -58,6 +70,9 @@ export class SongPlayerLayout {
div.visualizer {
transform: scale(1);
}
.timelineContainer {
transform: translateX(0);
}
`,
"vertical": `
.songPlayerContainer {
Expand All @@ -69,6 +84,23 @@ export class SongPlayerLayout {
div.visualizer {
transform: scale(1);
}
.timelineContainer {
transform: translateX(0);
}
`,
"middle": `
.songPlayerContainer {
display:grid;
grid-template-areas: 'visualizer visualizer' 'control-center control-center';
grid-template-rows: 92.6vh 7.4vh;
grid-template-columns: minmax(0px,0px);
}
div.visualizer {
transform: scale(1);
}
.timelineContainer {
transform: translateX(50vw);
}
`,
}

Expand Down
35 changes: 35 additions & 0 deletions player/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,6 +156,35 @@ import { SongPlayerLayout } from "./Layout";
`),
div("Vertical"),
),
label({class: "layout-option",style:"width:90px; color: var(--secondary-text)"},
input({type: "radio", name: "spLayout", value: "middle", style:"display:none;"}),
SVG(`\
<svg viewBox="-1 -1 28 22">
<rect x="0" y="0" width="26" height="20" fill="none" stroke="currentColor" stroke-width="1"/>
<rect x="4" y="3" width="8" height="1" fill="currentColor"/>
<rect x="2" y="3" width="1" height="9" fill="currentColor"/>
<rect x="13" y="3" width="1" height="9" fill="currentColor"/>
<rect x="23" y="3" width="1" height="9" fill="currentColor"/>
<rect x="4" y="11" width="8" height="1" fill="currentColor"/>
<rect x="4" y="5" width="8" height="1" fill="currentColor"/>
<rect x="4" y="7" width="8" height="1" fill="currentColor"/>
<rect x="4" y="9" width="8" height="1" fill="currentColor"/>
<rect x="15" y="3" width="7" height="1" fill="currentColor"/>
<rect x="15" y="11" width="7" height="1" fill="currentColor"/>
<rect x="15" y="5" width="7" height="1" fill="currentColor"/>
<rect x="15" y="7" width="7" height="1" fill="currentColor"/>
<rect x="15" y="9" width="7" height="1" fill="currentColor"/>
<rect x="2" y="15" width="22" height="3" fill="currentColor"/>
</svg>
`),
div("Middle"),
),
);

const layoutContainer: HTMLDivElement = div({class: "prompt noSelection", style: "width: 300px; margin: auto;text-align: center;background: var(--editor-background);border-radius: 15px;border: 4px solid var(--ui-widget-background);color: var(--primary-text);padding: 20px;display: flex;flex-direction: column;position: relative;box-shadow: 5px 5px 20px 10px rgba(0,0,0,0.5);"},
Expand Down Expand Up @@ -541,12 +570,18 @@ import { SongPlayerLayout } from "./Layout";
timelineBarProgress.style.width = Math.round((maxPer*pos/maxPer)*100)+"%";

const usePiano = ((<any> _form.elements)["spLayout"].value == "piano") || (window.localStorage.getItem("spLayout") == "piano");
const useMiddle = ((<any> _form.elements)["spLayout"].value == "middle") || (window.localStorage.getItem("spLayout") == "middle");
const useVertical = ((<any> _form.elements)["spLayout"].value == "vertical") || (window.localStorage.getItem("spLayout") == "vertical");
if (usePiano) {
playhead.style.left = (timelineWidth * pos) + "px";
timelineContainer.style.left = "-"+(timelineWidth * pos) + "px";
timelineContainer.style.bottom = "0";
timelineContainer.style.top = "0";
} else if (useMiddle) {
playhead.style.left = (timelineWidth * pos) + "px";
timelineContainer.style.left = "-"+(timelineWidth * pos) + "px";
timelineContainer.style.bottom = "0";
timelineContainer.style.top = "0";
} else if (useVertical) {
const boundingRect = visualizationContainer.getBoundingClientRect();
const o = boundingRect.height / 2;
Expand Down
65 changes: 64 additions & 1 deletion website/player/beepbox_player.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29500,6 +29500,9 @@ var beepbox = (function (exports) {
div.visualizer {
transform: scale(1);
}
.timelineContainer {
transform: translateX(0);
}
`,
"top": `
.songPlayerContainer {
Expand All @@ -29511,6 +29514,9 @@ var beepbox = (function (exports) {
div.visualizer {
transform: scale(1);
}
.timelineContainer {
transform: translateX(0);
}
`,
"shitbox4": `
.songPlayerContainer {
Expand All @@ -29522,6 +29528,9 @@ var beepbox = (function (exports) {
div.visualizer {
transform: skew(30deg,20deg) scale(0.5);
}
.timelineContainer {
transform: translateX(0);
}
`,
"boxbeep": `
.songPlayerContainer {
Expand All @@ -29533,6 +29542,9 @@ var beepbox = (function (exports) {
div.visualizer {
transform: scale(-1);
}
.timelineContainer {
transform: translateX(0);
}
`,
"piano": `
.songPlayerContainer {
Expand All @@ -29544,6 +29556,9 @@ var beepbox = (function (exports) {
div.visualizer {
transform: scale(1);
}
.timelineContainer {
transform: translateX(0);
}
`,
"vertical": `
.songPlayerContainer {
Expand All @@ -29555,6 +29570,23 @@ var beepbox = (function (exports) {
div.visualizer {
transform: scale(1);
}
.timelineContainer {
transform: translateX(0);
}
`,
"middle": `
.songPlayerContainer {
display:grid;
grid-template-areas: 'visualizer visualizer' 'control-center control-center';
grid-template-rows: 92.6vh 7.4vh;
grid-template-columns: minmax(0px,0px);
}
div.visualizer {
transform: scale(1);
}
.timelineContainer {
transform: translateX(50vw);
}
`,
};
SongPlayerLayout._styleElement = document.head.appendChild(HTML.style({ type: "text/css" }));
Expand Down Expand Up @@ -29670,7 +29702,31 @@ var beepbox = (function (exports) {

<rect x="2" y="15" width="22" height="3" fill="currentColor"/>
</svg>
`), div("Vertical")));
`), div("Vertical")), label({ class: "layout-option", style: "width:90px; color: var(--secondary-text)" }, input({ type: "radio", name: "spLayout", value: "middle", style: "display:none;" }), SVG(`\
<svg viewBox="-1 -1 28 22">
<rect x="0" y="0" width="26" height="20" fill="none" stroke="currentColor" stroke-width="1"/>
<rect x="4" y="3" width="8" height="1" fill="currentColor"/>

<rect x="2" y="3" width="1" height="9" fill="currentColor"/>

<rect x="13" y="3" width="1" height="9" fill="currentColor"/>

<rect x="23" y="3" width="1" height="9" fill="currentColor"/>

<rect x="4" y="11" width="8" height="1" fill="currentColor"/>
<rect x="4" y="5" width="8" height="1" fill="currentColor"/>
<rect x="4" y="7" width="8" height="1" fill="currentColor"/>
<rect x="4" y="9" width="8" height="1" fill="currentColor"/>

<rect x="15" y="3" width="7" height="1" fill="currentColor"/>
<rect x="15" y="11" width="7" height="1" fill="currentColor"/>
<rect x="15" y="5" width="7" height="1" fill="currentColor"/>
<rect x="15" y="7" width="7" height="1" fill="currentColor"/>
<rect x="15" y="9" width="7" height="1" fill="currentColor"/>

<rect x="2" y="15" width="22" height="3" fill="currentColor"/>
</svg>
`), div("Middle")));
const layoutContainer = div({ class: "prompt noSelection", style: "width: 300px; margin: auto;text-align: center;background: var(--editor-background);border-radius: 15px;border: 4px solid var(--ui-widget-background);color: var(--primary-text);padding: 20px;display: flex;flex-direction: column;position: relative;box-shadow: 5px 5px 20px 10px rgba(0,0,0,0.5);" }, div({ class: "promptTitle" }, h2({ class: "layoutExt", style: "text-align: inherit;" }, ""), h2({ class: "layoutTitle" }, "Layout")), _form, div({ style: "margin-top: 1em;" }, _okayButton), closePrompt);
let titleText = h1({ style: "flex-grow: 1; margin: 0 1px; margin-left: 10px; overflow: hidden;" }, "");
let layoutStuffs = button({ class: "songPlayerLayoutsButton", style: "margin: 0 4px; height: 42px; width: 90px;" }, "Layouts");
Expand Down Expand Up @@ -29944,13 +30000,20 @@ var beepbox = (function (exports) {
let pos = synth.playhead / synth.song.barCount;
timelineBarProgress.style.width = Math.round((maxPer * pos / maxPer) * 100) + "%";
const usePiano = (_form.elements["spLayout"].value == "piano") || (window.localStorage.getItem("spLayout") == "piano");
const useMiddle = (_form.elements["spLayout"].value == "middle") || (window.localStorage.getItem("spLayout") == "middle");
const useVertical = (_form.elements["spLayout"].value == "vertical") || (window.localStorage.getItem("spLayout") == "vertical");
if (usePiano) {
playhead.style.left = (timelineWidth * pos) + "px";
timelineContainer.style.left = "-" + (timelineWidth * pos) + "px";
timelineContainer.style.bottom = "0";
timelineContainer.style.top = "0";
}
else if (useMiddle) {
playhead.style.left = (timelineWidth * pos) + "px";
timelineContainer.style.left = "-" + (timelineWidth * pos) + "px";
timelineContainer.style.bottom = "0";
timelineContainer.style.top = "0";
}
else if (useVertical) {
const boundingRect = visualizationContainer.getBoundingClientRect();
const o = boundingRect.height / 2;
Expand Down
2 changes: 1 addition & 1 deletion website/player/beepbox_player.min.js
View file

Large diffs are not rendered by default.

0 comments on commit 47162f1

Please sign in to comment.