serverless-ircd 0.6.0 → 0.7.0

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

@@ -0,0 +1,162 @@
+<template>
+    <div
+        :class="[is_usermenu_open?'kiwi-statebrowser-usermenu--open':'']"
+        class="kiwi-statebrowser-usermenu"
+    >
+        <div
+            :class="[isConnected ?
+                'kiwi-statebrowser-usermenu-avatar--connected' :
+                'kiwi-statebrowser-usermenu-avatar--disconnected'
+            ]"
+            class="kiwi-statebrowser-usermenu-avatar"
+            @click="is_usermenu_open=!is_usermenu_open"
+        >
+            <avatar
+                v-if="getUser"
+                :user="getUser"
+                size="large"
+            />
+            <away-status-indicator
+                v-if="network && network.state === 'connected'"
+                :network="network"
+                :user="getUser"
+                :toggle="false"
+            />
+        </div>
+        <div v-if="is_usermenu_open" class="kiwi-statebrowser-usermenu-body">
+            <p> {{ $t('state_remembered') }} </p>
+            <a class="u-link" @click="clickForget">{{ $t('state_forget') }}</a>
+            <div class="kiwi-statebrowser-usermenu-close" @click="is_usermenu_open=false">
+                <i class="fa fa-times" aria-hidden="true" />
+            </div>
+        </div>
+        <div v-else class="kiwi-statebrowser-usermenu-network">
+            {{ networkName }}
+        </div>
+    </div>
+</template>
+<script>
+
+'kiwi public';
+
+import * as TextFormatting from '@/helpers/TextFormatting';
+
+import UserState from '@/libs/state/UserState';
+import AwayStatusIndicator from './AwayStatusIndicator';
+import Avatar from './Avatar';
+
+export default {
+    components: {
+        AwayStatusIndicator,
+        Avatar,
+    },
+    props: ['network'],
+    data() {
+        return {
+            is_usermenu_open: false,
+        };
+    },
+    computed: {
+        networkName() {
+            let name = TextFormatting.t('no_network');
+            if (this.network) {
+                name = this.network.name;
+            }
+            return name;
+        },
+        getUser() {
+            if (this.network && this.network.currentUser()) {
+                return this.network.currentUser();
+            }
+
+            return new UserState({ nick: 'User' });
+        },
+        isConnected() {
+            return this.network && this.network.state === 'connected';
+        },
+    },
+    methods: {
+        clickForget() {
+            let msg = 'This will delete all stored networks and start fresh. Are you sure?';
+            /* eslint-disable no-restricted-globals, no-alert */
+            let confirmed = confirm(msg);
+            if (!confirmed) {
+                return;
+            }
+
+            this.$state.persistence.forgetState();
+            window.location.reload();
+        },
+    },
+};
+
+</script>
+
+<style>
+
+.kiwi-statebrowser-usermenu {
+    width: 100%;
+    padding-bottom: 0;
+    padding-top: 34px;
+}
+
+.kiwi-statebrowser-usermenu-network {
+    padding: 0 0 10px 0;
+    cursor: default;
+}
+
+.kiwi-statebrowser-usermenu-close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 32px;
+    line-height: 32px;
+    text-align: center;
+    cursor: pointer;
+    font-weight: 800;
+    font-size: 20px;
+    opacity: 0.8;
+    border-bottom-left-radius: 14px;
+    transition: background 0.2s, opacity 0.2s;
+}
+
+.kiwi-statebrowser-usermenu-avatar {
+    position: relative;
+    width: 80px;
+    height: 80px;
+    margin: 0 auto 0.4em auto;
+    font-size: 2.8em;
+    transition: background 0.2s;
+}
+
+.kiwi-statebrowser-usermenu-avatar .kiwi-avatar-inner {
+    border-width: 3px;
+}
+
+.kiwi-statebrowser-usermenu .kiwi-awaystatusindicator {
+    position: absolute;
+    top: 4px;
+    right: 0;
+    width: 14px;
+    height: 14px;
+    border: 1px solid;
+}
+
+.kiwi-statebrowser-usermenu-body {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 0 10px;
+    font-size: 0.8em;
+    margin-bottom: 10px;
+}
+
+.kiwi-statebrowser-usermenu-body p {
+    margin-bottom: 0;
+}
+
+@media screen and (max-width: 769px) {
+    .kiwi-statebrowser-usermenu-close {
+        display: none;
+    }
+}
+</style>

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

@@ -0,0 +1,34 @@
+<template functional>
+    <span
+        v-if="props.user && $options.m.status(props) !== ''"
+        :class="{
+            'kiwi-typingstatusindicator--paused': $options.m.status(props) === 'paused',
+            [data.staticClass]: true,
+        }"
+        class="kiwi-typingstatusindicator kiwi-typing"
+    />
+</template>
+
+<script>
+'kiwi public';
+
+const methods = {
+    props: {},
+    status(props) {
+        // let props = this.props;
+        if (!props.user || !props.buffer) {
+            return '';
+        }
+
+        return props.user.typingStatus(props.buffer.name).status;
+    },
+};
+
+export default {
+    props: {
+        user: Object,
+        buffer: Object,
+    },
+    m: methods,
+};
+</script>

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

@@ -0,0 +1,56 @@
+<template>
+    <div class="kiwi-typinguserslist">
+        <span
+            v-for="(user, idx) in typingUsers"
+            :key="user.key"
+            :style="{ color: userColour(user) }"
+        >
+            {{ user.nick }}{{ typingUsers.length - 1 > idx ? ',' : '' }}
+        </span><span v-if="typingUsers.length > 0" class="kiwi-typing" />
+    </div>
+</template>
+<script>
+'kiwi public';
+
+import TypingStatusIndicator from './TypingStatusIndicator';
+
+export default {
+    components: {
+        TypingStatusIndicator,
+    },
+    props: ['buffer'],
+    computed: {
+        users() {
+            if (this.buffer.isQuery()) {
+                // if this is a query return the target as users
+                let network = this.$state.getActiveNetwork();
+                let user = this.$state.getUser(network.id, this.buffer.name);
+                return user ? { [user.nick]: user } : {};
+            }
+            return this.buffer.users;
+        },
+        typingUsers() {
+            let myNick = this.$state.getActiveNetwork().nick;
+            return Object.values(this.users).filter((u) => u.nick !== myNick
+                && u.typingStatus(this.buffer.name).status);
+        },
+    },
+    methods: {
+        userColour(user) {
+            return user && this.buffer.setting('colour_nicknames_in_messages') ? user.getColour() : '';
+        },
+    },
+};
+</script>
+<style>
+
+.kiwi-typinguserslist {
+    position: absolute;
+    top: -24px;
+    background: var(--brand-default-bg);
+    font-size: 0.9em;
+    overflow: hidden;
+    max-height: 23px;
+}
+
+</style>

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

@@ -0,0 +1,149 @@
+<template>
+    <div
+        :key="url"
+        class="kiwi-mediaviewer-embedly"
+    >
+        <a
+            ref="embedlyLink"
+            :href="url"
+            :data-card-key="settings.key"
+            class="kiwi-embedly-card"
+            data-card-chrome="0"
+            data-card-controls="0"
+            data-card-recommend="0"
+        >{{ $t('media_loading', {url: url}) }}</a>
+    </div>
+</template>
+
+<script>
+'kiwi public';
+
+let embedlyTagIncluded = false;
+
+export default {
+    props: ['url', 'showPin', 'iframeSandboxOptions'],
+    data() {
+        return {
+            embedlyObject: null,
+            waitTimer: 0,
+            waitCount: 0,
+        };
+    },
+    computed: {
+        settings() {
+            return this.$state.setting('embedly');
+        },
+    },
+    watch: {
+        url() {
+            this.cleanEmbed();
+            this.updateEmbed();
+        },
+    },
+    created() {
+        this.updateEmbed();
+    },
+    beforeDestroy() {
+        this.cleanEmbed();
+    },
+    methods: {
+        updateEmbed() {
+            let checkEmbedlyAndShowCard = () => {
+                // If the embedly function doesn't exist it's probably still loading
+                // the embedly script
+                if (typeof window.embedly !== 'function') {
+                    if (this.waitTimer) {
+                        // maybe the url changed and there already is a timer
+                        clearTimeout(this.waitTimer);
+                        this.waitTimer = 0;
+                    }
+                    if (this.waitCount < 300) {
+                        // max wait 30 seconds (30000ms)
+                        this.waitCount++;
+                        this.waitTimer = setTimeout(checkEmbedlyAndShowCard, 100);
+                    }
+                    return;
+                }
+
+                this.$nextTick(() => {
+                    this.embedlyObject = window.embedly('card', this.$refs.embedlyLink);
+                    if (!this.embedlyObject) {
+                        // embedly refused to create a card (maybe unsupported url)
+                        if (this.showPin) {
+                            // showPin is true when its an inline embed
+                            this.$emit('close');
+                        }
+
+                        return;
+                    }
+
+                    this.embedlyObject.on('card.error', (iframe) => {
+                        // not sure this event will be triggered
+                        if (this.showPin) {
+                            // showPin is true when its an inline embed
+                            this.$emit('close');
+                        }
+                    });
+
+                    this.$emit('setHeight', 'auto');
+
+                    if (this.showPin) {
+                        // This is inline so set a max height
+                        this.$el.style.maxHeight = (this.settings.maxHeight || 400) + 'px';
+                    } else {
+                        // This is main media view set a relative max height
+                        this.$emit('setMaxHeight', '54%');
+                    }
+                });
+            };
+
+            if (!embedlyTagIncluded) {
+                const head = document.getElementsByTagName('head')[0];
+                const script = document.createElement('script');
+                script.type = 'text/javascript';
+                const embedlyUrl = this.$state.getSetting('settings.embedly.script') ||
+                    '//cdn.embedly.com/widgets/platform.js';
+                script.src = embedlyUrl;
+                head.appendChild(script);
+                embedlyTagIncluded = true;
+            }
+            checkEmbedlyAndShowCard();
+        },
+        cleanEmbed() {
+            if (this.waitTimer) {
+                clearTimeout(this.waitTimer);
+                this.waitTimer = 0;
+            }
+            if (this.embedlyObject) {
+                this.embedlyObject.remove();
+                this.embedlyObject = null;
+            }
+        },
+    },
+};
+
+</script>
+
+<style>
+
+    .embedly-card {
+        display: block;
+        margin: 4px 0;
+    }
+
+    .embedly-card-hug {
+        border: 1px solid rgba(0, 0, 0, 0.2);
+        border-radius: 5px;
+        background: #fff;
+    }
+
+    .kiwi-mediaviewer-embedly {
+        display: inline-block;
+        overflow: auto;
+    }
+
+    .kiwi-main-mediaviewer .kiwi-mediaviewer-embedly {
+        display: block;
+    }
+
+</style>