🍱 Dashboard adaption for Nextcloud 20

lib/AppInfo/Application.php

@@ -35,6 +35,7 @@
 use OCA\Talk\Collaboration\Resources\ConversationProvider;
 use OCA\Talk\Collaboration\Resources\Listener as ResourceListener;
 use OCA\Talk\Config;
+use OCA\Talk\Dashboard\TalkWidget;
 use OCA\Talk\Events\ChatEvent;
 use OCA\Talk\Events\RoomEvent;
 use OCA\Talk\Files\Listener as FilesListener;
@@ -95,6 +96,8 @@ public function register(IRegistrationContext $context): void {
  $context->registerEventListener(\OCP\AppFramework\Http\Events\BeforeTemplateRenderedEvent::class, UnifiedSearchCSSLoader::class);
 
  $context->registerSearchProvider(ConversationSearch::class);
+
+ $context->registerDashboardWidget(TalkWidget::class);
  }
 
  public function boot(IBootContext $context): void {

lib/Dashboard/TalkWidget.php

@@ -0,0 +1,81 @@
+<?php
+/**
+ * @copyright Copyright (c) 2020 Julius Härtl <jus@bitgrid.net>
+ *
+ * @author Julius Härtl <jus@bitgrid.net>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+namespace OCA\Talk\Dashboard;
+
+use OCP\IL10N;
+use OCP\Util;
+
+class TalkWidget implements \OCP\Dashboard\IWidget {
+
+ /** @var IL10N */
+ private $l10n;
+
+ public function __construct(
+ IL10N $l10n
+ ) {
+ $this->l10n = $l10n;
+ }
+
+ /**
+ * @inheritDoc
+ */
+ public function getId(): string {
+ return 'spreed';
+ }
+
+ /**
+ * @inheritDoc
+ */
+ public function getTitle(): string {
+ return $this->l10n->t('Talk mentions');
+ }
+
+ /**
+ * @inheritDoc
+ */
+ public function getOrder(): int {
+ return 10;
+ }
+
+ /**
+ * @inheritDoc
+ */
+ public function getIconClass(): string {
+ return 'icon-talk';
+ }
+
+ /**
+ * @inheritDoc
+ */
+ public function getUrl(): ?string {
+ return \OC::$server->getURLGenerator()->getAbsoluteURL('/apps/spreed');
+ }
+
+ /**
+ * @inheritDoc
+ */
+ public function load(): void {
+ Util::addScript('spreed', 'dashboard');
+ }
+}

package.json

@@ -27,6 +27,7 @@
  "@nextcloud/moment": "^1.1.1",
  "@nextcloud/router": "^1.1.0",
  "@nextcloud/vue": "^2.3.0",
+ "@nextcloud/vue-dashboard": "^0.1.3",
  "attachmediastream": "^2.1.0",
  "crypto-js": "^4.0.0",
  "debounce": "^1.2.0",

src/App.vue

@@ -79,7 +79,7 @@ export default {
  isInCall,
  ],
 
- data: function() {
+ data() {
  return {
  savedLastMessageMap: {},
  defaultPageTitle: false,

src/dashboard.js

@@ -0,0 +1,54 @@
+/*
+ * @copyright Copyright (c) 2020 Julius Härtl <jus@bitgrid.net>
+ *
+ * @author Julius Härtl <jus@bitgrid.net>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import Vue from 'vue'
+import { generateFilePath } from '@nextcloud/router'
+import { getRequestToken } from '@nextcloud/auth'
+import { translate, translatePlural } from '@nextcloud/l10n'
+import Dashboard from './views/Dashboard'
+
+// CSP config for webpack dynamic chunk loading
+// eslint-disable-next-line
+__webpack_nonce__ = btoa(getRequestToken())
+
+// Correct the root of the app for chunk loading
+// OC.linkTo matches the apps folders
+// OC.generateUrl ensure the index.php (or not)
+// We do not want the index.php since we're loading files
+// eslint-disable-next-line
+__webpack_public_path__ = generateFilePath('spreed', '', 'js/')
+
+Vue.prototype.t = translate
+Vue.prototype.n = translatePlural
+Vue.prototype.OC = OC
+Vue.prototype.OCA = OCA
+
+document.addEventListener('DOMContentLoaded', function() {
+
+ OCA.Dashboard.register('spreed', (el) => {
+ const View = Vue.extend(Dashboard)
+ new View({
+ propsData: {},
+ }).$mount(el)
+ })
+
+})

src/views/Dashboard.vue

@@ -0,0 +1,141 @@
+<!--
+ - @copyright Copyright (c) 2020 Julius Härtl <jus@bitgrid.net>
+ -
+ - @author Julius Härtl <jus@bitgrid.net>
+ -
+ - @license GNU AGPL version 3 or any later version
+ -
+ - This program is free software: you can redistribute it and/or modify
+ - it under the terms of the GNU Affero General Public License as
+ - published by the Free Software Foundation, either version 3 of the
+ - License, or (at your option) any later version.
+ -
+ - This program is distributed in the hope that it will be useful,
+ - but WITHOUT ANY WARRANTY; without even the implied warranty of
+ - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ - GNU Affero General Public License for more details.
+ -
+ - You should have received a copy of the GNU Affero General Public License
+ - along with this program. If not, see <http://www.gnu.org/licenses/>.
+ -
+ -->
+
+<template>
+ <DashboardWidget id="talk-panel"
+ :items="roomOptions"
+ :show-more-url="''"
+ :loading="loading"
+ @hide="() => {}"
+ @markDone="() => {}">
+ <template v-slot:default="{ item }">
+ <DashboardWidgetItem :item="getWidgetItem(item)">
+ <template v-slot:avatar>
+ <ConversationIcon
+ :item="item"
+ :hide-favorite="true"
+ :hide-call="true" />
+ </template>
+ </DashboardWidgetItem>
+ </template>
+ <template v-slot:empty-content>
+ <EmptyContent icon="icon-talk">
+ {{ t('spreed', 'Join a conversation or start a new one') }}
+ <template #desc>
+ <p>{{ t('spreed', 'Say hi to your friends and colleagues!') }}</p>
+ <button>{{ t('spreed', 'Start a conversation') }}</button>
+ </template>
+ </EmptyContent>
+ </template>
+ </DashboardWidget>
+</template>
+
+<script>
+import { DashboardWidget, DashboardWidgetItem } from '@nextcloud/vue-dashboard'
+import ConversationIcon from './../components/ConversationIcon'
+import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
+import axios from '@nextcloud/axios'
+import { generateOcsUrl, generateUrl } from '@nextcloud/router'
+
+const ROOM_POLLING_INTERVAL = 30
+
+const propertySort = (properties) => (a, b) => properties.map(obj => {
+ let dir = 1
+ if (obj[0] === '-') {
+ dir = -1
+ obj = obj.substring(1)
+ }
+ return a[obj] > b[obj] ? dir : a[obj] < b[obj] ? -(dir) : 0
+}).reduce((p, n) => p || n, 0)
+
+export default {
+ name: 'Dashboard',
+ components: { DashboardWidget, DashboardWidgetItem, ConversationIcon, EmptyContent },
+ data() {
+ return {
+ roomOptions: [],
+ loading: true,
+ }
+ },
+ computed: {
+ callLink() {
+ return (conversation) => {
+ return generateUrl('/call/' + conversation.token)
+ }
+ },
+ /**
+ * This is a simplified version of the last chat message.
+ * Parameters are parsed without markup (just replaced with the name),
+ * e.g. no avatars on mentions.
+ * @returns {string} A simple message to show below the conversation name
+ */
+ simpleLastChatMessage() {
+ return (lastChatMessage) => {
+ if (!Object.keys(lastChatMessage).length) {
+ return ''
+ }
+
+ const params = lastChatMessage.messageParameters
+ let subtitle = lastChatMessage.message.trim()
+
+ // We don't really use rich objects in the subtitle, instead we fall back to the name of the item
+ Object.keys(params).forEach((parameterKey) => {
+ subtitle = subtitle.replace('{' + parameterKey + '}', params[parameterKey].name)
+ })
+
+ return subtitle
+ }
+ },
+ getWidgetItem() {
+ return (conversation) => {
+ return {
+ targetUrl: generateUrl(`/call/${conversation.token}`),
+ mainText: conversation.displayName,
+ subText: this.simpleLastChatMessage(conversation.lastMessage),
+ conversation,
+ }
+ }
+ },
+ },
+ beforeMount() {
+ this.fetchRooms()
+ // FIXME: reduce interval if user not active
+ setInterval(() => this.fetchRooms(), ROOM_POLLING_INTERVAL * 1000)
+ },
+ methods: {
+ fetchRooms() {
+ axios.get(generateOcsUrl('/apps/spreed/api/v1', 2) + 'room').then((response) => {
+ const rooms = response.data.ocs.data
+ rooms.sort(propertySort(['-hasCall', '-unreadMention', '-lastActivity']))
+ this.roomOptions = rooms.slice(0, 7)
+ this.loading = false
+ })
+ },
+ },
+}
+</script>
+
+<style lang="scss" scoped>
+ .empty-content {
+ text-align: center;
+ }
+</style>

webpack.common.js

@@ -13,6 +13,7 @@ module.exports = {
  'talk-public-share-auth-sidebar': path.join(__dirname, 'src', 'mainPublicShareAuthSidebar.js'),
  'talk-public-share-sidebar': path.join(__dirname, 'src', 'mainPublicShareSidebar.js'),
  'flow': path.join(__dirname, 'src', 'flow.js'),
+ 'dashboard': path.join(__dirname, 'src', 'dashboard.js'),
  },
  output: {
  path: path.resolve(__dirname, './js'),