Internalize codemirror, slight restructure on new Vue components.

config/assets.php

@@ -252,31 +252,6 @@ return [
         ],
     ],
 
-    'codemirror' => [
-        'order' => 10,
-        'files' => [
-            'js' => [
-                [
-                    'src' => 'dist/lib/codemirror/codemirror.js',
-                    'defer' => true,
-                ],
-                [
-                    'src' => 'dist/lib/codemirror/css.js',
-                    'defer' => true,
-                ],
-                [
-                    'src' => 'dist/lib/codemirror/javascript.js',
-                    'defer' => true,
-                ],
-            ],
-            'css' => [
-                [
-                    'href' => 'dist/lib/codemirror/codemirror.css',
-                ],
-            ],
-        ],
-    ],
-
     'clipboard' => [
         'order' => 10,
         'files' => [
@@ -347,12 +322,6 @@ return [
         // Auto-managed by Assets
     ],
 
-    'Vue_AdminBranding' => [
-        'order' => 10,
-        'require' => ['codemirror'],
-        // Auto-managed by Assets
-    ],
-
     'Vue_PublicSchedule' => [
         'order' => 10,
         'require' => ['moment_timezone'],

frontend/npm-shrinkwrap.json

@@ -46,6 +46,7 @@
                 "leaflet": "^1.7.1",
                 "leaflet.fullscreen": "^1.6.0",
                 "lodash": "^4.17.21",
+                "luxon": "^2.0.2",
                 "material-icons": "^0.5.5",
                 "moment": "^2.29.1",
                 "moment-timezone": "^0.5.33",
@@ -6545,6 +6546,14 @@
                 "es5-ext": "~0.10.2"
             }
         },
+        "node_modules/luxon": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/luxon/-/luxon-2.0.2.tgz",
+            "integrity": "sha512-ZRioYLCgRHrtTORaZX1mx+jtxKtKuI5ZDvHNAmqpUzGqSrR+tL4FVLn/CUGMA3h0+AKD1MAxGI5GnCqR5txNqg==",
+            "engines": {
+                "node": "*"
+            }
+        },
         "node_modules/magic-string": {
             "version": "0.25.7",
             "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
@@ -14844,6 +14853,11 @@
                 "es5-ext": "~0.10.2"
             }
         },
+        "luxon": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/luxon/-/luxon-2.0.2.tgz",
+            "integrity": "sha512-ZRioYLCgRHrtTORaZX1mx+jtxKtKuI5ZDvHNAmqpUzGqSrR+tL4FVLn/CUGMA3h0+AKD1MAxGI5GnCqR5txNqg=="
+        },
         "magic-string": {
             "version": "0.25.7",
             "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",

frontend/package.json

@@ -49,6 +49,7 @@
         "leaflet": "^1.7.1",
         "leaflet.fullscreen": "^1.6.0",
         "lodash": "^4.17.21",
+        "luxon": "^2.0.2",
         "material-icons": "^0.5.5",
         "moment": "^2.29.1",
         "moment-timezone": "^0.5.33",

frontend/vue/base.js

@@ -7,7 +7,7 @@ import VueAxios
 import GetTextPlugin
   from 'vue-gettext';
 import translations
-  from '../../../resources/locale/translations';
+  from '../../resources/locale/translations.json';
 
 document.addEventListener('DOMContentLoaded', function () {
   // Configure localization

frontend/vue/components/Common/AudioPlayer.vue

@@ -7,7 +7,7 @@
 <script>
 import store from 'store';
 import getLogarithmicVolume from '~/functions/getLogarithmicVolume.js';
-import vueStore from '~/init/store.js';
+import vueStore from '~/store.js';
 
 export default {
     props: {

frontend/vue/components/Common/CodemirrorTextarea.vue

@@ -3,6 +3,11 @@
 </template>
 
 <script>
+import Codemirror from 'codemirror';
+import 'codemirror/lib/codemirror.css';
+import 'codemirror/mode/css/css.js';
+import 'codemirror/mode/javascript/javascript.js';
+
 export default {
     name: 'CodemirrorTextarea',
     props: {
@@ -26,7 +31,7 @@ export default {
         }
     },
     mounted() {
-        this.codemirror = CodeMirror.fromTextArea(this.$refs.textarea, {
+        this.codemirror = Codemirror.fromTextArea(this.$refs.textarea, {
             lineNumbers: true,
             theme: 'default',
             mode: this.mode

frontend/vue/components/Common/PlayButton.vue

@@ -9,7 +9,7 @@ import Icon from "./Icon";
 
 import getUrlWithoutQuery from "~/functions/getUrlWithoutQuery";
 
-import store from '~/init/store.js';
+import store from '~/store.js';
 
 export default {
     name: 'PlayButton',

frontend/vue/components/InlinePlayer.vue

@@ -68,7 +68,7 @@
 import AudioPlayer from '~/components/Common/AudioPlayer';
 import formatTime from '~/functions/formatTime.js';
 import Icon from '~/components/Common/Icon';
-import store from '~/init/store.js';
+import store from '~/store.js';
 
 export default {
     components: {Icon, AudioPlayer},

frontend/vue/components/Public/FullPlayer/SongHistory.vue

@@ -78,6 +78,8 @@
 </style>
 
 <script>
+import moment from 'moment-timezone';
+
 export default {
     props: {
         history: Array,

frontend/vue/pages/Admin/AuditLog.js

@@ -1,5 +1,5 @@
-import '~/init/base.js';
-import '~/init/bootstrapVue.js';
+import '~/base.js';
+import '~/vendor/bootstrapVue.js';
 
 import Vue
   from 'vue';

frontend/vue/pages/Admin/Branding.js

@@ -1,6 +1,6 @@
-import '~/init/base.js';
-import '~/init/bootstrapVue.js';
-import '~/init/fancybox.js';
+import '~/base.js';
+import '~/vendor/bootstrapVue.js';
+import '~/vendor/fancybox.js';
 
 import Vue
   from 'vue';

frontend/vue/pages/Admin/StorageLocations.js

@@ -1,5 +1,5 @@
-import '~/init/base.js';
-import '~/init/bootstrapVue.js';
+import '~/base.js';
+import '~/vendor/bootstrapVue.js';
 
 import Vue
   from 'vue';

frontend/vue/pages/Dashboard.js

@@ -1,10 +1,11 @@
-import '~/init/base.js';
-import '~/init/bootstrapVue.js';
-import '~/init/inlinePlayer.js';
+import '~/base.js';
+import '~/vendor/bootstrapVue.js';
 
 import Vue
   from 'vue';
 
+import '~/pages/InlinePlayer.js';
+
 import Dashboard
   from '~/components/Dashboard.vue';
 

frontend/vue/pages/InlinePlayer.js

@@ -2,7 +2,7 @@ import Vue
   from 'vue';
 
 import store
-  from '~/init/store';
+  from '~/store';
 
 import InlinePlayer
   from '~/components/InlinePlayer.vue';

frontend/vue/pages/Public/FullPlayer.js

@@ -1,7 +1,8 @@
-import '~/init/base.js';
-import '~/init/bootstrapVue.js';
-import '~/init/store.js';
-import '~/init/fancybox.js';
+import '~/base.js';
+import '~/vendor/bootstrapVue.js';
+import '~/store.js';
+import '~/vendor/fancybox.js';
+import '~/vendor/moment.js';
 
 import Vue
   from 'vue';

frontend/vue/pages/Public/History.js

@@ -1,4 +1,5 @@
-import '~/init/base.js';
+import '~/base.js';
+import '~/vendor/moment.js';
 
 import Vue
   from 'vue';

frontend/vue/pages/Public/OnDemand.js

@@ -1,5 +1,5 @@
-import '~/init/base.js';
-import '~/init/bootstrapVue.js';
+import '~/base.js';
+import '~/vendor/bootstrapVue.js';
 
 import Vue
   from 'vue';

frontend/vue/pages/Public/Player.js

@@ -1,5 +1,5 @@
-import '~/init/base.js';
-import '~/init/store.js';
+import '~/base.js';
+import '~/store.js';
 
 import Vue
   from 'vue';

frontend/vue/pages/Public/Requests.js

@@ -1,5 +1,5 @@
-import '~/init/base.js';
-import '~/init/bootstrapVue.js';
+import '~/base.js';
+import '~/vendor/bootstrapVue.js';
 
 import Vue
   from 'vue';

frontend/vue/pages/Public/Schedule.js

@@ -1,5 +1,5 @@
-import '~/init/base.js';
-import '~/init/bootstrapVue.js';
+import '~/base.js';
+import '~/vendor/bootstrapVue.js';
 
 import Vue
   from 'vue';

frontend/vue/pages/Public/WebDJ.js

@@ -1,5 +1,5 @@
-import '~/init/base.js';
-import '~/init/bootstrapVue.js';
+import '~/base.js';
+import '~/vendor/bootstrapVue.js';
 
 import Vue
   from 'vue';

frontend/vue/pages/Stations/Media.js

@@ -1,11 +1,12 @@
-import '~/init/base.js';
-import '~/init/bootstrapVue.js';
-import '~/init/inlinePlayer.js';
-import '~/init/fancybox.js';
+import '~/base.js';
+import '~/vendor/bootstrapVue.js';
+import '~/vendor/fancybox.js';
 
 import Vue
   from 'vue';
 
+import '~/pages/InlinePlayer.js';
+
 import Media
   from '~/components/Stations/Media.vue';
 

frontend/vue/pages/Stations/Mounts.js

@@ -1,5 +1,5 @@
-import '~/init/base.js';
-import '~/init/bootstrapVue.js';
+import '~/base.js';
+import '~/vendor/bootstrapVue.js';
 
 import Vue
   from 'vue';

frontend/vue/pages/Stations/Playlists.js

@@ -1,5 +1,5 @@
-import '~/init/base.js';
-import '~/init/bootstrapVue.js';
+import '~/base.js';
+import '~/vendor/bootstrapVue.js';
 
 import Vue
   from 'vue';

frontend/vue/pages/Stations/Podcasts.js

@@ -1,6 +1,6 @@
-import '~/init/base.js';
-import '~/init/bootstrapVue.js';
-import '~/init/fancybox.js';
+import '~/base.js';
+import '~/vendor/bootstrapVue.js';
+import '~/vendor/fancybox.js';
 
 import Vue
   from 'vue';

frontend/vue/pages/Stations/Profile.js

@@ -1,11 +1,12 @@
-import '~/init/base.js';
-import '~/init/bootstrapVue.js';
-import '~/init/inlinePlayer.js';
-import '~/init/fancybox.js';
+import '~/base.js';
+import '~/vendor/bootstrapVue.js';
+import '~/vendor/fancybox.js';
 
 import Vue
   from 'vue';
 
+import '~/pages/InlinePlayer.js';
+
 import Profile
   from '~/components/Stations/Profile.vue';
 

frontend/vue/pages/Stations/Queue.js

@@ -1,5 +1,5 @@
-import '~/init/base.js';
-import '~/init/bootstrapVue.js';
+import '~/base.js';
+import '~/vendor/bootstrapVue.js';
 
 import Vue
   from 'vue';

frontend/vue/pages/Stations/Remotes.js

@@ -1,5 +1,5 @@
-import '~/init/base.js';
-import '~/init/bootstrapVue.js';
+import '~/base.js';
+import '~/vendor/bootstrapVue.js';
 
 import Vue
   from 'vue';

frontend/vue/pages/Stations/Reports/Listeners.js

@@ -1,5 +1,5 @@
-import '~/init/base.js';
-import '~/init/bootstrapVue.js';
+import '~/base.js';
+import '~/vendor/bootstrapVue.js';
 
 import Vue
   from 'vue';

frontend/vue/pages/Stations/Reports/Overview.js

@@ -1,5 +1,5 @@
-import '~/init/base.js';
-import '~/init/bootstrapVue.js';
+import '~/base.js';
+import '~/vendor/bootstrapVue.js';
 
 import Vue
   from 'vue';

frontend/vue/pages/Stations/Reports/Performance.js

@@ -1,5 +1,5 @@
-import '~/init/base.js';
-import '~/init/bootstrapVue.js';
+import '~/base.js';
+import '~/vendor/bootstrapVue.js';
 
 import Vue
   from 'vue';

frontend/vue/pages/Stations/Reports/Requests.js

@@ -1,5 +1,5 @@
-import '~/init/base.js';
-import '~/init/bootstrapVue.js';
+import '~/base.js';
+import '~/vendor/bootstrapVue.js';
 
 import Vue
   from 'vue';

frontend/vue/pages/Stations/Reports/Timeline.js

@@ -1,5 +1,5 @@
-import '~/init/base.js';
-import '~/init/bootstrapVue.js';
+import '~/base.js';
+import '~/vendor/bootstrapVue.js';
 
 import Vue
   from 'vue';

frontend/vue/pages/Stations/Streamers.js

@@ -1,6 +1,6 @@
-import '~/init/base.js';
-import '~/init/bootstrapVue.js';
-import '~/init/store.js';
+import '~/base.js';
+import '~/vendor/bootstrapVue.js';
+import '~/store.js';
 
 import Vue
   from 'vue';

frontend/vue/vendor/luxon.js

@@ -0,0 +1,10 @@
+import {
+  DateTime,
+  Settings
+} from 'luxon';
+
+document.addEventListener('DOMContentLoaded', function () {
+  Settings.defaultLocale = App.locale_with_dashes;
+});
+
+export default DateTime;

frontend/vue/vendor/moment.js

@@ -0,0 +1,6 @@
+import moment
+  from 'moment-timezone';
+
+document.addEventListener('DOMContentLoaded', function () {
+  moment.locale(App.locale_with_dashes);
+});

frontend/webpack.config.js

@@ -49,6 +49,12 @@ module.exports = {
   optimization: {
     splitChunks: {
       cacheGroups: {
+        translations: {
+          test: /translations\.json$/,
+          chunks: 'all',
+          enforce: true,
+          name: 'translations'
+        },
         vendor: {
           test: /[\\/]node_modules[\\/]/,
           chunks: 'all',