inital commit

.gitignore

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

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Philip Mayer ([email protected])
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,8 @@
+## mattermost-plugin-mp4file
+Mattermost web app plugin to have a in chat native HTML5 video player for .mp4 file
+
+### Build:
+Run `npm run build`
+
+### License
+MIT

build.sh

@@ -0,0 +1,9 @@
+mkdir -p dist
+npm install
+./node_modules/.bin/webpack --mode=production
+rm -f mattermost-mp4file-plugin.tar.gz
+rm -rf mattermost-mp4file-plugin
+mkdir -p mattermost-mp4file-plugin
+cp -r dist/main.js mattermost-mp4file-plugin/
+cp plugin.json mattermost-mp4file-plugin/
+tar -czvf mattermost-mp4file-plugin.tar.gz mattermost-mp4file-plugin

package.json

@@ -0,0 +1,23 @@
+{
+    "name": "mattermost-mp4file",
+    "version": "1.0.0",
+    "description": "",
+    "main": "webpack.config.js",
+    "scripts": {
+        "build": "./build.sh"
+    },
+    "author": "",
+    "license": "MIT",
+    "devDependencies": {
+        "@babel/core": "^7.20.12",
+        "@babel/preset-env": "^7.20.2",
+        "@babel/preset-react": "^7.18.6",
+        "babel-loader": "^9.1.2",
+        "webpack": "^5.75.0",
+        "webpack-cli": "^5.0.1"
+    },
+    "dependencies": {
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+    }
+}

plugin.json

@@ -0,0 +1,15 @@
+{
+    "id": "mp4file",
+    "name": "MP4 File",
+    "description": "Mattermost web app plugin to have a native HTML5 video player for .mp4 urls",
+    "homepage_url": "https://github.com/Shadowsith/mattermost-plugin-mp4file",
+    "support_url": "https://github.com/Shadowsith/mattermost-plugin-mp4file/issues",
+    "release_notes_url": "https://github.com/Shadowsith/mattermost-plugin-mp4file/releases/tag/1.0.0",
+    "version": "1.0.0",
+    "webapp": {
+        "bundle_path": "main.js"
+    },
+    "props": {
+        "maxHeight": 350
+    }
+}

src/index.jsx

@@ -0,0 +1,135 @@
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+
+
+class PostMessageAttachmentComponent extends React.Component {
+    static plugin = null;
+
+    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';
+    }
+
+    render() {
+        setTimeout(() => {
+            this.afterRender();
+        }, 200);
+        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 = 350;
+        try {
+            if (PostWillRenderEmbed.plugin.props.maxHeight != null) {
+                maxHeight = PostWillRenderEmbed.plugin.props.maxHeight;
+            }
+        } catch {
+        }
+        const css = `
+                    .mp4file-mh {
+                        max-height: ${maxHeight}px;
+                    }`;
+        const node = document.createElement('div');
+        node.setAttribute('id', this.customId);
+        const html =
+            <>
+                <style>{css}</style>
+                <video controls="true" class="mp4file-mh">
+                    <source src={this.fileUrl} type="video/mp4" />
+                </video>
+            </>;
+        node.innerHTML = renderToStaticMarkup(html);
+        return node;
+    }
+
+    /**
+     * @returns void
+     */
+    afterRender() {
+        /**
+         * @type HTMLDivElement
+         */
+        this.msg = document.getElementById(this.postMessageId);
+        try {
+            if (!this.isFilePostMessage()) {
+                return;
+            }
+            this.fileType = this.getFileType();
+            if (this.fileType != 'mp4') {
+                return;
+            }
+            if (this.isRendered()) {
+                return;
+            }
+            this.fileUrl = this.getFileUrl();
+            this.msg.parentElement.append(this.getHtmlVideoElement());
+        } catch (err) {
+            console.log('err', err);
+        }
+    }
+
+}
+
+class Mp4FilePlugin {
+    initialize(registry, store) {
+        const plugin = store.getState().plugins.plugins.mp4file;
+        PostMessageAttachmentComponent.plugin = plugin;
+        registry.registerPostMessageAttachmentComponent(
+            PostMessageAttachmentComponent
+        );
+    }
+
+    uninitialize() {
+        // No clean up required.
+    }
+}
+
+window.registerPlugin('mp4file', new Mp4FilePlugin());

webpack.config.js

@@ -0,0 +1,46 @@
+var path = require('path');
+
+module.exports = {
+    entry: [
+        './src/index.jsx',
+    ],
+    resolve: {
+        modules: [
+            'src',
+            'node_modules',
+        ],
+        extensions: ['*', '.js', '.jsx'],
+    },
+    module: {
+        rules: [
+            {
+                test: /\.(js|jsx)$/,
+                exclude: /node_modules/,
+                use: {
+                    loader: 'babel-loader',
+                    options: {
+                        presets: ['@babel/preset-react',
+                            [
+                                "@babel/preset-env",
+                                {
+                                    "modules": "commonjs",
+                                    "targets": {
+                                        "node": "current"
+                                    }
+                                }
+                            ]
+                        ],
+                    },
+                },
+            },
+        ],
+    },
+    externals: {
+        react: 'React',
+    },
+    output: {
+        path: path.join(__dirname, '/dist'),
+        publicPath: '/',
+        filename: 'main.js',
+    },
+};