Use SiteURL to fix errors with subpath installations

plugin.json

@@ -4,7 +4,7 @@
     "description": "Mattermost plugin to enable voice messaging.",
     "homepage_url": "https://github.com/streamer45/mattermost-plugin-voice",
     "support_url": "https://github.com/streamer45/mattermost-plugin-voice/issues",
-    "version": "0.2.1",
+    "version": "0.2.2",
     "min_server_version": "5.12.0",
     "server": {
         "executables": {

server/manifest.go

@@ -17,7 +17,7 @@ const manifestStr = `
   "description": "Mattermost plugin to enable voice messaging.",
   "homepage_url": "https://github.com/streamer45/mattermost-plugin-voice",
   "support_url": "https://github.com/streamer45/mattermost-plugin-voice/issues",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "min_server_version": "5.12.0",
   "server": {
     "executables": {

webapp/package.json

@@ -1,6 +1,6 @@
 {
   "name": "voice",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Mattermost plugin to enable voice messaging.",
   "main": "src/index.js",
   "scripts": {

webapp/src/actions.js

@@ -1,4 +1,3 @@
-import Client from './client';
 import {
     OPEN_RECORDING_MODAL,
     CLOSE_RECORDING_MODAL,
@@ -8,6 +7,8 @@ import {
     UPDATE_RECORDING,
 } from './action_types';
 
+let Client = null;
+
 const openRecordingModal = () => (dispatch) => {
     dispatch({
         type: OPEN_RECORDING_MODAL,
@@ -40,15 +41,20 @@ export const sendRecording = (channelId, rootId) => (dispatch) => {
     closeRecordingModal()(dispatch);
 };
 
-export const recordVoiceMessage = (channelId, rootId) => (dispatch) => {
+export const recordVoiceMessage = (channelId, rootId, client) => (dispatch) => {
     // console.log('recordVoiceMessage');
     openRecordingModal()(dispatch);
-    Client.startRecording(channelId, rootId).then(() => {
+
+    if (client) {
+        Client = client;
+    }
+
+    client.startRecording(channelId, rootId).then(() => {
         dispatch({
             type: START_RECORDING,
         });
     });
-    Client.on('update', (duration) => {
+    client.on('update', (duration) => {
         // console.log(duration);
         dispatch({
             type: UPDATE_RECORDING,

webapp/src/client/client.js

@@ -6,13 +6,13 @@ import {id as pluginId} from '../manifest';
 import Recorder from './recorder.js';
 
 export default class Client {
-    constructor() {
+    constructor(siteURL) {
         this._onUpdate = null;
         this.timerID = null;
         this.recorder = new Recorder({
-            workerURL: `/plugins/${pluginId}/public/recorder.worker.js`,
+            workerURL: `${siteURL}/plugins/${pluginId}/public/recorder.worker.js`,
         });
-        request.get(`/plugins/${pluginId}/config`).accept('application/json').then((res) => {
+        request.get(`${siteURL}/plugins/${pluginId}/config`).accept('application/json').then((res) => {
             this.recorder.init({
                 maxDuration: parseInt(res.body.VoiceMaxDuration, 10),
                 bitRate: parseInt(res.body.VoiceAudioBitrate, 10),

webapp/src/client/index.js

@@ -1,5 +1,2 @@
 import ClientClass from './client.js';
-
-const Client = new ClientClass();
-
-export default Client;
+export default ClientClass;

webapp/src/components/post_type/index.jsx

@@ -0,0 +1,17 @@
+import {getConfig} from 'mattermost-redux/selectors/entities/general';
+
+import PostType from './post_type';
+
+const connect = window.ReactRedux.connect;
+const bindActionCreators = window.Redux.bindActionCreators;
+
+const mapStateToProps = (state) => {
+    return {
+        siteURL: getConfig(state).SiteURL,
+    };
+};
+
+const mapDispatchToProps = (dispatch) => bindActionCreators({
+}, dispatch);
+
+export default connect(mapStateToProps, mapDispatchToProps)(PostType);

webapp/src/components/post_type.jsx → webapp/src/components/post_type/post_type.jsx

@@ -1,7 +1,7 @@
 import {css} from '@emotion/core';
 import {changeOpacity} from 'mattermost-redux/utils/theme_utils';
 
-import {id as pluginId} from '../manifest';
+import {id as pluginId} from '../../manifest';
 import './post_type.css';
 
 const React = window.React;
@@ -21,6 +21,7 @@ export default class PostType extends React.PureComponent {
   static propTypes = {
       post: PropTypes.object.isRequired,
       theme: PropTypes.object.isRequired,
+      siteURL: PropTypes.string.isRequired,
   }
 
   constructor(props) {
@@ -200,7 +201,7 @@ export default class PostType extends React.PureComponent {
                   preload='none'
               >
                   <source
-                      src={`/plugins/${pluginId}/recordings/${post.id}`}
+                      src={`${this.props.siteURL}/plugins/${pluginId}/recordings/${post.id}`}
                       type='audio/mpeg'
                   />
               </audio>

webapp/src/manifest.js

@@ -7,7 +7,7 @@ const manifest = JSON.parse(`
     "description": "Mattermost plugin to enable voice messaging.",
     "homepage_url": "https://github.com/streamer45/mattermost-plugin-voice",
     "support_url": "https://github.com/streamer45/mattermost-plugin-voice/issues",
-    "version": "0.2.1",
+    "version": "0.2.2",
     "min_server_version": "5.12.0",
     "server": {
         "executables": {

webapp/src/plugin.js

@@ -1,17 +1,25 @@
 import {FormattedMessage} from 'react-intl';
 
+import {getConfig} from 'mattermost-redux/selectors/entities/general';
+
 import PostType from './components/post_type';
 import Root from './components/root';
 import reducer from './reducer';
 import {recordVoiceMessage} from './actions';
 
+import Client from './client';
+
 export default class VoicePlugin {
     initialize(registry, store) {
+        const config = getConfig(store.getState());
+        const siteURL = config ? config.SiteURL : '';
+        const client = new Client(siteURL);
+
         registry.registerRootComponent(Root);
         registry.registerFileUploadMethod(
             <i className='icon fa fa-microphone'/>,
             () => {
-                recordVoiceMessage()(store.dispatch, store.getState);
+                recordVoiceMessage('', '', client)(store.dispatch, store.getState);
             },
             <FormattedMessage
                 id='plugin.upload'
@@ -22,7 +30,7 @@ export default class VoicePlugin {
         registry.registerReducer(reducer);
         registry.registerSlashCommandWillBePostedHook((message, args) => {
             if (message.trim() === '/voice') {
-                recordVoiceMessage(args.channel_id, args.root_id)(store.dispatch, store.getState);
+                recordVoiceMessage(args.channel_id, args.root_id, client)(store.dispatch, store.getState);
                 return {};
             }
             return {message, args};