forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
1import { ifDefined } from "lit-html/directives/if-defined.js";
2import {
3 DEFAULT_GROUP,
4 defineElement,
5 DiffuseElement,
6} from "~/common/element.js";
7
8import "~/components/configurator/output/element.js";
9import "~/components/transformer/output/refiner/default/element.js";
10import "~/components/transformer/output/refiner/initial-contents/element.js";
11
12import "~/components/output/polymorphic/indexed-db/element.js";
13import "~/components/transformer/output/string/json/element.js";
14
15/**
16 * @import {RenderArg} from "~/common/element.d.ts"
17 * @import {OutputElement} from "~/components/output/types.d.ts"
18 * @import {OutputConfiguratorElement} from "~/components/configurator/output/types.d.ts"
19 */
20
21////////////////////////////////////////////
22// ELEMENT
23////////////////////////////////////////////
24
25/**
26 * A default setup for managing output.
27 *
28 * @implements {OutputConfiguratorElement}
29 */
30class OutputOrchestrator extends DiffuseElement {
31 static NAME = "diffuse/orchestrator/output";
32
33 // ELEMENT GETTERS
34
35 /**
36 * @returns {OutputElement}
37 */
38 get output() {
39 /** @type {OutputElement | null} */
40 const output = this.root().querySelector("#do-output__output");
41
42 if (!output) throw new Error("Output orchestrator did not render yet.");
43 return output;
44 }
45
46 /**
47 * @returns {OutputConfiguratorElement}
48 */
49 get outputConfigurator() {
50 /** @type {OutputConfiguratorElement | null} */
51 const outputConfigurator = this.root().querySelector(
52 "#do-output__dc-output",
53 );
54
55 if (!outputConfigurator) {
56 throw new Error("Output orchestrator did not render yet.");
57 }
58
59 return outputConfigurator;
60 }
61
62 // PROXY OUTPUT ACTIONS
63
64 get facets() {
65 return this.output.facets;
66 }
67
68 get playlistItems() {
69 return this.output.playlistItems;
70 }
71
72 get settings() {
73 return this.output.settings;
74 }
75
76 get tracks() {
77 return this.output.tracks;
78 }
79
80 get ready() {
81 return this.output.ready;
82 }
83
84 // PROXY ADDITIONAL OUTPUT CONFIGURATOR ACTIONS
85
86 get activated() {
87 return this.outputConfigurator.activated.bind(this.outputConfigurator);
88 }
89
90 get deselect() {
91 return this.outputConfigurator.deselect.bind(this.outputConfigurator);
92 }
93
94 get hasDefault() {
95 return this.outputConfigurator.hasDefault.bind(this.outputConfigurator);
96 }
97
98 get hasSelected() {
99 return this.outputConfigurator.hasSelected.bind(this.outputConfigurator);
100 }
101
102 get loadSelected() {
103 return this.outputConfigurator.loadSelected.bind(this.outputConfigurator);
104 }
105
106 get options() {
107 return this.outputConfigurator.options.bind(this.outputConfigurator);
108 }
109
110 get select() {
111 return this.outputConfigurator.select.bind(this.outputConfigurator);
112 }
113
114 get selected() {
115 return this.outputConfigurator.selected.bind(this.outputConfigurator);
116 }
117
118 get waitForOption() {
119 return this.outputConfigurator.waitForOption.bind(this.outputConfigurator);
120 }
121
122 // RENDER
123
124 /**
125 * @param {RenderArg} _
126 */
127 render({ html }) {
128 const group = this.group === DEFAULT_GROUP ? undefined : this.group;
129
130 return html`
131 <dop-indexed-db
132 id="do-output__dop-indexed-db__json"
133 namespace="${this.namespace ? this.namespace + "/" : ""}json"
134 group="${ifDefined(group)}"
135 ></dop-indexed-db>
136
137 <!-- OUTPUT CONFIGURATOR -->
138 <dc-output
139 id="do-output__dc-output"
140 default="do-output__dc-output__local"
141 group="${ifDefined(group)}"
142 >
143 <dtos-json
144 id="do-output__dc-output__local"
145 output-selector="#do-output__dop-indexed-db__json"
146 label="Local"
147 ></dtos-json>
148 </dc-output>
149
150 <!-- ENTRY ⬆️ -->
151 <dtor-initial-contents
152 id="do-output__dtor-initial-contents"
153 output-selector="#do-output__dc-output"
154 ></dtor-initial-contents>
155
156 <dtor-default
157 id="do-output__output"
158 output-selector="#do-output__dtor-initial-contents"
159 group="${ifDefined(group)}"
160 ></dtor-default>
161 `;
162 }
163}
164
165export default OutputOrchestrator;
166
167////////////////////////////////////////////
168// REGISTER
169////////////////////////////////////////////
170
171export const CLASS = OutputOrchestrator;
172export const NAME = "do-output";
173
174defineElement(NAME, CLASS);