g4borg/soundboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

code: adding watch command, making rodio play available, switching to fomantic-ui and implementing fullscreen and aspect ratios

Browse Source
This commit is contained in:
Gabor Körber
2024-01-20 21:09:44 +01:00
parent 09ed01b687
commit d2e09ecebc
4 changed files with 171 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
templates/index.jinja
View File

@@ -5,15 +5,48 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.17.11/dist/css/uikit.min.css" />
<script src="https://unpkg.com/jquery@3.7.1/dist/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/fomantic-ui@2.9.3/dist/semantic.min.css">
<script src="https://unpkg.com/fomantic-ui@2.9.3/dist/semantic.min.js"></script>
<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/uikit@3.17.11/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.17.11/dist/js/uikit-icons.min.js"></script>
<title>Play</title>
<title>Soundboard</title>
<script>
function setLandscape() {
if (screen.orientation && screen.orientation.lock) {
screen.orientation.lock('landscape').then(() => {
console.log("Landscape mode activated");
}).catch((error) => {
console.error("Landscape mode failed:", error);
});
} else {
console.log("Screen Orientation API not supported");
}
}
function setPortrait() {
if (screen.orientation && screen.orientation.lock) {
screen.orientation.lock('portrait').then(() => {
console.log("Portrait mode activated");
}).catch((error) => {
console.error("Portrait mode failed:", error);
});
} else {
console.log("Screen Orientation API not supported");
}
}
function toggleFullScreen() {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen().catch((error) => {
console.error("Error attempting to enable full-screen mode:", error);
});
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
}
function play(hash) {
fetch("/play/" + hash);
}
@@ -22,26 +55,72 @@
fetch("/stop");
}
</script>
<style type="text/css">
:root {
--left-column-width: 98px;
/* Define a CSS variable for the width */
}
.left-column {
width: var(--left-column-width) !important;
height: 100%;
position: fixed;
/* Fix the position relative to the viewport */
top: 0;
/* Align the top edge with the top of the viewport */
bottom: 0;
/* Align the bottom edge with the bottom of the viewport */
overflow-y: auto;
/* Add scroll to the left column if content overflows */
background-color: rgb(27, 28, 29);
}
.right-column {
margin-left: var(--left-column-width) !important;
}
</style>
</head>
<body>
<div id="main" class="uk-container">
<div id="categories">
<span class="category">Category 1</span>
<!-- More categories -->
<button class="more">More</button>
</div>
<div class="uk-text-center" uk-grid>
<div id="soundclips">
{% for clip in clips %}
<button class="uk-button uk-button-default" onclick="play('{{clip.hash}}')">{{clip.file_name}}</button>
{% endfor %}
</div>
</div>
<div class="player">
<button onclick="stop()">Stop.</button>
<div class="left-column column fixed">
<div class="ui inverted labeled icon inline vertical compact mini menu" style="min-width: 96.75px;">
<a class="item" onclick="stop()">
<i class="stop icon"></i>
Stop
</a>
<a class="item" onclick="toggleFullScreen()">
<i class="expand layout icon"></i>
Fullscreen
</a>
<a class="item" onclick="setLandscape()">
<i class="tv icon"></i>
Landscape
</a>
<a class="item" onclick="setPortrait()">
<i class="mobile alternate icon"></i>
Portrait
</a>
</div>
</div>
<div class="right-column column">
<div class="ui basic segment">
<div class="ui wrapped compact wrapping spaced /**buttons">
{% for clip in clips %}
<button class="ui {{ loop.cycle('red', 'blue', 'green', 'violet', 'orange') }} basic button"
onclick="play('{{clip.hash}}')">{{clip.file_name}}</button>
{% endfor %}
</div>
</div>
</div>
</div>
</body>
</html>