tilderadio
/
AzuraCast
mirror of https://github.com/AzuraCast/AzuraCast.git
4
0
Fork 0
Code Issues Releases Wiki Activity

#2032 -- Return to using global Vue for drop-in components.

This commit is contained in:
Buster "Silver Eagle" Neece 2019-10-04 03:02:53 -05:00
parent e0efde8612
commit d79c19c887
No known key found for this signature in database
GPG Key ID: 6D9E12FF03411F4E
23 changed files with 194 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
config/assets.php
View File

@ -1,5 +1,6 @@
<?php
use App\Customization;
use App\Settings;
use Psr\Http\Message\ServerRequestInterface as Request;
@ -39,6 +40,26 @@ return [
],
],
'vue-translations' => [
'order' => 2,
'files' => [
'js' => [
[
'src' => 'dist/vue_gettext.js',
],
],
],
'inline' => [
'js' => [
function (Request $request) {
$locale = $request->getAttribute('locale', Customization::DEFAULT_LOCALE);
$locale = substr($locale, 0, 5);
return 'VueTranslations.default(' . json_encode($locale) . ');';
},
],
],
],
'lodash' => [
'order' => 2,
'files' => [
@ -223,11 +244,8 @@ return [
'inline' => [
'js' => [
function (Request $request) {
if ('' !== $request->getAttribute('locale', '')) {
return '';
}
$locale = str_replace('_', '-', explode('.', $request->getAttribute('locale'))[0]);
$locale = $request->getAttribute('locale', Customization::DEFAULT_LOCALE);
$locale = str_replace('_', '-', explode('.', $locale)[0]);
return 'moment.locale(' . json_encode($locale) . ');';
},
],
@ -424,6 +442,7 @@ return [
'webcaster' => [
'order' => 10,
'require' => ['vue', 'vue-translations'],
'files' => [
'js' => [
[
@ -447,6 +466,7 @@ return [
'radio_player' => [
'order' => 10,
'require' => ['vue', 'vue-translations'],
'files' => [
'js' => [
[
@ -458,6 +478,7 @@ return [
'inline_player' => [
'order' => 10,
'require' => ['vue', 'vue-translations'],
'files' => [
'js' => [
[

50
templates/frontend/index/index.js.phtml
View File

@ -1,37 +1,37 @@
<?php
$station_ids = [];
foreach($stations['stations'] as $station) {
foreach ($stations['stations'] as $station) {
$station_ids[] = urlencode($station['station']['short_name']);
}
?>
var station_dashboard;
$(function() {
station_dashboard = new Vue({
el: '#station_dashboard',
data: <?=json_encode($stations) ?>,
methods: {
toggle: function (url) {
this.$eventHub.$emit('player_toggle', url);
}
}
});
$(function () {
station_dashboard = new Vue({
el: '#station_dashboard',
data: <?=json_encode($stations) ?>,
methods: {
toggle: function (url) {
this.$eventHub.$emit('player_toggle', url);
}
}
});
});
$(function() {
$(function () {
setTimeout(loadNowPlaying, 15000);
});
function loadNowPlaying () {
$.getJSON('<?=$router->named('api:nowplaying:index') ?>', function (data) {
$.each(data, function (k, row) {
var station_id = row.station.id;
station_dashboard['stations'][station_id]['np'] = row;
});
setTimeout(loadNowPlaying, 15000);
});
function loadNowPlaying() {
$.getJSON('<?=$router->named('api:nowplaying:index') ?>', function(data) {
$.each(data, function(k, row) {
var station_id = row.station.id;
station_dashboard['stations'][station_id]['np'] = row;
});
setTimeout(loadNowPlaying, 15000);
}).fail(function() {
setTimeout(loadNowPlaying, 30000);
});
}).fail(function () {
setTimeout(loadNowPlaying, 30000);
});
}

154
templates/frontend/index/index.phtml
View File

@ -20,7 +20,7 @@ if ($metrics) {
$assets
->load('chartjs')
->addInlineJs($this->fetch('frontend/index/index_metrics.js', [
'metrics' => $metrics
'metrics' => $metrics,
]));
}
@ -30,78 +30,78 @@ $user = $request->getUser();
<section class="card mb-4" role="region">
<div class="card-header bg-primary-dark d-flex align-items-center">
<a class="flex-shrink-0" href="http://www.gravatar.com/" target="_blank">
<img src="<?=$user->getAvatar(64) ?>" style="width: 64px; height: auto;" alt="">
<img src="<?= $user->getAvatar(64) ?>" style="width: 64px; height: auto;" alt="">
</a>
<div class="flex-fill ml-3">
<h2 class="card-title mt-0">
<?php if (!empty($user->getName())): ?>
<?=$this->e($user->getName()) ?>
<?= $this->e($user->getName()) ?>
<?php else: ?>
<?=__('AzuraCast User') ?>
<?= __('AzuraCast User') ?>
<?php endif; ?>
</h2>
<h3 class="card-subtitle">
<?=$this->e($user->getEmail()) ?>
<?= $this->e($user->getEmail()) ?>
</h3>
</div>
<div class="flex-shrink-0">
<a class="btn btn-bg" role="button" href="<?=$router->named('profile:index') ?>">
<a class="btn btn-bg" role="button" href="<?= $router->named('profile:index') ?>">
<i class="material-icons" aria-hidden="true">account_circle</i>
<?=__('My Account') ?>
<?= __('My Account') ?>
</a>
<?php if ($show_admin): ?>
<a class="btn btn-bg ml-2" role="button" href="<?=$router->named('admin:index:index') ?>">
<i class="material-icons" aria-hidden="true">settings</i>
<?=__('Administration') ?>
</a>
<?php endif; ?>
<?php if ($show_admin): ?>
<a class="btn btn-bg ml-2" role="button" href="<?= $router->named('admin:index:index') ?>">
<i class="material-icons" aria-hidden="true">settings</i>
<?= __('Administration') ?>
</a>
<?php endif; ?>
</div>
</div>
<?php if (!empty($notifications)): ?>
<?php foreach($notifications as $notification): ?>
<?php /** @var \App\Notification\Notification $notification */ ?>
<div class="card-body alert-<?=$notification->getType() ?> d-flex" role="alert">
<div class="flex-shrink-0 mt-3 mr-3">
<?php if (\App\Notification\Notification::INFO === $notification->getType()): ?>
<i class="material-icons lg" aria-hidden="true">info</i>
<?php else: ?>
<i class="material-icons lg" aria-hidden="true">warning</i>
<?php endif; ?>
<?php if (!empty($notifications)): ?>
<?php foreach ($notifications as $notification): ?>
<?php /** @var \App\Notification\Notification $notification */ ?>
<div class="card-body alert-<?= $notification->getType() ?> d-flex" role="alert">
<div class="flex-shrink-0 mt-3 mr-3">
<?php if (\App\Notification\Notification::INFO === $notification->getType()): ?>
<i class="material-icons lg" aria-hidden="true">info</i>
<?php else: ?>
<i class="material-icons lg" aria-hidden="true">warning</i>
<?php endif; ?>
</div>
<div class="flex-fill">
<h4><?= $notification->getTitle() ?></h4>
<p class="card-text">
<?= $notification->getBody() ?>
</p>
</div>
</div>
<div class="flex-fill">
<h4><?=$notification->getTitle() ?></h4>
<p class="card-text">
<?=$notification->getBody() ?>
</p>
</div>
</div>
<?php endforeach; ?>
<?php endif; ?>
<?php endforeach; ?>
<?php endif; ?>
</section>
<?php if ($metrics): ?>
<section class="card mb-4" role="region">
<div class="card-header bg-primary-dark">
<h3 class="card-title"><?=__('Listeners Per Station') ?></h3>
</div>
<div class="card-body">
<canvas id="station_chart" style="width: 100%;" aria-label="<?=__('Listeners Per Station') ?>" role="img">
<?=$metrics['station_alt'] ?>
</canvas>
</div>
</section>
<section class="card mb-4" role="region">
<div class="card-header bg-primary-dark">
<h3 class="card-title"><?= __('Listeners Per Station') ?></h3>
</div>
<div class="card-body">
<canvas id="station_chart" style="width: 100%;" aria-label="<?= __('Listeners Per Station') ?>" role="img">
<?= $metrics['station_alt'] ?>
</canvas>
</div>
</section>
<?php endif; ?>
<section class="card" role="region">
<div class="card-header bg-primary-dark">
<h3 class="card-title"><?=__('Station Overview') ?></h3>
<h3 class="card-title"><?= __('Station Overview') ?></h3>
</div>
<?php if ($acl->userAllowed($user, 'administer stations')): ?>
<div class="card-actions">
<a class="btn btn-outline-primary" href="<?=$router->named('admin:stations:add') ?>">
<a class="btn btn-outline-primary" href="<?= $router->named('admin:stations:add') ?>">
<i class="material-icons" aria-hidden="true">add</i>
<?=__('Add Station') ?>
<?= __('Add Station') ?>
</a>
</div>
<?php endif; ?>
@ -114,40 +114,40 @@ $user = $request->getUser();
<col width="15%">
</colgroup>
<thead>
<tr>
<th class="pr-3">&nbsp;</th>
<th class="pl-2"><?=__('Station Name') ?></th>
<th class="text-center"><?=__('Listeners') ?></th>
<th><?=__('Now Playing') ?></th>
<th class="text-right"> </th>
</tr>
<tr>
<th class="pr-3">&nbsp;</th>
<th class="pl-2"><?= __('Station Name') ?></th>
<th class="text-center"><?= __('Listeners') ?></th>
<th><?= __('Now Playing') ?></th>
<th class="text-right"></th>
</tr>
</thead>
<tbody>
<tr class="align-middle" v-bind:id="'station_' + row.station.id" v-for="row in stations" >
<td class="text-center pr-3">
<a class="btn-audio" href="#" v-bind:data-url="row.stream_url" @click.prevent="toggle(row.stream_url)">
<i class="material-icons lg align-middle" aria-hidden="true">play_circle_filled</i>
</a>
</td>
<td class="pl-2">
<big><a v-bind:href="row.public_url" target="_blank">{{ row.station.name }}</a></big>
</td>
<td class="text-center">
<span class="nowplaying-listeners">{{ row.np.listeners.current }}</span>
</td>
<td>
<div v-if="row.np.now_playing.song.title != ''">
<strong><span class="nowplaying-title">{{ row.np.now_playing.song.title }}</span></strong><br>
<span class="nowplaying-artist">{{ row.np.now_playing.song.artist }}</span>
</div>
<div v-else>
<strong><span class="nowplaying-title">{{ row.np.now_playing.song.text }}</span></strong>
</div>
</td>
<td class="text-right">
<a class="btn btn-primary" role="button" v-bind:href="row.manage_url"><?=__('Manage') ?></a>
</td>
</tr>
<tr class="align-middle" v-bind:id="'station_' + row.station.id" v-for="row in stations">
<td class="text-center pr-3">
<a class="btn-audio" href="#" v-bind:data-url="row.stream_url" @click.prevent="toggle(row.stream_url)">
<i class="material-icons lg align-middle" aria-hidden="true">play_circle_filled</i>
</a>
</td>
<td class="pl-2">
<big><a v-bind:href="row.public_url" target="_blank">{{ row.station.name }}</a></big>
</td>
<td class="text-center">
<span class="nowplaying-listeners">{{ row.np.listeners.current }}</span>
</td>
<td>
<div v-if="row.np.now_playing.song.title != ''">
<strong><span class="nowplaying-title">{{ row.np.now_playing.song.title }}</span></strong><br>
<span class="nowplaying-artist">{{ row.np.now_playing.song.artist }}</span>
</div>
<div v-else>
<strong><span class="nowplaying-title">{{ row.np.now_playing.song.text }}</span></strong>
</div>
</td>
<td class="text-right">
<a class="btn btn-primary" role="button" v-bind:href="row.manage_url"><?= __('Manage') ?></a>
</td>
</tr>
</tbody>
</table>
</section>

9
templates/frontend/public/dj.js.phtml
View File

@ -24,9 +24,12 @@ $props = [
?>
$(function () {
const web_dj = Webcaster.default({
const web_dj = new Vue({
el: '#web_dj',
lang: <?=$customization->getVueLocale() ?>,
props: <?=json_encode($props) ?>
render: function (createElement) {
return createElement(Webcaster.default, {
props: <?=json_encode($props) ?>
});
}
});
});

9
templates/frontend/public/player_component.js.phtml
View File

@ -23,9 +23,12 @@ if ($customization->useWebSocketsForNowPlaying()) {
var radio_player;
$(function () {
radio_player = RadioPlayer.default({
radio_player = new Vue({
el: '#station-nowplaying',
lang: <?=$customization->getVueLocale() ?>,
props: <?=json_encode($props) ?>
render: function (createElement) {
return createElement(RadioPlayer.default, {
props: <?=json_encode($props) ?>
});
}
});
});

6
templates/partials/radio_controls.js.phtml
View File

@ -8,9 +8,11 @@ var pause_text = <?=$this->escapeJs(__('Pause')) ?>;
var play_text = <?=$this->escapeJs(__('Play')) ?>;
$(function () {
inline_player = InlinePlayer.default({
inline_player = new Vue({
el: '#radio-player-controls',
lang: <?=$customization->getVueLocale() ?>
render: function (createElement) {
return createElement(InlinePlayer.default);
}
});
$('.btn-audio').each(function () {

7
web/static/assets.json
View File

@ -2,7 +2,7 @@
"dist/app.js": "dist/app-0d97b71b03.js",
"dist/bootgrid.js": "dist/bootgrid-dbc21837bc.js",
"dist/dark.css": "dist/dark-a023bb96c5.css",
"dist/inline_player.js": "dist/inline_player-9d5104c345.js",
"dist/inline_player.js": "dist/inline_player-33cfd78b63.js",
"dist/lib/autosize/autosize.min.js": "dist/lib/autosize/autosize-ad0656589d.min.js",
"dist/lib/bootstrap-notify/bootstrap-notify.min.js": "dist/lib/bootstrap-notify/bootstrap-notify-a02f92a499.min.js",
"dist/lib/bootstrap/bootstrap.bundle.min.js": "dist/lib/bootstrap/bootstrap-a454220fc0.bundle.min.js",
@ -47,7 +47,8 @@
"dist/lib/zxcvbn/zxcvbn.js": "dist/lib/zxcvbn/zxcvbn-9cf6916dc0.js",
"dist/light.css": "dist/light-dcae2d25e2.css",
"dist/material.js": "dist/material-8a0f31e5be.js",
"dist/radio_player.js": "dist/radio_player-3d24479f82.js",
"dist/webcaster.js": "dist/webcaster-196269ad70.js",
"dist/radio_player.js": "dist/radio_player-a9ba97d0bc.js",
"dist/vue_gettext.js": "dist/vue_gettext-aad84385fb.js",
"dist/webcaster.js": "dist/webcaster-ae432aaec7.js",
"dist/zxcvbn.js": "dist/zxcvbn-f4433cd930.js"
}

1
web/static/dist/inline_player-33cfd78b63.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
web/static/dist/inline_player-9d5104c345.js vendored
View File

File diff suppressed because one or more lines are too long

1
web/static/dist/radio_player-3d24479f82.js vendored
View File

File diff suppressed because one or more lines are too long

1
web/static/dist/radio_player-a9ba97d0bc.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
web/static/dist/vue_gettext-aad84385fb.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
web/static/dist/webcaster-196269ad70.js vendored
View File

File diff suppressed because one or more lines are too long

1
web/static/dist/webcaster-ae432aaec7.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

11
web/static/gulpfile.js
View File

@ -225,18 +225,23 @@ gulp.task('concat-js', function () {
})
var vueProjects = {
'vue_gettext': {
'src_file': 'vue/vue_gettext.js',
'filename': 'vue_gettext.js',
'library': 'VueTranslations'
},
'webcaster': {
'src_file': 'vue/webcaster.js',
'src_file': 'vue/webcaster.vue',
'filename': 'webcaster.js',
'library': 'Webcaster'
},
'radio_player': {
'src_file': 'vue/radio_player.js',
'src_file': 'vue/radio_player.vue',
'filename': 'radio_player.js',
'library': 'RadioPlayer'
},
'inline_player': {
'src_file': 'vue/inline_player.js',
'src_file': 'vue/inline_player.vue',
'filename': 'inline_player.js',
'library': 'InlinePlayer'
}

3
web/static/vue/event_bus.js → web/static/vue/inc/event_bus.js
View File

@ -1,3 +1,6 @@
// TODO:
// This file is not used until the full Vue app transition.
import Vue from 'vue'
if (!Vue.prototype.$eventHub) {

17
web/static/vue/inc/translations.js Normal file
View File

@ -0,0 +1,17 @@
// TODO:
// This file is not used until the full Vue app transition.
import Vue from 'vue'
import GetTextPlugin from 'vue-gettext'
import translations from '../../../../resources/locale/translations'
export default function (lang) {
Vue.use(GetTextPlugin, {
defaultLanguage: 'en_US',
translations: translations,
silent: true
})
Vue.config.language = lang
}

13
web/static/vue/inline_player.js
View File

@ -1,13 +0,0 @@
import InlinePlayer from './inline_player.vue'
import Vue from 'vue'
import './event_bus.js'
import './translations.js'
export default function init (options) {
Vue.config.language = options.lang
return new Vue({
el: options.el,
render: (h) => h(InlinePlayer)
})
}

15
web/static/vue/radio_player.js
View File

@ -1,15 +0,0 @@
import RadioPlayer from './radio_player.vue'
import Vue from 'vue'
import './event_bus.js'
import './translations.js'
export default function init (options) {
Vue.config.language = options.lang
return new Vue({
el: options.el,
render: (h) => h(RadioPlayer, {
props: options.props
})
})
}

3
web/static/vue/radio_player.vue
View File

@ -210,7 +210,6 @@
</style>
<script>
import Vue from 'vue'
import axios from 'axios'
import NchanSubscriber from 'nchan'
import store from 'store'
@ -474,7 +473,7 @@
})
}
Vue.prototype.$eventHub.$emit('np_updated', np_new)
this.$eventHub.$emit('np_updated', np_new)
},
iterateTimer () {
let current_time = Math.floor(Date.now() / 1000)

9
web/static/vue/translations.js
View File

@ -1,9 +0,0 @@
import Vue from 'vue'
import GetTextPlugin from 'vue-gettext'
import translations from '../../../resources/locale/translations'
Vue.use(GetTextPlugin, {
defaultLanguage: 'en_US',
translations: translations,
silent: true
})

13
web/static/vue/vue_gettext.js Normal file
View File

@ -0,0 +1,13 @@
import GetTextPlugin from 'vue-gettext'
import translations from '../../../resources/locale/translations'
export default function (lang) {
Vue.use(GetTextPlugin, {
defaultLanguage: 'en_US',
translations: translations,
silent: true
})
Vue.config.language = lang
}

15
web/static/vue/webcaster.js
View File

@ -1,15 +0,0 @@
import Webcaster from './webcaster.vue'
import Vue from 'vue'
import './event_bus.js'
import './translations.js'
export default function init (options) {
Vue.config.language = options.lang
return new Vue({
el: options.el,
render: (h) => h(Webcaster, {
props: options.props
})
})
}