starting over since merge conflicts are a pain

Signed-off-by: Sam Therapy <sam@samtherapy.net>

.drone.yml

@@ -0,0 +1,37 @@
+kind: pipeline
+type: docker
+name: Deploy
+
+steps:
+- name: submodules
+  image: alpine/git
+  commands:
+  - git submodule update --init --recursive
+
+- name: Build
+  depends_on:
+  - submodules
+  image: node:12
+  commands:
+  - yarn
+  - yarn build
+  when:
+    event: 
+      - push
+
+- name: Execute deploy script
+  depends_on:
+  - Build
+  image: ubuntu:latest
+  environment:
+      SSH_KEY:
+        from_secret: SSH_KEY
+  commands:
+  - apt update && apt install -y wget dos2unix openssh-client rsync
+  - wget https://f.ruina.exposed/add-froth-key.sh && dos2unix ./add-froth-key.sh && chmod +x add-froth-key.sh && bash ./add-froth-key.sh
+  - wget https://f.ruina.exposed/pleroma-fe-build-froth.sh && dos2unix ./pleroma-fe-build-froth.sh && chmod +x pleroma-fe-build-froth.sh && bash ./pleroma-fe-build-froth.sh
+  when:
+    event: 
+      - push
+    branch:
+      - froth

.gitmodules

@@ -0,0 +1,9 @@
+[submodule "instance/pleroma-mods/pleroma-mod-syntax"]
+	path = instance/pleroma-mods/pleroma-mod-syntax
+	url = https://git.pleroma.social/absturztaube/pleroma-mod-syntax.git
+[submodule "instance/pleroma-mods/pleroma-mod-math"]
+	path = instance/pleroma-mods/pleroma-mod-math
+	url = https://git.pleroma.social/absturztaube/pleroma-mod-math
+[submodule "instance/pleroma-mods/pleroma-mod-imgsearch"]
+	path = instance/pleroma-mods/pleroma-mod-imgsearch
+	url = https://gitlab.com/SamTherapy/pleroma-mod-imgsearch

README.md

@@ -4,6 +4,19 @@
 
 ![screenshot](/uploads/796c5ecf985ed1e2b0943ee0df131ed0/DJVqSJ0.png)
 
+# Changes in this Fork
+
+* script tag in index.html for [pleroma-mod-loader](https://git.pleroma.social/absturztaube/pleroma-mod-loader)
+* ability to move notifications to a seperate column
+* insert zero width space when padding of emojis is disabled
+* add custom language "English (Nyan)"
+* pointing version links to my gitlab repos
+* optional compact styles provided by craftplacer
+* tags as buttons bellow a post
+* [pinch and pan media](https://git.pleroma.social/pleroma/pleroma-fe/-/merge_requests/1403)
+* swap of react and favorite button in status
+* adding __vueComponent__ to DOM nodes to make new mods work
+
 # For Translators
 
 To translate Pleroma-FE, add your language to [src/i18n/messages.js](https://git.pleroma.social/pleroma/pleroma-fe/blob/develop/src/i18n/messages.js). Pleroma-FE will set your language by your browser locale, but you can temporarily force it in the code by changing the locale in main.js.

build/dev-server.js

@@ -21,7 +21,6 @@ var compiler = webpack(webpackConfig)
 
 var devMiddleware = require('webpack-dev-middleware')(compiler, {
   publicPath: webpackConfig.output.publicPath,
-  writeToDisk: true,
   stats: {
     colors: true,
     chunks: false

build/webpack.base.conf.js

@@ -3,8 +3,7 @@ var config = require('../config')
 var utils = require('./utils')
 var projectRoot = path.resolve(__dirname, '../')
 var ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin')
-var CopyPlugin = require('copy-webpack-plugin');
-var { VueLoaderPlugin } = require('vue-loader')
+var { VueLoaderPlugin } = require("vue-loader");
 
 var env = process.env.NODE_ENV
 // check env & config/index.js to decide weither to enable CSS Sourcemaps for the
@@ -115,19 +114,6 @@ module.exports = {
       entry: path.join(__dirname, '..', 'src/sw.js'),
       filename: 'sw-pleroma.js'
     }),
-    new VueLoaderPlugin(),
-    // This copies Ruffle's WASM to a directory so that JS side can access it
-    new CopyPlugin({
-      patterns: [
-        {
-          from: "node_modules/ruffle-mirror/*",
-          to: "static/ruffle",
-          flatten: true
-        },
-      ],
-      options: {
-        concurrency: 100,
-      },
-    })
+    new VueLoaderPlugin()
   ]
 }

index.html

@@ -10,5 +10,6 @@
     <noscript>To use Pleroma, please enable JavaScript.</noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->
+    <script type="text/javascript" src="/instance/pleroma-mod-loader.js"></script>
   </body>
 </html>

instance/panel.html

@@ -0,0 +1,5 @@
+<div style="margin-left:12px; margin-right:12px">
+<center><p><a href="https://bloat.8777.ch">Epsilon Bloat FE</a> | <a href="https://tree.8777.ch">Sigma Treebird FE</a></p></center>
+<iframe width="100%" height="330" scrolling="no" frameborder="no" src="https://live.grumbulon.xyz/front/embed.html?&amp;type=playlist&amp;id=39"></iframe><br>
+<center><sub>brotip: you can close this dialog by enabling "Hide instance-specific panel" in the settings</sub></center><br>
+</div>

instance/pleroma-mod-config.json

@@ -0,0 +1,7 @@
+{
+    "modDirectory": "/instance/pleroma-mods/",
+    "mods": [
+	    "math",
+        "syntax"
+    ]
+}

instance/pleroma-mod-loader.js

@@ -0,0 +1,477 @@
+class PleromaModLoader {
+  constructor () {
+    this.config = {
+      "modDirectory": "/instance/pleroma-mods/",
+      "mods": []
+    };
+    this.loadConfig();
+    this.loadedMods = {};
+    this.classes = {};
+  }
+
+  loadMods () {
+    this.config.mods.forEach((mod) => {
+      this.loadMod(mod);
+    });
+  }
+
+  loadMod (modName) {
+    return PleromaModLoader.includeScript(
+      this.config.modDirectory + "pleroma-mod-" + modName + "/mod.js"
+    ).then(() => {
+      this.loadedMods[modName] = new this.classes[PleromaModLoader.getClassName(modName)]();
+    });
+  }
+
+  loadConfig () {
+    window.fetch("/instance/pleroma-mod-config.json").then((response) => {
+      return response.json();
+    }).then((json) => {
+      Object.keys(json).forEach((key) => {
+        this.config[key] = json[key];
+      });
+      this.loadMods();
+    }).catch((error) => {
+      console.error("can't load loader config");
+      console.error(error);
+    });
+  }
+
+  registerClass (className, object) {
+    this.classes[className] = object;
+  }
+
+  waitUntilReady () {
+    const postPanel = document.querySelector(".status-container");
+    const loginPanel = document.querySelector(".login-form");
+    if (postPanel || loginPanel) {
+      Object.keys(this.loadedMods).forEach((modName) => {
+        const settings = document.querySelector(".settings-modal div[label]:first-child");
+        if (settings) {
+          if (!settings.querySelector(".mod-settings")) {
+            this.appendModSettings(settings);
+          }
+        }
+
+        const mod = this.loadedMods[modName];
+        if (mod.isEnabled) {
+          mod.ready();
+        }
+      });
+
+      this.createObserver();
+    } else {
+      console.warn("not ready, trying again in 1s");
+      window.setTimeout(() => { this.waitUntilReady(); }, 1000);
+    }
+  }
+
+  createCheckbox (label, mod) {
+    const labelElement = document.createElement("label");
+    labelElement.classList.add("checkbox");
+
+    const input = document.createElement("input");
+    input.setAttribute("type", "checkbox");
+    input.checked = mod.isEnabled;
+    input.addEventListener("change", (event) => {
+      if (event.target.checked) {
+        mod.enable();
+      } else {
+        mod.disable();
+      }
+    });
+    labelElement.appendChild(input);
+
+    const fakeCheckbox = document.createElement("i");
+    fakeCheckbox.classList.add("checkbox-indicator");
+    labelElement.appendChild(fakeCheckbox);
+
+    const text = document.createElement("span");
+    text.classList.add("label");
+    text.innerText = label;
+    labelElement.appendChild(text);
+
+    return labelElement;
+  }
+
+  appendModSettings (element) {
+    const container = document.createElement("div");
+    container.classList.add("setting-item");
+    container.classList.add("mod-settings");
+
+    const title = document.createElement("h2");
+    title.innerText = "Pleroma Mods";
+    container.appendChild(title);
+
+    const optionList = document.createElement("ul");
+    optionList.classList.add("setting-list");
+
+    Object.keys(this.loadedMods).sort().forEach((modName) => {
+      const li = document.createElement("li");
+
+      const enable = this.createCheckbox("enable " + modName, this.loadedMods[modName]);
+      li.appendChild(enable);
+
+      const ulConfig = document.createElement("ul");
+      ulConfig.classList.add("setting-list");
+
+      Object.keys(this.loadedMods[modName].config).forEach((key) => {
+        if (key === "includes" || key === "filter") {
+          return;
+        }
+
+        this.loadedMods[modName].onSettingInit(key, ulConfig, document.createElement("li"));
+      });
+
+      li.appendChild(ulConfig);
+
+      optionList.appendChild(li);
+    });
+
+    container.appendChild(optionList);
+
+    element.appendChild(container);
+  }
+
+  createObserver () {
+    this.containers = {
+      main: document.querySelector(".main"),
+      notifications: document.querySelector(".notifications"),
+      userPanel: document.querySelector(".user-panel"),
+      settingsModal: document.querySelector(".settings-modal")
+    };
+
+    const observerConfig = {
+      subtree: true,
+      childList: true
+    };
+
+    this.observer = new MutationObserver((mutations, observer) => {
+      const modal = document.querySelector(".settings-modal div[label]:first-child");
+      if (modal && !modal.querySelector(".mod-settings")) {
+        this.appendModSettings(modal);
+      }
+
+      Object.values(this.loadedMods).forEach((mod) => {
+        if (mod.isEnabled) {
+          mutations.forEach((mutation) => {
+            mod.mutate(mutation, observer);
+          });
+        }
+      });
+    });
+
+    this.observer.observe(this.containers.main, observerConfig);
+    if (this.containers.notifications) {
+      this.observer.observe(this.containers.notifications, observerConfig);
+    }
+    if (this.containers.userPanel) {
+      this.observer.observe(this.containers.userPanel, observerConfig);
+    }
+    if (this.containers.settingsModal) {
+      this.observer.observe(this.containers.settingsModal, observerConfig);
+    }
+  }
+
+  static registerMod (mod) {
+    window.__pleromaModLoader.registerClass(mod.name, mod);
+  }
+
+  static includeScript (src) {
+    console.log("include " + src);
+    return new Promise((resolve) => {
+      const script = document.createElement("script");
+      script.setAttribute("src", src);
+      script.setAttribute("type", "text/javascript");
+      script.onload = () => {
+        resolve();
+      };
+      document.querySelector("body").appendChild(script);
+    });
+  }
+
+  static includeCss (src) {
+    console.log("include " + src);
+    return new Promise((resolve) => {
+      const link = document.createElement("link");
+      link.setAttribute("href", src);
+      link.setAttribute("rel", "stylesheet");
+      link.setAttribute("type", "text/css");
+      link.onload = () => {
+        resolve();
+      };
+      document.querySelector("head").appendChild(link);
+    });
+  }
+
+  static excludeScript (src) {
+    return new Promise((resolve) => {
+      const script = document.querySelector("script[src=\"" + src + "\"]");
+      if (script) {
+        script.remove();
+      }
+      resolve();
+    });
+  }
+
+  static excludeCss (src) {
+    return new Promise((resolve) => {
+      const link = document.querySelector("link[href=\"" + src + "\"]");
+      if (link) {
+        link.remove();
+      }
+      resolve();
+    });
+  }
+
+  static getVueScope (element) {
+    if (!element) {
+      return null;
+    }
+    if (element.__vue__) {
+      console.warn("old vue version, please update pleroma-fe");
+      return element.__vue__;
+    }
+    if (element._vnode) {
+      return element._vnode;
+    }
+    if (element.__vnode) {
+      return element.__vnode;
+    }
+    if (element.parentNode) {
+      return PleromaModLoader.getVueScope(element.parentNode);
+    }
+    return null;
+  }
+
+  static getVueComponent (element) {
+    if (!element) {
+      return null;
+    }
+    if (element.__vnode && element.__vnode.component) {
+      return element.__vnode.component;
+    }
+    if (element.__vueParentComponent) {
+      return element.__vueParentComponent.ctx;
+    }
+    if (element.__vueComponent__) {
+      return element.__vueComponent__;
+    }
+    if (element.parentNode) {
+      return PleromaModLoader.getVueComponent(element.parentNode);
+    }
+    return null;
+  }
+
+  static getRootVueScope () {
+    return PleromaModLoader.getVueScope(document.querySelector("#app"));
+  }
+
+  static getToken () {
+    return PleromaModLoader.getRootVueScope().appContext.provides.store.getters.getUserToken();
+  }
+
+  static getModDir () {
+    return window.__pleromaModLoader.config.modDirectory;
+  }
+
+  static getClassName (name) {
+    let className = "PleromaMod";
+    name.split("-").forEach((namePart) => {
+      className += namePart.substring(0, 1).toUpperCase();
+      className += namePart.substring(1);
+    });
+    return className;
+  }
+
+  static api (method, path, params) {
+    return new Promise((resolve, reject) => {
+      const token = PleromaModLoader.getToken();
+      const xhr = new XMLHttpRequest();
+      xhr.responseType = "json";
+      xhr.open(method, path);
+      xhr.setRequestHeader("Content-Type", "application/json");
+      xhr.setRequestHeader("Authorization", "Bearer " + token);
+      xhr.onreadstatechange = () => {
+        if (xhr.readyState === 4) {
+          if (xhr.status !== 200) {
+            reject(new Error({
+              status: xhr.status,
+              response: xhr.response,
+              xhr: xhr
+            }));
+          }
+        }
+      };
+      xhr.onload = () => {
+        resolve(xhr.response);
+      };
+      xhr.send(JSON.stringify(params));
+    });
+  }
+}
+
+class PleromaMod { // eslint-disable-line no-unused-vars
+  constructor (name) {
+    this.name = name;
+    this.config = {};
+    this.isRunning = false;
+  }
+
+  get isEnabled () {
+    return localStorage.getItem("pleroma_mod_" + this.name + "_enabled") !== "false" || true;
+  }
+
+  getClassName () {
+    return PleromaModLoader.getClassName(this.name);
+  }
+
+  getModDir () {
+    return PleromaModLoader.getModDir() + this.name + "/";
+  }
+
+  ready () {
+    this.onReady();
+    this.run();
+  }
+
+  destroy () {
+    this.isRunning = false;
+    if (this.config.includes) {
+      const styles = this.config.includes.css || [];
+      const scripts = this.config.includes.js || [];
+
+      Promise.all(styles.map((style) => {
+        return this.excludeCss(style);
+      }).concat(scripts.map((script) => {
+        return this.excludeScript(script);
+      }))).then(() => {
+        this.onDestroy();
+      });
+
+      return;
+    }
+
+    this.onDestroy();
+  }
+
+  run () {
+    if (this.config.includes) {
+      const styles = this.config.includes.css || [];
+      const scripts = this.config.includes.js || [];
+
+      Promise.all(styles.map((style) => {
+        return this.includeCss(style);
+      }).concat(scripts.map((script) => {
+        return this.includeScript(script);
+      })).concat([
+        this.loadConfig(),
+        this.onCreate()
+      ])).then(() => {
+        this.isRunning = true;
+        this.onRun();
+      });
+
+      return;
+    }
+
+    this.isRunning = true;
+    this.onRun();
+  }
+
+  mutate (mutation, observer) {
+    if (this.isRunning) {
+      this.onMutation(mutation, observer);
+    }
+  }
+
+  saveConfig () {
+    const storedConfig = {};
+    Object.keys(this.config).filter((key) => {
+      return key !== "includes" && key !== "filter";
+    }).forEach((key) => {
+      storedConfig[key] = this.config[key];
+    });
+    localStorage.setItem(this.name + "_config", JSON.stringify(storedConfig));
+  }
+
+  mergeConfig (newConfig) {
+    Object.keys(newConfig).forEach((key) => {
+      this.config[key] = JSON.parse(JSON.stringify(newConfig[key]));
+    });
+  }
+
+  loadConfig () {
+    return new Promise((resolve) => {
+      // TODO: use structuredClone when its more supported
+      this.defaultConfig = JSON.parse(JSON.stringify(this.config));
+
+      const storedConfig = JSON.parse(localStorage.getItem(this.name + "_config"));
+
+      this.onConfigLoad().then((json) => {
+        this.mergeConfig(json);
+        if (storedConfig) {
+          this.mergeConfig(storedConfig);
+        }
+        this.saveConfig();
+        resolve();
+      });
+    });
+  }
+
+  onReady () {}
+  onCreate () {
+    return new Promise((resolve) => {
+      resolve();
+    });
+  }
+  onDestroy () {}
+  onRun () {}
+  onMutation (mutation, observer) {}
+  onConfigLoad () {
+    return new Promise((resolve) => {
+      resolve({});
+    });
+  }
+  onSettingInit (key, ul, li) {}
+
+  includeCss (src) {
+    return PleromaModLoader.includeCss(PleromaModLoader.getModDir() + this.name + "/" + src);
+  }
+
+  includeScript (src) {
+    return PleromaModLoader.includeScript(PleromaModLoader.getModDir() + this.name + "/" + src);
+  }
+
+  excludeCss (src) {
+    return PleromaModLoader.excludeCss(PleromaModLoader.getModDir() + this.name + "/" + src);
+  }
+
+  excludeScript (src) {
+    return PleromaModLoader.excludeScript(PleromaModLoader.getModDir() + this.name + "/" + src);
+  }
+
+  fetchJson (src) {
+    console.log("loading " + src);
+    return window.fetch(PleromaModLoader.getModDir() + this.name + "/" + src).then((response) => {
+      return response.json();
+    });
+  }
+
+  api (method, path, params) {
+    return PleromaModLoader.api(method, path, params);
+  }
+
+  enable () {
+    this.ready();
+    localStorage.setItem("pleroma_mod_" + this.name + "_enabled", true);
+  }
+
+  disable () {
+    this.destroy();
+    localStorage.setItem("pleroma_mod_" + this.name + "_enabled", false);
+  }
+}
+
+window.__pleromaModLoader = new PleromaModLoader();
+window.__pleromaModLoader.waitUntilReady();

instance/pleroma-mods/pleroma-mod-imgsearch

@@ -0,0 +1 @@
+Subproject commit cfd4dd6404d2df6e07e646aff5ff1d606ed48228

instance/pleroma-mods/pleroma-mod-math

@@ -0,0 +1 @@
+Subproject commit 5d7ac570770bd7f1d5cba1279c444b53626add3c

instance/pleroma-mods/pleroma-mod-syntax

@@ -0,0 +1 @@
+Subproject commit 440dd5dcb4c97d58726a2a52abbe9c54a8b2f3fb

production.sh

@@ -0,0 +1,12 @@
+#!/bin/bash
+TARGET="/opt/pleroma" # CHANGE ME
+
+yarn install -D
+
+rm -rf dist/*
+npm run build
+
+rsync --update -Pr dist/ "${TARGET}/instance/static/"
+rsync --update -ra dist/static/ "${TARGET}/instance/static/static"
+rsync -ra instance/ "${TARGET}/instance/static/instance"
+

src/App.vue

@@ -15,8 +15,12 @@
       class="app-layout container"
       :class="classes"
     >
-      <div class="underlay"/>
-      <div id="sidebar" class="column -scrollable" :class="{ '-show-scrollbar': showScrollbars }">
+      <div class="underlay" />
+      <div
+        id="sidebar"
+        class="column -scrollable"
+        :class="{ '-show-scrollbar': showScrollbars }"
+      >
         <user-panel />
         <template v-if="layoutType !== 'mobile'">
           <nav-panel />
@@ -26,7 +30,11 @@
           <div id="notifs-sidebar" />
         </template>
       </div>
-      <div id="main-scroller" class="column main" :class="{ '-full-height': isChats }">
+      <div
+        id="main-scroller"
+        class="column main"
+        :class="{ '-full-height': isChats }"
+      >
         <div
           v-if="!currentUser"
           class="login-hint panel panel-default"
@@ -40,7 +48,11 @@
         </div>
         <router-view />
       </div>
-      <div id="notifs-column" class="column -scrollable" :class="{ '-show-scrollbar': showScrollbars }"/>
+      <div
+        id="notifs-column"
+        class="column -scrollable"
+        :class="{ '-show-scrollbar': showScrollbars }"
+      />
     </div>
     <media-modal />
     <shout-panel

src/boot/after_store.js

@@ -15,6 +15,8 @@ import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js'
 import { applyTheme } from '../services/style_setter/style_setter.js'
 import FaviconService from '../services/favicon_service/favicon_service.js'
 
+import DomNodeToComponent from '../modules/domNodeToComponent.js'
+
 let staticInitialResults = null
 
 const parsedInitialResults = () => {
@@ -392,6 +394,7 @@ const afterStoreSetup = async ({ store, i18n }) => {
 
   app.use(vClickOutside)
   app.use(VBodyScrollLock)
+  app.use(DomNodeToComponent)
 
   app.component('FAIcon', FontAwesomeIcon)
   app.component('FALayers', FontAwesomeLayers)

src/components/attachment/attachment.js

@@ -1,5 +1,4 @@
 import StillImage from '../still-image/still-image.vue'
-import Flash from '../flash/flash.vue'
 import VideoAttachment from '../video_attachment/video_attachment.vue'
 import nsfwImage from '../../assets/nsfw.png'
 import fileTypeService from '../../services/file_type/file_type.service.js'
@@ -61,7 +60,6 @@ const Attachment = {
     }
   },
   components: {
-    Flash,
     StillImage,
     VideoAttachment
   },

src/components/attachment/attachment.vue

@@ -227,21 +227,6 @@
           <!-- eslint-enable vue/no-v-html -->
         </div>
       </div>
-
-      <span
-        v-if="type === 'flash' && !hidden"
-        class="flash-container"
-        :href="attachment.url"
-        @click.stop.prevent="openModal"
-      >
-        <Flash
-          ref="flash"
-          class="flash"
-          :src="attachment.large_thumb_url || attachment.url"
-          @playerOpened="setFlashLoaded(true)"
-          @playerClosed="setFlashLoaded(false)"
-        />
-      </span>
     </div>
     <div
       v-if="size !== 'hide' && !hideDescription && (edit || (localDescription && showDescription))"

src/components/chat/chat_layout.js

@@ -0,0 +1,108 @@
+const ChatLayout = {
+  methods: {
+    setChatLayout () {
+      let body = document.querySelector('body')
+      if (body) {
+        body.style.overscrollBehavior = 'none'
+      }
+      if (this.isMobileLayout) {
+        this.setMobileChatLayout()
+      }
+    },
+    unsetChatLayout () {
+      this.unsetMobileChatLayout()
+      let body = document.querySelector('body')
+      if (body) {
+        body.style.overscrollBehavior = 'unset'
+      }
+    },
+    setMobileChatLayout () {
+      // This is a hacky way to adjust the global layout to the mobile chat (without modifying the rest of the app).
+      // This layout prevents empty spaces from being visible at the bottom
+      // of the chat on iOS Safari (`safe-area-inset`) when
+      // - the on-screen keyboard appears and the user starts typing
+      // - the user selects the text inside the input area
+      // - the user selects and deletes the text that is multiple lines long
+      // TODO: unify the chat layout with the global layout.
+
+      let html = document.querySelector('html')
+      if (html) {
+        html.style.overflow = 'hidden'
+        html.style.height = '100%'
+      }
+
+      let body = document.querySelector('body')
+      if (body) {
+        body.style.height = '100%'
+      }
+
+      let app = document.getElementById('app')
+      if (app) {
+        app.style.height = '100%'
+        app.style.overflow = 'hidden'
+        app.style.minHeight = 'auto'
+      }
+
+      let appBgWrapper = window.document.getElementById('app_bg_wrapper')
+      if (appBgWrapper) {
+        appBgWrapper.style.overflow = 'hidden'
+      }
+
+      let main = document.getElementsByClassName('main')[0]
+      if (main) {
+        main.style.overflow = 'hidden'
+        main.style.height = '100%'
+      }
+
+      let content = document.getElementById('content')
+      if (content) {
+        content.style.paddingTop = '0'
+        content.style.height = '100%'
+        content.style.overflow = 'visible'
+      }
+
+      this.$nextTick(() => {
+        this.updateSize()
+      })
+    },
+    unsetMobileChatLayout () {
+      let html = document.querySelector('html')
+      if (html) {
+        html.style.overflow = 'visible'
+        html.style.height = 'unset'
+      }
+
+      let body = document.querySelector('body')
+      if (body) {
+        body.style.height = 'unset'
+      }
+
+      let app = document.getElementById('app')
+      if (app) {
+        app.style.height = '100%'
+        app.style.overflow = 'visible'
+        app.style.minHeight = '100vh'
+      }
+
+      let appBgWrapper = document.getElementById('app_bg_wrapper')
+      if (appBgWrapper) {
+        appBgWrapper.style.overflow = 'visible'
+      }
+
+      let main = document.getElementsByClassName('main')[0]
+      if (main) {
+        main.style.overflow = 'visible'
+        main.style.height = 'unset'
+      }
+
+      let content = document.getElementById('content')
+      if (content) {
+        content.style.paddingTop = '60px'
+        content.style.height = 'unset'
+        content.style.overflow = 'unset'
+      }
+    }
+  }