dakedres/hiss
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mmmm everything

Browse Source
This commit is contained in:
Dakedres
2025-02-04 14:21:03 -07:00
parent b9af38f49d
commit 55795c7cdb
36 changed files with 4544 additions and 556 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
index.html
View File

@@ -1,6 +1,6 @@
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hiss</title>
<!-- start injection -->
<script type="importmap">
{
@@ -11,106 +11,93 @@
}
</script>
<script src="./node_modules/jsmediatags/dist/jsmediatags.min.js"></script>
<script type="module" src="src/index.js"></script>
<script type="module" src="src/main.js"></script>
<!-- end injection -->
<script type="module" src="src/index.js"></script>
<link rel="stylesheet" href="assets/main.css"></link>
<style>
body {
display: flex;
flex-direction: column;
overflow: hidden;
max-height: 100vh;
margin: 0;
}
main {
display: flex;
height: 100%;
}
section {
display: flex;
flex-direction: column;
overflow: hidden;
}
section:not(.open) {
display: none;
}
menu {
margin: 0;
padding: 0;
overflow-y: auto;
overflow-x: hidden;
}
menu li {
display: flex;
flex-direction: row;
list-style-type: none;
height: 28px;
margin: 8px 0;
text-wrap: nowrap;
}
menu li img {
height: 24px;
width: 24px;
}
menu li aside {
display: flex;
flex-direction: column;
}
menu .focus {
color: red;
}
</style>
</head>
<body>
<!-- <section class="controls">
<main data-action-set="main">
<header>
<section id="browser">
<h3 id="track-title">Bocce</h3>
<p id="track-artist">Patricia Taxxon</p>
<header>Browser</header>
<menu data-action-set="browser" id="browser-menu"></menu>
</header>
<nav>
</section>
<section id="queue">
<button id="prev">
<header>Queue</header>
<menu data-action-set="menu" id="queue-menu"></menu>
<svg xmlns="http://www.w3.org/2000/svg" baseProfile="full" version="1.1" viewbox="0 0 120 120" preserveAspectRatio="xMidYMid meet">
<path d="M15,60 L15,60 L60,105 L60,15 L15,60 M60,60 L60,60 L105,15 L105,105 L60,60 "/>
</svg>
</button>
<button id="playpause">
<svg xmlns="http://www.w3.org/2000/svg" baseProfile="full" version="1.1" viewbox="0 0 105 120" preserveAspectRatio="xMidYMid meet">
<path id="pause-icon" d="M15,15 L15,15 L15,105 L45,105 L45,15 L15,15 M60,15 L60,15 L60,105 L90,105 L90,15 L60,15 "/>
<path id="play-icon" d="M30,15 L30,15 L30,105 L90,60 L30,15 "/>
</svg>
</button>
<button id="next">
<svg xmlns="http://www.w3.org/2000/svg" baseProfile="full" version="1.1" viewbox="0 0 120 120" preserveAspectRatio="xMidYMid meet">
<path d="M60,60 L60,60 L15,105 L15,15 L60,60 M105,60 L105,60 L60,15 L60,105 L105,60 " />
</svg>
</button>
</nav>
</section> -->
<svg viewBox="0 0 100 2" xmlns="http://www.w3.org/2000/svg" id="tab-indicator">
<!-- No dashes nor gaps -->
<line x1="0" y1="0" x2="100" y2="0" stroke-width="3" id="tab-indicator-line" />
</svg>
<!-- <header id="tabs"></header> -->
<!-- <header>
<b>Browser</b>
</header> -->
<main id="main">
<section class="player">
</section>
<section id="player">
<img id="track-cover">
<cite id="track-title">No Track Selected</cite>
<cite id="track-artist">Unknown Artist</cite>
<cite id="track-title"></cite>
<cite id="track-artist"></cite>
<code id="timestamp">--:--</code>
<code id="track-length">--:--</code>
</section>
<section class="browser">
<header>
<h4>Browser</h4>
</header>
<menu id="browser"></menu>
</section>
<section class="queue">
<header>
<h4>Queue</h4>
</header>
<menu id="queue"></menu>
</section>
<section id="loading">
<header>&mdash; Loading &mdash;</header>
<small id="loading-status"></small>
<code id="track-current-time">--:--</code>
<code id="track-duration">--:--</code>
</section>
</main>
<svg viewBox="0 0 100 1" xmlns="http://www.w3.org/2000/svg" class="progress">
<!-- No dashes nor gaps -->
<line x1="0" y1="0" x2="100" y2="0" stroke="currentColor" stroke-width="3" id="playback-progress" />
</svg>
<nav>
<button id="left">Previous</button>
<button id="center">Paused</button>
<button id="right">Next</button>
</nav>
</body>