From b8a825b8eab5ba5deb42f43f75c61cf73eb83a2c Mon Sep 17 00:00:00 2001
From: Buster Neece <buster@busterneece.com>
Date: Sat, 10 Dec 2022 12:06:45 -0600
Subject: [PATCH] Fix play button on public pages.

---
 frontend/vue/base.js               | 42 ++++++++++++++++--------------
 frontend/vue/pages/InlinePlayer.js |  5 +---
 frontend/vue/vendor/pinia.js       |  7 +++++
 3 files changed, 30 insertions(+), 24 deletions(-)
 create mode 100644 frontend/vue/vendor/pinia.js

diff --git a/frontend/vue/base.js b/frontend/vue/base.js
index 3c66e010d..91d0db26f 100644
--- a/frontend/vue/base.js
+++ b/frontend/vue/base.js
@@ -3,6 +3,7 @@ import axios from 'axios';
 import VueAxios from 'vue-axios';
 import GetTextPlugin from 'vue-gettext';
 import translations from '../../translations/translations.json';
+import pinia from './vendor/pinia';
 
 document.addEventListener('DOMContentLoaded', function () {
     // Configure localization
@@ -29,28 +30,29 @@ document.addEventListener('DOMContentLoaded', function () {
 export default function (component) {
   return function (el, props) {
     return new Vue({
-      el: el,
-      created () {
-        let handleAxiosError = (error) => {
-          let notifyMessage = this.$gettext('An error occurred and your request could not be completed.');
-          if (error.response) {
-            // Request made and server responded
-            notifyMessage = error.response.data.message;
-            console.error(notifyMessage);
-          } else if (error.request) {
-            // The request was made but no response was received
-            console.error(error.request);
-          } else {
-            // Something happened in setting up the request that triggered an Error
-            console.error('Error', error.message);
-          }
+        el: el,
+        pinia,
+        created() {
+            let handleAxiosError = (error) => {
+                let notifyMessage = this.$gettext('An error occurred and your request could not be completed.');
+                if (error.response) {
+                    // Request made and server responded
+                    notifyMessage = error.response.data.message;
+                    console.error(notifyMessage);
+                } else if (error.request) {
+                    // The request was made but no response was received
+                    console.error(error.request);
+                } else {
+                    // Something happened in setting up the request that triggered an Error
+                    console.error('Error', error.message);
+                }
 
-          if (typeof this.$notifyError === 'function') {
-            this.$notifyError(notifyMessage);
-          }
-        };
+                if (typeof this.$notifyError === 'function') {
+                    this.$notifyError(notifyMessage);
+                }
+            };
 
-        axios.interceptors.request.use((config) => {
+            axios.interceptors.request.use((config) => {
           return config;
         }, (error) => {
           handleAxiosError(error);
diff --git a/frontend/vue/pages/InlinePlayer.js b/frontend/vue/pages/InlinePlayer.js
index c7b0c466d..0c82ee6eb 100644
--- a/frontend/vue/pages/InlinePlayer.js
+++ b/frontend/vue/pages/InlinePlayer.js
@@ -1,9 +1,6 @@
 import Vue from 'vue';
 import InlinePlayer from '~/components/InlinePlayer.vue';
-import {createPinia, PiniaVuePlugin} from 'pinia';
-
-Vue.use(PiniaVuePlugin);
-const pinia = createPinia();
+import pinia from '../vendor/pinia';
 
 document.addEventListener('DOMContentLoaded', function () {
     let inlinePlayer = new Vue({
diff --git a/frontend/vue/vendor/pinia.js b/frontend/vue/vendor/pinia.js
new file mode 100644
index 000000000..087e9707c
--- /dev/null
+++ b/frontend/vue/vendor/pinia.js
@@ -0,0 +1,7 @@
+import Vue from 'vue';
+import {createPinia, PiniaVuePlugin} from 'pinia';
+
+Vue.use(PiniaVuePlugin);
+const pinia = createPinia();
+
+export default pinia;