A music player that connects to your cloud/distributed storage.
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: connect facet

+127 -9
+10 -8
src/_data/facets.json
··· 30 30 "desc": "Store tracks locally for offline usage automatically after they've been playing for a little while." 31 31 }, 32 32 { 33 + "url": "facets/connect/index.html", 34 + "title": "Connect", 35 + "category": "Data", 36 + "featured": true, 37 + "desc": "A listing of some of the options available to use as an audio source, or as a user-data storage method." 38 + }, 39 + { 33 40 "url": "facets/connect/atproto/index.html", 34 41 "title": "Connect / AT Protocol", 35 42 "category": "Data", 36 - "featured": true, 37 43 "desc": "Use your AT Protocol identity for user-data storage." 38 44 }, 39 45 { 40 46 "url": "facets/connect/https/index.html", 41 47 "title": "Connect / HTTPS", 42 48 "category": "Data", 43 - "desc": "Add HTTPS URLs as input." 49 + "desc": "Add HTTPS URLs as audio sources." 44 50 }, 45 51 { 46 52 "url": "facets/connect/icecast/index.html", 47 53 "title": "Connect / Icecast", 48 54 "category": "Data", 49 - "featured": true, 50 - "desc": "Add an Icecast stream as audio input." 55 + "desc": "Add an Icecast stream as an audio source." 51 56 }, 52 57 { 53 58 "url": "facets/connect/local/index.html", 54 59 "title": "Connect / Local", 55 60 "category": "Data", 56 - "featured": true, 57 - "desc": "Add local directories or files as audio input." 61 + "desc": "Add local directories or files as audio sources." 58 62 }, 59 63 { 60 64 "url": "facets/connect/opensubsonic/index.html", 61 65 "title": "Connect / OpenSubsonic", 62 66 "category": "Data", 63 - "featured": true, 64 67 "desc": "Connect to an OpenSubsonic server for audio input." 65 68 }, 66 69 { 67 70 "url": "facets/connect/s3/index.html", 68 71 "title": "Connect / S3", 69 72 "category": "Data", 70 - "featured": true, 71 73 "desc": "Connect to an S3-compatible storage for audio input or user-data storage." 72 74 }, 73 75 {
+1
src/facets/connect/common.css
··· 4 4 justify-content: center; 5 5 min-height: 100dvh; 6 6 opacity: 0; 7 + padding: var(--wa-space-m); 7 8 pointer-events: none; 8 9 transition: opacity 750ms; 9 10
+1 -1
src/facets/connect/https/index.inline.js
··· 43 43 hasOutput: false, 44 44 45 45 description: html` 46 - <p>Add HTTPS urls as input.</p> 46 + <p>Add HTTPS urls as audio sources.</p> 47 47 `, 48 48 49 49 formFields: html`
+32
src/facets/connect/index.html
··· 1 + <style> 2 + @import "./vendor/@awesome.me/webawesome/styles/webawesome.css" layer(wa); 3 + @import "./facets/connect/common.css" layer(connect); 4 + 5 + @layer base, diffuse, wa; 6 + 7 + ul li { 8 + margin-left: 0; 9 + } 10 + 11 + .connect-item[href] { 12 + text-decoration: none; 13 + color: inherit; 14 + border-radius: var(--wa-border-radius-m); 15 + gap: var(--wa-space-m); 16 + padding: var(--wa-space-2xs); 17 + margin: calc(-1 * var(--wa-space-2xs)); 18 + 19 + &:hover { 20 + background: var(--wa-color-fill-quiet); 21 + } 22 + } 23 + </style> 24 + 25 + <main class="wa-theme-default"></main> 26 + 27 + <script type="module" src="./facets/connect/index.inline.js"></script> 28 + 29 + <script type="module"> 30 + await customElements.whenDefined("wa-card"); 31 + document.querySelector("main")?.classList.add("has-loaded"); 32 + </script>
+80
src/facets/connect/index.inline.js
··· 1 + import { html, render as litRender } from "lit-html"; 2 + 3 + import "@awesome.me/webawesome/dist/components/card/card.js"; 4 + import "@awesome.me/webawesome/dist/components/divider/divider.js"; 5 + import "@awesome.me/webawesome/dist/components/icon/icon.js"; 6 + 7 + import "~/common/webawesome/detect-dark.js"; 8 + import "~/common/webawesome/phosphor/fill.js"; 9 + 10 + import { data as facetsData } from "~/facets/index.js"; 11 + 12 + document.title = "Connect | Diffuse"; 13 + 14 + /** @param {string} path */ 15 + const loaderHref = (path) => `../../l/?path=${encodeURIComponent(path)}`; 16 + 17 + /** @type {Record<string, string>} */ 18 + const icons = { 19 + "facets/connect/atproto/index.html": "at", 20 + "facets/connect/https/index.html": "globe", 21 + "facets/connect/icecast/index.html": "radio", 22 + "facets/connect/local/index.html": "folder-open", 23 + "facets/connect/opensubsonic/index.html": "broadcast", 24 + "facets/connect/s3/index.html": "hard-drives", 25 + }; 26 + 27 + const facets = facetsData 28 + .filter( 29 + (f) => 30 + f.url.startsWith("facets/connect/") && 31 + f.url !== "facets/connect/index.html", 32 + ) 33 + .map((f) => ({ 34 + name: f.title.replace(/^Connect \/ /, ""), 35 + description: f.desc, 36 + icon: icons[f.url] ?? "plug", 37 + href: loaderHref(f.url), 38 + })); 39 + 40 + const main = document.querySelector("main"); 41 + if (!main) throw new Error("No <main> element"); 42 + 43 + litRender( 44 + html` 45 + <wa-card> 46 + <div slot="header" class="card-header"> 47 + <strong>Connect</strong> 48 + </div> 49 + <div class="card-body"> 50 + <p> 51 + These are some of the options available to add as an audio source, or to 52 + use as user-data storage. Some offer both, the remainder offers only one 53 + or the other. 54 + </p> 55 + <wa-divider></wa-divider> 56 + <ul class="connect-list"> 57 + ${facets.map(({ name, description, icon, href }) => 58 + html` 59 + <li> 60 + <a class="connect-item" href="${href}"> 61 + <wa-icon 62 + library="phosphor/fill" 63 + name="${icon}" 64 + class="wa-body-l" 65 + style="flex-shrink: 0;" 66 + ></wa-icon> 67 + <div class="connect-item__info"> 68 + <span class="connect-item__name">${name}</span> 69 + <span class="connect-item__detail">${description}</span> 70 + </div> 71 + </a> 72 + </li> 73 + ` 74 + )} 75 + </ul> 76 + </div> 77 + </wa-card> 78 + `, 79 + main, 80 + );
+3
src/facets/index.js
··· 1 + import data from "~/_data/facets.json" with { type: "json" }; 2 + 3 + export { data };