feature: add server part to store general plugin settings #1 , update…

… client

.gitignore

@@ -1,4 +1,5 @@
 /dist
 /node_modules
 /mattermost-mp4file-plugin
+/mattermost-videofile-plugin
 *.tar.gz

Makefile

@@ -0,0 +1,33 @@
+all:
+	make prepare
+	make linux
+	make macos
+	make windows
+	make webapp
+	make pack
+
+prepare:
+	rm -f mattermost-videofile-plugin.tar.gz
+	rm -rf mattermost-videofile-plugin
+	mkdir -p mattermost-videofile-plugin
+	mkdir -p mattermost-videofile-plugin/client
+	mkdir -p mattermost-videofile-plugin/server
+
+linux:
+	CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build -o mattermost-videofile-plugin/server/plugin-linux-amd64 server/plugin.go
+
+macos:
+	CGO_ENABLED=0 GOOS=darwin GOARCH=amd64 go build -o mattermost-videofile-plugin/server/plugin-darwin-amd64 server/plugin.go
+
+windows:
+	CGO_ENABLED=0 GOOS=windows GOARCH=amd64 go build -o mattermost-videofile-plugin/server/plugin-windows-amd64 server/plugin.go
+
+webapp:
+	mkdir -p dist
+	npm install
+	./node_modules/.bin/webpack --mode=production
+
+pack:
+	cp -r dist/main.js mattermost-videofile-plugin/client
+	cp plugin.json mattermost-videofile-plugin/
+	tar -czvf mattermost-videofile-plugin.tar.gz mattermost-videofile-plugin

README.md

@@ -1,4 +1,4 @@
-## mattermost-plugin-mp4file
+## mattermost-plugin-videofile
 Mattermost web app plugin to have a in chat native HTML5 video player for .mp4 file
 
 ### Build:

client/index.jsx

@@ -0,0 +1,244 @@
+import React from 'react';
+import axios from 'axios';
+import { renderToStaticMarkup } from 'react-dom/server';
+
+class PluginSettings {
+    constructor(data) {
+        /**
+         * @type {number}
+         */
+        this.maxHeight = data.maxHeight == null ? 350 : data.maxHeight;
+        /**
+         * @type {number}
+         */
+        this.renderTimeout = data.renderTimeout == null ? 20 : data.renderTimeout;
+        /**
+         * @type {boolean}
+         */
+        this.mp4 = data.mp4 == null ? true : data.mp4;
+        /**
+         * @type {boolean}
+         */
+        this.webm = data.webm == null ? true : data.webm;
+        /**
+         * @type {boolean}
+         */
+        this.mov = data.mov == null ? true : data.mov;
+        /**
+         * @type {boolean}
+         */
+        this.avi = data.avi == null ? true : data.avi;
+        /**
+         * @type {boolean}
+         */
+        this.wmv = data.wmv == null ? true : data.wmv;
+        /**
+         * @type {boolean}
+         */
+        this.ogv = data.ogv == null ? true : data.ogv;
+    }
+}
+
+
+class PostMessageAttachmentComponent extends React.Component {
+    static plugin;
+    /**
+     * @type {PluginSettings}
+     */
+    static settings;
+
+    constructor(props) {
+        super(props);
+        this.postId = props.postId;
+        this.msg = null;
+        this.fileType = null;
+        this.fileUrl = null;
+        this.customId = null;
+        this.postMessageId = this.postId + '_message';
+        /**
+         * @type {PluginSettings}
+         */
+        this.settings = PostMessageAttachmentComponent.settings;
+    }
+
+    render() {
+        setTimeout(() => {
+            this.afterRender();
+        }, this.settings.renderTimeout);
+        return (null);
+    }
+
+    /**
+     * @returns {boolean}
+     */
+    isFilePostMessage() {
+        if (this.msg.getElementsByClassName('post-image__details')[0] == null) {
+            return false;
+        }
+        return true;
+    }
+
+    /**
+     * @returns {string}
+     */
+    getFileType() {
+        return this.msg.getElementsByClassName('post-image__type')[0]
+            .innerHTML.toLowerCase().trim();
+    }
+
+    /**
+     * @returns {boolean}
+     */
+    isRendered() {
+        const parent = this.msg.parentElement;
+        this.customId = this.postId + `_custom_${this.fileType}_video_container`;
+        if (parent.children[1] != null) {
+            if (parent.children[1].id == customId) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    /**
+     * @returns {string}
+     */
+    getFileUrl() {
+        const a = this.msg.getElementsByTagName('a')[1];
+        return a.href.replace('?download=1', '');
+    }
+
+    /**
+     * @returns {HTMLDivElement}
+     */
+    getHtmlVideoElement() {
+        let maxHeight = this.settings.maxHeight;
+        try {
+            if (PostMessageAttachmentComponent.plugin.props.maxHeight != null && maxHeight == null) {
+                maxHeight = PostMessageAttachmentComponent.plugin.props.maxHeight;
+            }
+        } catch {
+        }
+        const css = `
+                    .videofile-mh {
+                        max-height: ${maxHeight}px;
+                    }`;
+        const node = document.createElement('div');
+        node.setAttribute('id', this.customId);
+
+        const fileType = this.getVideoUrlType(this.fileUrl);
+
+        const html =
+            <>
+                <style>{css}</style>
+                <video controls="true" class="videofile-mh">
+                    <source src={this.fileUrl} type={fileType} />
+                </video>
+            </>;
+        node.innerHTML = renderToStaticMarkup(html);
+        return node;
+    }
+
+    /**
+    * 
+    * @param {string} url 
+    * @returns {string}
+    */
+    getVideoUrlType(url) {
+        try {
+            const split = url.split('.');
+            switch (split[split.length - 1]) {
+                case 'webm':
+                    return 'video/mp4';
+
+                case 'mov':
+                    return 'video/quicktime';
+
+                case 'avi':
+                    return 'video/x-msvideo';
+
+                case 'wmv':
+                    return 'video/x-ms-wmv';
+
+                case 'ogv':
+                    return 'video/ogv';
+
+                case 'mp4':
+                default:
+                    return 'video/mp4';
+            }
+        } catch {
+            return 'video/mp4';
+        }
+    }
+
+
+    /**
+     * @returns void
+     */
+    afterRender() {
+        /**
+         * @type HTMLDivElement
+         */
+        this.msg = document.getElementById(this.postMessageId);
+        try {
+            if (!this.isFilePostMessage()) {
+                return;
+            }
+            this.fileType = this.getFileType();
+            if (this.fileType == 'mp4' && !this.settings.mp4
+                || this.fileType == 'webm' && !this.settings.webm
+                || this.fileType == 'mov' && !this.settings.mov
+                || this.fileType == 'avi' && !this.settings.avi
+                || this.fileType == 'wmv' && !this.settings.wmv
+                || this.fileType == 'ogv' && !this.settings.ogv
+            ) {
+                return;
+            }
+            if (this.isRendered()) {
+                return;
+            }
+            this.fileUrl = this.getFileUrl();
+            this.msg.parentElement.append(this.getHtmlVideoElement());
+        } catch (err) {
+            console.log('err', err);
+        }
+    }
+
+}
+
+class VideoFilePlugin {
+    static apiUrl = '/plugins/videofile';
+
+    initialize(registry, store) {
+        const plugin = store.getState().plugins.plugins.videofile;
+        PostMessageAttachmentComponent.plugin = plugin;
+        axios.get(`${VideoFilePlugin.apiUrl}/settings`)
+            .then(res => {
+                /**
+                 * @type {PluginSettings}
+                 */
+                const settings = new PluginSettings(res.data);
+                PostMessageAttachmentComponent.settings = settings;
+                registry.registerPostMessageAttachmentComponent(
+                    PostMessageAttachmentComponent
+                );
+            })
+            .catch(err => {
+                /**
+                 * @type {PluginSettings}
+                 */
+                const settings = new PluginSettings();
+                PostMessageAttachmentComponent.settings = settings;
+                registry.registerPostMessageAttachmentComponent(
+                    PostMessageAttachmentComponent
+                );
+            });
+    }
+
+    uninitialize() {
+        // No clean up required.
+    }
+}
+
+window.registerPlugin('videofile', new VideoFilePlugin());

go.mod

@@ -0,0 +1,63 @@
+module mattermost-plugin-videofile
+
+go 1.20
+
+require (
+	github.com/mattermost/mattermost-server/v6 v6.2.1
+)
+
+require (
+	github.com/blang/semver v3.5.1+incompatible // indirect
+	github.com/davecgh/go-spew v1.1.1 // indirect
+	github.com/dustin/go-humanize v1.0.0 // indirect
+	github.com/dyatlov/go-opengraph v0.0.0-20210112100619-dae8665a5b09 // indirect
+	github.com/fatih/color v1.13.0 // indirect
+	github.com/francoispqt/gojay v1.2.13 // indirect
+	github.com/go-asn1-ber/asn1-ber v1.5.3 // indirect
+	github.com/go-sql-driver/mysql v1.6.0 // indirect
+	github.com/golang/protobuf v1.5.2 // indirect
+	github.com/google/uuid v1.3.0 // indirect
+	github.com/gorilla/websocket v1.4.2 // indirect
+	github.com/hashicorp/go-hclog v1.0.0 // indirect
+	github.com/hashicorp/go-plugin v1.4.3 // indirect
+	github.com/hashicorp/yamux v0.0.0-20210826001029-26ff87cf9493 // indirect
+	github.com/json-iterator/go v1.1.12 // indirect
+	github.com/klauspost/cpuid/v2 v2.0.9 // indirect
+	github.com/lib/pq v1.10.3 // indirect
+	github.com/mattermost/go-i18n v1.11.1-0.20211013152124-5c415071e404 // indirect
+	github.com/mattermost/ldap v0.0.0-20201202150706-ee0e6284187d // indirect
+	github.com/mattermost/logr/v2 v2.0.15 // indirect
+	github.com/mattn/go-colorable v0.1.11 // indirect
+	github.com/mattn/go-isatty v0.0.14 // indirect
+	github.com/minio/md5-simd v1.1.2 // indirect
+	github.com/minio/minio-go/v7 v7.0.14 // indirect
+	github.com/minio/sha256-simd v1.0.0 // indirect
+	github.com/mitchellh/go-homedir v1.1.0 // indirect
+	github.com/mitchellh/go-testing-interface v1.14.1 // indirect
+	github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd // indirect
+	github.com/modern-go/reflect2 v1.0.2 // indirect
+	github.com/oklog/run v1.1.0 // indirect
+	github.com/pborman/uuid v1.2.1 // indirect
+	github.com/pelletier/go-toml v1.9.4 // indirect
+	github.com/philhofer/fwd v1.1.1 // indirect
+	github.com/pkg/errors v0.9.1 // indirect
+	github.com/pmezard/go-difflib v1.0.0 // indirect
+	github.com/rs/xid v1.3.0 // indirect
+	github.com/sirupsen/logrus v1.8.1 // indirect
+	github.com/stretchr/testify v1.7.0 // indirect
+	github.com/tinylib/msgp v1.1.6 // indirect
+	github.com/wiggin77/merror v1.0.3 // indirect
+	github.com/wiggin77/srslog v1.0.1 // indirect
+	github.com/yuin/goldmark v1.4.1 // indirect
+	golang.org/x/crypto v0.0.0-20210921155107-089bfa567519 // indirect
+	golang.org/x/net v0.0.0-20211006190231-62292e806868 // indirect
+	golang.org/x/sys v0.0.0-20211006225509-1a26e0398eed // indirect
+	golang.org/x/text v0.3.7 // indirect
+	google.golang.org/genproto v0.0.0-20211005153810-c76a74d43a8e // indirect
+	google.golang.org/grpc v1.41.0 // indirect
+	google.golang.org/protobuf v1.27.1 // indirect
+	gopkg.in/ini.v1 v1.63.2 // indirect
+	gopkg.in/natefinch/lumberjack.v2 v2.0.0 // indirect
+	gopkg.in/yaml.v2 v2.4.0 // indirect
+	gopkg.in/yaml.v3 v3.0.0-20210107192922-496545a6307b // indirect
+)