100 lines
3.1 KiB
Vue
100 lines
3.1 KiB
Vue
<template>
|
|
<section
|
|
class="card"
|
|
role="region"
|
|
aria-labelledby="hdr_connection_info"
|
|
>
|
|
<div class="card-header text-bg-primary">
|
|
<h2
|
|
id="hdr_connection_info"
|
|
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="/docs/user-guide/streaming-software/"
|
|
target="_blank"
|
|
>
|
|
{{ $gettext('AzuraCast Wiki') }}
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps({
|
|
connectionInfo: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
});
|
|
</script>
|