tilderadio/AzuraCast
4
0
Fork 0
mirror of https://github.com/AzuraCast/AzuraCast.git synced 2024-06-13 20:56:36 +00:00
Code Issues Releases Wiki Activity

Vue3: Remove unnecessary wrapping div.

Browse Source
This commit is contained in:
Buster Neece 2022-12-17 19:07:15 -06:00
parent 8259989f6a
commit 27e5be80ee
No known key found for this signature in database
GPG Key ID: F1D2E64A0005E80E
40 changed files with 2503 additions and 2558 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/vue/components/Account/ApiKeyNewKey.vue
View File

@ -1,32 +1,30 @@
<template> <template>
<div> <h3 class="card-subtitle">{{ $gettext('New Key Generated') }}</h3>
<h3 class="card-subtitle">{{ $gettext('New Key Generated') }}</h3>
<p class="card-text"> <p class="card-text">
<b>{{ $gettext('Important: copy the key below before continuing!') }}</b> <b>{{ $gettext('Important: copy the key below before continuing!') }}</b>
{{ $gettext('You will not be able to retrieve it again.') }} {{ $gettext('You will not be able to retrieve it again.') }}
</p> </p>
<p class="card-text"> <p class="card-text">
{{ $gettext('Your full API key is below:') }} {{ $gettext('Your full API key is below:') }}
</p> </p>
<div class="px-2"> <div class="px-2">
<code id="api_key">{{ newKey }}</code> <code id="api_key">{{ newKey }}</code>
<div class="buttons pt-2"> <div class="buttons pt-2">
<copy-to-clipboard-button :text="newKey"></copy-to-clipboard-button> <copy-to-clipboard-button :text="newKey"></copy-to-clipboard-button>
</div>
</div> </div>
<p class="card-text pt-3">
{{
$gettext('When making API calls, you can pass this value in the "X-API-Key" header to authenticate as yourself.')
}}
</p>
<p class="card-text">
{{ $gettext('You can only perform the actions your user account is allowed to perform.') }}
</p>
</div> </div>
<p class="card-text pt-3">
{{
$gettext('When making API calls, you can pass this value in the "X-API-Key" header to authenticate as yourself.')
}}
</p>
<p class="card-text">
{{ $gettext('You can only perform the actions your user account is allowed to perform.') }}
</p>
</template> </template>
<script setup> <script setup>

112
frontend/vue/components/Account/EditForm.vue
View File

@ -1,68 +1,66 @@
<template> <template>
<div> <b-form-fieldset>
<b-form-fieldset> <b-form-row>
<b-form-row> <b-wrapped-form-group class="col-md-6" id="form_name" :field="form.name">
<b-wrapped-form-group class="col-md-6" id="form_name" :field="form.name"> <template #label>
{{ $gettext('Name') }}
</template>
</b-wrapped-form-group>
<b-wrapped-form-group class="col-md-6" id="form_email" :field="form.email">
<template #label>
{{ $gettext('E-mail Address') }}
</template>
</b-wrapped-form-group>
</b-form-row>
</b-form-fieldset>
<b-form-fieldset>
<template #label>
{{ $gettext('Customization') }}
</template>
<b-form-row>
<b-col md="6">
<b-wrapped-form-group id="edit_form_locale"
:field="form.locale">
<template #label> <template #label>
{{ $gettext('Name') }} {{ $gettext('Language') }}
</template>
<template #default="props">
<b-form-radio-group stacked :id="props.id" :options="localeOptions"
v-model="props.field.$model">
</b-form-radio-group>
</template>
</b-wrapped-form-group>
</b-col>
<b-col md="6">
<b-wrapped-form-group id="edit_form_theme"
:field="form.theme">
<template #label>
{{ $gettext('Site Theme') }}
</template>
<template #default="props">
<b-form-radio-group stacked :id="props.id" :options="themeOptions"
v-model="props.field.$model">
</b-form-radio-group>
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
<b-wrapped-form-group class="col-md-6" id="form_email" :field="form.email"> <b-wrapped-form-group id="edit_form_show_24_hour_time"
:field="form.show_24_hour_time">
<template #label> <template #label>
{{ $gettext('E-mail Address') }} {{ $gettext('Time Display') }}
</template>
<template #default="props">
<b-form-radio-group stacked :id="props.id" :options="show24hourOptions"
v-model="props.field.$model">
</b-form-radio-group>
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
</b-form-row> </b-col>
</b-form-fieldset> </b-form-row>
</b-form-fieldset>
<b-form-fieldset>
<template #label>
{{ $gettext('Customization') }}
</template>
<b-form-row>
<b-col md="6">
<b-wrapped-form-group id="edit_form_locale"
:field="form.locale">
<template #label>
{{ $gettext('Language') }}
</template>
<template #default="props">
<b-form-radio-group stacked :id="props.id" :options="localeOptions"
v-model="props.field.$model">
</b-form-radio-group>
</template>
</b-wrapped-form-group>
</b-col>
<b-col md="6">
<b-wrapped-form-group id="edit_form_theme"
:field="form.theme">
<template #label>
{{ $gettext('Site Theme') }}
</template>
<template #default="props">
<b-form-radio-group stacked :id="props.id" :options="themeOptions"
v-model="props.field.$model">
</b-form-radio-group>
</template>
</b-wrapped-form-group>
<b-wrapped-form-group id="edit_form_show_24_hour_time"
:field="form.show_24_hour_time">
<template #label>
{{ $gettext('Time Display') }}
</template>
<template #default="props">
<b-form-radio-group stacked :id="props.id" :options="show24hourOptions"
v-model="props.field.$model">
</b-form-radio-group>
</template>
</b-wrapped-form-group>
</b-col>
</b-form-row>
</b-form-fieldset>
</div>
</template> </template>
<script> <script>

78
frontend/vue/components/Admin/CustomFields.vue
View File

@ -1,48 +1,46 @@
<template> <template>
<div> <b-card no-body>
<b-card no-body> <b-card-header header-bg-variant="primary-dark">
<b-card-header header-bg-variant="primary-dark"> <h2 class="card-title">{{ $gettext('Custom Fields') }}</h2>
<h2 class="card-title">{{ $gettext('Custom Fields') }}</h2> </b-card-header>
</b-card-header>
<info-card> <info-card>
<p class="card-text"> <p class="card-text">
{{ {{
$gettext('Create custom fields to store extra metadata about each media file uploaded to your station libraries.') $gettext('Create custom fields to store extra metadata about each media file uploaded to your station libraries.')
}} }}
</p> </p>
</info-card> </info-card>
<b-card-body body-class="card-padding-sm"> <b-card-body body-class="card-padding-sm">
<b-button variant="outline-primary" @click.prevent="doCreate"> <b-button variant="outline-primary" @click.prevent="doCreate">
<icon icon="add"></icon> <icon icon="add"></icon>
{{ $gettext('Add Custom Field') }} {{ $gettext('Add Custom Field') }}
</b-button> </b-button>
</b-card-body> </b-card-body>
<data-table ref="datatable" id="custom_fields" :fields="fields" :show-toolbar="false" :api-url="listUrl"> <data-table ref="datatable" id="custom_fields" :fields="fields" :show-toolbar="false" :api-url="listUrl">
<template #cell(name)="row"> <template #cell(name)="row">
{{ row.item.name }} <code>{{ row.item.short_name }}</code> {{ row.item.name }} <code>{{ row.item.short_name }}</code>
</template> </template>
<template #cell(auto_assign)="row"> <template #cell(auto_assign)="row">
{{ getAutoAssignName(row.item.auto_assign) }} {{ getAutoAssignName(row.item.auto_assign) }}
</template> </template>
<template #cell(actions)="row"> <template #cell(actions)="row">
<b-button-group size="sm"> <b-button-group size="sm">
<b-button size="sm" variant="primary" @click.prevent="doEdit(row.item.links.self)"> <b-button size="sm" variant="primary" @click.prevent="doEdit(row.item.links.self)">
{{ $gettext('Edit') }} {{ $gettext('Edit') }}
</b-button> </b-button>
<b-button size="sm" variant="danger" @click.prevent="doDelete(row.item.links.self)"> <b-button size="sm" variant="danger" @click.prevent="doDelete(row.item.links.self)">
{{ $gettext('Delete') }} {{ $gettext('Delete') }}
</b-button> </b-button>
</b-button-group> </b-button-group>
</template> </template>
</data-table> </data-table>
</b-card> </b-card>
<edit-modal ref="editModal" :create-url="listUrl" :auto-assign-types="autoAssignTypes" <edit-modal ref="editModal" :create-url="listUrl" :auto-assign-types="autoAssignTypes"
@relist="relist"></edit-modal> @relist="relist"></edit-modal>
</div>
</template> </template>
<script> <script>

46
frontend/vue/components/Admin/Logs.vue
View File

@ -1,31 +1,29 @@
<template> <template>
<div> <div class="card mb-3">
<div class="card mb-3"> <div class="card-header bg-primary-dark">
<div class="card-header bg-primary-dark"> <h2 class="card-title">
<h2 class="card-title"> {{ $gettext('System Logs') }}
{{ $gettext('System Logs') }} </h2>
</h2>
</div>
<log-list :url="systemLogsUrl" @view="viewLog"></log-list>
</div> </div>
<div class="card" v-if="stationLogs.length > 0"> <log-list :url="systemLogsUrl" @view="viewLog"></log-list>
<div class="card-header bg-primary-dark">
<h2 class="card-title">
{{ $gettext('Logs by Station') }}
</h2>
</div>
<b-tabs pills lazy nav-class="card-header-pills" nav-wrapper-class="card-header">
<b-tab v-for="row in stationLogs" :key="row.id" :title="row.name">
<log-list :url="row.url" @view="viewLog"></log-list>
</b-tab>
</b-tabs>
</div>
<streaming-log-modal ref="modal"></streaming-log-modal>
</div> </div>
<div class="card" v-if="stationLogs.length > 0">
<div class="card-header bg-primary-dark">
<h2 class="card-title">
{{ $gettext('Logs by Station') }}
</h2>
</div>
<b-tabs pills lazy nav-class="card-header-pills" nav-wrapper-class="card-header">
<b-tab v-for="row in stationLogs" :key="row.id" :title="row.name">
<log-list :url="row.url" @view="viewLog"></log-list>
</b-tab>
</b-tabs>
</div>
<streaming-log-modal ref="modal"></streaming-log-modal>
</template> </template>
<script> <script>

90
frontend/vue/components/Admin/Permissions.vue
View File

@ -1,54 +1,52 @@
<template> <template>
<div> <b-card no-body>
<b-card no-body> <b-card-header header-bg-variant="primary-dark">
<b-card-header header-bg-variant="primary-dark"> <h2 class="card-title">{{ $gettext('Roles & Permissions') }}</h2>
<h2 class="card-title">{{ $gettext('Roles & Permissions') }}</h2> </b-card-header>
</b-card-header>
<info-card> <info-card>
<p class="card-text"> <p class="card-text">
{{ {{
$gettext('AzuraCast uses a role-based access control system. Roles are given permissions to certain sections of the site, then users are assigned into those roles.') $gettext('AzuraCast uses a role-based access control system. Roles are given permissions to certain sections of the site, then users are assigned into those roles.')
}} }}
</p> </p>
</info-card> </info-card>
<b-card-body body-class="card-padding-sm"> <b-card-body body-class="card-padding-sm">
<b-button variant="outline-primary" @click.prevent="doCreate"> <b-button variant="outline-primary" @click.prevent="doCreate">
<icon icon="add"></icon> <icon icon="add"></icon>
{{ $gettext('Add Role') }} {{ $gettext('Add Role') }}
</b-button> </b-button>
</b-card-body> </b-card-body>
<data-table ref="datatable" id="permissions" paginated :fields="fields" :api-url="listUrl"> <data-table ref="datatable" id="permissions" paginated :fields="fields" :api-url="listUrl">
<template #cell(permissions)="row"> <template #cell(permissions)="row">
<div v-if="row.item.permissions.global.length > 0"> <div v-if="row.item.permissions.global.length > 0">
{{ $gettext('Global') }} {{ $gettext('Global') }}
: :
{{ getGlobalPermissionNames(row.item.permissions.global).join(', ') }} {{ getGlobalPermissionNames(row.item.permissions.global).join(', ') }}
</div> </div>
<div v-for="(permissions, stationId) in row.item.permissions.station" :key="stationId"> <div v-for="(permissions, stationId) in row.item.permissions.station" :key="stationId">
<b>{{ getStationName(stationId) }}</b>: <b>{{ getStationName(stationId) }}</b>:
{{ getStationPermissionNames(permissions).join(', ') }} {{ getStationPermissionNames(permissions).join(', ') }}
</div> </div>
</template> </template>
<template #cell(actions)="row"> <template #cell(actions)="row">
<b-button-group size="sm" v-if="!row.item.is_super_admin"> <b-button-group size="sm" v-if="!row.item.is_super_admin">
<b-button size="sm" variant="primary" @click.prevent="doEdit(row.item.links.self)"> <b-button size="sm" variant="primary" @click.prevent="doEdit(row.item.links.self)">
{{ $gettext('Edit') }} {{ $gettext('Edit') }}
</b-button> </b-button>
<b-button v-if="row.item.id !== 1" size="sm" variant="danger" <b-button v-if="row.item.id !== 1" size="sm" variant="danger"
@click.prevent="doDelete(row.item.links.self)"> @click.prevent="doDelete(row.item.links.self)">
{{ $gettext('Delete') }} {{ $gettext('Delete') }}
</b-button> </b-button>
</b-button-group> </b-button-group>
</template> </template>
</data-table> </data-table>
</b-card> </b-card>
<edit-modal ref="editModal" :create-url="listUrl" :station-permissions="stationPermissions" :stations="stations" <edit-modal ref="editModal" :create-url="listUrl" :station-permissions="stationPermissions" :stations="stations"
:global-permissions="globalPermissions" @relist="relist"></edit-modal> :global-permissions="globalPermissions" @relist="relist"></edit-modal>
</div>
</template> </template>
<script> <script>

148
frontend/vue/components/Admin/Settings/SecurityPrivacyTab.vue
View File

@ -1,83 +1,81 @@
<template> <template>
<div> <b-form-fieldset>
<b-form-fieldset> <template #label>
<template #label> {{ $gettext('Privacy') }}
{{ $gettext('Privacy') }} </template>
</template>
<b-form-row> <b-form-row>
<b-wrapped-form-group class="col-md-12" id="edit_form_analytics" :field="form.analytics"> <b-wrapped-form-group class="col-md-12" id="edit_form_analytics" :field="form.analytics">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Listener Analytics Collection') }} {{ $gettext('Listener Analytics Collection') }}
</template> </template>
<template #description="{lang}"> <template #description="{lang}">
{{ {{
$gettext('Aggregate listener statistics are used to show station reports across the system. IP-based listener statistics are used to view live listener tracking and may be required for royalty reports.') $gettext('Aggregate listener statistics are used to show station reports across the system. IP-based listener statistics are used to view live listener tracking and may be required for royalty reports.')
}} }}
</template> </template>
<template #default="props"> <template #default="props">
<b-form-radio-group stacked :id="props.id" v-model="props.field.$model"> <b-form-radio-group stacked :id="props.id" v-model="props.field.$model">
<b-form-radio value="all"> <b-form-radio value="all">
<b> <b>
{{ $gettext('Full:') }} {{ $gettext('Full:') }}
</b> </b>
{{ $gettext('Collect aggregate listener statistics and IP-based listener statistics') }} {{ $gettext('Collect aggregate listener statistics and IP-based listener statistics') }}
</b-form-radio> </b-form-radio>
<b-form-radio value="no_ip"> <b-form-radio value="no_ip">
<b> <b>
{{ $gettext('Limited:') }} {{ $gettext('Limited:') }}
</b> </b>
{{ $gettext('Only collect aggregate listener statistics') }} {{ $gettext('Only collect aggregate listener statistics') }}
</b-form-radio> </b-form-radio>
<b-form-radio value="none"> <b-form-radio value="none">
<b> <b>
{{ $gettext('None:') }} {{ $gettext('None:') }}
</b> </b>
{{ $gettext('Do not collect any listener analytics') }} {{ $gettext('Do not collect any listener analytics') }}
</b-form-radio> </b-form-radio>
</b-form-radio-group> </b-form-radio-group>
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
</b-form-row> </b-form-row>
</b-form-fieldset> </b-form-fieldset>
<b-form-fieldset> <b-form-fieldset>
<template #label> <template #label>
{{ $gettext('Security') }} {{ $gettext('Security') }}
</template> </template>
<b-form-row> <b-form-row>
<b-wrapped-form-checkbox class="col-md-12" id="edit_form_always_use_ssl" <b-wrapped-form-checkbox class="col-md-12" id="edit_form_always_use_ssl"
:field="form.always_use_ssl"> :field="form.always_use_ssl">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Always Use HTTPS') }} {{ $gettext('Always Use HTTPS') }}
</template> </template>
<template #description="{lang}"> <template #description="{lang}">
{{ {{
$gettext('Set to "Yes" to always use "https://" secure URLs, and to automatically redirect to the secure URL when an insecure URL is visited.') $gettext('Set to "Yes" to always use "https://" secure URLs, and to automatically redirect to the secure URL when an insecure URL is visited.')
}} }}
</template> </template>
</b-wrapped-form-checkbox> </b-wrapped-form-checkbox>
<b-wrapped-form-group class="col-md-12" id="edit_form_api_access_control" <b-wrapped-form-group class="col-md-12" id="edit_form_api_access_control"
:field="form.api_access_control"> :field="form.api_access_control">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('API "Access-Control-Allow-Origin" Header') }} {{ $gettext('API "Access-Control-Allow-Origin" Header') }}
</template> </template>
<template #description="{lang}"> <template #description="{lang}">
{{ {{
$gettext('Set to * to allow all sources, or specify a list of origins separated by a comma (,).') $gettext('Set to * to allow all sources, or specify a list of origins separated by a comma (,).')
}} }}
<br> <br>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin" <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin"
target="_blank"> target="_blank">
{{ $gettext('Learn more about this header.') }} {{ $gettext('Learn more about this header.') }}
</a> </a>
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
</b-form-row> </b-form-row>
</b-form-fieldset> </b-form-fieldset>
</div>
</template> </template>
<script> <script>

398
frontend/vue/components/Admin/Settings/ServicesTab.vue
View File

@ -1,230 +1,228 @@
<template> <template>
<div> <b-form-fieldset>
<b-form-fieldset> <template #label>
<template #label> {{ $gettext('AzuraCast Update Checks') }}
{{ $gettext('AzuraCast Update Checks') }} </template>
</template>
<b-form-row> <b-form-row>
<b-form-markup class="col-md-6" id="form_release_channel"> <b-form-markup class="col-md-6" id="form_release_channel">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Release Channel') }} {{ $gettext('Release Channel') }}
</template> </template>
<template #description="{lang}"> <template #description="{lang}">
<a href="https://docs.azuracast.com/en/getting-started/updates/release-channels" <a href="https://docs.azuracast.com/en/getting-started/updates/release-channels"
target="_blank"> target="_blank">
{{ $gettext('Learn more about release channels in the AzuraCast docs.') }} {{ $gettext('Learn more about release channels in the AzuraCast docs.') }}
</a> </a>
</template> </template>
<p class="card-text font-weight-bold"> <p class="card-text font-weight-bold">
{{ langReleaseChannel }} {{ langReleaseChannel }}
</p> </p>
</b-form-markup> </b-form-markup>
<b-wrapped-form-checkbox class="col-md-6" id="edit_form_check_for_updates" <b-wrapped-form-checkbox class="col-md-6" id="edit_form_check_for_updates"
:field="form.check_for_updates"> :field="form.check_for_updates">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Show Update Announcements') }} {{ $gettext('Show Update Announcements') }}
</template> </template>
<template #description="{lang}"> <template #description="{lang}">
{{ $gettext('Show new releases within your update channel on the AzuraCast homepage.') }} {{ $gettext('Show new releases within your update channel on the AzuraCast homepage.') }}
</template> </template>
</b-wrapped-form-checkbox> </b-wrapped-form-checkbox>
</b-form-row> </b-form-row>
</b-form-fieldset> </b-form-fieldset>
<b-form-fieldset> <b-form-fieldset>
<template #label> <template #label>
{{ $gettext('LetsEncrypt') }} {{ $gettext('LetsEncrypt') }}
</template> </template>
<template #description> <template #description>
{{ {{
$gettext('LetsEncrypt provides simple, free SSL certificates allowing you to secure traffic through your control panel and radio streams.') $gettext('LetsEncrypt provides simple, free SSL certificates allowing you to secure traffic through your control panel and radio streams.')
}} }}
</template> </template>
<b-form-row> <b-form-row>
<b-wrapped-form-group class="col-md-6" id="edit_form_acme_domains" <b-wrapped-form-group class="col-md-6" id="edit_form_acme_domains"
:field="form.acme_domains"> :field="form.acme_domains">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Domain Name(s)') }} {{ $gettext('Domain Name(s)') }}
</template> </template>
<template #description="{lang}"> <template #description="{lang}">
{{ {{
$gettext('All listed domain names should point to this AzuraCast installation. Separate multiple domain names with commas.') $gettext('All listed domain names should point to this AzuraCast installation. Separate multiple domain names with commas.')
}} }}
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
<b-wrapped-form-group class="col-md-6" id="edit_form_acme_email" <b-wrapped-form-group class="col-md-6" id="edit_form_acme_email"
:field="form.acme_email" input-type="email"> :field="form.acme_email" input-type="email">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('E-mail Address (Optional)') }} {{ $gettext('E-mail Address (Optional)') }}
</template> </template>
<template #description="{lang}"> <template #description="{lang}">
{{ $gettext('Enter your e-mail address to receive updates about your certificate.') }} {{ $gettext('Enter your e-mail address to receive updates about your certificate.') }}
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
<div class="form-group col"> <div class="form-group col">
<b-button size="sm" variant="primary" :disabled="form.$anyDirty" @click="generateAcmeCert"> <b-button size="sm" variant="primary" :disabled="form.$anyDirty" @click="generateAcmeCert">
<icon icon="badge"></icon> <icon icon="badge"></icon>
{{ $gettext('Generate/Renew Certificate') }} {{ $gettext('Generate/Renew Certificate') }}
<span v-if="form.$anyDirty"> <span v-if="form.$anyDirty">
({{ $gettext('Save Changes first') }}) ({{ $gettext('Save Changes first') }})
</span> </span>
</b-button> </b-button>
</div> </div>
</b-form-row> </b-form-row>
</b-form-fieldset> </b-form-fieldset>
<b-form-fieldset> <b-form-fieldset>
<template #label> <template #label>
{{ $gettext('E-mail Delivery Service') }} {{ $gettext('E-mail Delivery Service') }}
</template> </template>
<template #description> <template #description>
{{ $gettext('Used for "Forgot Password" functionality, web hooks and other functions.') }} {{ $gettext('Used for "Forgot Password" functionality, web hooks and other functions.') }}
</template> </template>
<b-form-row> <b-form-row>
<b-wrapped-form-checkbox class="col-md-12" id="edit_form_mail_enabled" <b-wrapped-form-checkbox class="col-md-12" id="edit_form_mail_enabled"
:field="form.mail_enabled"> :field="form.mail_enabled">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Enable Mail Delivery') }} {{ $gettext('Enable Mail Delivery') }}
</template> </template>
</b-wrapped-form-checkbox> </b-wrapped-form-checkbox>
</b-form-row> </b-form-row>
<b-form-row v-if="form.mail_enabled.$model" class="mt-2"> <b-form-row v-if="form.mail_enabled.$model" class="mt-2">
<b-wrapped-form-group class="col-md-6" id="edit_form_mail_sender_name" <b-wrapped-form-group class="col-md-6" id="edit_form_mail_sender_name"
:field="form.mail_sender_name"> :field="form.mail_sender_name">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Sender Name') }} {{ $gettext('Sender Name') }}
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
<b-wrapped-form-group class="col-md-6" id="edit_form_mail_sender_email" <b-wrapped-form-group class="col-md-6" id="edit_form_mail_sender_email"
:field="form.mail_sender_email" input-type="email"> :field="form.mail_sender_email" input-type="email">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Sender E-mail Address') }} {{ $gettext('Sender E-mail Address') }}
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
<b-wrapped-form-group class="col-md-4" id="edit_form_mail_smtp_host" <b-wrapped-form-group class="col-md-4" id="edit_form_mail_smtp_host"
:field="form.mail_smtp_host"> :field="form.mail_smtp_host">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('SMTP Host') }} {{ $gettext('SMTP Host') }}
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
<b-wrapped-form-group class="col-md-3" id="edit_form_mail_smtp_port" <b-wrapped-form-group class="col-md-3" id="edit_form_mail_smtp_port"
:field="form.mail_smtp_port" input-type="number"> :field="form.mail_smtp_port" input-type="number">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('SMTP Port') }} {{ $gettext('SMTP Port') }}
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
<b-wrapped-form-checkbox class="col-md-5" id="edit_form_mail_smtp_secure" <b-wrapped-form-checkbox class="col-md-5" id="edit_form_mail_smtp_secure"
:field="form.mail_smtp_secure"> :field="form.mail_smtp_secure">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Use Secure (TLS) SMTP Connection') }} {{ $gettext('Use Secure (TLS) SMTP Connection') }}
</template> </template>
<template #description="{lang}"> <template #description="{lang}">
{{ $gettext('Usually enabled for port 465, disabled for ports 587 or 25.') }} {{ $gettext('Usually enabled for port 465, disabled for ports 587 or 25.') }}
</template> </template>
</b-wrapped-form-checkbox> </b-wrapped-form-checkbox>
<b-wrapped-form-group class="col-md-6" id="edit_form_mail_smtp_username" <b-wrapped-form-group class="col-md-6" id="edit_form_mail_smtp_username"
:field="form.mail_smtp_username"> :field="form.mail_smtp_username">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('SMTP Username') }} {{ $gettext('SMTP Username') }}
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
<b-wrapped-form-group class="col-md-6" id="edit_form_mail_smtp_password" <b-wrapped-form-group class="col-md-6" id="edit_form_mail_smtp_password"
:field="form.mail_smtp_password" input-type="password"> :field="form.mail_smtp_password" input-type="password">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('SMTP Password') }} {{ $gettext('SMTP Password') }}
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
<div class="form-group col"> <div class="form-group col">
<b-button size="sm" variant="primary" :disabled="form.$anyDirty" v-b-modal.send_test_message> <b-button size="sm" variant="primary" :disabled="form.$anyDirty" v-b-modal.send_test_message>
<icon icon="send"></icon> <icon icon="send"></icon>
{{ $gettext('Send Test Message') }} {{ $gettext('Send Test Message') }}
<span v-if="form.$anyDirty"> <span v-if="form.$anyDirty">
({{ $gettext('Save Changes first') }}) ({{ $gettext('Save Changes first') }})
</span> </span>
</b-button> </b-button>
</div> </div>
</b-form-row> </b-form-row>
</b-form-fieldset> </b-form-fieldset>
<b-form-fieldset> <b-form-fieldset>
<template #label> <template #label>
{{ $gettext('Avatar Service') }} {{ $gettext('Avatar Service') }}
</template> </template>
<b-form-row> <b-form-row>
<b-wrapped-form-group class="col-md-6" id="edit_form_avatar_service" :field="form.avatar_service"> <b-wrapped-form-group class="col-md-6" id="edit_form_avatar_service" :field="form.avatar_service">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Avatar Service') }} {{ $gettext('Avatar Service') }}
</template> </template>
<template #default="props"> <template #default="props">
<b-form-radio-group stacked :id="props.id" v-model="props.field.$model" <b-form-radio-group stacked :id="props.id" v-model="props.field.$model"
:options="avatarServiceOptions"></b-form-radio-group> :options="avatarServiceOptions"></b-form-radio-group>
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
<b-wrapped-form-group class="col-md-6" id="edit_form_avatar_default_url" <b-wrapped-form-group class="col-md-6" id="edit_form_avatar_default_url"
:field="form.avatar_default_url"> :field="form.avatar_default_url">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Default Avatar URL') }} {{ $gettext('Default Avatar URL') }}
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
</b-form-row> </b-form-row>
</b-form-fieldset> </b-form-fieldset>
<b-form-fieldset> <b-form-fieldset>
<template #label> <template #label>
{{ $gettext('Album Art') }} {{ $gettext('Album Art') }}
</template> </template>
<b-form-row> <b-form-row>
<b-wrapped-form-checkbox class="col-md-6" id="use_external_album_art_in_apis" <b-wrapped-form-checkbox class="col-md-6" id="use_external_album_art_in_apis"
:field="form.use_external_album_art_in_apis"> :field="form.use_external_album_art_in_apis">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Check Web Services for Album Art for "Now Playing" Tracks') }} {{ $gettext('Check Web Services for Album Art for "Now Playing" Tracks') }}
</template> </template>
</b-wrapped-form-checkbox> </b-wrapped-form-checkbox>
<b-wrapped-form-checkbox class="col-md-6" id="use_external_album_art_when_processing_media" <b-wrapped-form-checkbox class="col-md-6" id="use_external_album_art_when_processing_media"
:field="form.use_external_album_art_when_processing_media"> :field="form.use_external_album_art_when_processing_media">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Check Web Services for Album Art When Uploading Media') }} {{ $gettext('Check Web Services for Album Art When Uploading Media') }}
</template> </template>
</b-wrapped-form-checkbox> </b-wrapped-form-checkbox>
<b-wrapped-form-group class="col-md-12" id="edit_form_last_fm_api_key" :field="form.last_fm_api_key"> <b-wrapped-form-group class="col-md-12" id="edit_form_last_fm_api_key" :field="form.last_fm_api_key">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Last.fm API Key') }} {{ $gettext('Last.fm API Key') }}
</template> </template>
<template #description="{lang}"> <template #description="{lang}">
{{ $gettext('This service can provide album art for tracks where none is available locally.') }} {{ $gettext('This service can provide album art for tracks where none is available locally.') }}
<br> <br>
<a href="https://www.last.fm/api/account/create" target="_blank"> <a href="https://www.last.fm/api/account/create" target="_blank">
{{ $gettext('Apply for an API key at Last.fm') }} {{ $gettext('Apply for an API key at Last.fm') }}
</a> </a>
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
</b-form-row> </b-form-row>
</b-form-fieldset> </b-form-fieldset>
<streaming-log-modal ref="acmeModal"></streaming-log-modal> <streaming-log-modal ref="acmeModal"></streaming-log-modal>
<admin-settings-test-message-modal :test-message-url="testMessageUrl"></admin-settings-test-message-modal> <admin-settings-test-message-modal :test-message-url="testMessageUrl"></admin-settings-test-message-modal>
</div>
</template> </template>
<script> <script>

88
frontend/vue/components/Admin/Stations.vue
View File

@ -1,53 +1,51 @@
<template> <template>
<div> <b-card no-body>
<b-card no-body> <b-card-header header-bg-variant="primary-dark">
<b-card-header header-bg-variant="primary-dark"> <h2 class="card-title">{{ $gettext('Stations') }}</h2>
<h2 class="card-title">{{ $gettext('Stations') }}</h2> </b-card-header>
</b-card-header>
<b-card-body body-class="card-padding-sm"> <b-card-body body-class="card-padding-sm">
<b-button variant="outline-primary" @click.prevent="doCreate"> <b-button variant="outline-primary" @click.prevent="doCreate">
<icon icon="add"></icon> <icon icon="add"></icon>
{{ $gettext('Add Station') }} {{ $gettext('Add Station') }}
</b-button> </b-button>
</b-card-body> </b-card-body>
<data-table ref="datatable" id="stations" paginated :fields="fields" :api-url="listUrl"> <data-table ref="datatable" id="stations" paginated :fields="fields" :api-url="listUrl">
<template #cell(name)="row"> <template #cell(name)="row">
<big>{{ row.item.name }}</big><br> <big>{{ row.item.name }}</big><br>
<code>{{ row.item.short_name }}</code> <code>{{ row.item.short_name }}</code>
</template> </template>
<template #cell(frontend_type)="row"> <template #cell(frontend_type)="row">
{{ getFrontendName(row.item.frontend_type) }} {{ getFrontendName(row.item.frontend_type) }}
</template> </template>
<template #cell(backend_type)="row"> <template #cell(backend_type)="row">
{{ getBackendName(row.item.backend_type) }} {{ getBackendName(row.item.backend_type) }}
</template> </template>
<template #cell(actions)="row"> <template #cell(actions)="row">
<b-button-group size="sm"> <b-button-group size="sm">
<b-button size="sm" variant="secondary" :href="row.item.links.manage" target="_blank"> <b-button size="sm" variant="secondary" :href="row.item.links.manage" target="_blank">
{{ $gettext('Manage') }} {{ $gettext('Manage') }}
</b-button> </b-button>
<b-button size="sm" variant="secondary" <b-button size="sm" variant="secondary"
@click.prevent="doClone(row.item.name, row.item.links.clone)"> @click.prevent="doClone(row.item.name, row.item.links.clone)">
{{ $gettext('Clone') }} {{ $gettext('Clone') }}
</b-button> </b-button>
<b-button size="sm" variant="primary" @click.prevent="doEdit(row.item.links.self)"> <b-button size="sm" variant="primary" @click.prevent="doEdit(row.item.links.self)">
{{ $gettext('Edit') }} {{ $gettext('Edit') }}
</b-button> </b-button>
<b-button size="sm" variant="danger" @click.prevent="doDelete(row.item.links.self)"> <b-button size="sm" variant="danger" @click.prevent="doDelete(row.item.links.self)">
{{ $gettext('Delete') }} {{ $gettext('Delete') }}
</b-button> </b-button>
</b-button-group> </b-button-group>
</template> </template>
</data-table> </data-table>
</b-card> </b-card>
<admin-stations-edit-modal v-bind="$props" ref="editModal" :create-url="listUrl" <admin-stations-edit-modal v-bind="$props" ref="editModal" :create-url="listUrl"
@relist="relist"></admin-stations-edit-modal> @relist="relist"></admin-stations-edit-modal>
<admin-stations-clone-modal ref="cloneModal" @relist="relist"></admin-stations-clone-modal> <admin-stations-clone-modal ref="cloneModal" @relist="relist"></admin-stations-clone-modal>
</div>
</template> </template>
<script> <script>

120
frontend/vue/components/Admin/Stations/Form/AdminForm.vue
View File

@ -1,71 +1,69 @@
<template> <template>
<div> <b-form-group>
<b-form-group> <b-form-fieldset>
<b-form-fieldset> <b-form-row>
<b-form-row> <b-wrapped-form-checkbox class="col-md-6" id="edit_form_is_enabled" :field="form.is_enabled">
<b-wrapped-form-checkbox class="col-md-6" id="edit_form_is_enabled" :field="form.is_enabled"> <template #label="{lang}">
<template #label="{lang}"> {{ $gettext('Enable Broadcasting') }}
{{ $gettext('Enable Broadcasting') }} </template>
</template> <template #description="{lang}">
<template #description="{lang}"> {{ $gettext('If disabled, the station will not broadcast or shuffle its AutoDJ.') }}
{{ $gettext('If disabled, the station will not broadcast or shuffle its AutoDJ.') }} </template>
</template> </b-wrapped-form-checkbox>
</b-wrapped-form-checkbox>
<b-wrapped-form-group v-if="showAdvanced" class="col-md-6" id="edit_form_radio_base_dir" <b-wrapped-form-group v-if="showAdvanced" class="col-md-6" id="edit_form_radio_base_dir"
:field="form.radio_base_dir" advanced> :field="form.radio_base_dir" advanced>
<template #label="{lang}">
{{ $gettext('Base Station Directory') }}
</template>
<template #description="{lang}">
{{
$gettext('The parent directory where station playlist and configuration files are stored. Leave blank to use default directory.')
}}
</template>
</b-wrapped-form-group>
</b-form-row>
</b-form-fieldset>
<b-form-fieldset>
<b-overlay variant="card" :show="storageLocationsLoading">
<b-form-row>
<b-wrapped-form-group class="col-md-12" id="edit_form_media_storage_location"
:field="form.media_storage_location">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Base Station Directory') }} {{ $gettext('Media Storage Location') }}
</template> </template>
<template #description="{lang}"> <template #default="props">
{{ <b-form-select :id="props.id" v-model="props.field.$model"
$gettext('The parent directory where station playlist and configuration files are stored. Leave blank to use default directory.') :options="storageLocationOptions.media_storage_location"></b-form-select>
}} </template>
</b-wrapped-form-group>
<b-wrapped-form-group class="col-md-12" id="edit_form_recordings_storage_location"
:field="form.recordings_storage_location">
<template #label="{lang}">
{{ $gettext('Live Recordings Storage Location') }}
</template>
<template #default="props">
<b-form-select :id="props.id" v-model="props.field.$model"
:options="storageLocationOptions.recordings_storage_location"></b-form-select>
</template>
</b-wrapped-form-group>
<b-wrapped-form-group class="col-md-12" id="edit_form_podcasts_storage_location"
:field="form.podcasts_storage_location">
<template #label="{lang}">
{{ $gettext('Podcasts Storage Location') }}
</template>
<template #default="props">
<b-form-select :id="props.id" v-model="props.field.$model"
:options="storageLocationOptions.podcasts_storage_location"></b-form-select>
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
</b-form-row> </b-form-row>
</b-form-fieldset> </b-overlay>
</b-form-fieldset>
<b-form-fieldset> </b-form-group>
<b-overlay variant="card" :show="storageLocationsLoading">
<b-form-row>
<b-wrapped-form-group class="col-md-12" id="edit_form_media_storage_location"
:field="form.media_storage_location">
<template #label="{lang}">
{{ $gettext('Media Storage Location') }}
</template>
<template #default="props">
<b-form-select :id="props.id" v-model="props.field.$model"
:options="storageLocationOptions.media_storage_location"></b-form-select>
</template>
</b-wrapped-form-group>
<b-wrapped-form-group class="col-md-12" id="edit_form_recordings_storage_location"
:field="form.recordings_storage_location">
<template #label="{lang}">
{{ $gettext('Live Recordings Storage Location') }}
</template>
<template #default="props">
<b-form-select :id="props.id" v-model="props.field.$model"
:options="storageLocationOptions.recordings_storage_location"></b-form-select>
</template>
</b-wrapped-form-group>
<b-wrapped-form-group class="col-md-12" id="edit_form_podcasts_storage_location"
:field="form.podcasts_storage_location">
<template #label="{lang}">
{{ $gettext('Podcasts Storage Location') }}
</template>
<template #default="props">
<b-form-select :id="props.id" v-model="props.field.$model"
:options="storageLocationOptions.podcasts_storage_location"></b-form-select>
</template>
</b-wrapped-form-group>
</b-form-row>
</b-overlay>
</b-form-fieldset>
</b-form-group>
</div>
</template> </template>
<script> <script>

376
frontend/vue/components/Admin/Stations/Form/BackendForm.vue
View File

@ -1,19 +1,69 @@
<template> <template>
<div> <b-form-fieldset>
<b-form-row>
<b-wrapped-form-group class="col-md-12" id="edit_form_backend_type"
:field="form.backend_type">
<template #label="{lang}">
{{ $gettext('AutoDJ Service') }}
</template>
<template #description="{lang}">
{{
$gettext('This software shuffles from playlists of music constantly and plays when no other radio source is available.')
}}
</template>
<template #default="props">
<b-form-radio-group stacked :id="props.id" :options="backendTypeOptions"
v-model="props.field.$model">
</b-form-radio-group>
</template>
</b-wrapped-form-group>
</b-form-row>
</b-form-fieldset>
<b-form-fieldset v-if="isBackendEnabled">
<b-form-fieldset> <b-form-fieldset>
<b-form-row> <b-form-row>
<b-wrapped-form-group class="col-md-12" id="edit_form_backend_type" <b-wrapped-form-group class="col-md-7" id="edit_form_backend_crossfade_type"
:field="form.backend_type"> :field="form.backend_config.crossfade_type">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('AutoDJ Service') }} {{ $gettext('Crossfade Method') }}
</template> </template>
<template #description="{lang}"> <template #description="{lang}">
{{ {{
$gettext('This software shuffles from playlists of music constantly and plays when no other radio source is available.') $gettext('Choose a method to use when transitioning from one song to another. Smart Mode considers the volume of the two tracks when fading for a smoother effect, but requires more CPU resources.')
}} }}
</template> </template>
<template #default="props"> <template #default="props">
<b-form-radio-group stacked :id="props.id" :options="backendTypeOptions" <b-form-radio-group stacked :id="props.id" :options="crossfadeOptions"
v-model="props.field.$model">
</b-form-radio-group>
</template>
</b-wrapped-form-group>
<b-wrapped-form-group class="col-md-5" id="edit_form_backend_crossfade"
:field="form.backend_config.crossfade" input-type="number"
:input-attrs="{ min: '0.0', max: '30.0', step: '0.1' }">
<template #label="{lang}">
{{ $gettext('Crossfade Duration (Seconds)') }}
</template>
<template #description="{lang}">
{{ $gettext('Number of seconds to overlap songs.') }}
</template>
</b-wrapped-form-group>
</b-form-row>
<b-form-row>
<b-wrapped-form-group class="col-md-12" id="edit_form_backend_config_audio_processing_method"
:field="form.backend_config.audio_processing_method">
<template #label="{lang}">
{{ $gettext('Audio Processing Method') }}
</template>
<template #description="{lang}">
{{
$gettext('Choose a method to use for processing audio which produces a more uniform and "full" sound for your station.')
}}
</template>
<template #default="props">
<b-form-radio-group stacked :id="props.id" :options="audioProcessingOptions"
v-model="props.field.$model"> v-model="props.field.$model">
</b-form-radio-group> </b-form-radio-group>
</template> </template>
@ -21,207 +71,155 @@
</b-form-row> </b-form-row>
</b-form-fieldset> </b-form-fieldset>
<b-form-fieldset v-if="isBackendEnabled"> <b-form-fieldset v-if="isStereoToolEnabled && isStereoToolInstalled">
<template #label>
{{ $gettext('Stereo Tool') }}
</template>
<template #description>
{{
$gettext('Stereo Tool is an industry standard for software audio processing. For more information on how to configure it, please refer to the')
}}
<a href="https://www.thimeo.com/stereo-tool/" target="_blank">
{{ $gettext('Stereo Tool documentation.') }}
</a>
</template>
<b-form-fieldset> <b-form-fieldset>
<b-form-row> <b-form-row>
<b-wrapped-form-group class="col-md-7" id="edit_form_backend_crossfade_type" <b-wrapped-form-group class="col-md-7" id="edit_form_backend_stereo_tool_license_key"
:field="form.backend_config.crossfade_type"> :field="form.backend_config.stereo_tool_license_key" input-type="text">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Crossfade Method') }} {{ $gettext('Stereo Tool License Key') }}
</template> </template>
<template #description="{lang}"> <template #description="{lang}">
{{ {{
$gettext('Choose a method to use when transitioning from one song to another. Smart Mode considers the volume of the two tracks when fading for a smoother effect, but requires more CPU resources.') $gettext('Provide a valid license key from Thimeo. Functionality is limited without a license key.')
}}
</template>
<template #default="props">
<b-form-radio-group stacked :id="props.id" :options="crossfadeOptions"
v-model="props.field.$model">
</b-form-radio-group>
</template>
</b-wrapped-form-group>
<b-wrapped-form-group class="col-md-5" id="edit_form_backend_crossfade"
:field="form.backend_config.crossfade" input-type="number"
:input-attrs="{ min: '0.0', max: '30.0', step: '0.1' }">
<template #label="{lang}">
{{ $gettext('Crossfade Duration (Seconds)') }}
</template>
<template #description="{lang}">
{{ $gettext('Number of seconds to overlap songs.') }}
</template>
</b-wrapped-form-group>
</b-form-row>
<b-form-row>
<b-wrapped-form-group class="col-md-12" id="edit_form_backend_config_audio_processing_method"
:field="form.backend_config.audio_processing_method">
<template #label="{lang}">
{{ $gettext('Audio Processing Method') }}
</template>
<template #description="{lang}">
{{
$gettext('Choose a method to use for processing audio which produces a more uniform and "full" sound for your station.')
}}
</template>
<template #default="props">
<b-form-radio-group stacked :id="props.id" :options="audioProcessingOptions"
v-model="props.field.$model">
</b-form-radio-group>
</template>
</b-wrapped-form-group>
</b-form-row>
</b-form-fieldset>
<b-form-fieldset v-if="isStereoToolEnabled && isStereoToolInstalled">
<template #label>
{{ $gettext('Stereo Tool') }}
</template>
<template #description>
{{
$gettext('Stereo Tool is an industry standard for software audio processing. For more information on how to configure it, please refer to the')
}}
<a href="https://www.thimeo.com/stereo-tool/" target="_blank">
{{ $gettext('Stereo Tool documentation.') }}
</a>
</template>
<b-form-fieldset>
<b-form-row>
<b-wrapped-form-group class="col-md-7" id="edit_form_backend_stereo_tool_license_key"
:field="form.backend_config.stereo_tool_license_key" input-type="text">
<template #label="{lang}">
{{ $gettext('Stereo Tool License Key') }}
</template>
<template #description="{lang}">
{{
$gettext('Provide a valid license key from Thimeo. Functionality is limited without a license key.')
}}
</template>
</b-wrapped-form-group>
<b-form-markup class="col-md-5" id="edit_form_backend_stereo_tool_config">
<template #label="{lang}">
{{ $gettext('Upload Stereo Tool Configuration') }}
</template>
<p class="card-text">
{{
$gettext('Upload a Stereo Tool configuration file from the "Broadcasting" submenu in the station profile.')
}}
</p>
</b-form-markup>
</b-form-row>
</b-form-fieldset>
</b-form-fieldset>
<b-form-fieldset v-if="showAdvanced">
<template #label>
{{ $gettext('Advanced Configuration') }}
</template>
<b-form-row>
<b-wrapped-form-checkbox class="col-md-6"
id="edit_form_backend_use_manual_autodj"
:field="form.backend_config.use_manual_autodj" advanced>
<template #label="{lang}">
{{ $gettext('Manual AutoDJ Mode') }}
</template>
<template #description="{lang}">
{{
$gettext('This mode disables AzuraCast\'s AutoDJ management, using Liquidsoap itself to manage song playback. "Next Song" and some other features will not be available.')
}}
</template>
</b-wrapped-form-checkbox>
<b-wrapped-form-checkbox class="col-md-6"
id="edit_form_backend_enable_replaygain_metadata"
:field="form.backend_config.enable_replaygain_metadata" advanced>
<template #label="{lang}">
{{ $gettext('Use Replaygain Metadata') }}
</template>
<template #description="{lang}">
{{
$gettext('Instruct Liquidsoap to use any replaygain metadata associated with a song to control its volume level. This may increase CPU consumption.')
}}
</template>
</b-wrapped-form-checkbox>
<b-wrapped-form-group class="col-md-6" id="edit_form_backend_telnet_port"
:field="form.backend_config.telnet_port" input-type="number"
:input-attrs="{ min: '0' }" advanced>
<template #label="{lang}">
{{ $gettext('Customize Internal Request Processing Port') }}
</template>
<template #description="{lang}">
{{
$gettext('This port is not used by any external process. Only modify this port if the assigned port is in use. Leave blank to automatically assign a port.')
}} }}
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
<b-wrapped-form-group class="col-md-6" id="edit_form_backend_autodj_queue_length" <b-form-markup class="col-md-5" id="edit_form_backend_stereo_tool_config">
:field="form.backend_config.autodj_queue_length" input-type="number"
:input-attrs="{ min: '2', max: '25' }" advanced>
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('AutoDJ Queue Length') }} {{ $gettext('Upload Stereo Tool Configuration') }}
</template> </template>
<template #description="{lang}">
{{
$gettext('This determines how many songs in advance the AutoDJ will automatically fill the queue.')
}}
</template>
</b-wrapped-form-group>
<b-wrapped-form-group class="col-md-6" id="edit_form_backend_charset" <p class="card-text">
:field="form.backend_config.charset" advanced>
<template #label="{lang}">
{{ $gettext('Character Set Encoding') }}
</template>
<template #description="{lang}">
{{ {{
$gettext('For most cases, use the default UTF-8 encoding. The older ISO-8859-1 encoding can be used if accepting connections from Shoutcast 1 DJs or using other legacy software.') $gettext('Upload a Stereo Tool configuration file from the "Broadcasting" submenu in the station profile.')
}} }}
</template> </p>
<template #default="props"> </b-form-markup>
<b-form-radio-group stacked :id="props.id" :options="charsetOptions"
v-model="props.field.$model">
</b-form-radio-group>
</template>
</b-wrapped-form-group>
<b-wrapped-form-group class="col-md-6" id="edit_form_backend_performance_mode"
:field="form.backend_config.performance_mode" advanced>
<template #label="{lang}">
{{ $gettext('Liquidsoap Performance Tuning') }}
</template>
<template #description="{lang}">
{{
$gettext('If your installation is constrained by CPU or memory, you can change this setting to tune the resources used by Liquidsoap.')
}}
</template>
<template #default="props">
<b-form-radio-group stacked :id="props.id" :options="performanceModeOptions"
v-model="props.field.$model">
</b-form-radio-group>
</template>
</b-wrapped-form-group>
<b-wrapped-form-group class="col-md-6" id="edit_form_backend_duplicate_prevention_time_range"
:field="form.backend_config.duplicate_prevention_time_range"
input-type="number" :input-attrs="{ min: '0', max: '1440' }" advanced>
<template #label="{lang}">
{{ $gettext('Duplicate Prevention Time Range (Minutes)') }}
</template>
<template #description="{lang}">
{{
$gettext('This specifies the time range (in minutes) of the song history that the duplicate song prevention algorithm should take into account.')
}}
</template>
</b-wrapped-form-group>
</b-form-row> </b-form-row>
</b-form-fieldset> </b-form-fieldset>
</b-form-fieldset> </b-form-fieldset>
</div>
<b-form-fieldset v-if="showAdvanced">
<template #label>
{{ $gettext('Advanced Configuration') }}
</template>
<b-form-row>
<b-wrapped-form-checkbox class="col-md-6"
id="edit_form_backend_use_manual_autodj"
:field="form.backend_config.use_manual_autodj" advanced>
<template #label="{lang}">
{{ $gettext('Manual AutoDJ Mode') }}
</template>
<template #description="{lang}">
{{
$gettext('This mode disables AzuraCast\'s AutoDJ management, using Liquidsoap itself to manage song playback. "Next Song" and some other features will not be available.')
}}
</template>
</b-wrapped-form-checkbox>
<b-wrapped-form-checkbox class="col-md-6"
id="edit_form_backend_enable_replaygain_metadata"
:field="form.backend_config.enable_replaygain_metadata" advanced>
<template #label="{lang}">
{{ $gettext('Use Replaygain Metadata') }}
</template>
<template #description="{lang}">
{{
$gettext('Instruct Liquidsoap to use any replaygain metadata associated with a song to control its volume level. This may increase CPU consumption.')
}}
</template>
</b-wrapped-form-checkbox>
<b-wrapped-form-group class="col-md-6" id="edit_form_backend_telnet_port"
:field="form.backend_config.telnet_port" input-type="number"
:input-attrs="{ min: '0' }" advanced>
<template #label="{lang}">
{{ $gettext('Customize Internal Request Processing Port') }}
</template>
<template #description="{lang}">
{{
$gettext('This port is not used by any external process. Only modify this port if the assigned port is in use. Leave blank to automatically assign a port.')
}}
</template>
</b-wrapped-form-group>
<b-wrapped-form-group class="col-md-6" id="edit_form_backend_autodj_queue_length"
:field="form.backend_config.autodj_queue_length" input-type="number"
:input-attrs="{ min: '2', max: '25' }" advanced>
<template #label="{lang}">
{{ $gettext('AutoDJ Queue Length') }}
</template>
<template #description="{lang}">
{{
$gettext('This determines how many songs in advance the AutoDJ will automatically fill the queue.')
}}
</template>
</b-wrapped-form-group>
<b-wrapped-form-group class="col-md-6" id="edit_form_backend_charset"
:field="form.backend_config.charset" advanced>
<template #label="{lang}">
{{ $gettext('Character Set Encoding') }}
</template>
<template #description="{lang}">
{{
$gettext('For most cases, use the default UTF-8 encoding. The older ISO-8859-1 encoding can be used if accepting connections from Shoutcast 1 DJs or using other legacy software.')
}}
</template>
<template #default="props">
<b-form-radio-group stacked :id="props.id" :options="charsetOptions"
v-model="props.field.$model">
</b-form-radio-group>
</template>
</b-wrapped-form-group>
<b-wrapped-form-group class="col-md-6" id="edit_form_backend_performance_mode"
:field="form.backend_config.performance_mode" advanced>
<template #label="{lang}">
{{ $gettext('Liquidsoap Performance Tuning') }}
</template>
<template #description="{lang}">
{{
$gettext('If your installation is constrained by CPU or memory, you can change this setting to tune the resources used by Liquidsoap.')
}}
</template>
<template #default="props">
<b-form-radio-group stacked :id="props.id" :options="performanceModeOptions"
v-model="props.field.$model">
</b-form-radio-group>
</template>
</b-wrapped-form-group>
<b-wrapped-form-group class="col-md-6" id="edit_form_backend_duplicate_prevention_time_range"
:field="form.backend_config.duplicate_prevention_time_range"
input-type="number" :input-attrs="{ min: '0', max: '1440' }" advanced>
<template #label="{lang}">
{{ $gettext('Duplicate Prevention Time Range (Minutes)') }}
</template>
<template #description="{lang}">
{{
$gettext('This specifies the time range (in minutes) of the song history that the duplicate song prevention algorithm should take into account.')
}}
</template>
</b-wrapped-form-group>
</b-form-row>
</b-form-fieldset>
</b-form-fieldset>
</template> </template>
<script> <script>

318
frontend/vue/components/Admin/Stations/Form/FrontendForm.vue
View File

@ -1,176 +1,174 @@
<template> <template>
<div> <b-form-fieldset>
<b-form-fieldset> <b-form-row>
<b-wrapped-form-group class="col-md-12" id="edit_form_frontend_type"
:field="form.frontend_type">
<template #label="{lang}">
{{ $gettext('Broadcasting Service') }}
</template>
<template #description="{lang}">
{{ $gettext('This software delivers your broadcast to the listening audience.') }}
</template>
<template #default="props">
<b-form-radio-group stacked :id="props.id" :options="frontendTypeOptions"
v-model="props.field.$model">
</b-form-radio-group>
</template>
</b-wrapped-form-group>
</b-form-row>
</b-form-fieldset>
<b-form-fieldset v-if="isLocalFrontend">
<b-form-fieldset v-if="isShoutcastFrontend">
<b-form-row> <b-form-row>
<b-wrapped-form-group class="col-md-12" id="edit_form_frontend_type" <b-wrapped-form-group class="col-md-6" id="edit_form_frontend_sc_license_id"
:field="form.frontend_type"> :field="form.frontend_config.sc_license_id">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Broadcasting Service') }} {{ $gettext('Shoutcast License ID') }}
</template> </template>
<template #description="{lang}"> </b-wrapped-form-group>
{{ $gettext('This software delivers your broadcast to the listening audience.') }}
</template> <b-wrapped-form-group class="col-md-6" id="edit_form_frontend_sc_user_id"
<template #default="props"> :field="form.frontend_config.sc_user_id">
<b-form-radio-group stacked :id="props.id" :options="frontendTypeOptions" <template #label="{lang}">
v-model="props.field.$model"> {{ $gettext('Shoutcast User ID') }}
</b-form-radio-group>
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
</b-form-row> </b-form-row>
</b-form-fieldset> </b-form-fieldset>
<b-form-fieldset v-if="isLocalFrontend"> <b-form-fieldset>
<b-form-fieldset v-if="isShoutcastFrontend"> <b-form-row>
<b-form-row> <b-wrapped-form-group class="col-md-6" id="edit_form_frontend_source_pw"
<b-wrapped-form-group class="col-md-6" id="edit_form_frontend_sc_license_id" :field="form.frontend_config.source_pw">
:field="form.frontend_config.sc_license_id"> <template #label="{lang}">
<template #label="{lang}"> {{ $gettext('Customize Source Password') }}
{{ $gettext('Shoutcast License ID') }} </template>
</template> <template #description="{lang}">
</b-wrapped-form-group> {{ $gettext('Leave blank to automatically generate a new password.') }}
</template>
</b-wrapped-form-group>
<b-wrapped-form-group class="col-md-6" id="edit_form_frontend_sc_user_id" <b-wrapped-form-group class="col-md-6" id="edit_form_frontend_admin_pw"
:field="form.frontend_config.sc_user_id"> :field="form.frontend_config.admin_pw">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Shoutcast User ID') }} {{ $gettext('Customize Administrator Password') }}
</template> </template>
</b-wrapped-form-group> <template #description="{lang}">
</b-form-row> {{ $gettext('Leave blank to automatically generate a new password.') }}
</b-form-fieldset> </template>
</b-wrapped-form-group>
<b-form-fieldset> <b-wrapped-form-group v-if="showAdvanced" class="col-md-6" id="edit_form_frontend_port"
<b-form-row> :field="form.frontend_config.port" input-type="number"
<b-wrapped-form-group class="col-md-6" id="edit_form_frontend_source_pw" :input-attrs="{min: '0'}" advanced>
:field="form.frontend_config.source_pw"> <template #label="{lang}">
<template #label="{lang}"> {{ $gettext('Customize Broadcasting Port') }}
{{ $gettext('Customize Source Password') }} </template>
</template> <template #description="{lang}">
<template #description="{lang}"> {{
{{ $gettext('Leave blank to automatically generate a new password.') }} $gettext('No other program can be using this port. Leave blank to automatically assign a port.')
</template> }}
</b-wrapped-form-group> </template>
</b-wrapped-form-group>
<b-wrapped-form-group class="col-md-6" id="edit_form_frontend_admin_pw" <b-wrapped-form-group v-if="showAdvanced" class="col-md-6" id="edit_form_max_listeners"
:field="form.frontend_config.admin_pw"> :field="form.frontend_config.max_listeners" advanced>
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Customize Administrator Password') }} {{ $gettext('Maximum Listeners') }}
</template> </template>
<template #description="{lang}"> <template #description="{lang}">
{{ $gettext('Leave blank to automatically generate a new password.') }} {{
</template> $gettext('Maximum number of total listeners across all streams. Leave blank to use the default.')
</b-wrapped-form-group> }}
</template>
<b-wrapped-form-group v-if="showAdvanced" class="col-md-6" id="edit_form_frontend_port" </b-wrapped-form-group>
:field="form.frontend_config.port" input-type="number" </b-form-row>
:input-attrs="{min: '0'}" advanced>
<template #label="{lang}">
{{ $gettext('Customize Broadcasting Port') }}
</template>
<template #description="{lang}">
{{
$gettext('No other program can be using this port. Leave blank to automatically assign a port.')
}}
</template>
</b-wrapped-form-group>
<b-wrapped-form-group v-if="showAdvanced" class="col-md-6" id="edit_form_max_listeners"
:field="form.frontend_config.max_listeners" advanced>
<template #label="{lang}">
{{ $gettext('Maximum Listeners') }}
</template>
<template #description="{lang}">
{{
$gettext('Maximum number of total listeners across all streams. Leave blank to use the default.')
}}
</template>
</b-wrapped-form-group>
</b-form-row>
</b-form-fieldset>
<b-form-fieldset v-if="showAdvanced">
<b-form-row>
<b-col md="5">
<b-wrapped-form-group id="edit_form_frontend_banned_ips"
:field="form.frontend_config.banned_ips" input-type="textarea"
:input-attrs="{class: 'text-preformatted'}" advanced>
<template #label="{lang}">
{{ $gettext('Banned IP Addresses') }}
</template>
<template #description="{lang}">
{{ $gettext('List one IP address or group (in CIDR format) per line.') }}
</template>
</b-wrapped-form-group>
<b-wrapped-form-group id="edit_form_frontend_allowed_ips"
:field="form.frontend_config.allowed_ips" input-type="textarea"
:input-attrs="{class: 'text-preformatted'}" advanced>
<template #label="{lang}">
{{ $gettext('Allowed IP Addresses') }}
</template>
<template #description="{lang}">
{{ $gettext('List one IP address or group (in CIDR format) per line.') }}
</template>
</b-wrapped-form-group>
<b-wrapped-form-group id="edit_form_frontend_banned_user_agents"
:field="form.frontend_config.banned_user_agents" input-type="textarea"
:input-attrs="{class: 'text-preformatted'}" advanced>
<template #label="{lang}">
{{ $gettext('Banned User Agents') }}
</template>
<template #description="{lang}">
{{ $gettext('List one user agent per line. Wildcards (*) are allowed.') }}
</template>
</b-wrapped-form-group>
</b-col>
<b-wrapped-form-group class="col-md-7" id="edit_form_frontend_banned_countries"
:field="form.frontend_config.banned_countries"
advanced>
<template #label="{lang}">
{{ $gettext('Banned Countries') }}
</template>
<template #description="{lang}">
{{ $gettext('Select the countries that are not allowed to connect to the streams.') }}
</template>
<template #default="props">
<b-form-select :id="props.id" v-model="props.field.$model"
:options="countryOptions" style="min-height: 300px;"
multiple></b-form-select>
<b-button block variant="outline-primary" @click.prevent="clearCountries">
{{ $gettext('Clear List') }}
</b-button>
</template>
</b-wrapped-form-group>
</b-form-row>
</b-form-fieldset>
<b-form-fieldset v-if="showAdvanced">
<template #label>
{{ $gettext('Custom Configuration') }}
</template>
<template #description>
{{ $gettext('This code will be included in the frontend configuration. Allowed formats are:') }}
<ul>
<li>JSON: <code>{"new_key": "new_value"}</code></li>
<li>XML: <code>&lt;new_key&gt;new_value&lt;/new_key&gt;</code></li>
</ul>
</template>
<b-form-row>
<b-wrapped-form-group class="col-md-12" id="edit_form_frontend_custom_config"
:field="form.frontend_config.custom_config" input-type="textarea"
:input-attrs="{class: 'text-preformatted', spellcheck: 'false', 'max-rows': 25, rows: 5}"
advanced>
<template #label="{lang}">
{{ $gettext('Custom Configuration') }}
</template>
</b-wrapped-form-group>
</b-form-row>
</b-form-fieldset>
</b-form-fieldset> </b-form-fieldset>
</div>
<b-form-fieldset v-if="showAdvanced">
<b-form-row>
<b-col md="5">
<b-wrapped-form-group id="edit_form_frontend_banned_ips"
:field="form.frontend_config.banned_ips" input-type="textarea"
:input-attrs="{class: 'text-preformatted'}" advanced>
<template #label="{lang}">
{{ $gettext('Banned IP Addresses') }}
</template>
<template #description="{lang}">
{{ $gettext('List one IP address or group (in CIDR format) per line.') }}
</template>
</b-wrapped-form-group>
<b-wrapped-form-group id="edit_form_frontend_allowed_ips"
:field="form.frontend_config.allowed_ips" input-type="textarea"
:input-attrs="{class: 'text-preformatted'}" advanced>
<template #label="{lang}">
{{ $gettext('Allowed IP Addresses') }}
</template>
<template #description="{lang}">
{{ $gettext('List one IP address or group (in CIDR format) per line.') }}
</template>
</b-wrapped-form-group>
<b-wrapped-form-group id="edit_form_frontend_banned_user_agents"
:field="form.frontend_config.banned_user_agents" input-type="textarea"
:input-attrs="{class: 'text-preformatted'}" advanced>
<template #label="{lang}">
{{ $gettext('Banned User Agents') }}
</template>
<template #description="{lang}">
{{ $gettext('List one user agent per line. Wildcards (*) are allowed.') }}
</template>
</b-wrapped-form-group>
</b-col>
<b-wrapped-form-group class="col-md-7" id="edit_form_frontend_banned_countries"
:field="form.frontend_config.banned_countries"
advanced>
<template #label="{lang}">
{{ $gettext('Banned Countries') }}
</template>
<template #description="{lang}">
{{ $gettext('Select the countries that are not allowed to connect to the streams.') }}
</template>
<template #default="props">
<b-form-select :id="props.id" v-model="props.field.$model"
:options="countryOptions" style="min-height: 300px;"
multiple></b-form-select>
<b-button block variant="outline-primary" @click.prevent="clearCountries">
{{ $gettext('Clear List') }}
</b-button>
</template>
</b-wrapped-form-group>
</b-form-row>
</b-form-fieldset>
<b-form-fieldset v-if="showAdvanced">
<template #label>
{{ $gettext('Custom Configuration') }}
</template>
<template #description>
{{ $gettext('This code will be included in the frontend configuration. Allowed formats are:') }}
<ul>
<li>JSON: <code>{"new_key": "new_value"}</code></li>
<li>XML: <code>&lt;new_key&gt;new_value&lt;/new_key&gt;</code></li>
</ul>
</template>
<b-form-row>
<b-wrapped-form-group class="col-md-12" id="edit_form_frontend_custom_config"
:field="form.frontend_config.custom_config" input-type="textarea"
:input-attrs="{class: 'text-preformatted', spellcheck: 'false', 'max-rows': 25, rows: 5}"
advanced>
<template #label="{lang}">
{{ $gettext('Custom Configuration') }}
</template>
</b-wrapped-form-group>
</b-form-row>
</b-form-fieldset>
</b-form-fieldset>
</template> </template>
<script> <script>

130
frontend/vue/components/Admin/Stations/Form/HlsForm.vue
View File

@ -1,77 +1,77 @@
<template> <template>
<div> <b-form-fieldset v-if="isBackendEnabled">
<b-form-fieldset v-if="isBackendEnabled"> <b-form-fieldset>
<template #label>
{{ $gettext('HTTP Live Streaming (HLS)') }}
</template>
<template #description>
{{
$gettext('HTTP Live Streaming (HLS) is a new adaptive-bitrate technology supported by some clients. It does not use the standard broadcasting frontends.')
}}
</template>
<b-form-fieldset> <b-form-fieldset>
<template #label> <b-form-row>
{{ $gettext('HTTP Live Streaming (HLS)') }} <b-wrapped-form-checkbox class="col-md-12" id="edit_form_enable_hls"
</template> :field="form.enable_hls">
<template #description> <template #label="{lang}">
{{ $gettext('HTTP Live Streaming (HLS) is a new adaptive-bitrate technology supported by some clients. It does not use the standard broadcasting frontends.') }} {{ $gettext('Enable HTTP Live Streaming (HLS)') }}
</template> </template>
</b-wrapped-form-checkbox>
</b-form-row>
</b-form-fieldset>
<b-form-fieldset> <b-form-fieldset v-if="form.enable_hls.$model">
<b-form-row> <b-form-row>
<b-wrapped-form-checkbox class="col-md-12" id="edit_form_enable_hls" <b-wrapped-form-checkbox class="col-md-12" id="edit_form_backend_hls_enable_on_public_player"
:field="form.enable_hls"> :field="form.backend_config.hls_enable_on_public_player">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Enable HTTP Live Streaming (HLS)') }} {{ $gettext('Show HLS Stream on Public Player') }}
</template> </template>
</b-wrapped-form-checkbox> </b-wrapped-form-checkbox>
</b-form-row>
</b-form-fieldset>
<b-form-fieldset v-if="form.enable_hls.$model"> <b-wrapped-form-checkbox class="col-md-12" id="edit_form_backend_hls_is_default"
<b-form-row> :field="form.backend_config.hls_is_default">
<b-wrapped-form-checkbox class="col-md-12" id="edit_form_backend_hls_enable_on_public_player" <template #label="{lang}">
:field="form.backend_config.hls_enable_on_public_player"> {{ $gettext('Make HLS Stream Default in Public Player') }}
<template #label="{lang}"> </template>
{{ $gettext('Show HLS Stream on Public Player') }} </b-wrapped-form-checkbox>
</template> </b-form-row>
</b-wrapped-form-checkbox> </b-form-fieldset>
<b-wrapped-form-checkbox class="col-md-12" id="edit_form_backend_hls_is_default" <b-form-fieldset v-if="showAdvanced && form.enable_hls.$model">
:field="form.backend_config.hls_is_default"> <b-form-row>
<template #label="{lang}"> <b-wrapped-form-group class="col-md-4"
{{ $gettext('Make HLS Stream Default in Public Player') }} id="edit_form_backend_hls_segment_length"
</template> :field="form.backend_config.hls_segment_length" input-type="number"
</b-wrapped-form-checkbox> :input-attrs="{ min: '0', max: '60' }" advanced>
</b-form-row> <template #label="{lang}">
</b-form-fieldset> {{ $gettext('Segment Length (Seconds)') }}
</template>
</b-wrapped-form-group>
<b-form-fieldset v-if="showAdvanced && form.enable_hls.$model"> <b-wrapped-form-group class="col-md-4"
<b-form-row> id="edit_form_backend_hls_segments_in_playlist"
<b-wrapped-form-group class="col-md-4" :field="form.backend_config.hls_segments_in_playlist" input-type="number"
id="edit_form_backend_hls_segment_length" :input-attrs="{ min: '0', max: '60' }" advanced>
:field="form.backend_config.hls_segment_length" input-type="number" <template #label="{lang}">
:input-attrs="{ min: '0', max: '60' }" advanced> {{ $gettext('Segments in Playlist') }}
<template #label="{lang}"> </template>
{{ $gettext('Segment Length (Seconds)') }} </b-wrapped-form-group>
</template>
</b-wrapped-form-group>
<b-wrapped-form-group class="col-md-4" <b-wrapped-form-group class="col-md-4"
id="edit_form_backend_hls_segments_in_playlist" id="edit_form_backend_hls_segments_overhead"
:field="form.backend_config.hls_segments_in_playlist" input-type="number" :field="form.backend_config.hls_segments_overhead" input-type="number"
:input-attrs="{ min: '0', max: '60' }" advanced> :input-attrs="{ min: '0', max: '60' }" advanced>
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Segments in Playlist') }} {{ $gettext('Segments Overhead') }}
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
</b-form-row>
<b-wrapped-form-group class="col-md-4"
id="edit_form_backend_hls_segments_overhead"
:field="form.backend_config.hls_segments_overhead" input-type="number"
:input-attrs="{ min: '0', max: '60' }" advanced>
<template #label="{lang}">
{{ $gettext('Segments Overhead') }}
</template>
</b-wrapped-form-group>
</b-form-row>
</b-form-fieldset>
</b-form-fieldset> </b-form-fieldset>
</b-form-fieldset> </b-form-fieldset>
<backend-disabled v-else></backend-disabled> </b-form-fieldset>
</div> <backend-disabled v-else></backend-disabled>
</template> </template>
<script> <script>

256
frontend/vue/components/Admin/Stations/Form/ProfileForm.vue
View File

@ -1,145 +1,143 @@
<template> <template>
<div> <b-form-fieldset>
<b-form-fieldset> <b-form-row>
<b-form-row> <b-wrapped-form-group class="col-md-12" id="edit_form_name" :field="form.name">
<b-wrapped-form-group class="col-md-12" id="edit_form_name" :field="form.name"> <template #label="{lang}">
<template #label="{lang}"> {{ $gettext('Name') }}
{{ $gettext('Name') }} </template>
</template> </b-wrapped-form-group>
</b-wrapped-form-group>
<b-wrapped-form-group class="col-md-12" id="edit_form_description" :field="form.description" <b-wrapped-form-group class="col-md-12" id="edit_form_description" :field="form.description"
input-type="textarea"> input-type="textarea">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Description') }} {{ $gettext('Description') }}
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
<b-wrapped-form-group class="col-md-6" id="edit_form_genre" :field="form.genre"> <b-wrapped-form-group class="col-md-6" id="edit_form_genre" :field="form.genre">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Genre') }} {{ $gettext('Genre') }}
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
<b-wrapped-form-group class="col-md-6" id="edit_form_url" :field="form.url" input-type="url"> <b-wrapped-form-group class="col-md-6" id="edit_form_url" :field="form.url" input-type="url">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Web Site URL') }} {{ $gettext('Web Site URL') }}
</template> </template>
<template #description="{lang}"> <template #description="{lang}">
{{ {{
$gettext('Note: This should be the public-facing homepage of the radio station, not the AzuraCast URL. It will be included in broadcast details.') $gettext('Note: This should be the public-facing homepage of the radio station, not the AzuraCast URL. It will be included in broadcast details.')
}} }}
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
<b-wrapped-form-group class="col-md-12" id="edit_form_timezone" :field="form.timezone"> <b-wrapped-form-group class="col-md-12" id="edit_form_timezone" :field="form.timezone">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Time Zone') }} {{ $gettext('Time Zone') }}
</template> </template>
<template #description="{lang}"> <template #description="{lang}">
{{ {{
$gettext('Scheduled playlists and other timed items will be controlled by this time zone.') $gettext('Scheduled playlists and other timed items will be controlled by this time zone.')
}} }}
</template> </template>
<template #default="props"> <template #default="props">
<b-form-select :id="props.id" v-model="props.field.$model" <b-form-select :id="props.id" v-model="props.field.$model"
:options="timezoneOptions"></b-form-select> :options="timezoneOptions"></b-form-select>
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
<b-wrapped-form-group class="col-md-6" id="edit_form_default_album_art_url" <b-wrapped-form-group class="col-md-6" id="edit_form_default_album_art_url"
:field="form.default_album_art_url"> :field="form.default_album_art_url">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Default Album Art URL') }} {{ $gettext('Default Album Art URL') }}
</template> </template>
<template #description="{lang}"> <template #description="{lang}">
{{ {{
$gettext('If a song has no album art, this URL will be listed instead. Leave blank to use the standard placeholder art.') $gettext('If a song has no album art, this URL will be listed instead. Leave blank to use the standard placeholder art.')
}} }}
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
<b-wrapped-form-group v-if="showAdvanced" class="col-md-6" id="edit_form_short_name" <b-wrapped-form-group v-if="showAdvanced" class="col-md-6" id="edit_form_short_name"
:field="form.short_name" advanced> :field="form.short_name" advanced>
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('URL Stub') }} {{ $gettext('URL Stub') }}
</template> </template>
<template #description="{lang}"> <template #description="{lang}">
{{ {{
$gettext('Optionally specify a short URL-friendly name, such as "my_station_name", that will be used in this station\'s URLs. Leave this field blank to automatically create one based on the station name.') $gettext('Optionally specify a short URL-friendly name, such as "my_station_name", that will be used in this station\'s URLs. Leave this field blank to automatically create one based on the station name.')
}} }}
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
<b-wrapped-form-group v-if="showAdvanced" class="col-md-6" id="edit_form_api_history_items" <b-wrapped-form-group v-if="showAdvanced" class="col-md-6" id="edit_form_api_history_items"
:field="form.api_history_items" advanced> :field="form.api_history_items" advanced>
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Number of Visible Recent Songs') }} {{ $gettext('Number of Visible Recent Songs') }}
</template> </template>
<template #description="{lang}"> <template #description="{lang}">
{{ {{
$gettext('Customize the number of songs that will appear in the "Song History" section for this station and in all public APIs.') $gettext('Customize the number of songs that will appear in the "Song History" section for this station and in all public APIs.')
}} }}
</template> </template>
<template #default="props"> <template #default="props">
<b-form-select :id="props.id" v-model="props.field.$model" <b-form-select :id="props.id" v-model="props.field.$model"
:options="historyItemsOptions"></b-form-select> :options="historyItemsOptions"></b-form-select>
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
</b-form-row> </b-form-row>
</b-form-fieldset> </b-form-fieldset>
<b-form-fieldset> <b-form-fieldset>
<template #label> <template #label>
{{ $gettext('Public Pages') }} {{ $gettext('Public Pages') }}
</template> </template>
<b-form-row> <b-form-row>
<b-wrapped-form-checkbox class="col-md-12" id="edit_form_enable_public_page" <b-wrapped-form-checkbox class="col-md-12" id="edit_form_enable_public_page"
:field="form.enable_public_page"> :field="form.enable_public_page">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Enable Public Pages') }} {{ $gettext('Enable Public Pages') }}
</template> </template>
<template #description="{lang}"> <template #description="{lang}">
{{ $gettext('Show the station in public pages and general API results.') }} {{ $gettext('Show the station in public pages and general API results.') }}
</template> </template>
</b-wrapped-form-checkbox> </b-wrapped-form-checkbox>
</b-form-row> </b-form-row>
</b-form-fieldset> </b-form-fieldset>
<b-form-fieldset> <b-form-fieldset>
<template #label> <template #label>
{{ $gettext('On-Demand Streaming') }} {{ $gettext('On-Demand Streaming') }}
</template> </template>
<b-form-row> <b-form-row>
<b-wrapped-form-checkbox class="col-md-12" id="edit_form_enable_on_demand" <b-wrapped-form-checkbox class="col-md-12" id="edit_form_enable_on_demand"
:field="form.enable_on_demand"> :field="form.enable_on_demand">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Enable On-Demand Streaming') }} {{ $gettext('Enable On-Demand Streaming') }}
</template> </template>
<template #description="{lang}"> <template #description="{lang}">
{{ {{
$gettext('If enabled, music from playlists with on-demand streaming enabled will be available to stream via a specialized public page.') $gettext('If enabled, music from playlists with on-demand streaming enabled will be available to stream via a specialized public page.')
}} }}
</template> </template>
</b-wrapped-form-checkbox> </b-wrapped-form-checkbox>
<b-wrapped-form-checkbox v-if="form.enable_on_demand.$model" class="col-md-12" <b-wrapped-form-checkbox v-if="form.enable_on_demand.$model" class="col-md-12"
id="edit_form_enable_on_demand_download" id="edit_form_enable_on_demand_download"
:field="form.enable_on_demand_download"> :field="form.enable_on_demand_download">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Enable Downloads on On-Demand Page') }} {{ $gettext('Enable Downloads on On-Demand Page') }}
</template> </template>
<template #description="{lang}"> <template #description="{lang}">
{{ {{
$gettext('If enabled, a download button will also be present on the public "On-Demand" page.') $gettext('If enabled, a download button will also be present on the public "On-Demand" page.')
}} }}
</template> </template>
</b-wrapped-form-checkbox> </b-wrapped-form-checkbox>
</b-form-row> </b-form-row>
</b-form-fieldset> </b-form-fieldset>
</div>
</template> </template>
<script> <script>

110
frontend/vue/components/Admin/Stations/Form/RequestsForm.vue
View File

@ -1,65 +1,63 @@
<template> <template>
<div> <b-form-fieldset v-if="isBackendEnabled">
<b-form-fieldset v-if="isBackendEnabled"> <b-form-fieldset>
<template #label>
{{ $gettext('Song Requests') }}
</template>
<template #description>
{{
$gettext('Some stream licensing providers may have specific rules regarding song requests. Check your local regulations for more information.')
}}
</template>
<b-form-fieldset> <b-form-fieldset>
<template #label> <b-form-row>
{{ $gettext('Song Requests') }} <b-wrapped-form-checkbox class="col-md-12" id="edit_form_enable_requests"
</template> :field="form.enable_requests">
<template #description> <template #label="{lang}">
{{ {{ $gettext('Allow Song Requests') }}
$gettext('Some stream licensing providers may have specific rules regarding song requests. Check your local regulations for more information.') </template>
}} <template #description="{lang}">
</template> {{
$gettext('Enable listeners to request a song for play on your station. Only songs that are already in your playlists are requestable.')
}}
</template>
</b-wrapped-form-checkbox>
</b-form-row>
</b-form-fieldset>
<b-form-fieldset> <b-form-fieldset v-if="form.enable_requests.$model">
<b-form-row> <b-form-row>
<b-wrapped-form-checkbox class="col-md-12" id="edit_form_enable_requests" <b-wrapped-form-group class="col-md-6" id="edit_form_request_delay"
:field="form.enable_requests"> :field="form.request_delay" input-type="number"
<template #label="{lang}"> :input-attrs="{ min: '0', max: '1440' }">
{{ $gettext('Allow Song Requests') }} <template #label="{lang}">
</template> {{ $gettext('Request Minimum Delay (Minutes)') }}
<template #description="{lang}"> </template>
{{ <template #description="{lang}">
$gettext('Enable listeners to request a song for play on your station. Only songs that are already in your playlists are requestable.') {{
}} $gettext('If requests are enabled, this specifies the minimum delay (in minutes) between a request being submitted and being played. If set to zero, a minor delay of 15 seconds is applied to prevent request floods.')
</template> }}
</b-wrapped-form-checkbox> </template>
</b-form-row> </b-wrapped-form-group>
</b-form-fieldset>
<b-form-fieldset v-if="form.enable_requests.$model"> <b-wrapped-form-group class="col-md-6" id="edit_form_request_threshold"
<b-form-row> :field="form.request_threshold" input-type="number"
<b-wrapped-form-group class="col-md-6" id="edit_form_request_delay" :input-attrs="{ min: '0', max: '1440' }">
:field="form.request_delay" input-type="number" <template #label="{lang}">
:input-attrs="{ min: '0', max: '1440' }"> {{ $gettext('Request Last Played Threshold (Minutes)') }}
<template #label="{lang}"> </template>
{{ $gettext('Request Minimum Delay (Minutes)') }} <template #description="{lang}">
</template> {{
<template #description="{lang}"> $gettext('This specifies the minimum time (in minutes) between a song playing on the radio and being available to request again. Set to 0 for no threshold.')
{{ }}
$gettext('If requests are enabled, this specifies the minimum delay (in minutes) between a request being submitted and being played. If set to zero, a minor delay of 15 seconds is applied to prevent request floods.') </template>
}} </b-wrapped-form-group>
</template> </b-form-row>
</b-wrapped-form-group>
<b-wrapped-form-group class="col-md-6" id="edit_form_request_threshold"
:field="form.request_threshold" input-type="number"
:input-attrs="{ min: '0', max: '1440' }">
<template #label="{lang}">
{{ $gettext('Request Last Played Threshold (Minutes)') }}
</template>
<template #description="{lang}">
{{
$gettext('This specifies the minimum time (in minutes) between a song playing on the radio and being available to request again. Set to 0 for no threshold.')
}}
</template>
</b-wrapped-form-group>
</b-form-row>
</b-form-fieldset>
</b-form-fieldset> </b-form-fieldset>
</b-form-fieldset> </b-form-fieldset>
<backend-disabled v-else></backend-disabled> </b-form-fieldset>
</div> <backend-disabled v-else></backend-disabled>
</template> </template>
<script> <script>

222
frontend/vue/components/Admin/Stations/Form/StreamersForm.vue
View File

@ -1,139 +1,137 @@
<template> <template>
<div> <b-form-fieldset v-if="isBackendEnabled">
<b-form-fieldset v-if="isBackendEnabled"> <b-form-fieldset>
<b-form-fieldset> <template #label>
<template #label> {{ $gettext('Streamers/DJs') }}
{{ $gettext('Streamers/DJs') }} </template>
</template>
<b-form-fieldset>
<b-form-row>
<b-wrapped-form-checkbox class="col-md-12" id="edit_form_enable_streamers"
:field="form.enable_streamers">
<template #label="{lang}">
{{ $gettext('Allow Streamers / DJs') }}
</template>
<template #description="{lang}">
{{
$gettext('If enabled, streamers (or DJs) will be able to connect directly to your stream and broadcast live music that interrupts the AutoDJ stream.')
}}
</template>
</b-wrapped-form-checkbox>
</b-form-row>
</b-form-fieldset>
<b-form-fieldset v-if="form.enable_streamers.$model">
<b-form-fieldset> <b-form-fieldset>
<b-form-row> <b-form-row>
<b-wrapped-form-checkbox class="col-md-12" id="edit_form_enable_streamers" <b-wrapped-form-checkbox class="col-md-12" id="edit_form_backend_record_streams"
:field="form.enable_streamers"> :field="form.backend_config.record_streams">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Allow Streamers / DJs') }} {{ $gettext('Record Live Broadcasts') }}
</template> </template>
<template #description="{lang}"> <template #description="{lang}">
{{ {{
$gettext('If enabled, streamers (or DJs) will be able to connect directly to your stream and broadcast live music that interrupts the AutoDJ stream.') $gettext('If enabled, AzuraCast will automatically record any live broadcasts made to this station to per-broadcast recordings.')
}} }}
</template> </template>
</b-wrapped-form-checkbox> </b-wrapped-form-checkbox>
</b-form-row> </b-form-row>
</b-form-fieldset> </b-form-fieldset>
<b-form-fieldset v-if="form.enable_streamers.$model"> <b-form-fieldset v-if="form.backend_config.record_streams.$model">
<b-form-fieldset> <b-form-row>
<b-form-row> <b-wrapped-form-group class="col-md-6" id="edit_form_backend_record_streams_format"
<b-wrapped-form-checkbox class="col-md-12" id="edit_form_backend_record_streams" :field="form.backend_config.record_streams_format">
:field="form.backend_config.record_streams"> <template #label="{lang}">
<template #label="{lang}"> {{ $gettext('Live Broadcast Recording Format') }}
{{ $gettext('Record Live Broadcasts') }} </template>
</template>
<template #description="{lang}">
{{
$gettext('If enabled, AzuraCast will automatically record any live broadcasts made to this station to per-broadcast recordings.')
}}
</template>
</b-wrapped-form-checkbox>
</b-form-row>
</b-form-fieldset>
<b-form-fieldset v-if="form.backend_config.record_streams.$model"> <template #default="props">
<b-form-row> <b-form-radio-group stacked :id="props.id" :options="recordStreamsOptions"
<b-wrapped-form-group class="col-md-6" id="edit_form_backend_record_streams_format" v-model="props.field.$model">
:field="form.backend_config.record_streams_format"> </b-form-radio-group>
<template #label="{lang}"> </template>
{{ $gettext('Live Broadcast Recording Format') }} </b-wrapped-form-group>
</template>
<template #default="props"> <b-wrapped-form-group class="col-md-6" id="edit_form_backend_record_streams_bitrate"
<b-form-radio-group stacked :id="props.id" :options="recordStreamsOptions" :field="form.backend_config.record_streams_bitrate">
v-model="props.field.$model"> <template #label="{lang}">
</b-form-radio-group> {{ $gettext('Live Broadcast Recording Bitrate (kbps)') }}
</template> </template>
</b-wrapped-form-group>
<b-wrapped-form-group class="col-md-6" id="edit_form_backend_record_streams_bitrate" <template #default="props">
:field="form.backend_config.record_streams_bitrate"> <b-form-radio-group stacked :id="props.id" :options="recordBitrateOptions"
<template #label="{lang}"> v-model="props.field.$model">
{{ $gettext('Live Broadcast Recording Bitrate (kbps)') }} </b-form-radio-group>
</template> </template>
</b-wrapped-form-group>
</b-form-row>
</b-form-fieldset>
<template #default="props"> <b-form-fieldset>
<b-form-radio-group stacked :id="props.id" :options="recordBitrateOptions" <b-form-row>
v-model="props.field.$model"> <b-wrapped-form-group class="col-md-6" id="edit_form_disconnect_deactivate_streamer"
</b-form-radio-group> :field="form.disconnect_deactivate_streamer" input-type="number"
</template> :input-attrs="{ min: '0' }">
</b-wrapped-form-group> <template #label="{lang}">
</b-form-row> {{ $gettext('Deactivate Streamer on Disconnect (Seconds)') }}
</b-form-fieldset> </template>
<template #description="{lang}">
{{
$gettext('This is the number of seconds until a streamer who has been manually disconnected can reconnect to the stream. Set to 0 to allow the streamer to immediately reconnect.')
}}
</template>
</b-wrapped-form-group>
<b-form-fieldset> <b-wrapped-form-group v-if="showAdvanced" class="col-md-6"
<b-form-row> id="edit_form_backend_dj_port"
<b-wrapped-form-group class="col-md-6" id="edit_form_disconnect_deactivate_streamer" :field="form.backend_config.dj_port" input-type="number"
:field="form.disconnect_deactivate_streamer" input-type="number" :input-attrs="{ min: '0' }" advanced>
:input-attrs="{ min: '0' }"> <template #label="{lang}">
<template #label="{lang}"> {{ $gettext('Customize DJ/Streamer Port') }}
{{ $gettext('Deactivate Streamer on Disconnect (Seconds)') }} </template>
</template> <template #description="{lang}">
<template #description="{lang}"> {{
{{ $gettext('No other program can be using this port. Leave blank to automatically assign a port.')
$gettext('This is the number of seconds until a streamer who has been manually disconnected can reconnect to the stream. Set to 0 to allow the streamer to immediately reconnect.') }}
}} <br>
</template> {{
</b-wrapped-form-group> $gettext('Note: the port after this one will automatically be used for legacy connections.')
}}
</template>
</b-wrapped-form-group>
<b-wrapped-form-group v-if="showAdvanced" class="col-md-6" <b-wrapped-form-group class="col-md-6" id="edit_form_backend_dj_buffer"
id="edit_form_backend_dj_port" :field="form.backend_config.dj_buffer" input-type="number"
:field="form.backend_config.dj_port" input-type="number" :input-attrs="{ min: '0', max: '60' }">
:input-attrs="{ min: '0' }" advanced> <template #label="{lang}">
<template #label="{lang}"> {{ $gettext('DJ/Streamer Buffer Time (Seconds)') }}
{{ $gettext('Customize DJ/Streamer Port') }} </template>
</template> <template #description="{lang}">
<template #description="{lang}"> {{
{{ $gettext('The number of seconds of signal to store in case of interruption. Set to the lowest value that your DJs can use without stream interruptions.')
$gettext('No other program can be using this port. Leave blank to automatically assign a port.') }}
}} </template>
<br> </b-wrapped-form-group>
{{
$gettext('Note: the port after this one will automatically be used for legacy connections.')
}}
</template>
</b-wrapped-form-group>
<b-wrapped-form-group class="col-md-6" id="edit_form_backend_dj_buffer" <b-wrapped-form-group v-if="showAdvanced" class="col-md-6"
:field="form.backend_config.dj_buffer" input-type="number" id="edit_form_backend_dj_mount_point"
:input-attrs="{ min: '0', max: '60' }"> :field="form.backend_config.dj_mount_point" advanced>
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('DJ/Streamer Buffer Time (Seconds)') }} {{ $gettext('Customize DJ/Streamer Mount Point') }}
</template> </template>
<template #description="{lang}"> <template #description="{lang}">
{{ {{
$gettext('The number of seconds of signal to store in case of interruption. Set to the lowest value that your DJs can use without stream interruptions.') $gettext('If your streaming software requires a specific mount point path, specify it here. Otherwise, use the default.')
}} }}
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
</b-form-row>
<b-wrapped-form-group v-if="showAdvanced" class="col-md-6"
id="edit_form_backend_dj_mount_point"
:field="form.backend_config.dj_mount_point" advanced>
<template #label="{lang}">
{{ $gettext('Customize DJ/Streamer Mount Point') }}
</template>
<template #description="{lang}">
{{
$gettext('If your streaming software requires a specific mount point path, specify it here. Otherwise, use the default.')
}}
</template>
</b-wrapped-form-group>
</b-form-row>
</b-form-fieldset>
</b-form-fieldset> </b-form-fieldset>
</b-form-fieldset> </b-form-fieldset>
</b-form-fieldset> </b-form-fieldset>
<backend-disabled v-else></backend-disabled> </b-form-fieldset>
</div> <backend-disabled v-else></backend-disabled>
</template> </template>
<script> <script>

93
frontend/vue/components/Admin/StorageLocations.vue
View File

@ -1,57 +1,56 @@
<template> <template>
<div> <b-card no-body>
<b-card no-body> <b-card-header header-bg-variant="primary-dark">
<b-card-header header-bg-variant="primary-dark"> <h2 class="card-title">{{ $gettext('Storage Locations') }}</h2>
<h2 class="card-title">{{ $gettext('Storage Locations') }}</h2> </b-card-header>
</b-card-header> <b-tabs pills card lazy>
<b-tabs pills card lazy> <b-tab v-for="tab in tabs" :key="tab.type" :active="activeType === tab.type" @click="setType(tab.type)"
<b-tab v-for="tab in tabs" :key="tab.type" :active="activeType === tab.type" @click="setType(tab.type)" :title="tab.title" no-body></b-tab>
:title="tab.title" no-body></b-tab> </b-tabs>
</b-tabs>
<b-card-body body-class="card-padding-sm"> <b-card-body body-class="card-padding-sm">
<b-button variant="outline-primary" @click.prevent="doCreate"> <b-button variant="outline-primary" @click.prevent="doCreate">
<icon icon="add"></icon> <icon icon="add"></icon>
{{ $gettext('Add Storage Location') }} {{ $gettext('Add Storage Location') }}
</b-button> </b-button>
</b-card-body> </b-card-body>
<data-table ref="datatable" id="admin_storage_locations" :show-toolbar="false" :fields="fields" :responsive="false" <data-table ref="datatable" id="admin_storage_locations" :show-toolbar="false" :fields="fields"
:api-url="listUrlForType"> :responsive="false"
<template #cell(actions)="row"> :api-url="listUrlForType">
<b-button-group size="sm"> <template #cell(actions)="row">
<b-button size="sm" variant="primary" @click.prevent="doEdit(row.item.links.self)"> <b-button-group size="sm">
{{ $gettext('Edit') }} <b-button size="sm" variant="primary" @click.prevent="doEdit(row.item.links.self)">
</b-button> {{ $gettext('Edit') }}
<b-button size="sm" variant="danger" @click.prevent="doDelete(row.item.links.self)"> </b-button>
{{ $gettext('Delete') }} <b-button size="sm" variant="danger" @click.prevent="doDelete(row.item.links.self)">
</b-button> {{ $gettext('Delete') }}
</b-button-group> </b-button>
</template> </b-button-group>
<template #cell(adapter)="row"> </template>
<h5 class="m-0">{{ getAdapterName(row.item.adapter) }}</h5> <template #cell(adapter)="row">
<p class="card-text">{{ row.item.uri }}</p> <h5 class="m-0">{{ getAdapterName(row.item.adapter) }}</h5>
</template> <p class="card-text">{{ row.item.uri }}</p>
<template #cell(space)="row"> </template>
<template v-if="row.item.storageAvailable"> <template #cell(space)="row">
<b-progress :value="row.item.storageUsedPercent" show-progress height="15px" class="mb-1" <template v-if="row.item.storageAvailable">
:variant="getProgressVariant(row.item.storageUsedPercent)"> <b-progress :value="row.item.storageUsedPercent" show-progress height="15px" class="mb-1"
</b-progress> :variant="getProgressVariant(row.item.storageUsedPercent)">
</b-progress>
{{ getSpaceUsed(row.item) }} {{ getSpaceUsed(row.item) }}
</template>
<template v-else>
{{ getSpaceUsed(row.item) }}
</template>
</template> </template>
<template #cell(stations)="row"> <template v-else>
{{ row.item.stations.join(', ') }} {{ getSpaceUsed(row.item) }}
</template> </template>
</data-table> </template>
</b-card> <template #cell(stations)="row">
{{ row.item.stations.join(', ') }}
</template>
</data-table>
</b-card>
<edit-modal ref="editModal" :create-url="listUrl" :type="activeType" @relist="relist"></edit-modal> <edit-modal ref="editModal" :create-url="listUrl" :type="activeType" @relist="relist"></edit-modal>
</div>
</template> </template>
<script> <script>

327
frontend/vue/components/Admin/StorageLocations/Form.vue
View File

@ -1,178 +1,183 @@
<template> <template>
<div> <b-form-group>
<b-form-group> <b-form-row>
<b-form-row> <b-wrapped-form-group class="col-md-12" id="form_edit_adapter" :field="form.adapter">
<b-wrapped-form-group class="col-md-12" id="form_edit_adapter" :field="form.adapter"> <template #label="{lang}">
<template #label="{lang}"> {{ $gettext('Storage Adapter') }}
{{ $gettext('Storage Adapter') }} </template>
</template> <template #default="props">
<template #default="props"> <b-form-radio-group stacked :id="props.id" v-model="props.field.$model">
<b-form-radio-group stacked :id="props.id" v-model="props.field.$model"> <b-form-radio value="local">
<b-form-radio value="local"> {{ $gettext('Local Filesystem') }}
{{ $gettext('Local Filesystem') }} </b-form-radio>
</b-form-radio> <b-form-radio value="s3">
<b-form-radio value="s3"> {{ $gettext('Remote: S3 Compatible') }}
{{ $gettext('Remote: S3 Compatible') }} </b-form-radio>
</b-form-radio> <b-form-radio value="dropbox">
<b-form-radio value="dropbox"> {{ $gettext('Remote: Dropbox') }}
{{ $gettext('Remote: Dropbox') }} </b-form-radio>
</b-form-radio> <b-form-radio value="sftp">
<b-form-radio value="sftp"> {{ $gettext('Remote: SFTP') }}
{{ $gettext('Remote: SFTP') }} </b-form-radio>
</b-form-radio> </b-form-radio-group>
</b-form-radio-group> </template>
</template> </b-wrapped-form-group>
</b-wrapped-form-group>
<b-wrapped-form-group class="col-md-12" id="form_edit_path" :field="form.path"> <b-wrapped-form-group class="col-md-12" id="form_edit_path" :field="form.path">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Path/Suffix') }} {{ $gettext('Path/Suffix') }}
</template> </template>
<template #description="{lang}"> <template #description="{lang}">
{{ $gettext('For local filesystems, this is the base path of the directory. For remote filesystems, this is the folder prefix.') }} {{
</template> $gettext('For local filesystems, this is the base path of the directory. For remote filesystems, this is the folder prefix.')
</b-wrapped-form-group> }}
</template>
</b-wrapped-form-group>
<b-wrapped-form-group class="col-md-12" id="form_edit_storageQuota" :field="form.storageQuota"> <b-wrapped-form-group class="col-md-12" id="form_edit_storageQuota" :field="form.storageQuota">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Storage Quota') }} {{ $gettext('Storage Quota') }}
</template> </template>
<template #description="{lang}"> <template #description="{lang}">
{{ $gettext('Set a maximum disk space that this storage location can use. Specify the size with unit, i.e. "8 GB". Units are measured in 1024 bytes. Leave blank to default to the available space on the disk.') }} {{
</template> $gettext('Set a maximum disk space that this storage location can use. Specify the size with unit, i.e. "8 GB". Units are measured in 1024 bytes. Leave blank to default to the available space on the disk.')
</b-wrapped-form-group> }}
</b-form-row> </template>
</b-form-group> </b-wrapped-form-group>
</b-form-row>
</b-form-group>
<b-card v-show="form.adapter.$model === 's3'" class="mb-3" no-body> <b-card v-show="form.adapter.$model === 's3'" class="mb-3" no-body>
<div class="card-header bg-primary-dark"> <div class="card-header bg-primary-dark">
<h2 class="card-title"> <h2 class="card-title">
{{ $gettext('Remote: S3 Compatible') }} {{ $gettext('Remote: S3 Compatible') }}
</h2> </h2>
</div> </div>
<b-card-body> <b-card-body>
<b-form-group> <b-form-group>
<b-form-row> <b-form-row>
<b-wrapped-form-group class="col-md-6" id="form_edit_s3CredentialKey" <b-wrapped-form-group class="col-md-6" id="form_edit_s3CredentialKey"
:field="form.s3CredentialKey"> :field="form.s3CredentialKey">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Access Key ID') }} {{ $gettext('Access Key ID') }}
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
<b-wrapped-form-group class="col-md-6" id="form_edit_s3CredentialSecret" <b-wrapped-form-group class="col-md-6" id="form_edit_s3CredentialSecret"
:field="form.s3CredentialSecret"> :field="form.s3CredentialSecret">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Secret Key') }} {{ $gettext('Secret Key') }}
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
<b-wrapped-form-group class="col-md-6" id="form_edit_s3Endpoint" :field="form.s3Endpoint"> <b-wrapped-form-group class="col-md-6" id="form_edit_s3Endpoint" :field="form.s3Endpoint">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Endpoint') }} {{ $gettext('Endpoint') }}
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
<b-wrapped-form-group class="col-md-6" id="form_edit_s3Bucket" :field="form.s3Bucket"> <b-wrapped-form-group class="col-md-6" id="form_edit_s3Bucket" :field="form.s3Bucket">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Bucket Name') }} {{ $gettext('Bucket Name') }}
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
<b-wrapped-form-group class="col-md-6" id="form_edit_s3Region" :field="form.s3Region"> <b-wrapped-form-group class="col-md-6" id="form_edit_s3Region" :field="form.s3Region">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Region') }} {{ $gettext('Region') }}
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
<b-wrapped-form-group class="col-md-6" id="form_edit_s3Version" :field="form.s3Version"> <b-wrapped-form-group class="col-md-6" id="form_edit_s3Version" :field="form.s3Version">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('API Version') }} {{ $gettext('API Version') }}
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
</b-form-row> </b-form-row>
</b-form-group> </b-form-group>
</b-card-body> </b-card-body>
</b-card> </b-card>
<b-card v-show="form.adapter.$model === 'dropbox'" class="mb-3" no-body> <b-card v-show="form.adapter.$model === 'dropbox'" class="mb-3" no-body>
<div class="card-header bg-primary-dark"> <div class="card-header bg-primary-dark">
<h2 class="card-title"> <h2 class="card-title">
{{ $gettext('Remote: Dropbox') }} {{ $gettext('Remote: Dropbox') }}
</h2> </h2>
</div> </div>
<b-card-body> <b-card-body>
<b-form-group> <b-form-group>
<b-form-row> <b-form-row>
<b-wrapped-form-group class="col-md-12" id="form_edit_dropboxAuthToken" <b-wrapped-form-group class="col-md-12" id="form_edit_dropboxAuthToken"
:field="form.dropboxAuthToken"> :field="form.dropboxAuthToken">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Dropbox Generated Access Token') }} {{ $gettext('Dropbox Generated Access Token') }}
</template> </template>
<template #description="{lang}"> <template #description="{lang}">
{{ $gettext('Note: Dropbox now only issues short-lived tokens that will not work for this purpose. If your token begins with "sl", it is short-lived and will not work correctly.') }} {{
</template> $gettext('Note: Dropbox now only issues short-lived tokens that will not work for this purpose. If your token begins with "sl", it is short-lived and will not work correctly.')
</b-wrapped-form-group> }}
</b-form-row> </template>
</b-form-group> </b-wrapped-form-group>
</b-card-body> </b-form-row>
</b-card> </b-form-group>
</b-card-body>
<b-card v-show="form.adapter.$model === 'sftp'" class="mb-3" no-body> </b-card>
<div class="card-header bg-primary-dark">
<h2 class="card-title">
{{ $gettext('Remote: SFTP') }}
</h2>
</div>
<b-card-body>
<b-form-group>
<b-form-row>
<b-wrapped-form-group class="col-md-12 col-lg-6" id="form_edit_sftpHost"
:field="form.sftpHost">
<template #label="{lang}">
{{ $gettext('SFTP Host') }}
</template>
</b-wrapped-form-group>
<b-wrapped-form-group class="col-md-12 col-lg-6" id="form_edit_sftpPort" input-type="number" min="1" step="1" <b-card v-show="form.adapter.$model === 'sftp'" class="mb-3" no-body>
:field="form.sftpPort"> <div class="card-header bg-primary-dark">
<template #label="{lang}"> <h2 class="card-title">
{{ $gettext('SFTP Port') }} {{ $gettext('Remote: SFTP') }}
</template> </h2>
</b-wrapped-form-group> </div>
<b-card-body>
<b-form-group>
<b-form-row>
<b-wrapped-form-group class="col-md-12 col-lg-6" id="form_edit_sftpHost"
:field="form.sftpHost">
<template #label="{lang}">
{{ $gettext('SFTP Host') }}
</template>
</b-wrapped-form-group>
<b-wrapped-form-group class="col-md-12 col-lg-6" id="form_edit_sftpUsername" <b-wrapped-form-group class="col-md-12 col-lg-6" id="form_edit_sftpPort" input-type="number" min="1"
:field="form.sftpUsername"> step="1"
<template #label="{lang}"> :field="form.sftpPort">
{{ $gettext('SFTP Username') }} <template #label="{lang}">
</template> {{ $gettext('SFTP Port') }}
</b-wrapped-form-group> </template>
</b-wrapped-form-group>
<b-wrapped-form-group class="col-md-12 col-lg-6" id="form_edit_sftpPassword" <b-wrapped-form-group class="col-md-12 col-lg-6" id="form_edit_sftpUsername"
:field="form.sftpPassword"> :field="form.sftpUsername">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('SFTP Password') }} {{ $gettext('SFTP Username') }}
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
<b-wrapped-form-group class="col-md-12" id="form_edit_sftpPrivateKeyPassPhrase" <b-wrapped-form-group class="col-md-12 col-lg-6" id="form_edit_sftpPassword"
:field="form.sftpPrivateKeyPassPhrase"> :field="form.sftpPassword">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('SFTP Private Key Pass Phrase') }} {{ $gettext('SFTP Password') }}
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
<b-wrapped-form-group class="col-md-12" id="form_edit_sftpPrivateKey" input-type="textarea" <b-wrapped-form-group class="col-md-12" id="form_edit_sftpPrivateKeyPassPhrase"
:field="form.sftpPrivateKey"> :field="form.sftpPrivateKeyPassPhrase">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('SFTP Private Key') }} {{ $gettext('SFTP Private Key Pass Phrase') }}
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
</b-form-row>
</b-form-group> <b-wrapped-form-group class="col-md-12" id="form_edit_sftpPrivateKey" input-type="textarea"
</b-card-body> :field="form.sftpPrivateKey">
</b-card> <template #label="{lang}">
</div> {{ $gettext('SFTP Private Key') }}
</template>
</b-wrapped-form-group>
</b-form-row>
</b-form-group>
</b-card-body>
</b-card>
</template> </template>
<script> <script>

80
frontend/vue/components/Admin/Users.vue
View File

@ -1,48 +1,46 @@
<template> <template>
<div> <b-card no-body>
<b-card no-body> <b-card-header header-bg-variant="primary-dark">
<b-card-header header-bg-variant="primary-dark"> <h2 class="card-title">{{ $gettext('Users') }}</h2>
<h2 class="card-title">{{ $gettext('Users') }}</h2> </b-card-header>
</b-card-header>
<b-card-body body-class="card-padding-sm"> <b-card-body body-class="card-padding-sm">
<b-button variant="outline-primary" @click.prevent="doCreate"> <b-button variant="outline-primary" @click.prevent="doCreate">
<icon icon="add"></icon> <icon icon="add"></icon>
{{ $gettext('Add User') }} {{ $gettext('Add User') }}
</b-button> </b-button>
</b-card-body> </b-card-body>
<data-table ref="datatable" id="users" paginated :fields="fields" :api-url="listUrl"> <data-table ref="datatable" id="users" paginated :fields="fields" :api-url="listUrl">
<template #cell(name)="row"> <template #cell(name)="row">
<h5 class="mb-0" v-if="row.item.name !== ''">{{ row.item.name }}</h5> <h5 class="mb-0" v-if="row.item.name !== ''">{{ row.item.name }}</h5>
<a :href="'mailto:'+row.item.email">{{ row.item.email }}</a> <a :href="'mailto:'+row.item.email">{{ row.item.email }}</a>
<span v-if="row.item.is_me" class="badge badge-primary"> <span v-if="row.item.is_me" class="badge badge-primary">
{{ $gettext('You') }} {{ $gettext('You') }}
</span> </span>
</template> </template>
<template #cell(roles)="row"> <template #cell(roles)="row">
<div v-for="role in row.item.roles" :key="role.id"> <div v-for="role in row.item.roles" :key="role.id">
{{ role.name }} {{ role.name }}
</div> </div>
</template> </template>
<template #cell(actions)="row"> <template #cell(actions)="row">
<b-button-group size="sm" v-if="!row.item.is_me"> <b-button-group size="sm" v-if="!row.item.is_me">
<b-button size="sm" variant="secondary" :href="row.item.links.masquerade" target="_blank"> <b-button size="sm" variant="secondary" :href="row.item.links.masquerade" target="_blank">
{{ $gettext('Log In') }} {{ $gettext('Log In') }}
</b-button> </b-button>
<b-button size="sm" variant="primary" @click.prevent="doEdit(row.item.links.self)"> <b-button size="sm" variant="primary" @click.prevent="doEdit(row.item.links.self)">
{{ $gettext('Edit') }} {{ $gettext('Edit') }}
</b-button> </b-button>
<b-button size="sm" variant="danger" @click.prevent="doDelete(row.item.links.self)"> <b-button size="sm" variant="danger" @click.prevent="doDelete(row.item.links.self)">
{{ $gettext('Delete') }} {{ $gettext('Delete') }}
</b-button> </b-button>
</b-button-group> </b-button-group>
</template> </template>
</data-table> </data-table>
</b-card> </b-card>
<edit-modal ref="editModal" :create-url="listUrl" :roles="roles" @relist="relist"></edit-modal> <edit-modal ref="editModal" :create-url="listUrl" :roles="roles" @relist="relist"></edit-modal>
</div>
</template> </template>
<script> <script>

4
frontend/vue/components/Common/AudioPlayer.vue
View File

@ -1,7 +1,5 @@
<template> <template>
<div> <audio ref="audio" v-if="isPlaying" v-bind:title="title"/>
<audio ref="audio" v-if="isPlaying" v-bind:title="title"/>
</div>
</template> </template>
<script> <script>

72
frontend/vue/components/InlinePlayer.vue
View File

@ -1,44 +1,42 @@
<template> <template>
<div style="display: contents"> <audio-player ref="player" :volume="volume" :is-muted="isMuted"></audio-player>
<audio-player ref="player" :volume="volume" :is-muted="isMuted"></audio-player>
<div class="ml-3 player-inline" v-if="isPlaying"> <div class="ml-3 player-inline" v-if="isPlaying">
<div class="inline-seek d-inline-flex align-items-center ml-1" v-if="!current.isStream && duration !== 0"> <div class="inline-seek d-inline-flex align-items-center ml-1" v-if="!current.isStream && duration !== 0">
<div class="flex-shrink-0 mx-1 text-white-50 time-display"> <div class="flex-shrink-0 mx-1 text-white-50 time-display">
{{ currentTimeText }} {{ currentTimeText }}
</div>
<div class="flex-fill mx-2">
<input type="range" :title="$gettext('Seek')" class="player-seek-range custom-range" min="0"
max="100"
step="1" v-model="progress">
</div>
<div class="flex-shrink-0 mx-1 text-white-50 time-display">
{{ durationText }}
</div>
</div> </div>
<div class="flex-fill mx-2">
<input type="range" :title="$gettext('Seek')" class="player-seek-range custom-range" min="0"
max="100"
step="1" v-model="progress">
</div>
<div class="flex-shrink-0 mx-1 text-white-50 time-display">
{{ durationText }}
</div>
</div>
<a class="btn btn-sm btn-outline-light px-2 ml-1" href="#" @click.prevent="stop()" <a class="btn btn-sm btn-outline-light px-2 ml-1" href="#" @click.prevent="stop()"
:aria-label="$gettext('Stop')"> :aria-label="$gettext('Stop')">
<icon icon="stop"></icon> <icon icon="stop"></icon>
</a> </a>
<div class="inline-volume-controls d-inline-flex align-items-center ml-1"> <div class="inline-volume-controls d-inline-flex align-items-center ml-1">
<div class="flex-shrink-0"> <div class="flex-shrink-0">
<a class="btn btn-sm btn-outline-light px-2" href="#" @click.prevent="volume = 0" <a class="btn btn-sm btn-outline-light px-2" href="#" @click.prevent="volume = 0"
:aria-label="$gettext('Mute')"> :aria-label="$gettext('Mute')">
<icon icon="volume_mute"></icon> <icon icon="volume_mute"></icon>
</a> </a>
</div> </div>
<div class="flex-fill mx-1"> <div class="flex-fill mx-1">
<input type="range" :title="$gettext('Volume')" class="player-volume-range custom-range" min="0" <input type="range" :title="$gettext('Volume')" class="player-volume-range custom-range" min="0"
max="100" max="100"
step="1" v-model="volume"> step="1" v-model="volume">
</div> </div>
<div class="flex-shrink-0"> <div class="flex-shrink-0">
<a class="btn btn-sm btn-outline-light px-2" href="#" @click.prevent="volume = 100" <a class="btn btn-sm btn-outline-light px-2" href="#" @click.prevent="volume = 100"
:aria-label="$gettext('Full Volume')"> :aria-label="$gettext('Full Volume')">
<icon icon="volume_up"></icon> <icon icon="volume_up"></icon>
</a> </a>
</div>
</div> </div>
</div> </div>
</div> </div>

52
frontend/vue/components/Public/FullPlayer.vue
View File

@ -1,36 +1,34 @@
<template> <template>
<div> <div class="public-page">
<div class="public-page"> <div class="card">
<div class="card"> <div class="card-body">
<div class="card-body"> <h2 class="card-title">{{ stationName }}</h2>
<h2 class="card-title">{{ stationName }}</h2>
<div class="stations nowplaying"> <div class="stations nowplaying">
<radio-player v-bind="$props" @np_updated="onNowPlayingUpdate"></radio-player> <radio-player v-bind="$props" @np_updated="onNowPlayingUpdate"></radio-player>
</div>
</div>
<div class="card-actions">
<a class="btn btn-sm btn-outline-secondary" v-b-modal.song_history_modal>
<icon icon="history"></icon>
{{ $gettext('Song History') }}
</a>
<a class="btn btn-sm btn-outline-secondary" v-if="enableRequests" v-b-modal.request_modal>
<icon icon="help_outline"></icon>
{{ $gettext('Request Song') }}
</a>
<a class="btn btn-sm btn-outline-secondary" :href="downloadPlaylistUri">
<icon icon="file_download"></icon>
{{ $gettext('Playlist') }}
</a>
</div> </div>
</div> </div>
</div>
<song-history-modal :show-album-art="showAlbumArt" ref="history_modal"></song-history-modal> <div class="card-actions">
<request-modal :show-album-art="showAlbumArt" :request-list-uri="requestListUri" <a class="btn btn-sm btn-outline-secondary" v-b-modal.song_history_modal>
:custom-fields="customFields"></request-modal> <icon icon="history"></icon>
{{ $gettext('Song History') }}
</a>
<a class="btn btn-sm btn-outline-secondary" v-if="enableRequests" v-b-modal.request_modal>
<icon icon="help_outline"></icon>
{{ $gettext('Request Song') }}
</a>
<a class="btn btn-sm btn-outline-secondary" :href="downloadPlaylistUri">
<icon icon="file_download"></icon>
{{ $gettext('Playlist') }}
</a>
</div>
</div>
</div> </div>
<song-history-modal :show-album-art="showAlbumArt" ref="history_modal"></song-history-modal>
<request-modal :show-album-art="showAlbumArt" :request-list-uri="requestListUri"
:custom-fields="customFields"></request-modal>
</template> </template>
<script setup> <script setup>

38
frontend/vue/components/Setup/Station.vue
View File

@ -1,26 +1,26 @@
<template> <template>
<div> <setup-step :step="2"></setup-step>
<setup-step :step="2"></setup-step>
<b-card no-body> <b-card no-body>
<div class="card-header bg-primary-dark"> <div class="card-header bg-primary-dark">
<h3 class="card-title"> <h3 class="card-title">
{{ $gettext('Create a New Radio Station') }} {{ $gettext('Create a New Radio Station') }}
</h3> </h3>
</div> </div>
<info-card> <info-card>
{{ $gettext('Continue the setup process by creating your first radio station below. You can edit any of these details later.') }} {{
</info-card> $gettext('Continue the setup process by creating your first radio station below. You can edit any of these details later.')
}}
</info-card>
<admin-stations-form v-bind="$props" ref="form" :is-edit-mode="false" :create-url="createUrl" <admin-stations-form v-bind="$props" ref="form" :is-edit-mode="false" :create-url="createUrl"
@submitted="onSubmitted"> @submitted="onSubmitted">
<template #submitButtonText> <template #submitButtonText>
{{ $gettext('Create and Continue') }} {{ $gettext('Create and Continue') }}
</template> </template>
</admin-stations-form> </admin-stations-form>
</b-card> </b-card>
</div>
</template> </template>
<script> <script>

84
frontend/vue/components/Stations/HlsStreams.vue
View File

@ -1,51 +1,49 @@
<template> <template>
<div> <b-card no-body>
<b-card no-body> <b-card-header header-bg-variant="primary-dark">
<b-card-header header-bg-variant="primary-dark"> <h2 class="card-title">{{ $gettext('HLS Streams') }}</h2>
<h2 class="card-title">{{ $gettext('HLS Streams') }}</h2> </b-card-header>
</b-card-header>
<info-card> <info-card>
<p class="card-text"> <p class="card-text">
{{ {{
$gettext('HTTP Live Streaming (HLS) is a new adaptive-bitrate streaming technology. From this page, you can configure the individual bitrates and formats that are included in the combined HLS stream.') $gettext('HTTP Live Streaming (HLS) is a new adaptive-bitrate streaming technology. From this page, you can configure the individual bitrates and formats that are included in the combined HLS stream.')
}} }}
</p> </p>
</info-card> </info-card>
<b-card-body body-class="card-padding-sm"> <b-card-body body-class="card-padding-sm">
<b-button variant="outline-primary" @click.prevent="doCreate"> <b-button variant="outline-primary" @click.prevent="doCreate">
<icon icon="add"></icon> <icon icon="add"></icon>
{{ $gettext('Add HLS Stream') }} {{ $gettext('Add HLS Stream') }}
</b-button> </b-button>
</b-card-body> </b-card-body>
<data-table ref="datatable" id="station_hls_streams" :fields="fields" paginated <data-table ref="datatable" id="station_hls_streams" :fields="fields" paginated
:api-url="listUrl"> :api-url="listUrl">
<template #cell(name)="row"> <template #cell(name)="row">
<h5 class="m-0">{{ row.item.name }}</h5> <h5 class="m-0">{{ row.item.name }}</h5>
</template> </template>
<template #cell(format)="row"> <template #cell(format)="row">
{{ upper(row.item.format) }} {{ upper(row.item.format) }}
</template> </template>
<template #cell(bitrate)="row"> <template #cell(bitrate)="row">
{{ row.item.bitrate }}kbps {{ row.item.bitrate }}kbps
</template> </template>
<template #cell(actions)="row"> <template #cell(actions)="row">
<b-button-group size="sm"> <b-button-group size="sm">
<b-button size="sm" variant="primary" @click.prevent="doEdit(row.item.links.self)"> <b-button size="sm" variant="primary" @click.prevent="doEdit(row.item.links.self)">
{{ $gettext('Edit') }} {{ $gettext('Edit') }}
</b-button> </b-button>
<b-button size="sm" variant="danger" @click.prevent="doDelete(row.item.links.self)"> <b-button size="sm" variant="danger" @click.prevent="doDelete(row.item.links.self)">
{{ $gettext('Delete') }} {{ $gettext('Delete') }}
</b-button> </b-button>
</b-button-group> </b-button-group>
</template> </template>
</data-table> </data-table>
</b-card> </b-card>
<edit-modal ref="editModal" :create-url="listUrl" @relist="relist" @needs-restart="mayNeedRestart"></edit-modal> <edit-modal ref="editModal" :create-url="listUrl" @relist="relist" @needs-restart="mayNeedRestart"></edit-modal>
</div>
</template> </template>
<script> <script>

84
frontend/vue/components/Stations/Media/Form/WaveformEditor.vue
View File

@ -1,49 +1,49 @@
<template> <template>
<div> <p>
<p> {{
{{ $gettext('Set cue and fade points using the visual editor. The timestamps will be saved to the corresponding fields in the advanced playback settings.') }} $gettext('Set cue and fade points using the visual editor. The timestamps will be saved to the corresponding fields in the advanced playback settings.')
</p> }}
</p>
<b-form-group> <b-form-group>
<waveform ref="waveform" :audio-url="audioUrl" :waveform-url="waveformUrl" <waveform ref="waveform" :audio-url="audioUrl" :waveform-url="waveformUrl"
@ready="updateRegions"></waveform> @ready="updateRegions"></waveform>
</b-form-group> </b-form-group>
<b-form-group> <b-form-group>
<b-button-group> <b-button-group>
<b-button variant="light" @click="playAudio"> <b-button variant="light" @click="playAudio">
<icon icon="play_arrow"></icon> <icon icon="play_arrow"></icon>
<span class="sr-only">{{ $gettext('Play') }}</span> <span class="sr-only">{{ $gettext('Play') }}</span>
</b-button> </b-button>
<b-button variant="dark" @click="stopAudio"> <b-button variant="dark" @click="stopAudio">
<icon icon="stop"></icon> <icon icon="stop"></icon>
<span class="sr-only">{{ $gettext('Stop') }}</span> <span class="sr-only">{{ $gettext('Stop') }}</span>
</b-button> </b-button>
</b-button-group> </b-button-group>
<b-button-group> <b-button-group>
<b-button variant="primary" @click="setCueIn"> <b-button variant="primary" @click="setCueIn">
{{ $gettext('Set Cue In') }} {{ $gettext('Set Cue In') }}
</b-button> </b-button>
<b-button variant="primary" @click="setCueOut"> <b-button variant="primary" @click="setCueOut">
{{ $gettext('Set Cue Out') }} {{ $gettext('Set Cue Out') }}
</b-button> </b-button>
</b-button-group> </b-button-group>
<b-button-group> <b-button-group>
<b-button variant="warning" @click="setFadeOverlap"> <b-button variant="warning" @click="setFadeOverlap">
{{ $gettext('Set Overlap') }} {{ $gettext('Set Overlap') }}
</b-button> </b-button>
</b-button-group> </b-button-group>
<b-button-group> <b-button-group>
<b-button variant="danger" @click="setFadeIn"> <b-button variant="danger" @click="setFadeIn">
{{ $gettext('Set Fade In') }} {{ $gettext('Set Fade In') }}
</b-button> </b-button>
<b-button variant="danger" @click="setFadeOut"> <b-button variant="danger" @click="setFadeOut">
{{ $gettext('Set Fade Out') }} {{ $gettext('Set Fade Out') }}
</b-button> </b-button>
</b-button-group> </b-button-group>
</b-form-group> </b-form-group>
</div>
</template> </template>
<script> <script>

106
frontend/vue/components/Stations/Mounts.vue
View File

@ -1,64 +1,62 @@
<template> <template>
<div> <b-card no-body>
<b-card no-body> <b-card-header header-bg-variant="primary-dark">
<b-card-header header-bg-variant="primary-dark"> <h2 class="card-title">{{ $gettext('Mount Points') }}</h2>
<h2 class="card-title">{{ $gettext('Mount Points') }}</h2> </b-card-header>
</b-card-header>
<info-card> <info-card>
<p class="card-text"> <p class="card-text">
{{ {{
$gettext('Mount points are how listeners connect and listen to your station. Each mount point can be a different audio format or quality. Using mount points, you can set up a high-quality stream for broadband listeners and a mobile stream for phone users.') $gettext('Mount points are how listeners connect and listen to your station. Each mount point can be a different audio format or quality. Using mount points, you can set up a high-quality stream for broadband listeners and a mobile stream for phone users.')
}} }}
</p> </p>
</info-card> </info-card>
<b-card-body body-class="card-padding-sm"> <b-card-body body-class="card-padding-sm">
<b-button variant="outline-primary" @click.prevent="doCreate"> <b-button variant="outline-primary" @click.prevent="doCreate">
<icon icon="add"></icon> <icon icon="add"></icon>
{{ $gettext('Add Mount Point') }} {{ $gettext('Add Mount Point') }}
</b-button> </b-button>
</b-card-body> </b-card-body>
<data-table ref="datatable" id="station_mounts" :fields="fields" paginated <data-table ref="datatable" id="station_mounts" :fields="fields" paginated
:api-url="listUrl"> :api-url="listUrl">
<template #cell(display_name)="row"> <template #cell(display_name)="row">
<h5 class="m-0"> <h5 class="m-0">
<a :href="row.item.links.listen">{{ row.item.display_name }}</a> <a :href="row.item.links.listen">{{ row.item.display_name }}</a>
</h5> </h5>
<div v-if="row.item.is_default"> <div v-if="row.item.is_default">
<span class="badge badge-success"> <span class="badge badge-success">
{{ $gettext('Default Mount') }} {{ $gettext('Default Mount') }}
</span> </span>
</div> </div>
</template>
<template #cell(enable_autodj)="row">
<template v-if="row.item.enable_autodj">
{{ $gettext('Enabled') }}
-
{{ row.item.autodj_bitrate }}kbps {{ upper(row.item.autodj_format) }}
</template> </template>
<template #cell(enable_autodj)="row"> <template v-else>
<template v-if="row.item.enable_autodj"> {{ $gettext('Disabled') }}
{{ $gettext('Enabled') }}
-
{{ row.item.autodj_bitrate }}kbps {{ upper(row.item.autodj_format) }}
</template>
<template v-else>
{{ $gettext('Disabled') }}
</template>
</template> </template>
<template #cell(actions)="row"> </template>
<b-button-group size="sm"> <template #cell(actions)="row">
<b-button size="sm" variant="primary" @click.prevent="doEdit(row.item.links.self)"> <b-button-group size="sm">
{{ $gettext('Edit') }} <b-button size="sm" variant="primary" @click.prevent="doEdit(row.item.links.self)">
</b-button> {{ $gettext('Edit') }}
<b-button size="sm" variant="danger" @click.prevent="doDelete(row.item.links.self)"> </b-button>
{{ $gettext('Delete') }} <b-button size="sm" variant="danger" @click.prevent="doDelete(row.item.links.self)">
</b-button> {{ $gettext('Delete') }}
</b-button-group> </b-button>
</template> </b-button-group>
</data-table> </template>
</b-card> </data-table>
</b-card>
<edit-modal ref="editModal" :create-url="listUrl" :new-intro-url="newIntroUrl" <edit-modal ref="editModal" :create-url="listUrl" :new-intro-url="newIntroUrl"
:show-advanced="showAdvanced" :station-frontend-type="stationFrontendType" :show-advanced="showAdvanced" :station-frontend-type="stationFrontendType"
@relist="relist" @needs-restart="mayNeedRestart"></edit-modal> @relist="relist" @needs-restart="mayNeedRestart"></edit-modal>
</div>
</template> </template>
<script> <script>

252
frontend/vue/components/Stations/Playlists.vue
View File

@ -1,136 +1,134 @@
<template> <template>
<div> <b-card no-body>
<b-card no-body> <b-card-header header-bg-variant="primary-dark">
<b-card-header header-bg-variant="primary-dark"> <b-row class="align-items-center">
<b-row class="align-items-center"> <b-col md="6">
<b-col md="6"> <h2 class="card-title">{{ $gettext('Playlists') }}</h2>
<h2 class="card-title">{{ $gettext('Playlists') }}</h2> </b-col>
</b-col> <b-col md="6" class="text-right text-muted">
<b-col md="6" class="text-right text-muted"> {{
{{ $gettext(
$gettext( 'This station\'s time zone is currently %{tz}.',
'This station\'s time zone is currently %{tz}.', {tz: stationTimeZone}
{tz: stationTimeZone} )
) }}
}} </b-col>
</b-col> </b-row>
</b-row> </b-card-header>
</b-card-header> <b-tabs pills card lazy>
<b-tabs pills card lazy> <b-tab :title="langAllPlaylistsTab" no-body>
<b-tab :title="langAllPlaylistsTab" no-body> <b-card-body body-class="card-padding-sm">
<b-card-body body-class="card-padding-sm"> <b-button variant="outline-primary" @click.prevent="doCreate">
<b-button variant="outline-primary" @click.prevent="doCreate"> <icon icon="add"></icon>
<icon icon="add"></icon> {{ $gettext('Add Playlist') }}
{{ $gettext('Add Playlist') }} </b-button>
</b-button> </b-card-body>
</b-card-body>
<data-table ref="datatable" id="station_playlists" paginated :fields="fields" :responsive="false" <data-table ref="datatable" id="station_playlists" paginated :fields="fields" :responsive="false"
:api-url="listUrl"> :api-url="listUrl">
<template #cell(actions)="row"> <template #cell(actions)="row">
<b-button-group size="sm"> <b-button-group size="sm">
<b-button size="sm" variant="primary" @click.prevent="doEdit(row.item.links.self)"> <b-button size="sm" variant="primary" @click.prevent="doEdit(row.item.links.self)">
{{ $gettext('Edit') }} {{ $gettext('Edit') }}
</b-button> </b-button>
<b-button size="sm" variant="danger" @click.prevent="doDelete(row.item.links.self)"> <b-button size="sm" variant="danger" @click.prevent="doDelete(row.item.links.self)">
{{ $gettext('Delete') }} {{ $gettext('Delete') }}
</b-button> </b-button>
<b-dropdown size="sm" variant="dark" boundary="window" :text="langMore"> <b-dropdown size="sm" variant="dark" boundary="window" :text="langMore">
<b-dropdown-item @click.prevent="doModify(row.item.links.toggle)"> <b-dropdown-item @click.prevent="doModify(row.item.links.toggle)">
{{ langToggleButton(row.item) }} {{ langToggleButton(row.item) }}
</b-dropdown-item>
<b-dropdown-item @click.prevent="doImport(row.item.links.import)"
v-if="row.item.source === 'songs'">
{{ langImportButton }}
</b-dropdown-item>
<b-dropdown-item @click.prevent="doReorder(row.item.links.order)"
v-if="row.item.source === 'songs' && row.item.order === 'sequential'">
{{ langReorderButton }}
</b-dropdown-item>
<b-dropdown-item @click.prevent="doQueue(row.item.links.queue)"
v-if="row.item.source === 'songs' && row.item.order !== 'random'">
{{ langQueueButton }}
</b-dropdown-item>
<b-dropdown-item @click.prevent="doModify(row.item.links.reshuffle)"
v-if="row.item.order === 'shuffle'">
{{ langReshuffleButton }}
</b-dropdown-item>
<b-dropdown-item @click.prevent="doClone(row.item.name, row.item.links.clone)">
{{ langCloneButton }}
</b-dropdown-item>
<template v-for="format in ['pls', 'm3u']">
<b-dropdown-item :href="row.item.links.export[format]" target="_blank">
{{
$gettext(
'Export %{format}',
{format: format.toUpperCase()}
)
}}
</b-dropdown-item> </b-dropdown-item>
<b-dropdown-item @click.prevent="doImport(row.item.links.import)" </template>
v-if="row.item.source === 'songs'"> </b-dropdown>
{{ langImportButton }} </b-button-group>
</b-dropdown-item> </template>
<b-dropdown-item @click.prevent="doReorder(row.item.links.order)" <template #cell(name)="row">
v-if="row.item.source === 'songs' && row.item.order === 'sequential'"> <h5 class="m-0">{{ row.item.name }}</h5>
{{ langReorderButton }} <div>
</b-dropdown-item> <span class="badge badge-dark">
<b-dropdown-item @click.prevent="doQueue(row.item.links.queue)" <template v-if="row.item.source === 'songs'">
v-if="row.item.source === 'songs' && row.item.order !== 'random'"> {{ $gettext('Song-based') }}
{{ langQueueButton }} </template>
</b-dropdown-item> <template v-else>
<b-dropdown-item @click.prevent="doModify(row.item.links.reshuffle)" {{ $gettext('Remote URL') }}
v-if="row.item.order === 'shuffle'"> </template>
{{ langReshuffleButton }} </span>
</b-dropdown-item> <span class="badge badge-primary" v-if="row.item.is_jingle">
<b-dropdown-item @click.prevent="doClone(row.item.name, row.item.links.clone)"> {{ $gettext('Jingle Mode') }}
{{ langCloneButton }} </span>
</b-dropdown-item> <span class="badge badge-info"
<template v-for="format in ['pls', 'm3u']"> v-if="row.item.source === 'songs' && row.item.order === 'sequential'">
<b-dropdown-item :href="row.item.links.export[format]" target="_blank"> {{ $gettext('Sequential') }}
{{ </span>
$gettext( <span class="badge badge-info" v-if="row.item.include_in_on_demand">
'Export %{format}', {{ $gettext('On-Demand') }}
{format: format.toUpperCase()} </span>
) <span class="badge badge-success" v-if="row.item.include_in_automation">
}} {{ $gettext('Auto-Assigned') }}
</b-dropdown-item> </span>
</template> <span class="badge badge-danger" v-if="!row.item.is_enabled">
</b-dropdown> {{ $gettext('Disabled') }}
</b-button-group> </span>
</div>
</template>
<template #cell(scheduling)="row">
<span v-html="formatType(row.item)"></span>
</template>
<template #cell(num_songs)="row">
<template v-if="row.item.source === 'songs'">
<a :href="filesUrl+'#playlist:'+encodeURIComponent(row.item.name)">
{{ row.item.num_songs }}
</a>
({{ formatLength(row.item.total_length) }})
</template> </template>
<template #cell(name)="row"> <template v-else>&nbsp;</template>
<h5 class="m-0">{{ row.item.name }}</h5> </template>
<div> </data-table>
<span class="badge badge-dark"> </b-tab>
<template v-if="row.item.source === 'songs'"> <b-tab :title="langScheduleViewTab" no-body>
{{ $gettext('Song-based') }} <schedule ref="schedule" :schedule-url="scheduleUrl" :station-time-zone="stationTimeZone"
</template> @click="doCalendarClick"></schedule>
<template v-else> </b-tab>
{{ $gettext('Remote URL') }} </b-tabs>
</template> </b-card>
</span>
<span class="badge badge-primary" v-if="row.item.is_jingle">
{{ $gettext('Jingle Mode') }}
</span>
<span class="badge badge-info"
v-if="row.item.source === 'songs' && row.item.order === 'sequential'">
{{ $gettext('Sequential') }}
</span>
<span class="badge badge-info" v-if="row.item.include_in_on_demand">
{{ $gettext('On-Demand') }}
</span>
<span class="badge badge-success" v-if="row.item.include_in_automation">
{{ $gettext('Auto-Assigned') }}
</span>
<span class="badge badge-danger" v-if="!row.item.is_enabled">
{{ $gettext('Disabled') }}
</span>
</div>
</template>
<template #cell(scheduling)="row">
<span v-html="formatType(row.item)"></span>
</template>
<template #cell(num_songs)="row">
<template v-if="row.item.source === 'songs'">
<a :href="filesUrl+'#playlist:'+encodeURIComponent(row.item.name)">
{{ row.item.num_songs }}
</a>
({{ formatLength(row.item.total_length) }})
</template>
<template v-else>&nbsp;</template>
</template>
</data-table>
</b-tab>
<b-tab :title="langScheduleViewTab" no-body>
<schedule ref="schedule" :schedule-url="scheduleUrl" :station-time-zone="stationTimeZone"
@click="doCalendarClick"></schedule>
</b-tab>
</b-tabs>
</b-card>
<edit-modal ref="editModal" :create-url="listUrl" :station-time-zone="stationTimeZone" <edit-modal ref="editModal" :create-url="listUrl" :station-time-zone="stationTimeZone"
:enable-advanced-features="enableAdvancedFeatures" :enable-advanced-features="enableAdvancedFeatures"
@relist="relist" @needs-restart="mayNeedRestart"></edit-modal> @relist="relist" @needs-restart="mayNeedRestart"></edit-modal>
<reorder-modal ref="reorderModal"></reorder-modal> <reorder-modal ref="reorderModal"></reorder-modal>
<queue-modal ref="queueModal"></queue-modal> <queue-modal ref="queueModal"></queue-modal>
<reorder-modal ref="reorderModal"></reorder-modal> <reorder-modal ref="reorderModal"></reorder-modal>
<import-modal ref="importModal" @relist="relist"></import-modal> <import-modal ref="importModal" @relist="relist"></import-modal>
<clone-modal ref="cloneModal" @relist="relist" @needs-restart="mayNeedRestart"></clone-modal> <clone-modal ref="cloneModal" @relist="relist" @needs-restart="mayNeedRestart"></clone-modal>
</div>
</template> </template>
<script> <script>

15
frontend/vue/components/Stations/Podcasts.vue
View File

@ -1,19 +1,18 @@
<template> <template>
<div> <episodes-view v-if="activePodcast" v-bind="$props" :podcast="activePodcast"
<episodes-view v-if="activePodcast" v-bind="$props" :podcast="activePodcast" @clear-podcast="onClearPodcast"></episodes-view> @clear-podcast="onClearPodcast"></episodes-view>
<list-view v-else v-bind="$props" @select-podcast="onSelectPodcast"></list-view> <list-view v-else v-bind="$props" @select-podcast="onSelectPodcast"></list-view>
</div>
</template> </template>
<script> <script>
import EpisodesView, { episodeViewProps } from './Podcasts/EpisodesView'; import EpisodesView, {episodeViewProps} from './Podcasts/EpisodesView';
import ListView, { listViewProps } from './Podcasts/ListView'; import ListView, {listViewProps} from './Podcasts/ListView';
export default { export default {
name: 'StationPodcasts', name: 'StationPodcasts',
components: { ListView, EpisodesView }, components: {ListView, EpisodesView},
mixins: [episodeViewProps, listViewProps], mixins: [episodeViewProps, listViewProps],
data () { data() {
return { return {
activePodcast: null activePodcast: null
}; };

124
frontend/vue/components/Stations/Podcasts/EpisodesView.vue
View File

@ -1,73 +1,71 @@
<template> <template>
<div> <b-card no-body>
<b-card no-body> <b-card-header header-bg-variant="primary-dark">
<b-card-header header-bg-variant="primary-dark"> <b-row class="row align-items-center">
<b-row class="row align-items-center"> <b-col md="7">
<b-col md="7"> <div class="d-flex align-items-center">
<div class="d-flex align-items-center"> <div class="flex-shrink-0 pr-3">
<div class="flex-shrink-0 pr-3"> <album-art :src="podcast.art"></album-art>
<album-art :src="podcast.art"></album-art>
</div>
<div class="flex-fill">
<h2 class="card-title">{{ podcast.title }}</h2>
<h4 class="card-subtitle text-muted">{{ $gettext('Episodes') }}</h4>
</div>
</div> </div>
</b-col> <div class="flex-fill">
<b-col md="5" class="text-right text-white-50"> <h2 class="card-title">{{ podcast.title }}</h2>
<stations-common-quota :quota-url="quotaUrl" ref="quota"></stations-common-quota> <h4 class="card-subtitle text-muted">{{ $gettext('Episodes') }}</h4>
</b-col> </div>
</b-row> </div>
</b-card-header> </b-col>
<b-col md="5" class="text-right text-white-50">
<stations-common-quota :quota-url="quotaUrl" ref="quota"></stations-common-quota>
</b-col>
</b-row>
</b-card-header>
<b-card-body body-class="card-padding-sm"> <b-card-body body-class="card-padding-sm">
<b-button variant="bg" @click="doClearPodcast()"> <b-button variant="bg" @click="doClearPodcast()">
<icon icon="arrow_back"></icon> <icon icon="arrow_back"></icon>
{{ $gettext('All Podcasts') }} {{ $gettext('All Podcasts') }}
</b-button> </b-button>
<b-button variant="outline-primary" @click.prevent="doCreate"> <b-button variant="outline-primary" @click.prevent="doCreate">
<i class="material-icons" aria-hidden="true">add</i> <i class="material-icons" aria-hidden="true">add</i>
{{ $gettext('Add Episode') }} {{ $gettext('Add Episode') }}
</b-button> </b-button>
</b-card-body> </b-card-body>
<data-table ref="datatable" id="station_podcast_episodes" paginated :fields="fields" :responsive="false" <data-table ref="datatable" id="station_podcast_episodes" paginated :fields="fields" :responsive="false"
:api-url="podcast.links.episodes"> :api-url="podcast.links.episodes">
<template #cell(art)="row"> <template #cell(art)="row">
<album-art :src="row.item.art"></album-art> <album-art :src="row.item.art"></album-art>
</template>
<template #cell(title)="row">
<h5 class="m-0">{{ row.item.title }}</h5>
<a :href="row.item.links.public" target="_blank">{{ $gettext('Public Page') }}</a>
</template>
<template #cell(podcast_media)="row">
<template v-if="row.item.media">
<span>{{ row.item.media.original_name }}</span>
<br/>
<small>{{ row.item.media.length_text }}</small>
</template> </template>
<template #cell(title)="row"> </template>
<h5 class="m-0">{{ row.item.title }}</h5> <template #cell(explicit)="row">
<a :href="row.item.links.public" target="_blank">{{ $gettext('Public Page') }}</a> <span class="badge badge-danger" v-if="row.item.explicit">{{ $gettext('Explicit') }}</span>
</template> </template>
<template #cell(podcast_media)="row"> <template #cell(actions)="row">
<template v-if="row.item.media"> <b-button-group size="sm">
<span>{{ row.item.media.original_name }}</span> <b-button size="sm" variant="primary" @click.prevent="doEdit(row.item.links.self)">
<br/> {{ $gettext('Edit') }}
<small>{{ row.item.media.length_text }}</small> </b-button>
</template> <b-button size="sm" variant="danger" @click.prevent="doDelete(row.item.links.self)">
</template> {{ $gettext('Delete') }}
<template #cell(explicit)="row"> </b-button>
<span class="badge badge-danger" v-if="row.item.explicit">{{ $gettext('Explicit') }}</span> </b-button-group>
</template> </template>
<template #cell(actions)="row"> </data-table>
<b-button-group size="sm"> </b-card>
<b-button size="sm" variant="primary" @click.prevent="doEdit(row.item.links.self)">
{{ $gettext('Edit') }}
</b-button>
<b-button size="sm" variant="danger" @click.prevent="doDelete(row.item.links.self)">
{{ $gettext('Delete') }}
</b-button>
</b-button-group>
</template>
</data-table>
</b-card>
<edit-modal ref="editEpisodeModal" :create-url="podcast.links.episodes" :station-time-zone="stationTimeZone" <edit-modal ref="editEpisodeModal" :create-url="podcast.links.episodes" :station-time-zone="stationTimeZone"
:new-art-url="podcast.links.episode_new_art" :new-media-url="podcast.links.episode_new_media" :new-art-url="podcast.links.episode_new_art" :new-media-url="podcast.links.episode_new_media"
:locale="locale" :podcast-id="podcast.id" @relist="relist"></edit-modal> :locale="locale" :podcast-id="podcast.id" @relist="relist"></edit-modal>
</div>
</template> </template>
<script> <script>

98
frontend/vue/components/Stations/Podcasts/ListView.vue
View File

@ -1,57 +1,55 @@
<template> <template>
<div> <b-card no-body>
<b-card no-body> <b-card-header header-bg-variant="primary-dark">
<b-card-header header-bg-variant="primary-dark"> <b-row class="align-items-center">
<b-row class="align-items-center"> <b-col md="7">
<b-col md="7"> <h2 class="card-title">{{ $gettext('Podcasts') }}</h2>
<h2 class="card-title">{{ $gettext('Podcasts') }}</h2> </b-col>
</b-col> <b-col md="5" class="text-right text-white-50">
<b-col md="5" class="text-right text-white-50"> <stations-common-quota :quota-url="quotaUrl" ref="quota"></stations-common-quota>
<stations-common-quota :quota-url="quotaUrl" ref="quota"></stations-common-quota> </b-col>
</b-col> </b-row>
</b-row> </b-card-header>
</b-card-header>
<b-card-body body-class="card-padding-sm"> <b-card-body body-class="card-padding-sm">
<b-button variant="outline-primary" @click.prevent="doCreate"> <b-button variant="outline-primary" @click.prevent="doCreate">
<i class="material-icons" aria-hidden="true">add</i> <i class="material-icons" aria-hidden="true">add</i>
{{ $gettext('Add Podcast') }} {{ $gettext('Add Podcast') }}
</b-button> </b-button>
</b-card-body> </b-card-body>
<data-table ref="datatable" id="station_podcasts" paginated :fields="fields" :responsive="false" <data-table ref="datatable" id="station_podcasts" paginated :fields="fields" :responsive="false"
:api-url="listUrl"> :api-url="listUrl">
<template #cell(art)="row"> <template #cell(art)="row">
<album-art :src="row.item.art"></album-art> <album-art :src="row.item.art"></album-art>
</template> </template>
<template #cell(title)="row"> <template #cell(title)="row">
<h5 class="m-0">{{ row.item.title }}</h5> <h5 class="m-0">{{ row.item.title }}</h5>
<a :href="row.item.links.public_episodes" target="_blank">{{ $gettext('Public Page') }}</a> &bull; <a :href="row.item.links.public_episodes" target="_blank">{{ $gettext('Public Page') }}</a> &bull;
<a :href="row.item.links.public_feed" target="_blank">{{ $gettext('RSS Feed') }}</a> <a :href="row.item.links.public_feed" target="_blank">{{ $gettext('RSS Feed') }}</a>
</template> </template>
<template #cell(num_episodes)="row"> <template #cell(num_episodes)="row">
{{ countEpisodes(row.item.episodes) }} {{ countEpisodes(row.item.episodes) }}
</template> </template>
<template #cell(actions)="row"> <template #cell(actions)="row">
<b-button-group size="sm"> <b-button-group size="sm">
<b-button size="sm" variant="primary" @click.prevent="doEdit(row.item.links.self)"> <b-button size="sm" variant="primary" @click.prevent="doEdit(row.item.links.self)">
{{ $gettext('Edit') }} {{ $gettext('Edit') }}
</b-button> </b-button>
<b-button size="sm" variant="danger" @click.prevent="doDelete(row.item.links.self)"> <b-button size="sm" variant="danger" @click.prevent="doDelete(row.item.links.self)">
{{ $gettext('Delete') }} {{ $gettext('Delete') }}
</b-button> </b-button>
<b-button size="sm" variant="dark" @click.prevent="doSelectPodcast(row.item)"> <b-button size="sm" variant="dark" @click.prevent="doSelectPodcast(row.item)">
{{ $gettext('Episodes') }} {{ $gettext('Episodes') }}
</b-button> </b-button>
</b-button-group> </b-button-group>
</template> </template>
</data-table> </data-table>
</b-card> </b-card>
<edit-modal ref="editPodcastModal" :create-url="listUrl" :station-time-zone="stationTimeZone" <edit-modal ref="editPodcastModal" :create-url="listUrl" :station-time-zone="stationTimeZone"
:new-art-url="newArtUrl" :language-options="languageOptions" :new-art-url="newArtUrl" :language-options="languageOptions"
:categories-options="categoriesOptions" @relist="relist"></edit-modal> :categories-options="categoriesOptions" @relist="relist"></edit-modal>
</div>
</template> </template>
<script> <script>

42
frontend/vue/components/Stations/Profile.vue
View File

@ -1,34 +1,32 @@
<template> <template>
<div> <profile-header v-bind="$props" :np="np"></profile-header>
<profile-header v-bind="$props" :np="np"></profile-header>
<div class="row" id="profile"> <div class="row" id="profile">
<div class="col-lg-7"> <div class="col-lg-7">
<profile-now-playing v-bind="$props" :np="np"></profile-now-playing> <profile-now-playing v-bind="$props" :np="np"></profile-now-playing>
<profile-schedule :station-time-zone="stationTimeZone" :schedule-items="np.schedule"></profile-schedule> <profile-schedule :station-time-zone="stationTimeZone" :schedule-items="np.schedule"></profile-schedule>
<profile-streams v-bind="$props" :np="np"></profile-streams> <profile-streams v-bind="$props" :np="np"></profile-streams>
<profile-public-pages v-bind="$props"></profile-public-pages> <profile-public-pages v-bind="$props"></profile-public-pages>
</div> </div>
<div class="col-lg-5"> <div class="col-lg-5">
<profile-requests v-bind="$props" v-if="stationSupportsRequests"></profile-requests> <profile-requests v-bind="$props" v-if="stationSupportsRequests"></profile-requests>
<profile-streamers v-bind="$props" v-if="stationSupportsStreamers"></profile-streamers> <profile-streamers v-bind="$props" v-if="stationSupportsStreamers"></profile-streamers>
<template v-if="hasActiveFrontend"> <template v-if="hasActiveFrontend">
<profile-frontend v-bind="$props" :np="np"></profile-frontend> <profile-frontend v-bind="$props" :np="np"></profile-frontend>
</template> </template>
<template v-if="hasActiveBackend"> <template v-if="hasActiveBackend">
<profile-backend v-bind="$props" :np="np"></profile-backend> <profile-backend v-bind="$props" :np="np"></profile-backend>
</template> </template>
<template v-else> <template v-else>
<profile-backend-none></profile-backend-none> <profile-backend-none></profile-backend-none>
</template> </template>
</div>
</div> </div>
</div> </div>
</template> </template>

102
frontend/vue/components/Stations/Queue.vue
View File

@ -1,57 +1,55 @@
<template> <template>
<div> <b-card no-body>
<b-card no-body> <b-card-header header-bg-variant="primary-dark">
<b-card-header header-bg-variant="primary-dark"> <h2 class="card-title">{{ $gettext('Upcoming Song Queue') }}</h2>
<h2 class="card-title">{{ $gettext('Upcoming Song Queue') }}</h2> </b-card-header>
</b-card-header> <div class="card-actions">
<div class="card-actions"> <b-button variant="outline-danger" @click="doClear()">
<b-button variant="outline-danger" @click="doClear()"> <icon icon="remove"></icon>
<icon icon="remove"></icon> {{ $gettext('Clear Upcoming Song Queue') }}
{{ $gettext('Clear Upcoming Song Queue') }} </b-button>
</b-button> </div>
</div> <data-table ref="datatable" id="station_queue" :fields="fields" :api-url="listUrl">
<data-table ref="datatable" id="station_queue" :fields="fields" :api-url="listUrl"> <template #cell(actions)="row">
<template #cell(actions)="row"> <b-button-group>
<b-button-group> <b-button v-if="row.item.log" size="sm" variant="primary"
<b-button v-if="row.item.log" size="sm" variant="primary" @click.prevent="doShowLogs(row.item.log)">
@click.prevent="doShowLogs(row.item.log)"> {{ $gettext('Logs') }}
{{ $gettext('Logs') }} </b-button>
</b-button> <b-button v-if="!row.item.sent_to_autodj" size="sm" variant="danger"
<b-button v-if="!row.item.sent_to_autodj" size="sm" variant="danger" @click.prevent="doDelete(row.item.links.self)">
@click.prevent="doDelete(row.item.links.self)"> {{ $gettext('Delete') }}
{{ $gettext('Delete') }} </b-button>
</b-button> </b-button-group>
</b-button-group> </template>
</template> <template #cell(song_title)="row">
<template #cell(song_title)="row"> <div v-if="row.item.autodj_custom_uri">
<div v-if="row.item.autodj_custom_uri"> {{ row.item.autodj_custom_uri }}
{{ row.item.autodj_custom_uri }} </div>
</div> <div v-else-if="row.item.song.title">
<div v-else-if="row.item.song.title"> <b>{{ row.item.song.title }}</b><br>
<b>{{ row.item.song.title }}</b><br> {{ row.item.song.artist }}
{{ row.item.song.artist }} </div>
</div> <div v-else>
<div v-else> {{ row.item.song.text }}
{{ row.item.song.text }} </div>
</div> </template>
</template> <template #cell(played_at)="row">
<template #cell(played_at)="row"> {{ formatTime(row.item.played_at) }}<br>
{{ formatTime(row.item.played_at) }}<br> <small>{{ formatRelativeTime(row.item.played_at) }}</small>
<small>{{ formatRelativeTime(row.item.played_at) }}</small> </template>
</template> <template #cell(source)="row">
<template #cell(source)="row"> <div v-if="row.item.is_request">
<div v-if="row.item.is_request"> {{ $gettext('Listener Request') }}
{{ $gettext('Listener Request') }} </div>
</div> <div v-else-if="row.item.playlist">
<div v-else-if="row.item.playlist"> {{ $gettext('Playlist') }}: {{ row.item.playlist }}
{{ $gettext('Playlist') }}: {{ row.item.playlist }} </div>
</div> </template>
</template> </data-table>
</data-table> </b-card>
</b-card>
<queue-logs-modal ref="logs_modal"></queue-logs-modal> <queue-logs-modal ref="logs_modal"></queue-logs-modal>
</div>
</template> </template>
<script> <script>

94
frontend/vue/components/Stations/Remotes.vue
View File

@ -1,57 +1,55 @@
<template> <template>
<div> <b-card no-body>
<b-card no-body> <b-card-header header-bg-variant="primary-dark">
<b-card-header header-bg-variant="primary-dark"> <h2 class="card-title">{{ $gettext('Remote Relays') }}</h2>
<h2 class="card-title">{{ $gettext('Remote Relays') }}</h2> </b-card-header>
</b-card-header>
<info-card> <info-card>
<p class="card-text"> <p class="card-text">
{{ {{
$gettext('Remote relays let you work with broadcasting software outside this server. Any relay you include here will be included in your station\'s statistics. You can also broadcast from this server to remote relays.') $gettext('Remote relays let you work with broadcasting software outside this server. Any relay you include here will be included in your station\'s statistics. You can also broadcast from this server to remote relays.')
}}
</p>
</info-card>
<b-card-body body-class="card-padding-sm">
<b-button variant="outline-primary" @click.prevent="doCreate">
<icon icon="add"></icon>
{{ $gettext('Add Remote Relay') }}
</b-button>
</b-card-body>
<data-table ref="datatable" id="station_remotes" paginated :fields="fields" :api-url="listUrl">
<template #cell(display_name)="row">
<h5 class="m-0">
<a :href="row.item.url" target="_blank">{{ row.item.display_name }}</a>
</h5>
</template>
<template #cell(enable_autodj)="row">
<template v-if="row.item.enable_autodj">
{{ $gettext('Enabled') }} - {{ row.item.autodj_bitrate }}kbps {{
upper(row.item.autodj_format)
}} }}
</p>
</info-card>
<b-card-body body-class="card-padding-sm">
<b-button variant="outline-primary" @click.prevent="doCreate">
<icon icon="add"></icon>
{{ $gettext('Add Remote Relay') }}
</b-button>
</b-card-body>
<data-table ref="datatable" id="station_remotes" paginated :fields="fields" :api-url="listUrl">
<template #cell(display_name)="row">
<h5 class="m-0">
<a :href="row.item.url" target="_blank">{{ row.item.display_name }}</a>
</h5>
</template> </template>
<template #cell(enable_autodj)="row"> <template v-else>
<template v-if="row.item.enable_autodj"> {{ $gettext('Disabled') }}
{{ $gettext('Enabled') }} - {{ row.item.autodj_bitrate }}kbps {{
upper(row.item.autodj_format)
}}
</template>
<template v-else>
{{ $gettext('Disabled') }}
</template>
</template> </template>
<template #cell(actions)="row"> </template>
<b-button-group size="sm" v-if="row.item.is_editable"> <template #cell(actions)="row">
<b-button size="sm" variant="primary" @click.prevent="doEdit(row.item.links.self)"> <b-button-group size="sm" v-if="row.item.is_editable">
{{ $gettext('Edit') }} <b-button size="sm" variant="primary" @click.prevent="doEdit(row.item.links.self)">
</b-button> {{ $gettext('Edit') }}
<b-button size="sm" variant="danger" @click.prevent="doDelete(row.item.links.self)"> </b-button>
{{ $gettext('Delete') }} <b-button size="sm" variant="danger" @click.prevent="doDelete(row.item.links.self)">
</b-button> {{ $gettext('Delete') }}
</b-button-group> </b-button>
</template> </b-button-group>
</data-table> </template>
</b-card> </data-table>
</b-card>
<remote-edit-modal ref="editModal" :create-url="listUrl" <remote-edit-modal ref="editModal" :create-url="listUrl"
@relist="relist" @needs-restart="mayNeedRestart"></remote-edit-modal> @relist="relist" @needs-restart="mayNeedRestart"></remote-edit-modal>
</div>
</template> </template>
<script> <script>

98
frontend/vue/components/Stations/Reports/Requests.vue
View File

@ -1,56 +1,54 @@
<template> <template>
<div> <b-card no-body>
<b-card no-body> <b-card-header header-bg-variant="primary-dark">
<b-card-header header-bg-variant="primary-dark"> <h2 class="card-title">{{ $gettext('Song Requests') }}</h2>
<h2 class="card-title">{{ $gettext('Song Requests') }}</h2> </b-card-header>
</b-card-header> <b-tabs pills card>
<b-tabs pills card> <b-tab v-for="tab in tabs" :key="tab.type" :active="activeType === tab.type" @click="setType(tab.type)"
<b-tab v-for="tab in tabs" :key="tab.type" :active="activeType === tab.type" @click="setType(tab.type)" :title="tab.title" no-body></b-tab>
:title="tab.title" no-body></b-tab> </b-tabs>
</b-tabs>
<div class="card-actions" v-if="activeType === 'pending'"> <div class="card-actions" v-if="activeType === 'pending'">
<b-button variant="outline-danger" @click="doClear()"> <b-button variant="outline-danger" @click="doClear()">
<icon icon="remove"></icon> <icon icon="remove"></icon>
{{ $gettext('Clear Pending Requests') }} {{ $gettext('Clear Pending Requests') }}
</b-button> </b-button>
</div> </div>
<data-table ref="datatable" id="station_queue" :fields="fields" :api-url="listUrlForType"> <data-table ref="datatable" id="station_queue" :fields="fields" :api-url="listUrlForType">
<template #cell(timestamp)="row"> <template #cell(timestamp)="row">
{{ formatTime(row.item.timestamp) }} {{ formatTime(row.item.timestamp) }}
</template> </template>
<template #cell(played_at)="row"> <template #cell(played_at)="row">
<span v-if="row.item.played_at === 0"> <span v-if="row.item.played_at === 0">
{{ $gettext('Not Played') }} {{ $gettext('Not Played') }}
</span> </span>
<span v-else> <span v-else>
{{ formatTime(row.item.played_at) }} {{ formatTime(row.item.played_at) }}
</span> </span>
</template> </template>
<template #cell(song_title)="row"> <template #cell(song_title)="row">
<div v-if="row.item.track.title"> <div v-if="row.item.track.title">
<b>{{ row.item.track.title }}</b><br> <b>{{ row.item.track.title }}</b><br>
{{ row.item.track.artist }} {{ row.item.track.artist }}
</div> </div>
<div v-else> <div v-else>
{{ row.item.track.text }} {{ row.item.track.text }}
</div> </div>
</template> </template>
<template #cell(ip)="row"> <template #cell(ip)="row">
{{ row.item.ip }} {{ row.item.ip }}
</template> </template>
<template #cell(actions)="row"> <template #cell(actions)="row">
<b-button-group> <b-button-group>
<b-button v-if="row.item.played_at === 0" size="sm" variant="danger" <b-button v-if="row.item.played_at === 0" size="sm" variant="danger"
@click.prevent="doDelete(row.item.links.delete)"> @click.prevent="doDelete(row.item.links.delete)">
{{ $gettext('Delete') }} {{ $gettext('Delete') }}
</b-button> </b-button>
</b-button-group> </b-button-group>
</template> </template>
</data-table> </data-table>
</b-card> </b-card>
</div>
</template> </template>
<script> <script>

106
frontend/vue/components/Stations/Webhooks.vue
View File

@ -1,61 +1,61 @@
<template> <template>
<div> <b-card no-body>
<b-card no-body> <b-card-header header-bg-variant="primary-dark">
<b-card-header header-bg-variant="primary-dark"> <h2 class="card-title">{{ $gettext('Web Hooks') }}</h2>
<h2 class="card-title">{{ $gettext('Web Hooks') }}</h2> </b-card-header>
</b-card-header>
<info-card> <info-card>
{{ $gettext('Web hooks let you connect to external web services and broadcast changes to your station to them.') }} {{
</info-card> $gettext('Web hooks let you connect to external web services and broadcast changes to your station to them.')
}}
</info-card>
<b-card-body body-class="card-padding-sm"> <b-card-body body-class="card-padding-sm">
<b-button variant="outline-primary" @click.prevent="doCreate"> <b-button variant="outline-primary" @click.prevent="doCreate">
<icon icon="add"></icon> <icon icon="add"></icon>
{{ $gettext('Add Web Hook') }} {{ $gettext('Add Web Hook') }}
</b-button> </b-button>
</b-card-body> </b-card-body>
<data-table ref="datatable" id="station_webhooks" :fields="fields" <data-table ref="datatable" id="station_webhooks" :fields="fields"
:api-url="listUrl"> :api-url="listUrl">
<template #cell(name)="row"> <template #cell(name)="row">
<big>{{ row.item.name }}</big><br> <big>{{ row.item.name }}</big><br>
{{ getWebhookName(row.item.type) }} {{ getWebhookName(row.item.type) }}
<b-badge v-if="!row.item.is_enabled" variant="danger"> <b-badge v-if="!row.item.is_enabled" variant="danger">
{{ $gettext('Disabled') }} {{ $gettext('Disabled') }}
</b-badge> </b-badge>
</template> </template>
<template #cell(triggers)="row"> <template #cell(triggers)="row">
<div v-for="(name, index) in getTriggerNames(row.item.triggers)" :key="row.item.id+'_'+index" <div v-for="(name, index) in getTriggerNames(row.item.triggers)" :key="row.item.id+'_'+index"
class="small"> class="small">
{{ name }} {{ name }}
</div> </div>
</template> </template>
<template #cell(actions)="row"> <template #cell(actions)="row">
<b-button-group size="sm"> <b-button-group size="sm">
<b-button size="sm" variant="primary" @click.prevent="doEdit(row.item.links.self)"> <b-button size="sm" variant="primary" @click.prevent="doEdit(row.item.links.self)">
{{ $gettext('Edit') }} {{ $gettext('Edit') }}
</b-button> </b-button>
<b-button size="sm" :variant="getToggleVariant(row.item)" <b-button size="sm" :variant="getToggleVariant(row.item)"
@click.prevent="doToggle(row.item.links.toggle)"> @click.prevent="doToggle(row.item.links.toggle)">
{{ langToggleButton(row.item) }} {{ langToggleButton(row.item) }}
</b-button> </b-button>
<b-button size="sm" variant="default" @click.prevent="doTest(row.item.links.test)"> <b-button size="sm" variant="default" @click.prevent="doTest(row.item.links.test)">
{{ $gettext('Test') }} {{ $gettext('Test') }}
</b-button> </b-button>
<b-button size="sm" variant="danger" @click.prevent="doDelete(row.item.links.self)"> <b-button size="sm" variant="danger" @click.prevent="doDelete(row.item.links.self)">
{{ $gettext('Delete') }} {{ $gettext('Delete') }}
</b-button> </b-button>
</b-button-group> </b-button-group>
</template> </template>
</data-table> </data-table>
</b-card> </b-card>
<streaming-log-modal ref="logModal"></streaming-log-modal> <streaming-log-modal ref="logModal"></streaming-log-modal>
<edit-modal ref="editModal" :create-url="listUrl" :webhook-types="webhookTypes" <edit-modal ref="editModal" :create-url="listUrl" :webhook-types="webhookTypes"
:trigger-titles="langTriggerTitles" :trigger-descriptions="langTriggerDescriptions" :trigger-titles="langTriggerTitles" :trigger-descriptions="langTriggerDescriptions"
:now-playing-url="nowPlayingUrl" @relist="relist"></edit-modal> :now-playing-url="nowPlayingUrl" @relist="relist"></edit-modal>
</div>
</template> </template>
<script> <script>

110
frontend/vue/components/Stations/Webhooks/Form/Discord.vue
View File

@ -1,68 +1,66 @@
<template> <template>
<div> <b-form-group>
<b-form-group> <b-form-row>
<b-form-row> <b-wrapped-form-group class="col-md-12" id="form_config_webhook_url" :field="form.config.webhook_url"
<b-wrapped-form-group class="col-md-12" id="form_config_webhook_url" :field="form.config.webhook_url" input-type="url">
input-type="url"> <template #label="{lang}">
<template #label="{lang}"> {{ $gettext('Discord Web Hook URL') }}
{{ $gettext('Discord Web Hook URL') }} </template>
</template> <template #description="{lang}">
<template #description="{lang}"> {{ $gettext('This URL is provided within the Discord application.') }}
{{ $gettext('This URL is provided within the Discord application.') }} </template>
</template> </b-wrapped-form-group>
</b-wrapped-form-group> </b-form-row>
</b-form-row> </b-form-group>
</b-form-group>
<common-formatting-info :now-playing-url="nowPlayingUrl"></common-formatting-info> <common-formatting-info :now-playing-url="nowPlayingUrl"></common-formatting-info>
<b-form-group> <b-form-group>
<b-form-row> <b-form-row>
<b-wrapped-form-group class="col-md-6" id="form_config_content" :field="form.config.content"> <b-wrapped-form-group class="col-md-6" id="form_config_content" :field="form.config.content">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Main Message Content') }} {{ $gettext('Main Message Content') }}
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
<b-wrapped-form-group class="col-md-6" id="form_config_title" :field="form.config.title"> <b-wrapped-form-group class="col-md-6" id="form_config_title" :field="form.config.title">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Title') }} {{ $gettext('Title') }}
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
<b-wrapped-form-group class="col-md-6" id="form_config_description" :field="form.config.description"> <b-wrapped-form-group class="col-md-6" id="form_config_description" :field="form.config.description">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Description') }} {{ $gettext('Description') }}
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
<b-wrapped-form-group class="col-md-6" id="form_config_url" :field="form.config.url" input-type="url"> <b-wrapped-form-group class="col-md-6" id="form_config_url" :field="form.config.url" input-type="url">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('URL') }} {{ $gettext('URL') }}
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
<b-wrapped-form-group class="col-md-6" id="form_config_author" :field="form.config.author"> <b-wrapped-form-group class="col-md-6" id="form_config_author" :field="form.config.author">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Author') }} {{ $gettext('Author') }}
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
<b-wrapped-form-group class="col-md-6" id="form_config_thumbnail" :field="form.config.thumbnail" <b-wrapped-form-group class="col-md-6" id="form_config_thumbnail" :field="form.config.thumbnail"
input-type="url"> input-type="url">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Thumbnail Image URL') }} {{ $gettext('Thumbnail Image URL') }}
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
<b-wrapped-form-group class="col-md-6" id="form_config_footer" :field="form.config.footer"> <b-wrapped-form-group class="col-md-6" id="form_config_footer" :field="form.config.footer">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Footer Text') }} {{ $gettext('Footer Text') }}
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
</b-form-row> </b-form-row>
</b-form-group> </b-form-group>
</div>
</template> </template>
<script> <script>

56
frontend/vue/components/Stations/Webhooks/Form/Email.vue
View File

@ -1,36 +1,34 @@
<template> <template>
<div> <b-form-group>
<b-form-group> <b-form-row>
<b-form-row> <b-wrapped-form-group class="col-md-12" id="form_config_to" :field="form.config.to">
<b-wrapped-form-group class="col-md-12" id="form_config_to" :field="form.config.to"> <template #label="{lang}">
<template #label="{lang}"> {{ $gettext('Message Recipient(s)') }}
{{ $gettext('Message Recipient(s)') }} </template>
</template> <template #description="{lang}">
<template #description="{lang}"> {{ $gettext('E-mail addresses can be separated by commas.') }}
{{ $gettext('E-mail addresses can be separated by commas.') }} </template>
</template> </b-wrapped-form-group>
</b-wrapped-form-group> </b-form-row>
</b-form-row> </b-form-group>
</b-form-group>
<common-formatting-info :now-playing-url="nowPlayingUrl"></common-formatting-info> <common-formatting-info :now-playing-url="nowPlayingUrl"></common-formatting-info>
<b-form-group> <b-form-group>
<b-form-row> <b-form-row>
<b-wrapped-form-group class="col-md-12" id="form_config_subject" :field="form.config.subject"> <b-wrapped-form-group class="col-md-12" id="form_config_subject" :field="form.config.subject">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Message Subject') }} {{ $gettext('Message Subject') }}
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
<b-wrapped-form-group class="col-md-12" id="form_config_message" :field="form.config.message"> <b-wrapped-form-group class="col-md-12" id="form_config_message" :field="form.config.message">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Message Body') }} {{ $gettext('Message Body') }}
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
</b-form-row> </b-form-row>
</b-form-group> </b-form-group>
</div>
</template> </template>
<script> <script>

134
frontend/vue/components/Stations/Webhooks/Form/Generic.vue
View File

@ -1,73 +1,79 @@
<template> <template>
<div> <b-form-group>
<b-form-group> <template #label>
<template #label> {{ $gettext('Web Hook Details') }}
{{ $gettext('Web Hook Details') }} </template>
</template>
<p class="card-text"> <p class="card-text">
{{ $gettext('Web hooks automatically send a HTTP POST request to the URL you specify to notify it any time one of the triggers you specify occurs on your station.') }} {{
</p> $gettext('Web hooks automatically send a HTTP POST request to the URL you specify to notify it any time one of the triggers you specify occurs on your station.')
<p class="card-text"> }}
{{ $gettext('The body of the POST message is the exact same as the NowPlaying API response for your station.') }} </p>
</p> <p class="card-text">
<ul> {{
<li> $gettext('The body of the POST message is the exact same as the NowPlaying API response for your station.')
<a href="https://azuracast.com/api" target="_blank"> }}
{{ $gettext('NowPlaying API Response') }} </p>
</a> <ul>
</li> <li>
</ul> <a href="https://azuracast.com/api" target="_blank">
<p class="card-text"> {{ $gettext('NowPlaying API Response') }}
{{ $gettext('In order to process quickly, web hooks have a short timeout, so the responding service should be optimized to handle the request in under 2 seconds.') }} </a>
</p> </li>
</b-form-group> </ul>
<p class="card-text">
{{
$gettext('In order to process quickly, web hooks have a short timeout, so the responding service should be optimized to handle the request in under 2 seconds.')
}}
</p>
</b-form-group>
<b-form-group> <b-form-group>
<b-form-row> <b-form-row>
<b-wrapped-form-group class="col-md-12" id="form_config_webhook_url" :field="form.config.webhook_url" <b-wrapped-form-group class="col-md-12" id="form_config_webhook_url" :field="form.config.webhook_url"
input-type="url"> input-type="url">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Web Hook URL') }} {{ $gettext('Web Hook URL') }}
</template> </template>
<template #description="{lang}"> <template #description="{lang}">
{{ $gettext('The URL that will receive the POST messages any time an event is triggered.') }} {{ $gettext('The URL that will receive the POST messages any time an event is triggered.') }}
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
<b-wrapped-form-group class="col-md-6" id="form_config_basic_auth_username" <b-wrapped-form-group class="col-md-6" id="form_config_basic_auth_username"
:field="form.config.basic_auth_username"> :field="form.config.basic_auth_username">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Optional: HTTP Basic Authentication Username') }} {{ $gettext('Optional: HTTP Basic Authentication Username') }}
</template> </template>
<template #description="{lang}"> <template #description="{lang}">
{{ $gettext('If your web hook requires HTTP basic authentication, provide the username here.') }} {{ $gettext('If your web hook requires HTTP basic authentication, provide the username here.') }}
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
<b-wrapped-form-group class="col-md-6" id="form_config_basic_auth_password" <b-wrapped-form-group class="col-md-6" id="form_config_basic_auth_password"
:field="form.config.basic_auth_password"> :field="form.config.basic_auth_password">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Optional: HTTP Basic Authentication Password') }} {{ $gettext('Optional: HTTP Basic Authentication Password') }}
</template> </template>
<template #description="{lang}"> <template #description="{lang}">
{{ $gettext('If your web hook requires HTTP basic authentication, provide the password here.') }} {{ $gettext('If your web hook requires HTTP basic authentication, provide the password here.') }}
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
<b-wrapped-form-group class="col-md-6" id="form_config_timeout" <b-wrapped-form-group class="col-md-6" id="form_config_timeout"
:field="form.config.timeout" input-type="number" :field="form.config.timeout" input-type="number"
:input-attrs="{ min: '0.0', max: '600.0', step: '0.1' }"> :input-attrs="{ min: '0.0', max: '600.0', step: '0.1' }">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Optional: Request Timeout (Seconds)') }} {{ $gettext('Optional: Request Timeout (Seconds)') }}
</template> </template>
<template #description="{lang}"> <template #description="{lang}">
{{ $gettext('The number of seconds to wait for a response from the remote server before cancelling the request.') }} {{
</template> $gettext('The number of seconds to wait for a response from the remote server before cancelling the request.')
</b-wrapped-form-group> }}
</b-form-row> </template>
</b-form-group> </b-wrapped-form-group>
</div> </b-form-row>
</b-form-group>
</template> </template>
<script> <script>

124
frontend/vue/components/Stations/Webhooks/Form/Mastodon.vue
View File

@ -1,75 +1,73 @@
<template> <template>
<div> <b-form-group>
<b-form-group> <template #label>
<template #label> {{ $gettext('Mastodon Account Details') }}
{{ $gettext('Mastodon Account Details') }} </template>
</template>
<p class="card-text"> <p class="card-text">
{{ $gettext('Steps for configuring a Mastodon application:') }} {{ $gettext('Steps for configuring a Mastodon application:') }}
</p> </p>
<ul> <ul>
<li> <li>
{{ $gettext('Visit your Mastodon instance.') }} {{ $gettext('Visit your Mastodon instance.') }}
</li> </li>
<li> <li>
{{ $gettext('Click the "Preferences" link, then "Development" on the left side menu.') }} {{ $gettext('Click the "Preferences" link, then "Development" on the left side menu.') }}
</li> </li>
<li> <li>
{{ $gettext('Click "New Application"') }} {{ $gettext('Click "New Application"') }}
</li> </li>
<li> <li>
{{
$gettext('Enter "AzuraCast" as the application name. You can leave the URL fields unchanged. For "Scopes", only "write:media" and "write:statuses" are required.')
}}
</li>
</ul>
<p class="card-text">
{{ {{
$gettext('Once these steps are completed, enter the "Access Token" from the application\'s page into the field below.') $gettext('Enter "AzuraCast" as the application name. You can leave the URL fields unchanged. For "Scopes", only "write:media" and "write:statuses" are required.')
}} }}
</p> </li>
</b-form-group> </ul>
<p class="card-text">
{{
$gettext('Once these steps are completed, enter the "Access Token" from the application\'s page into the field below.')
}}
</p>
</b-form-group>
<b-form-group> <b-form-group>
<b-form-row> <b-form-row>
<b-wrapped-form-group class="col-md-6" id="form_config_instance_url" :field="form.config.instance_url"> <b-wrapped-form-group class="col-md-6" id="form_config_instance_url" :field="form.config.instance_url">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Mastodon Instance URL') }} {{ $gettext('Mastodon Instance URL') }}
</template> </template>
<template #description="{lang}"> <template #description="{lang}">
{{ $gettext('If your Mastodon username is "@test@example.com", enter "example.com".') }} {{ $gettext('If your Mastodon username is "@test@example.com", enter "example.com".') }}
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
<b-wrapped-form-group class="col-md-6" id="form_config_access_token" <b-wrapped-form-group class="col-md-6" id="form_config_access_token"
:field="form.config.access_token"> :field="form.config.access_token">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Access Token') }} {{ $gettext('Access Token') }}
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
<common-rate-limit-fields :form="form"></common-rate-limit-fields> <common-rate-limit-fields :form="form"></common-rate-limit-fields>
</b-form-row> </b-form-row>
</b-form-group> </b-form-group>
<b-form-group> <b-form-group>
<b-form-row> <b-form-row>
<b-wrapped-form-group class="col-md-12" id="form_config_visibility" :field="form.config.visibility"> <b-wrapped-form-group class="col-md-12" id="form_config_visibility" :field="form.config.visibility">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Message Visibility') }} {{ $gettext('Message Visibility') }}
</template> </template>
<template #default="props"> <template #default="props">
<b-form-radio-group stacked :id="props.id" :options="visibilityOptions" <b-form-radio-group stacked :id="props.id" :options="visibilityOptions"
v-model="props.field.$model"> v-model="props.field.$model">
</b-form-radio-group> </b-form-radio-group>
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
</b-form-row> </b-form-row>
</b-form-group> </b-form-group>
<common-social-post-fields :form="form" :now-playing-url="nowPlayingUrl"></common-social-post-fields> <common-social-post-fields :form="form" :now-playing-url="nowPlayingUrl"></common-social-post-fields>
</div>
</template> </template>
<script> <script>

118
frontend/vue/components/Stations/Webhooks/Form/Telegram.vue
View File

@ -1,69 +1,67 @@
<template> <template>
<div> <b-form-group>
<b-form-group> <b-form-row>
<b-form-row> <b-wrapped-form-group class="col-md-6" id="form_config_bot_token" :field="form.config.bot_token">
<b-wrapped-form-group class="col-md-6" id="form_config_bot_token" :field="form.config.bot_token"> <template #label="{lang}">
<template #label="{lang}"> {{ $gettext('Bot Token') }}
{{ $gettext('Bot Token') }} </template>
</template> <template #description="{lang}">
<template #description="{lang}"> <a href="https://core.telegram.org/bots#botfather" target="_blank">
<a href="https://core.telegram.org/bots#botfather" target="_blank"> {{ $gettext('See the Telegram Documentation for more details.') }}
{{ $gettext('See the Telegram Documentation for more details.') }} </a>
</a> </template>
</template> </b-wrapped-form-group>
</b-wrapped-form-group>
<b-wrapped-form-group class="col-md-6" id="form_config_chat_id" :field="form.config.chat_id"> <b-wrapped-form-group class="col-md-6" id="form_config_chat_id" :field="form.config.chat_id">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Chat ID') }} {{ $gettext('Chat ID') }}
</template> </template>
<template #description="{lang}"> <template #description="{lang}">
{{ {{
$gettext('Unique identifier for the target chat or username of the target channel (in the format @channelusername).') $gettext('Unique identifier for the target chat or username of the target channel (in the format @channelusername).')
}} }}
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
<b-wrapped-form-group class="col-md-6" id="form_config_api" :field="form.config.api"> <b-wrapped-form-group class="col-md-6" id="form_config_api" :field="form.config.api">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Custom API Base URL') }} {{ $gettext('Custom API Base URL') }}
</template> </template>
<template #description="{lang}"> <template #description="{lang}">
{{ $gettext('Leave blank to use the default Telegram API URL (recommended).') }} {{ $gettext('Leave blank to use the default Telegram API URL (recommended).') }}
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
</b-form-row> </b-form-row>
</b-form-group> </b-form-group>
<common-formatting-info :now-playing-url="nowPlayingUrl"></common-formatting-info> <common-formatting-info :now-playing-url="nowPlayingUrl"></common-formatting-info>
<b-form-group> <b-form-group>
<b-form-row> <b-form-row>
<b-wrapped-form-group class="col-md-12" id="form_config_text" :field="form.config.text" <b-wrapped-form-group class="col-md-12" id="form_config_text" :field="form.config.text"
input-type="textarea"> input-type="textarea">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Main Message Content') }} {{ $gettext('Main Message Content') }}
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
<b-wrapped-form-group class="col-md-12" id="form_config_parse_mode" :field="form.config.parse_mode"> <b-wrapped-form-group class="col-md-12" id="form_config_parse_mode" :field="form.config.parse_mode">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Message parsing mode') }} {{ $gettext('Message parsing mode') }}
</template> </template>
<template #description="{lang}"> <template #description="{lang}">
<a href="https://core.telegram.org/bots/api#sendmessage" target="_blank"> <a href="https://core.telegram.org/bots/api#sendmessage" target="_blank">
{{ $gettext('See the Telegram documentation for more details.') }} {{ $gettext('See the Telegram documentation for more details.') }}
</a> </a>
</template> </template>
<template #default="props"> <template #default="props">
<b-form-radio-group stacked :id="props.id" :options="parseModeOptions" <b-form-radio-group stacked :id="props.id" :options="parseModeOptions"
v-model="props.field.$model"> v-model="props.field.$model">
</b-form-radio-group> </b-form-radio-group>
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
</b-form-row> </b-form-row>
</b-form-group> </b-form-group>
</div>
</template> </template>
<script> <script>

112
frontend/vue/components/Stations/Webhooks/Form/Twitter.vue
View File

@ -1,70 +1,68 @@
<template> <template>
<div> <b-form-group>
<b-form-group> <template #label>
<template #label> {{ $gettext('Twitter Account Details') }}
{{ $gettext('Twitter Account Details') }} </template>
</template>
<p class="card-text"> <p class="card-text">
{{ $gettext('Steps for configuring a Twitter application:') }} {{ $gettext('Steps for configuring a Twitter application:') }}
</p> </p>
<ul> <ul>
<li> <li>
{{
$gettext('Create a new app on the Twitter Applications site. Use this installation\'s base URL as the application URL.')
}}
<br>
<a href="https://developer.twitter.com/en/apps" target="_blank">
{{ $gettext('Twitter Applications') }}
</a>
</li>
<li>
{{ $gettext('In the newly created application, click the "Keys and Access Tokens" tab.') }}
</li>
<li>
{{ $gettext('At the bottom of the page, click "Create my access token".') }}
</li>
</ul>
<p class="card-text">
{{ {{
$gettext('Once these steps are completed, enter the information from the "Keys and Access Tokens" page into the fields below.') $gettext('Create a new app on the Twitter Applications site. Use this installation\'s base URL as the application URL.')
}} }}
</p> <br>
</b-form-group> <a href="https://developer.twitter.com/en/apps" target="_blank">
{{ $gettext('Twitter Applications') }}
</a>
</li>
<li>
{{ $gettext('In the newly created application, click the "Keys and Access Tokens" tab.') }}
</li>
<li>
{{ $gettext('At the bottom of the page, click "Create my access token".') }}
</li>
</ul>
<p class="card-text">
{{
$gettext('Once these steps are completed, enter the information from the "Keys and Access Tokens" page into the fields below.')
}}
</p>
</b-form-group>
<b-form-group> <b-form-group>
<b-form-row> <b-form-row>
<b-wrapped-form-group class="col-md-6" id="form_config_consumer_key" :field="form.config.consumer_key"> <b-wrapped-form-group class="col-md-6" id="form_config_consumer_key" :field="form.config.consumer_key">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Consumer Key (API Key)') }} {{ $gettext('Consumer Key (API Key)') }}
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
<b-wrapped-form-group class="col-md-6" id="form_config_consumer_secret" <b-wrapped-form-group class="col-md-6" id="form_config_consumer_secret"
:field="form.config.consumer_secret"> :field="form.config.consumer_secret">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Consumer Secret (API Secret)') }} {{ $gettext('Consumer Secret (API Secret)') }}
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
<b-wrapped-form-group class="col-md-6" id="form_config_token" :field="form.config.token"> <b-wrapped-form-group class="col-md-6" id="form_config_token" :field="form.config.token">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Access Token') }} {{ $gettext('Access Token') }}
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
<b-wrapped-form-group class="col-md-6" id="form_config_token_secret" :field="form.config.token_secret"> <b-wrapped-form-group class="col-md-6" id="form_config_token_secret" :field="form.config.token_secret">
<template #label="{lang}"> <template #label="{lang}">
{{ $gettext('Access Token Secret') }} {{ $gettext('Access Token Secret') }}
</template> </template>
</b-wrapped-form-group> </b-wrapped-form-group>
<common-rate-limit-fields :form="form"></common-rate-limit-fields> <common-rate-limit-fields :form="form"></common-rate-limit-fields>
</b-form-row> </b-form-row>
</b-form-group> </b-form-group>
<common-social-post-fields :form="form" :now-playing-url="nowPlayingUrl"></common-social-post-fields> <common-social-post-fields :form="form" :now-playing-url="nowPlayingUrl"></common-social-post-fields>
</div>
</template> </template>
<script> <script>