serverless-ircd 0.6.0 → 0.7.0

package/apps/web/upstream/src/components/LoadingAnimation.vue

@@ -0,0 +1,104 @@
+<template>
+    <div>
+        <img
+            ref="kiwi-loading-logo"
+            src="../res/kiwiLoadingLogo.png"
+            class="kiwi-loading-logo"
+            alt=""
+        >
+        <canvas ref="kiwi-loading-canvas" class="kiwi-loading-animation" />
+    </div>
+</template>
+
+<script>
+
+'kiwi public';
+
+export default {
+    data() {
+        return {
+            logo: '',
+            c: '',
+            x: '',
+            Y: [],
+            t: 0,
+            fontSize: 72,
+            font: 'bold ' + 72 + 'px verdana',
+            text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu arcu ipsum. ',
+            animationFrame: null,
+            destroying: false,
+        };
+    },
+    mounted() {
+        this.logo = this.$refs['kiwi-loading-logo'];
+        this.c = this.$refs['kiwi-loading-canvas'];
+        this.x = this.c.getContext('2d');
+        let tmpText = '';
+        for (let i = 0; i < 9; i += 1) tmpText += this.text;
+        this.text = String(tmpText).match(/.{1,43}/g);
+        this.c.width = 1256;
+        this.c.height = 1080;
+        for (let i = 0; i < this.text.length; i += 1) {
+            this.Y.push(i * this.fontSize - 1600);
+        }
+        this.logo.onload = () => {
+            if (this.destroying) {
+                // the component has already been destroyed, we nolonger need the animation
+                return;
+            }
+            this.draw();
+        };
+    },
+    beforeDestroy() {
+        this.destroying = true;
+        cancelAnimationFrame(this.animationFrame);
+    },
+    methods: {
+        draw() {
+            this.x.clearRect(0, 0, this.c.width, this.c.height);
+            this.x.globalCompositeOperation = 'source-over';
+            this.x.drawImage(this.logo, 0, 0, this.c.width, this.c.height);
+            this.x.globalCompositeOperation = 'xor';
+            this.x.fillStyle = '#000';
+            this.x.font = this.font;
+            for (let i = 0; i < this.text.length; i += 1) {
+                if (this.t % 4.5 < 2) {
+                    this.Y[i] += (250 + ((10 + i) / this.text.length) * 4000) / 120;
+                    if (this.Y[i] > i * this.fontSize) {
+                        this.Y[i] = i * this.fontSize;
+                    }
+                } else {
+                    if (this.text.length - (this.t % 4.5 - 2) / 2.5 * this.text.length * 1.75 < i) {
+                        this.Y[i] += 10 + this.Y[i] / 20;
+                    }
+                    if (this.Y[i] > 1080 || this.Y[i] < 0) {
+                        this.Y[i] = -1500 + i * this.fontSize;
+                    }
+                }
+                if (this.Y[i] > -100) {
+                    this.x.fillText(this.text[i], 0, this.fontSize + this.Y[i]);
+                }
+            }
+            this.x.globalCompositeOperation = 'source-out';
+            this.x.drawImage(this.logo, 0, 0, this.c.width, this.c.height);
+            this.x.globalCompositeOperation = 'source-over';
+            this.x.globalAlpha = 0.1;
+            this.x.drawImage(this.logo, 0, 0, this.c.width, this.c.height);
+            this.x.globalAlpha = 1;
+            this.animationFrame = requestAnimationFrame(this.draw);
+            this.t += 1 / 40;
+        },
+    },
+};
+</script>
+
+<style>
+.kiwi-loading-logo {
+    display: none;
+}
+
+.kiwi-loading-animation {
+    height: 100%;
+    width: 100%;
+}
+</style>

package/apps/web/upstream/src/components/MediaViewer.vue

@@ -0,0 +1,199 @@
+<template>
+    <div class="kiwi-mediaviewer">
+        <div class="kiwi-mediaviewer-controls">
+            <a
+                v-if="showPin"
+                class="u-button u-link kiwi-mediaviewer-controls-pin"
+                @click="$emit('pin')"
+            >
+                <i class="fa fa-map-pin" aria-hidden="true" />
+            </a>
+            <a
+                class="u-button u-button-warning kiwi-mediaviewer-controls-close"
+                @click="$emit('close');"
+            >
+                <i class="fa fa-window-close" aria-hidden="true" />
+            </a>
+        </div>
+        <div class="kiwi-mediaviewer-content">
+            <iframe
+                v-if="isIframe"
+                ref="iframe"
+                :src="url"
+                :sandbox="iframeSandboxOptions"
+                class="kiwi-mediaviewer-iframe"
+            />
+            <component
+                :is="component"
+                v-else-if="component"
+                :component-props="componentProps"
+                v-bind="componentProps"
+                @close="$emit('close')"
+                @setHeight="setHeight"
+                @setMaxHeight="setMaxHeight"
+            />
+            <url-embed
+                v-else
+                :url="url"
+                :show-pin="showPin"
+                :iframe-sandbox-options="iframeSandboxOptions"
+                @close="$emit('close')"
+                @setHeight="setHeight"
+                @setMaxHeight="setMaxHeight"
+            />
+        </div>
+    </div>
+</template>
+
+<script>
+'kiwi public';
+
+import _ from 'lodash';
+import UrlEmbed from './UrlEmbed.vue';
+
+export default {
+    components: {
+        UrlEmbed,
+    },
+    props: ['url', 'component', 'componentProps', 'isIframe', 'showPin'],
+    data() {
+        return {
+            debouncedUpdateEmbed: null,
+        };
+    },
+    computed: {
+        iframeSandboxOptions() {
+            // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-sandbox
+            // Mostly all permissions other than allow-top-navigation so that embedded content
+            // cannot redirect the page away from kiwi
+            let options = [
+                'allow-downloads',
+                'allow-forms',
+                'allow-modals',
+                'allow-orientation-lock',
+                'allow-pointer-lock',
+                'allow-popups',
+                'allow-popups-to-escape-sandbox',
+                'allow-presentation',
+                'allow-same-origin',
+                'allow-scripts',
+            ];
+
+            return options.join(' ');
+        },
+    },
+    watch: {
+        url() {
+            this.debouncedUpdateEmbed();
+        },
+        isIframe() {
+            this.debouncedUpdateEmbed();
+        },
+    },
+    created() {
+        // Debounce as both watchers may call it in the same tick
+        // also causes the method to be called next tick to give dom time to update
+        this.debouncedUpdateEmbed = _.debounce(() => {
+            this.updateEmbed(true);
+        }, 0);
+    },
+    mounted() {
+        this.updateEmbed(false);
+        this.$nextTick(() => {
+            this.emitEvent('opened');
+        });
+    },
+    methods: {
+        updateEmbed(shouldEmit) {
+            this.setMaxHeight('');
+
+            if (this.isIframe || this.component) {
+                this.setHeight((this.isIframe) ? '40%' : 'auto');
+            }
+
+            if (shouldEmit) {
+                this.emitEvent('updated');
+            }
+        },
+        emitEvent(type) {
+            const event = {
+                isInline: this.showPin || false,
+            };
+            if (this.isIframe) {
+                event.type = 'iframe';
+                event.iframe = this.$refs.iframe;
+                event.url = this.url;
+            } else if (this.component) {
+                event.type = 'component';
+                event.component = this.component;
+                event.componentProps = this.componentProps;
+            } else {
+                event.type = 'embed';
+                event.url = this.url;
+            }
+            this.$state.$emit(`mediaviewer.${type}`, event);
+        },
+        setHeight(newHeight) {
+            this.$el.style.height = newHeight;
+        },
+        setMaxHeight(newHeight) {
+            this.$el.style.maxHeight = newHeight;
+        },
+    },
+};
+</script>
+
+<style>
+.kiwi-mediaviewer {
+    box-sizing: border-box;
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    height: 0;
+}
+
+.kiwi-mediaviewer-controls {
+    position: absolute;
+    top: 0;
+    right: 16px;
+    z-index: 1;
+    background: var(--brand-default-bg);
+    border-radius: 5px;
+    padding: 3px;
+    opacity: 0;
+    transition: opacity 0.1s;
+    box-shadow: 0 1px var(--brand-input-border);
+}
+
+.kiwi-mediaviewer:hover .kiwi-mediaviewer-controls {
+    opacity: 1;
+}
+
+.kiwi-mediaviewer-controls-close {
+    padding: 3px 15px;
+}
+
+.kiwi-mediaviewer-content {
+    height: 100%;
+    overflow: auto;
+}
+
+.kiwi-mediaviewer-iframe {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    border: none;
+}
+
+@media screen and (max-width: 769px) {
+    .kiwi-mediaviewer-controls {
+        right: 6px;
+        opacity: 1;
+    }
+
+    .kiwi-mediaviewer-controls-close {
+        padding: 3px 7px;
+    }
+}
+</style>

package/apps/web/upstream/src/components/MessageInfo.vue

@@ -0,0 +1,192 @@
+<template>
+    <div class="kiwi-messageinfo" @click.stop>
+        <div v-if="message.mentioned_urls.length > 0" class="kiwi-messageinfo-urls">
+            <div v-for="url in message.mentioned_urls" :key="url" class="kiwi-messageinfo-url">
+                <a class="u-button u-button-secondary" @click="urlPreview(url)">Preview</a>
+                <a
+                    :href="url"
+                    target="_blank"
+                    class="u-link"
+                >
+                    {{ url }}
+                </a>
+            </div>
+        </div>
+        <div
+            :class="{'kiwi-messageinfo-actions--open': requestingInput}"
+            class="kiwi-messageinfo-actions"
+        >
+            <a
+                v-if="!requestingInput && buffer.name !== message.nick && !isSelf()"
+                class="u-link kiwi-messageinfo-reply"
+                @click="openQuery"
+            >
+                {{ $t('reply_in_private') }}
+            </a>
+
+            <div v-if="areWeAnOp() && !isSelf()" class="kiwi-messageinfo-opbuttons">
+                <input-prompt
+                    label="Kick reason:" @submit="onKick"
+                    @cancel="requestingInput = false"
+                >
+                    <a
+                        v-if="!requestingInput"
+                        class="u-link kiwi-messageinfo-kick-user" @click="requestingInput = true"
+                    >
+                        Kick {{ message.nick }}
+                    </a>
+                </input-prompt>
+                <input-prompt
+                    label="Ban reason:" @submit="onBan"
+                    @cancel="requestingInput = false"
+                >
+                    <a
+                        v-if="!requestingInput"
+                        class="u-link kiwi-messageinfo-ban-user" @click="requestingInput = true"
+                    >
+                        Ban {{ message.nick }}
+                    </a>
+                </input-prompt>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+'kiwi public';
+
+export default {
+    components: {
+    },
+    props: ['buffer', 'message'],
+    data: function data() {
+        return {
+            requestingInput: false,
+        };
+    },
+    computed: {
+    },
+    methods: {
+        urlPreview: function urlPreview(url) {
+            this.$state.$emit('mediaviewer.show', url);
+        },
+        areWeAnOp: function areWeAnOp() {
+            let ourNick = this.buffer.getNetwork().nick;
+            return this.buffer.isUserAnOp(ourNick);
+        },
+        isSelf: function isSelf() {
+            let user = this.$state.getUser(this.buffer.getNetwork().id, this.message.nick);
+            return this.buffer.getNetwork().ircClient.user.nick === user.nick;
+        },
+        onBan: function onBan(reason) {
+            let network = this.buffer.getNetwork();
+            network.ircClient.mode(this.buffer.name, '+b', this.message.nick);
+        },
+        onKick: function onKick(promptedReason) {
+            let network = this.buffer.getNetwork();
+            let defaultReason = this.$state.setting('buffers.default_kick_reason');
+            let reason = promptedReason || defaultReason;
+            network.ircClient.raw('KICK', this.buffer.name, this.message.nick, reason);
+        },
+        openQuery: function openQuery() {
+            let network = this.buffer.getNetwork();
+            let buffer = this.$state.addBuffer(network.id, this.message.nick);
+            this.$state.setActiveBuffer(network.id, buffer.name);
+        },
+    },
+};
+</script>
+
+<style>
+.kiwi-messageinfo {
+    display: block;
+    position: relative;
+    padding: 0;
+}
+
+.kiwi-messageinfo-urls {
+    margin-top: 10px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    border-top: 1px solid;
+    border-bottom: 1px solid;
+    overflow: hidden;
+    width: 100%;
+}
+
+.kiwi-messageinfo-url {
+    margin-bottom: 5px;
+    display: flex;
+}
+
+.kiwi-messageinfo-url .u-button {
+    line-height: 30px;
+}
+
+.kiwi-messageinfo-urls .kiwi-messageinfo-url:last-of-type {
+    margin-bottom: 0;
+}
+
+.kiwi-messageinfo-actions {
+    margin-top: 10px;
+    overflow: hidden;
+    width: 100%;
+    text-align: left;
+}
+
+.kiwi-messageinfo-url .u-link {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    display: inline-block;
+    overflow: hidden;
+    flex: 1;
+    line-height: 30px;
+    margin-left: 10px;
+    padding: 5px 10px;
+    text-align: center;
+    border: 1px solid;
+    border-radius: 3px;
+}
+
+.kiwi-messageinfo-close {
+    position: absolute;
+    right: 20px;
+    bottom: 5px;
+    font-size: 1.3em;
+    cursor: pointer;
+}
+
+.kiwi-messageinfo-opbuttons {
+    margin-left: 2em;
+    display: inline-block;
+}
+
+.kiwi-messageinfo-actions--open .kiwi-messageinfo-opbuttons {
+    margin-left: 0;
+}
+
+.kiwi-messageinfo-opbuttons .u-input-prompt a,
+.kiwi-messageinfo-reply {
+    padding: 5px 10px;
+    display: inline-block;
+    border-radius: 4px;
+}
+
+.kiwi-messageinfo-opbuttons .u-input-prompt input {
+    margin-bottom: 5px;
+}
+
+@media screen and (max-width: 490px) {
+    .kiwi-messageinfo-actions {
+        text-align: center;
+    }
+
+    .kiwi-messageinfo-opbuttons {
+        margin: 0;
+    }
+
+    .kiwi-messageinfo-opbuttons .u-input-prompt a {
+        margin-top: 10px;
+    }
+}
+</style>