+# Diffuse
-_A music player that connects to your cloud/distributed storage,
-in the form of a static, serverless, web application._
+**Construct your audio player by composing web components.**
-📍 Available at [diffuse.sh](https://diffuse.sh/) and for [download](https://github.com/icidasset/diffuse/releases).
+Diffuse provides a range of custom elements: audio input, data output, metadata & artwork processing, audio playback, a queue system, and much more.
-
+It is also aimed at consumers, providing themes and facets, preconfigured component compositions; while simultaneously trying to be [malleable software](https://www.inkandswitch.com/essay/malleable-software/).
+More information on the [website](https://elements.diffuse.sh/latest/).
-### Integrations
+## Developer usage
-Music layer for music storage.
-User layer for user-data storage.
+You can either consume the Diffuse library via the [deployed instance](https://elements.diffuse.sh/latest/) (the listed elements link to Javascript files) or the [Javascript package](https://jsr.io/@toko/diffuse). From there you can use the custom elements as with any other custom DOM element, by writing HTML or creating a `Class` instance.
-#### Music layer
-
-- [Amazon S3](https://aws.amazon.com/s3/)
-- [Azure Blob Storage](https://azure.microsoft.com/en-us/services/storage/blobs/)
-- [Azure File Storage](https://azure.microsoft.com/en-us/services/storage/files/)
-- [Dropbox](https://dropbox.com/)
-- [IPFS](https://ipfs.io/)
-- [WebDAV](https://en.wikipedia.org/wiki/WebDAV)
-
-#### User layer
-
-- [Dropbox](https://www.dropbox.com/)
-- [IPFS](https://ipfs.io/) (using MFS)
-- [RemoteStorage](https://remotestorage.io/)
-
-
-
----
-
-
-
-### Hosting on your own server
-
-Diffuse is a static web application, which means it's just HTML, CSS, and Javascript. No REST API, database, or anything backend-related involved. The app uses a hash (aka. fragment-based) routing system, so you don't need any special server rules for routing. You can download a pre-build web-only version of Diffuse on the [releases](https://github.com/icidasset/diffuse/releases) page. Diffuse uses service workers, so you may need HTTPS for it to work smoothly in certain browsers.
-
-I should also note that some source services use OAuth, so you'll need to use your own application credentials (eg. Dropbox). That said, if you're working locally, you can use `http://localhost:8000` or `http://127.0.0.1:44999` to use the default ones, that's what the old Electron app was using.
-
-In short:
-- Diffuse is a static, serverless web application
-- Routing is done using hashes/fragments (eg. `diffuse.sh/#/sources`)
-- Download a web build on the [releases](https://github.com/icidasset/diffuse/releases) page
-- Uses service workers (use HTTPS if possible)
-- May need own OAuth application credentials for some source services
+```html
+
+
- If you're using Firefox, you might need to upgrade your browser (version 113 and up) and set `dom.workers.modules.enabled` to `true` in `about:config`") - }) - }) - - // Fin - return brain -} - - -export function link({ app, brain }: { app: App, brain: Worker }) { - function handleAction(action, data, _ports) { - switch (action) { - case "DOWNLOAD_TRACKS": return Tracks.download(data) - } - } - - brain.onmessage = event => { - if (event.data.action) return handleAction(event.data.action, event.data.data, event.ports) - if (event.data.tag) app.ports.fromAlien.send(event.data) - } - - app.ports.toBrain.subscribe(a => brain.postMessage(a)) -} diff --git a/src/Javascript/UI/broadcast.ts b/src/Javascript/UI/broadcast.ts deleted file mode 100644 index 5e4be2118..000000000 --- a/src/Javascript/UI/broadcast.ts +++ /dev/null @@ -1,11 +0,0 @@ -export function channel() { - const bc = new BroadcastChannel(`diffuse-${location.hostname}`) - - bc.addEventListener("message", event => { - switch (event.data) { - case "PING": return bc.postMessage("PONG") - } - }) - - return bc -} diff --git a/src/Javascript/UI/elm/types.ts b/src/Javascript/UI/elm/types.ts deleted file mode 100644 index d4ab9a503..000000000 --- a/src/Javascript/UI/elm/types.ts +++ /dev/null @@ -1,11 +0,0 @@ -export type App = any // TODO: ElmApp
-
-
- - ${text} -
- ` - - document.body.appendChild(note) - - // Remove loader - const elm = document.querySelector("#elm") - elm?.parentNode?.removeChild(elm) -} diff --git a/src/Javascript/UI/index.d.ts b/src/Javascript/UI/index.d.ts deleted file mode 100644 index 6e505a797..000000000 --- a/src/Javascript/UI/index.d.ts +++ /dev/null @@ -1,10 +0,0 @@ -import type { ElmPorts } from "./elm/types" - -export { } - -declare global { - const BUILD_TIMESTAMP: string - - const Elm: { UI: ElmMain-[About](../) - - - - - -### CORS - -There's only one thing you need to do yourself so that the service you chose will work with the application, and that's setting up [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) (Cross-Origin Resource Sharing). Here are the instructions you'll need for each service: - - - -#### Amazon S3 - -You can find the CORS configuration editor under the "Permissions" tab, on the S3 AWS Console. - -```json -[ - { - "AllowedHeaders": [ - "Range", - "X-Playback-Session-Id" - ], - "AllowedMethods": [ - "GET", - "HEAD" - ], - "AllowedOrigins": [ - "https://diffuse.sh", - "http://127.0.0.1:44999" - ], - "ExposeHeaders": [ - "Accept-Ranges", - "Content-Length", - "Content-Range" - ], - "MaxAgeSeconds": 31536000 - } -] -``` - - - -#### Dropbox - -_Not necessary._ - - - -#### IPFS - -Add the domain of the app, with the protocol, to the __list of allowed origins__. - -```shell -ipfs config --json API.HTTPHeaders.Access-Control-Allow-Origin '["https://diffuse.sh", "http://diffuse.sh.ipns.localhost:8080", "http://127.0.0.1:44999"]' -``` - -You can also make this change in the Web UI, you'll find it under "Settings → IPFS Config". - -```javascript -{ - "API": { - "HTTPHeaders": { - "Access-Control-Allow-Origin": [ - ... // Default IPFS values - - "https://diffuse.sh", // 🎵 Default - "http://diffuse.sh.ipns.localhost:8080", // IPNS through IPFS Companion - "http://127.0.0.1:44999" // Electron app - ] - } - } -} -``` - - - -#### Microsoft Azure Storage - -You can find the CORS configuration under the "Settings -> CORS". -Then fill in the following in the input boxes (left to right): - -``` -ALLOWED ORIGINS * -ALLOWED METHODS GET, HEAD -ALLOWED HEADERS Range, X-Playback-Session-Id -EXPOSED HEADERS Accept-Ranges, Content-Length, Content-Range -MAX AGE 0 -``` - - - -#### WebDAV - -__Depends on your WebDAV server.__ -Example setup for Henrique Dias's [WebDAV server](https://github.com/hacdias/webdav): - -```yaml -cors: - enabled: true - credentials: true - - allowed_headers: - - Authorization - - Depth - - X-Playback-Session-Id - allowed_methods: - - GET - - HEAD - - PROPFIND - allowed_hosts: - - https://diffuse.sh - - http://127.0.0.1:44999 - exposed_headers: - - Accept-Ranges - - Content-Length - - Content-Range -``` diff --git a/src/Static/About/Dev.md b/src/Static/About/Dev.md deleted file mode 100644 index c3e002d6c..000000000 --- a/src/Static/About/Dev.md +++ /dev/null @@ -1,111 +0,0 @@ -> A music player that connects to your cloud & distributed storage - -[Return to the application](../../)
-[About](../) - - - -## Adding Sources Using Query Parameter - -```js -JSON = encodeURIComponent(JSON.stringify({ - // Object contents depends on type of source, see below. - kind: "ipfs", - data: { - name: "Music from IPFS", - - // Source type specific - directoryHash: "Qm..." - } -})) - -"https://diffuse.sh?source=JSON" -``` - -You can add multiple "source" query parameters, if you want to add multiple sources. - -### Amazon S3 - -```yaml -kind: - amazon_s3 - -data: - # Required - accessKey - bucketName - name - region - secretKey - - # Optional - directoryPath - host -``` - -### Azure - -```yaml -kind: - "azure_file" # or "azure_blob" - -data: - # Required - accountName - accountKey - container - name - - # Optional - directoryPath -``` - -### Dropbox - -```yaml -kind: - dropbox - -data: - # Required - accessToken - appKey - name - - # Optional - directoryPath -``` - -### IPFS - -```yaml -kind: - ipfs - -data: - # Required - directoryHash - name - - # Optional - gateway - ipns ← boolean, `t` of `f` - local ← boolean, `t` of `f` -``` - -### WebDAV - -```yaml -kind: - webdav - -data: - # Required - name - url - - # Optional - directoryPath - password - username -``` diff --git a/src/Static/About/Index.md b/src/Static/About/Index.md deleted file mode 100644 index f8f15b5a9..000000000 --- a/src/Static/About/Index.md +++ /dev/null @@ -1,141 +0,0 @@ -> A music player that connects to your cloud & distributed storage - -[Return to the application](../)
-[CORS instructions](cors/)
-[Developers](dev/)
-[Privacy policy](../privacy.txt) - - - -## What makes it different? - -Diffuse is a decentralized music player consisting out of two main parts. One part is the music and the other is your data (eg. playlists), both of which are in locations of your choice. Meaning that there's no central server for Diffuse, all of the processing happens on your device and all the data is in your control. You can use the [web version](https://diffuse.sh), the [native version](https://github.com/icidasset/diffuse/releases) or host it yourself by downloading the pre-built packages from [Github](https://github.com/icidasset/diffuse). - - -### Music layer - -This layer connects to the services on which your music is stored, no data is written to these services. You can combine all of the following: - -- [Amazon S3](https://aws.amazon.com/s3/) -- [Azure Blob Storage](https://azure.microsoft.com/en-us/services/storage/blobs/) -- [Azure File Storage](https://azure.microsoft.com/en-us/services/storage/files/) -- [Dropbox](https://dropbox.com/) -- [IPFS](https://ipfs.io/) (supports DNSLink & IPNS) -- [WebDAV](https://en.wikipedia.org/wiki/WebDAV) - - -### User layer - -This (optional) layer will use a single service on which to store your data externally. Your data being your settings, favourites, playlists, etc. You can choose between these services: - -- [Dropbox](https://www.dropbox.com/) -- [IPFS](https://ipfs.io/) (using MFS) -- [RemoteStorage](https://remotestorage.io/) - - - - - -## How does it work? - -Diffuse locates all the music files on the given services, extracts the metadata and then stores it via the previously-explained user layer. - - -### Supported File Formats - -- MP3 -- MP4/M4A -- FLAC -- OGG -- WAV -- WEBM - -*Note, support may vary depending on your browser.* - - - - - -## UI - -There are a few "hidden" features: - -- **Tracks have a context menu** which can be opened by either right clicking, - or holding it (ie. a long tap). Use the ALT key whilst right clicking - on a track to show the alternative track-context menu with more specialized options. -- **You can reorder items** in the queue or a playlist with drag-and-drop. - Select the item you want to move by tapping on it, then tap and hold to move it around. -- You can select multiple tracks using the SHIFT key and then add that selection - to the queue or a playlist using the context menu. -- Click on the now-playing bit to scroll to that track. -- Double tap on a EQ setting to reset it to its default value. - -### Playlists - -To add something to a playlist, and create that playlist if it doesn't exist yet, you open the context menu of a track. To move tracks around in a playlist, first select the track, then drag it. - -### Search - -```shell -# Show me every track where the title, artist or album contains the term 'Parkway' and the term 'Drive'. -Parkway Drive - -# Show me every track of which the artist's name starts with 'park'. -artist:park - -# Show me every track from Parkway Drive of which the album starts with "Deep Blue". -artist:Parkway Drive album:Deep Blue - -# Show me every track from Parkway Drive but not their "Atlas" album. -artist:Parkway Drive - album:Atlas -``` - -### Keyboard - -The app should be usable with only the keyboard, there are various keyboard shortcuts: - -```js -CTRL + K or CMD + K // Show command palette - -CTRL + L // Select playlist using autocompletion -CTRL + N // Scroll to currently-playing track -CTRL + P // Play / Pause -CTRL + R // Toggle Repeat -CTRL + S // Toggle Shuffle - -CTRL + [ or ] // Previous / Next -CTRL + { or } // Seek forwards / Seek backwards - -Alternatively you can use the media-control keys, -if your browser supports it. - -ESC // Close overlay, close context-menu, deselect album cover, etc. - -CTRL + 1 // Tracks -CTRL + 2 // Playlists -CTRL + 3 // Queue -CTRL + 4 // EQ - -CTRL + 8 // Sources -CTRL + 9 // Settings -``` - - - - - -## Q&A - -### I used version one, where's my data? - -There's a small link, or button if you will, on the "Settings → Import / Export" -page that will allow you to import data from version 1 of the app. Note that this -will need to reflect the authentication/storage method you chose in version 1. - - - - - -## 🪐 - -_Part of the App Ring_ diff --git a/src/Static/About/Layout.gren b/src/Static/About/Layout.gren deleted file mode 100644 index 8c2f1e48a..000000000 --- a/src/Static/About/Layout.gren +++ /dev/null @@ -1,135 +0,0 @@ -module About.Layout exposing (..) - -import Transmutable.Html as Html exposing ( Html ) -import Transmutable.Html.Attributes as A - - -layout : - { pathToRoot : String - } - -> Array (Html msg) - -> Array (Html msg) -layout { pathToRoot } contents = - [ Html.doctype - , Html.html - [ A.lang "en" - ] - [ Html.head - [] - [ Html.meta - [ A.charset "utf8" - ] - , Html.title - [ Html.text "About | Diffuse" - ] - , Html.meta - [ A.name "description" - , A.content "A music player that connects to your cloud/distributed storage, in the form of a static, serverless, web application." - ] - - , -- Viewport - Html.meta - [ A.name "viewport" - , A.content "width=device-width, initial-scale=1" - ] - - , -- Favicons & Mobile - Html.link - [ A.rel "apple-touch-icon" - , A.href (pathToRoot ++ "apple-touch-icon.png") - , A.attribute "sizes" "180x180" - ] - , Html.link - [ A.rel "icon" - , A.href (pathToRoot ++ "favicon-32x32.png") - , A.attribute "sizes" "32x32" - ] - , Html.link - [ A.rel "icon" - , A.type_ "image/png" - , A.href (pathToRoot ++ "favicon-16x16.png") - , A.attribute "sizes" "16x16" - ] - , Html.link - [ A.rel "manifest" - , A.href (pathToRoot ++ "site.webmanifest") - ] - , Html.link - [ A.rel "mask-icon" - , A.href (pathToRoot ++ "safari-pinned-tab.svg") - , A.attribute "color" "#8a90a9" - ] - , Html.meta - [ A.name "msapplication-TileColor" - , A.content "#8a90a9" - ] - , Html.meta - [ A.name "theme-color" - , A.content "#8a90a9" - ] - - , -- Styles - Html.meta - [ A.name "color-scheme" - , A.content "dark light" - ] - , Html.link - [ A.rel "stylesheet" - , A.href (pathToRoot ++ "about.css") - ] - ] - - , -- - Html.body - [ A.class "font-body text-base01 dark:bg-darkest-hour my-16 bg-white px-4 dark:text-gray-600" - ] - [ Html.main_ - [ A.class "mx-auto max-w-2xl" - ] - [ Html.a - [ A.class "logo inline-block" - , A.href pathToRoot - ] - [ Html.img - [ A.class "block dark:hidden" - , A.src (pathToRoot ++ "images/diffuse-dark.svg") - ] - [] - , Html.img - [ A.class "hidden dark:block" - , A.src (pathToRoot ++ "images/diffuse-light.svg") - ] - [] - , Html.h1 - [] - [ Html.text "Diffuse" - ] - ] - - , -- - Html.article [] contents - ] - - , -- - Html.node - "script" - [ A.src "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.2/highlight.min.js" - ] - [] - , Html.node - "script" - [] - [ Html.text "hljs.initHighlightingOnLoad();" - ] - , Html.node - "script" - [] - [ Html.text "if (\"serviceWorker\" in navigator) {\n" - , Html.text " navigator.serviceWorker.register(\"" - , Html.text pathToRoot - , Html.text "service-worker.js\", { type: \"module\" });\n" - , Html.text "}" - ] - ] - ] - ] diff --git a/src/Static/Fonts/Hack/bold-subset.woff2 b/src/Static/Fonts/Hack/bold-subset.woff2 deleted file mode 100644 index 93d425efd..000000000 Binary files a/src/Static/Fonts/Hack/bold-subset.woff2 and /dev/null differ diff --git a/src/Static/Fonts/Hack/bold.woff2 b/src/Static/Fonts/Hack/bold.woff2 deleted file mode 100644 index 1155477e9..000000000 Binary files a/src/Static/Fonts/Hack/bold.woff2 and /dev/null differ diff --git a/src/Static/Fonts/Hack/regular-subset.woff2 b/src/Static/Fonts/Hack/regular-subset.woff2 deleted file mode 100644 index 1e3abb96e..000000000 Binary files a/src/Static/Fonts/Hack/regular-subset.woff2 and /dev/null differ diff --git a/src/Static/Fonts/Hack/regular.woff2 b/src/Static/Fonts/Hack/regular.woff2 deleted file mode 100644 index 524465cf5..000000000 Binary files a/src/Static/Fonts/Hack/regular.woff2 and /dev/null differ diff --git a/src/Static/Fonts/Montserrat/Old/bold.woff2 b/src/Static/Fonts/Montserrat/Old/bold.woff2 deleted file mode 100644 index d9940cd11..000000000 Binary files a/src/Static/Fonts/Montserrat/Old/bold.woff2 and /dev/null differ diff --git a/src/Static/Fonts/Montserrat/Old/extrabold.woff2 b/src/Static/Fonts/Montserrat/Old/extrabold.woff2 deleted file mode 100644 index d5022db1b..000000000 Binary files a/src/Static/Fonts/Montserrat/Old/extrabold.woff2 and /dev/null differ diff --git a/src/Static/Fonts/Montserrat/Old/light.woff2 b/src/Static/Fonts/Montserrat/Old/light.woff2 deleted file mode 100644 index 31b855fe1..000000000 Binary files a/src/Static/Fonts/Montserrat/Old/light.woff2 and /dev/null differ diff --git a/src/Static/Fonts/Montserrat/Old/medium.woff2 b/src/Static/Fonts/Montserrat/Old/medium.woff2 deleted file mode 100644 index 50b35aa92..000000000 Binary files a/src/Static/Fonts/Montserrat/Old/medium.woff2 and /dev/null differ diff --git a/src/Static/Fonts/Montserrat/Old/regular.woff2 b/src/Static/Fonts/Montserrat/Old/regular.woff2 deleted file mode 100644 index 72d13c60b..000000000 Binary files a/src/Static/Fonts/Montserrat/Old/regular.woff2 and /dev/null differ diff --git a/src/Static/Fonts/Montserrat/Old/semibold.woff2 b/src/Static/Fonts/Montserrat/Old/semibold.woff2 deleted file mode 100644 index c9d70ea59..000000000 Binary files a/src/Static/Fonts/Montserrat/Old/semibold.woff2 and /dev/null differ diff --git a/src/Static/Fonts/Montserrat/Variable/variable.woff2 b/src/Static/Fonts/Montserrat/Variable/variable.woff2 deleted file mode 100644 index 2a938cbd6..000000000 Binary files a/src/Static/Fonts/Montserrat/Variable/variable.woff2 and /dev/null differ diff --git a/src/Static/Fonts/Playfair Display/bold.woff2 b/src/Static/Fonts/Playfair Display/bold.woff2 deleted file mode 100644 index 38ae598dd..000000000 Binary files a/src/Static/Fonts/Playfair Display/bold.woff2 and /dev/null differ diff --git a/src/Static/Fonts/Source Sans Pro/Old/black.woff2 b/src/Static/Fonts/Source Sans Pro/Old/black.woff2 deleted file mode 100755 index a5618c0f6..000000000 Binary files a/src/Static/Fonts/Source Sans Pro/Old/black.woff2 and /dev/null differ diff --git a/src/Static/Fonts/Source Sans Pro/Old/bold-italic.woff2 b/src/Static/Fonts/Source Sans Pro/Old/bold-italic.woff2 deleted file mode 100755 index 9b659fef5..000000000 Binary files a/src/Static/Fonts/Source Sans Pro/Old/bold-italic.woff2 and /dev/null differ diff --git a/src/Static/Fonts/Source Sans Pro/Old/bold.woff2 b/src/Static/Fonts/Source Sans Pro/Old/bold.woff2 deleted file mode 100755 index edc11b3ae..000000000 Binary files a/src/Static/Fonts/Source Sans Pro/Old/bold.woff2 and /dev/null differ diff --git a/src/Static/Fonts/Source Sans Pro/Old/italic.woff2 b/src/Static/Fonts/Source Sans Pro/Old/italic.woff2 deleted file mode 100755 index f384ac680..000000000 Binary files a/src/Static/Fonts/Source Sans Pro/Old/italic.woff2 and /dev/null differ diff --git a/src/Static/Fonts/Source Sans Pro/Old/light-italic.woff2 b/src/Static/Fonts/Source Sans Pro/Old/light-italic.woff2 deleted file mode 100755 index 8b8e01fc4..000000000 Binary files a/src/Static/Fonts/Source Sans Pro/Old/light-italic.woff2 and /dev/null differ diff --git a/src/Static/Fonts/Source Sans Pro/Old/light.woff2 b/src/Static/Fonts/Source Sans Pro/Old/light.woff2 deleted file mode 100755 index b53ed655e..000000000 Binary files a/src/Static/Fonts/Source Sans Pro/Old/light.woff2 and /dev/null differ diff --git a/src/Static/Fonts/Source Sans Pro/Old/regular.woff2 b/src/Static/Fonts/Source Sans Pro/Old/regular.woff2 deleted file mode 100755 index 51a632966..000000000 Binary files a/src/Static/Fonts/Source Sans Pro/Old/regular.woff2 and /dev/null differ diff --git a/src/Static/Fonts/Source Sans Pro/Old/semibold-italic.woff2 b/src/Static/Fonts/Source Sans Pro/Old/semibold-italic.woff2 deleted file mode 100755 index caa153ed4..000000000 Binary files a/src/Static/Fonts/Source Sans Pro/Old/semibold-italic.woff2 and /dev/null differ diff --git a/src/Static/Fonts/Source Sans Pro/Old/semibold.woff2 b/src/Static/Fonts/Source Sans Pro/Old/semibold.woff2 deleted file mode 100755 index ee29125c6..000000000 Binary files a/src/Static/Fonts/Source Sans Pro/Old/semibold.woff2 and /dev/null differ diff --git a/src/Static/Fonts/Source Sans Pro/Variable/italic.woff2 b/src/Static/Fonts/Source Sans Pro/Variable/italic.woff2 deleted file mode 100644 index 13bcc865e..000000000 Binary files a/src/Static/Fonts/Source Sans Pro/Variable/italic.woff2 and /dev/null differ diff --git a/src/Static/Fonts/Source Sans Pro/Variable/roman.woff2 b/src/Static/Fonts/Source Sans Pro/Variable/roman.woff2 deleted file mode 100644 index b60988fe2..000000000 Binary files a/src/Static/Fonts/Source Sans Pro/Variable/roman.woff2 and /dev/null differ diff --git a/src/Static/Hosting/CORS b/src/Static/Hosting/CORS deleted file mode 100644 index 72e8ffc0d..000000000 --- a/src/Static/Hosting/CORS +++ /dev/null @@ -1 +0,0 @@ -* diff --git a/src/Static/Hosting/_headers b/src/Static/Hosting/_headers deleted file mode 100644 index f7e3db34b..000000000 --- a/src/Static/Hosting/_headers +++ /dev/null @@ -1,2 +0,0 @@ -/manifest.json - Access-Control-Allow-Origin: * diff --git a/src/Static/Hosting/_redirects b/src/Static/Hosting/_redirects deleted file mode 100644 index 4353d4fcb..000000000 --- a/src/Static/Hosting/_redirects +++ /dev/null @@ -1 +0,0 @@ -/* /index.html 301 diff --git a/src/Static/Hosting/privacy.txt b/src/Static/Hosting/privacy.txt deleted file mode 100644 index 71e9526be..000000000 --- a/src/Static/Hosting/privacy.txt +++ /dev/null @@ -1,20 +0,0 @@ -Privacy Policy --------------- - -Your privacy is important to us. It is Diffuse's policy to respect your privacy regarding any information we may collect from you across our website, https://diffuse.sh, and other sites we own and operate. - -We only ask for personal information when we truly need it to provide a service to you. We collect it by fair and lawful means, with your knowledge and consent. We also let you know why we’re collecting it and how it will be used. - -We only retain collected information for as long as necessary to provide you with your requested service. What data we store, we’ll protect within commercially acceptable means to prevent loss and theft, as well as unauthorised access, disclosure, copying, use or modification. - -We don’t share any personally identifying information publicly or with third-parties, except when required to by law. - -Our website may link to external sites that are not operated by us. Please be aware that we have no control over the content and practices of these sites, and cannot accept responsibility or liability for their respective privacy policies. - -You are free to refuse our request for your personal information, with the understanding that we may be unable to provide you with some of your desired services. - -Your continued use of our website will be regarded as acceptance of our practices around privacy and personal information. If you have any questions about how we handle user data and personal information, feel free to contact us. - -This policy is effective as of 11 March 2018. - -Generated by GetTerms.io diff --git a/src/Static/Html/301.html b/src/Static/Html/301.html deleted file mode 100644 index 8f1511c90..000000000 --- a/src/Static/Html/301.html +++ /dev/null @@ -1,2 +0,0 @@ - - diff --git a/src/Static/Html/Application.html b/src/Static/Html/Application.html deleted file mode 100644 index ead34426c..000000000 --- a/src/Static/Html/Application.html +++ /dev/null @@ -1,81 +0,0 @@ - - - - - - - -
- Agency
+ ++ The goal is for every user, no matter their knowledge level, to have agency over their data and their software. One can start with making small changes and gradually progress to making big changes. +
+ ++ You can store your user-data in various places, and easily export, import and sync it. +
+ +Take control
+ +-
+
-
+
+ Level 1: Pick your restaurant, food comes in all shapes and sizes. The equivalent of choosing a Diffuse theme. +
+
+
+ -
+
+ Level 2: Take out food from various places, eg. cheese shop + bakery. You choose how you combine the foods and from where you order them. That's facets. +
+
+
+ -
+
+ Level 3: Now that you know which food is good and how to make combinations, you might make a slight customization, add a little something of your own (eg. add some spice). However, you're not quite confident enough which spice to pick, so you hire some help. +
++ This can be done using the facets builder which allows you to build on top of a familiar preconfigured foundation and load custom facets. People might share their own, or maybe you use an LLM to generate something for you (eg. an album art gallery). +
+
+
+ -
+
+ Level 4: You learned a bit from watching and talking to the help you hired, so you decide to take things in your own hands. +
++ You continue to use the facets builder but learn a bit of HTML, Javascript and CSS; so you're able to write your own facet. +
+
+ -
+
+ Level 5: At this point you're confident enough to make a meal from scratch. You can start very simple, eg. just throwing a steak in the pan with some butter and some salt to it. Then later add some baked potatoes and go from there. +
++ A similar tool comes into play here, the themes builder. Same concept as the facets builder, but now you need to specify the foundation yourself. You can use the elements listed below to do so. The code for these is available from this website or through the Javascript package. +
+
+
+ -
+
+ Level 6: You open your own restaurant. +
++ You can host the theme you made on any web server, it's only HTML after all. Only difference is that you'll have to create the entire HTML tree, not just the body element, as is the case with the theme builder. +
+
+
+ -
+
+ Level 7: You got promoted to master chef. Time to open your own restaurant chain. +
++ You can self-host Diffuse, it's open-source! Or you present your own collection of elements. +
+
+
+
+
+
+
+
+
+ {{ set slug = title.toLowerCase().replace(/\s+/g, '-') }}
+
+
diff --git a/src/_components/examples.vto b/src/_components/examples.vto
new file mode 100644
index 000000000..8019bab55
--- /dev/null
+++ b/src/_components/examples.vto
@@ -0,0 +1,20 @@
+{{title}}
+ ++ {{content}} +
+ + {{ await comp.list({ items }) }} +-
+ {{ for index, item of items }}
+
-
+ + + {{item.title}} + + +++ {{ item.desc |> md(true) }} ++
+ {{ /for }}
+
+ Filter by
+
+
+
+
+
+
+
+ Userdata from
+
+
+
+-
+ {{ for index, item of items }}
+ {{ set color = (() => {
+ switch (item.kind) {
+ case "prelude": return "var(--accent-twist-4)";
+ default: return "var(--accent-twist-2)";
+ }
+ })() }}
+
+ {{ set kind = (() => {
+ // return item.kind ?? "interactive"
+ switch (item.kind) {
+ case "prelude": return "feature";
+ default: return "interface";
+ }
+ })() }}
+
+
-
+ +++ {{ if item.kind === "prelude" }} + + {{item.title}} + + {{ else }} + + {{item.title}} + + {{ /if }} + +++ {{ item.desc |> md(true) }} ++
+ {{ /for }}
+
-
+ {{ for item of items }}
+
-
+ {{ if item.todo }}
+ [todo]
+ {{item.title}}
+ {{ else }}
+ {{item.title}}
+ {{ /if }}
+ {{ if item.desc }}
+ {{item.desc |> md(true)}}+ {{ /if }} +
+ {{ /for }}
+
Build
+ + + +
+
+
+
+
+
+
diff --git a/src/category.page.ts b/src/category.page.ts
new file mode 100644
index 000000000..23aa0d941
--- /dev/null
+++ b/src/category.page.ts
@@ -0,0 +1,24 @@
+interface Facet {
+ url: string;
+ title: string;
+ category: string;
+ desc: string;
+}
+
+export const layout = "layouts/kitchen-category.vto";
+
+export default function* ({ facets }: { facets: Facet[] }) {
+ const categories = [...new Set(facets.map((f) => f.category))]
+ .sort() as string[];
+
+ for (const category of categories) {
+ const slug = category.toLowerCase().replace(/\s+/g, "-");
+ yield {
+ url: `/${slug}/`,
+ title: `${category} | Diffuse`,
+ category,
+ slug,
+ categoryFacets: facets.filter((f) => f.category === category),
+ };
+ }
+}
diff --git a/src/common/cid.js b/src/common/cid.js
new file mode 100644
index 000000000..931736ad0
--- /dev/null
+++ b/src/common/cid.js
@@ -0,0 +1,22 @@
+import * as CID from "@atcute/cid";
+import { equals, toSha256 } from "@atcute/uint8array";
+
+/**
+ * @param {0x55 | 0x71} code
+ * @param {Uint8ArrayFoundation
+ ++ Diffuse comes with a foundation that preconfigures a lot of elements so you don't have to set them up yourself, along with a combination of elements for certain features. It internally tracks the DOM addition of the custom elements, so no need to worry about setting up an element multiple times. It also provides signals which can be used to track element creations. An example of this can be found in the "scrobbles" feature. +
++ That said, you are not required not use this! You can, for example, setup a Diffuse audio engine element yourself that's in a different group so that it doesn't communicate with the default one; in case you want to make a dj-deck, or something like that, which would have multiple audio items playing at the same time. This does mean you will need to pay attention to more things, such as, how does this interact with other features the user has enabled. +
++ Refer to the elements index to find out what each element does. +
+
+
+
+ {{- echo -}}
+ import foundation from "common/foundation.js"
+ {{ /echo }}
+{{ echo -}}await foundation.configurator.artwork(){{- /echo }}
+{{ echo -}}await foundation.configurator.input(){{- /echo }}
+{{ echo -}}await foundation.configurator.metadata(){{- /echo }}
+{{ echo -}}await foundation.configurator.scrobbles(){{- /echo }}
+
+{{ echo -}}await foundation.engine.audio(){{- /echo }}
+{{ echo -}}await foundation.engine.queue(){{- /echo }}
+{{ echo -}}await foundation.engine.repeatShuffle(){{- /echo }}
+{{ echo -}}await foundation.engine.scope(){{- /echo }}
+
+{{ echo -}}await foundation.orchestrator.autoQueue(){{- /echo }}
+{{ echo -}}await foundation.orchestrator.favourites(){{- /echo }}
+{{ echo -}}await foundation.orchestrator.mediaSession(){{- /echo }}
+{{ echo -}}await foundation.orchestrator.output(){{- /echo }}
+{{ echo -}}await foundation.orchestrator.queueAudio(){{- /echo }}
+{{ echo -}}await foundation.orchestrator.processTracks(){{- /echo }}
+{{ echo -}}await foundation.orchestrator.scopedTracks(){{- /echo }}
+{{ echo -}}await foundation.orchestrator.scrobbleAudio(){{- /echo }}
+{{ echo -}}await foundation.orchestrator.sources(){{- /echo }}
+
+{{ echo -}}await foundation.orchestrator.artwork(){{- /echo -}}
+
+ Examples
+ ++ Some simple examples to help you understand how to build your own facet. Click the edit button to load them into the code editor above. +
+ + {{ await comp.examples({ id: "examples", items: examples }) }} + +Notes
++ While you have the ability to do whatever you want in a custom facet, the existing facets are designed to work a certain way; so here's some things to keep in mind: +
+-
+
- Prelude (feature) facets are loaded in alphabetical order by the facet loader. +
- Most elements are configured in broadcast mode so they communicate across tabs. There are a few exceptions such as inputs, where we prefer parallelisation. +
- All URLs in a facet are relative to the root of Diffuse (not the root of the server) due to the base element in the header of the facet loader. +
+
+
+ ${error}
+
+
+ `;
+
+ if (options?.throw) {
+ throw options.context ?? new Error(error);
+ }
+}
+
+////////////////////////////////////////////
+// 🛠️ | LOADERS
+////////////////////////////////////////////
+
+/**
+ * @param {string} uri
+ * @returns {Promise+ + You haven't saved anything yet. Add a facet by browsing the featured ones or any of the other categories. You can click the toggle + to quickly add or remove from your collection. Alternatively, add one using + an URI: + +
+ `; + +//////////////////////////////////////////// +// LIST +//////////////////////////////////////////// + +/** @type {() => void | undefined} */ +let stopMonitor; + +/** */ +export async function renderList() { + if (stopMonitor) stopMonitor(); + + /** @type {HTMLElement | null} */ + const listEl = document.querySelector("#list"); + if (!listEl) throw new Error("List element not found"); + + if (listEl.getAttribute("data-rendered") === "f") { + listEl.innerHTML = ""; + listEl.removeAttribute("data-rendered"); + } + + const out = await output(); + + stopMonitor = effect(() => { + _renderList(out, listEl); + }); +} + +/** + * @param {OutputOrchestrator} output + * @param {HTMLElement} listEl + */ +function _renderList(output, listEl) { + const facetsCol = output.facets.collection(); + + if (facetsCol.state !== "loaded") { + const loading = html` + + `; + + render(loading, listEl); + return; + } + + const filter = activeFilter.get(); + + const col = facetsCol.state === "loaded" + ? [...facetsCol.data] + .filter((c) => + filter === "all" || + (filter === "prelude" ? c.kind === "prelude" : c.kind !== "prelude") + ) + .sort((a, b) => { + return a.name.toLocaleLowerCase().localeCompare( + b.name.toLocaleLowerCase(), + ); + }) + : []; + + const selected = output.selected(); + const outputLabel = selected?.label ?? selected?.getAttribute?.("label") ?? + "Local storage"; + + const filterBar = html` +
+ Filter by
+
+
+
+
+
+
+
+
+
+
+ Userdata from
+ ${outputLabel}
+
+ `;
+
+ const h = col.length || filter !== "all"
+ ? html`
+ ${filterBar}
+ -
+ ${col.map((c, index) => {
+ const color = FacetCategory.color(c);
+ const kind = FacetCategory.name(c);
+
+ const title = c.kind === "prelude"
+ ? html`
+
+ ${c.name}
+
+ `
+ : html`
+
+ ${c.name}
+
+ `;
+
+ return keyed(
+ c.id,
+ html`
+
-
+ ++ + ++ ${title} +++++ ${c.description?.trim().length + ? unsafeHTML( + marked.parse(c.description, { async: false }), + ) + : nothing} +++ ${c.uri && !c.html + ? html` + + ` + : html` + + `} ++
+ `,
+ );
+ })}
+