87 lines
2.9 KiB
Vue
87 lines
2.9 KiB
Vue
<template>
|
|
<div class="card">
|
|
<div class="card-header bg-primary-dark">
|
|
<h2 class="card-title">
|
|
{{ $gettext('Connection Information') }}
|
|
</h2>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3 class="card-subtitle mt-0">
|
|
{{ $gettext('Icecast Clients') }}
|
|
</h3>
|
|
<dl>
|
|
<dt class="mb-1">
|
|
{{ $gettext('Server:') }}
|
|
</dt>
|
|
<dd>
|
|
<code>{{ connectionInfo.serverUrl }}</code>
|
|
</dd>
|
|
<dd v-if="connectionInfo.ip">
|
|
{{ $gettext('You may need to connect directly via your IP address:') }}
|
|
<code>{{ connectionInfo.ip }}</code>
|
|
</dd>
|
|
|
|
<dt class="mb-1">
|
|
{{ $gettext('Port:') }}
|
|
</dt>
|
|
<dd><code>{{ connectionInfo.streamPort }}</code></dd>
|
|
|
|
<dt class="mb-1">
|
|
{{ $gettext('Mount Name:') }}
|
|
</dt>
|
|
<dd><code>{{ connectionInfo.djMountPoint }}</code></dd>
|
|
</dl>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3 class="card-subtitle mt-0">
|
|
{{ $gettext('Shoutcast Clients') }}
|
|
</h3>
|
|
<dl>
|
|
<dt class="mb-1">
|
|
{{ $gettext('Server:') }}
|
|
</dt>
|
|
<dd>
|
|
<code>{{ connectionInfo.serverUrl }}</code>
|
|
</dd>
|
|
<dd v-if="connectionInfo.ip">
|
|
{{ $gettext('You may need to connect directly via your IP address:') }}
|
|
<code>{{ connectionInfo.ip }}</code>
|
|
</dd>
|
|
|
|
<dt class="mb-1">
|
|
{{ $gettext('Port:') }}
|
|
</dt>
|
|
<dd><code>{{ connectionInfo.streamPort }}</code></dd>
|
|
<dd>
|
|
{{ $gettext('For some clients, use port:') }}
|
|
<code>{{ connectionInfo.streamPort + 1 }}</code>
|
|
</dd>
|
|
|
|
<dt class="mb-1">
|
|
{{ $gettext('Password:') }}
|
|
</dt>
|
|
<dd>
|
|
<code>dj_username:dj_password</code>
|
|
{{ $gettext('or') }}
|
|
<code>dj_username,dj_password</code>
|
|
</dd>
|
|
</dl>
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="card-text">
|
|
{{ $gettext('Setup instructions for broadcasting software are available on the AzuraCast wiki.') }}
|
|
<br>
|
|
<a href="https://docs.azuracast.com/en/user-guide/streaming-software" target="_blank">
|
|
{{ $gettext('AzuraCast Wiki') }}
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
connectionInfo: Object
|
|
});
|
|
</script>
|