AzuraCast/frontend/src/components/Public/WebDJ.vue

<template>
    <section
        id="content"
        role="main"
        style="height: 100vh;"
    >
        <div class="container pt-5">
            <div class="row g-3">
                <div class="col-md-4 mb-sm-4">
                    <settings-panel />
                </div>

                <div class="col-md-8">
                    <div class="row g-3 mb-3">
                        <div class="col-md-12">
                            <microphone-panel />
                        </div>
                    </div>
                    <div class="row g-3 mb-3">
                        <div class="col-md-12">
                            <mixer-panel />
                        </div>
                    </div>
                    <div class="row g-3 mb-4">
                        <div class="col-md-6 mb-sm-4">
                            <playlist-panel id="playlist_1" />
                        </div>

                        <div class="col-md-6">
                            <playlist-panel id="playlist_2" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>

<script setup lang="ts">
import MixerPanel from './WebDJ/MixerPanel.vue';
import MicrophonePanel from './WebDJ/MicrophonePanel.vue';
import PlaylistPanel from './WebDJ/PlaylistPanel.vue';
import SettingsPanel from './WebDJ/SettingsPanel.vue';
import {useProvideWebDjNode} from "~/components/Public/WebDJ/useWebDjNode";
import {useProvideWebcaster, webcasterProps} from "~/components/Public/WebDJ/useWebcaster";
import {useProvideMixer} from "~/components/Public/WebDJ/useMixerValue";
import {useProvidePassthroughSync} from "~/components/Public/WebDJ/usePassthroughSync";

const props = defineProps({
    ...webcasterProps
});

const webcaster = useProvideWebcaster(props);

useProvideWebDjNode(webcaster);

useProvideMixer(1.0);

useProvidePassthroughSync('');
</script>