Merge pull request #2295 from h3poteto/iss-2287

refs #2287 Add poll expired notification

spec/renderer/integration/store/Preferences/Notification.spec.ts

@@ -16,7 +16,8 @@ const state = (): NotificationState => {
         follow_request: true,
         reaction: true,
         status: true,
-        poll_vote: true
+        poll_vote: true,
+        poll_expired: true
       }
     }
   }
@@ -66,7 +67,8 @@ describe('Preferences/Notification', () => {
               follow_request: false,
               reaction: false,
               status: false,
-              poll_vote: false
+              poll_vote: false,
+              poll_expired: false
             }
           }
         }
@@ -85,7 +87,8 @@ describe('Preferences/Notification', () => {
             follow_request: false,
             reaction: false,
             status: false,
-            poll_vote: false
+            poll_vote: false,
+            poll_expired: false
           }
         })
       })
@@ -115,7 +118,8 @@ describe('Preferences/Notification', () => {
           follow_request: true,
           reaction: true,
           status: true,
-          poll_vote: true
+          poll_vote: true,
+          poll_expired: true
         }
       })
       expect(App.actions.loadPreferences).toBeCalled()

spec/renderer/unit/store/Preferences/Notification.spec.ts

@@ -13,7 +13,8 @@ describe('Preferences/Notification', () => {
           follow_request: true,
           reaction: true,
           status: true,
-          poll_vote: true
+          poll_vote: true,
+          poll_expired: true
         }
       }
     }
@@ -29,7 +30,8 @@ describe('Preferences/Notification', () => {
           follow_request: false,
           reaction: false,
           status: false,
-          poll_vote: false
+          poll_vote: false,
+          poll_expired: false
         }
       })
       expect(state.notification.notify).toEqual({
@@ -40,7 +42,8 @@ describe('Preferences/Notification', () => {
         follow_request: false,
         reaction: false,
         status: false,
-        poll_vote: false
+        poll_vote: false,
+        poll_expired: false
       })
     })
   })

src/config/locales/en/translation.json

@@ -197,7 +197,8 @@
         "reaction": "Notify me when I receive a emoji reaction",
         "follow_request": "Notify me when I receive a follow request",
         "status": "Notify me when I receive a status notification",
-        "poll_vote": "Notify me when I receive a vote of poll"
+        "poll_vote": "Notify me when I receive a vote of poll",
+        "poll_expired": "Notify me when I receive a poll expired event"
       }
     },
     "account": {
@@ -506,6 +507,10 @@
     "poll_vote": {
       "title": "PollVote",
       "body": "{{username}} voted your poll"
+    },
+    "poll_expired": {
+      "title": "PollExpired",
+      "body": "{{username}}'s poll is expired"
     }
   }
 }

src/main/index.ts

@@ -1448,6 +1448,15 @@ const createNotification = (notification: Entity.Notification, notifyConfig: Not
         } as NotificationConstructorOptions
       }
       break
+    case NotificationType.PollExpired:
+      if (notifyConfig.poll_expired) {
+        return {
+          title: i18next.t('notification.poll_expired.title'),
+          body: i18next.t('notification.poll_expired.body', { username: username(notification.account) }),
+          silent: false
+        } as NotificationConstructorOptions
+      }
+      break
     default:
       break
   }

src/main/preferences.ts

@@ -50,7 +50,8 @@ const notify: Notify = {
   follow_request: true,
   reaction: true,
   status: true,
-  poll_vote: true
+  poll_vote: true,
+  poll_expired: true
 }
 
 const language: LanguageSet = {

src/renderer/components/Preferences/Notification.vue

@@ -24,9 +24,12 @@
       <el-form-item for="notifyStatus" :label="$t('preferences.notification.enable.status')">
         <el-switch v-model="notifyStatus" active-color="#13ce66"> </el-switch>
       </el-form-item>
-      <el-form-item from="notifyPollVote" :label="$t('preferences.notification.enable.poll_vote')">
+      <el-form-item for="notifyPollVote" :label="$t('preferences.notification.enable.poll_vote')">
         <el-switch v-model="notifyPollVote" active-color="#13ce66"> </el-switch>
       </el-form-item>
+      <el-form-item for="notifyPollExpired" :label="$t('preferences.notification.enable.poll_expired')">
+        <el-switch v-model="notifyPollExpired" active-color="#13ce66"> </el-switch>
+      </el-form-item>
     </el-form>
   </div>
 </template>
@@ -114,6 +117,16 @@ export default {
           poll_vote: value
         })
       }
+    },
+    notifyPollExpired: {
+      get() {
+        return this.$store.state.Preferences.Notification.notification.notify.poll_expired
+      },
+      set(value) {
+        this.$store.dispatch('Preferences/Notification/updateNotify', {
+          poll_expired: value
+        })
+      }
     }
   },
   created() {

src/renderer/components/organisms/Notification.vue

@@ -108,6 +108,18 @@
       @select="$emit('selectNotification')"
     >
     </PollVote>
+    <PollExpired
+      v-else-if="message.type === 'poll_expired'"
+      :message="message"
+      :filter="filter"
+      :focused="focused"
+      :overlaid="overlaid"
+      @focusNext="$emit('focusNext')"
+      @focusPrev="$emit('focusPrev')"
+      @focusRight="$emit('focusRight')"
+      @select="$emit('selectNotification')"
+    >
+    </PollExpired>
   </div>
 </template>
 
@@ -121,6 +133,7 @@ import Reblog from './Notification/Reblog'
 import Reaction from './Notification/Reaction'
 import Status from './Notification/Status'
 import PollVote from './Notification/PollVote'
+import PollExpired from './Notification/PollExpired'
 
 export default {
   name: 'notification',
@@ -142,7 +155,7 @@ export default {
       default: false
     }
   },
-  components: { Favourite, Follow, FollowRequest, Mention, Quote, Reblog, Reaction, Status, PollVote },
+  components: { Favourite, Follow, FollowRequest, Mention, Quote, Reblog, Reaction, Status, PollVote, PollExpired },
   methods: {
     updateToot(message) {
       return this.$emit('update', message)

src/renderer/components/organisms/Notification/PollExpired.vue

@@ -0,0 +1,472 @@
+<template>
+  <div
+    class="status"
+    tabIndex="0"
+    v-shortkey="shortcutEnabled ? { next: ['j'], prev: ['k'], right: ['l'], left: ['h'], open: ['o'], profile: ['p'] } : {}"
+    @shortkey="handleStatusControl"
+    ref="status"
+    @click="$emit('select')"
+    role="article"
+    aria-label="poll expired"
+  >
+    <div v-show="filtered(message)" class="filtered">Filtered</div>
+    <div v-show="!filtered(message)" class="poll-expired">
+      <div class="action">
+        <div class="action-mark">
+          <icon name="poll-h" scale="0.9"></icon>
+        </div>
+        <div class="action-detail">
+          <span class="bold" @click="openUser(message.account)"><bdi v-html="username(message.account)"></bdi></span
+          >{{ $t('notification.poll_expired.body') }}
+        </div>
+        <div class="action-icon" role="presentation">
+          <FailoverImg :src="message.account.avatar" :alt="`Avatar of ${message.account.username}`" />
+        </div>
+      </div>
+      <div class="clearfix"></div>
+      <div class="target" v-on:dblclick="openDetail(message.status)">
+        <div class="icon" @click="openUser(message.status.account)">
+          <FailoverImg :src="message.status.account.avatar" :alt="`Avatar of ${message.status.account.username}`" role="presentation" />
+        </div>
+        <div class="detail">
+          <div class="toot-header">
+            <div class="user" @click="openUser(message.status.account)">
+              <span class="display-name"><bdi v-html="username(message.status.account)"></bdi></span>
+            </div>
+            <div class="timestamp">
+              {{ parseDatetime(message.status.created_at) }}
+            </div>
+            <div class="clearfix"></div>
+          </div>
+          <div class="content-wrapper">
+            <div class="spoiler" v-show="spoilered(message.status)">
+              <span v-html="spoilerText(message.status)"></span>
+              <el-button
+                v-if="!isShowContent(message.status)"
+                plain
+                type="primary"
+                size="medium"
+                class="spoil-button"
+                @click="showContent = true"
+              >
+                {{ $t('cards.toot.show_more') }}
+              </el-button>
+              <el-button v-else plain type="primary" size="medium" class="spoil-button" @click="showContent = false">
+                {{ $t('cards.toot.hide') }}
+              </el-button>
+            </div>
+            <div
+              class="content"
+              v-show="isShowContent(message.status)"
+              v-html="status(message.status)"
+              @click.capture.prevent="tootClick"
+            ></div>
+          </div>
+          <div class="attachments">
+            <el-button
+              v-show="sensitive(message.status) && !isShowAttachments(message.status)"
+              class="show-sensitive"
+              type="info"
+              @click="showAttachments = true"
+            >
+              {{ $t('cards.toot.sensitive') }}
+            </el-button>
+            <div v-show="isShowAttachments(message.status)">
+              <el-button
+                v-show="sensitive(message.status) && isShowAttachments(message.status)"
+                class="hide-sensitive"
+                type="text"
+                @click="showAttachments = false"
+                :title="$t('cards.toot.hide')"
+              >
+                <icon name="eye" class="hide"></icon>
+              </el-button>
+              <div class="media" v-bind:key="media.preview_url" v-for="media in mediaAttachments(message.status)">
+                <FailoverImg :src="media.preview_url" :title="media.description" :readExif="true" />
+                <el-tag class="media-label" size="mini" v-if="media.type == 'gifv'">GIF</el-tag>
+                <el-tag class="media-label" size="mini" v-else-if="media.type == 'video'">VIDEO</el-tag>
+              </div>
+            </div>
+            <div class="clearfix"></div>
+          </div>
+          <LinkPreview
+            v-if="message.status.card && message.status.card.type === 'link'"
+            :icon="message.status.card.image"
+            :title="message.status.card.title"
+            :description="message.status.card.description"
+            :url="message.status.card.url"
+          />
+        </div>
+      </div>
+      <div class="clearfix"></div>
+    </div>
+    <div class="fill-line"></div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import moment from 'moment'
+import { findAccount, findLink, findTag } from '~/src/renderer/utils/tootParser'
+import emojify from '~/src/renderer/utils/emojify'
+import TimeFormat from '~/src/constants/timeFormat'
+import FailoverImg from '~/src/renderer/components/atoms/FailoverImg'
+import LinkPreview from '~/src/renderer/components/molecules/Toot/LinkPreview'
+
+export default {
+  name: 'poll-expired',
+  components: {
+    FailoverImg,
+    LinkPreview
+  },
+  props: {
+    message: {
+      type: Object,
+      default: {}
+    },
+    filter: {
+      type: String,
+      default: ''
+    },
+    focused: {
+      type: Boolean,
+      default: false
+    },
+    overlaid: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      showContent: false,
+      showAttachments: false
+    }
+  },
+  computed: {
+    ...mapState({
+      displayNameStyle: state => state.App.displayNameStyle,
+      timeFormat: state => state.App.timeFormat,
+      language: state => state.App.language
+    }),
+    shortcutEnabled: function () {
+      return this.focused && !this.overlaid
+    }
+  },
+  mounted() {
+    if (this.focused) {
+      this.$refs.status.focus()
+    }
+  },
+  watch: {
+    focused: function (newState, oldState) {
+      if (newState) {
+        this.$nextTick(function () {
+          this.$refs.status.focus()
+        })
+      } else if (oldState && !newState) {
+        this.$nextTick(function () {
+          this.$refs.status.blur()
+        })
+      }
+    }
+  },
+  methods: {
+    username(account) {
+      if (account.display_name !== '') {
+        return emojify(account.display_name, account.emojis)
+      } else {
+        return account.username
+      }
+    },
+    parseDatetime(datetime) {
+      switch (this.timeFormat) {
+        case TimeFormat.Absolute.value:
+          return moment(datetime).format('YYYY-MM-DD HH:mm:ss')
+        case TimeFormat.Relative.value:
+          moment.locale(this.language)
+          return moment(datetime).fromNow()
+      }
+    },
+    tootClick(e) {
+      const parsedTag = findTag(e.target, 'poll-expired')
+      if (parsedTag !== null) {
+        const tag = `/${this.$route.params.id}/hashtag/${parsedTag}`
+        this.$router.push({ path: tag })
+        return tag
+      }
+      const parsedAccount = findAccount(e.target, 'poll-expired')
+      if (parsedAccount !== null) {
+        this.$store.commit('TimelineSpace/Contents/SideBar/changeOpenSideBar', true)
+        this.$store
+          .dispatch('TimelineSpace/Contents/SideBar/AccountProfile/searchAccount', parsedAccount)
+          .then(account => {
+            this.$store.dispatch('TimelineSpace/Contents/SideBar/openAccountComponent')
+            this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/changeAccount', account)
+          })
+          .catch(err => {
+            console.error(err)
+            this.openLink(e)
+            this.$store.commit('TimelineSpace/Contents/SideBar/changeOpenSideBar', false)
+          })
+        return parsedAccount.acct
+      }
+      this.openLink(e)
+    },
+    openLink(e) {
+      const link = findLink(e.target, 'poll-expired')
+      if (link !== null) {
+        return window.shell.openExternal(link)
+      }
+    },
+    openUser(account) {
+      this.$store.dispatch('TimelineSpace/Contents/SideBar/openAccountComponent')
+      this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/changeAccount', account)
+      this.$store.commit('TimelineSpace/Contents/SideBar/changeOpenSideBar', true)
+    },
+    openDetail(message) {
+      this.$store.dispatch('TimelineSpace/Contents/SideBar/openTootComponent')
+      this.$store.dispatch('TimelineSpace/Contents/SideBar/TootDetail/changeToot', message)
+      this.$store.commit('TimelineSpace/Contents/SideBar/changeOpenSideBar', true)
+    },
+    mediaAttachments(message) {
+      return message.media_attachments
+    },
+    filtered(message) {
+      return this.filter.length > 0 && message.status.content.search(this.filter) >= 0
+    },
+    spoilered(message) {
+      return message.spoiler_text.length > 0
+    },
+    isShowContent(message) {
+      return !this.spoilered(message) || this.showContent
+    },
+    sensitive(message) {
+      return message.sensitive && this.mediaAttachments(message).length > 0
+    },
+    isShowAttachments(message) {
+      return !this.sensitive(message) || this.showAttachments
+    },
+    status(message) {
+      return emojify(message.content, message.emojis)
+    },
+    spoilerText(message) {
+      return emojify(message.spoiler_text, message.emojis)
+    },
+    handleStatusControl(event) {
+      switch (event.srcKey) {
+        case 'next':
+          this.$emit('focusNext')
+          break
+        case 'prev':
+          this.$emit('focusPrev')
+          break
+        case 'right':
+          this.$emit('focusRight')
+          break
+        case 'left':
+          this.$emit('focusLeft')
+          break
+        case 'open':
+          this.openDetail(this.message.status)
+          break
+        case 'profile':
+          this.openUser(this.message.account)
+          break
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.bold {
+  font-weight: bold;
+}
+
+.poll-expired {
+  padding: 8px 0 0 16px;
+
+  .fa-icon {
+    font-size: 0.9em;
+    width: auto;
+    height: 1em;
+    max-width: 100%;
+    max-height: 100%;
+  }
+
+  .action {
+    margin-right: 8px;
+
+    .action-mark {
+      color: #409eff;
+      float: left;
+      width: 32px;
+      text-align: right;
+    }
+
+    .action-detail {
+      margin-left: 10px;
+      font-size: var(--base-font-size);
+      float: left;
+      max-width: 80%;
+
+      .bold /deep/ {
+        cursor: pointer;
+
+        .emojione {
+          max-width: 14px;
+          max-height: 14px;
+        }
+      }
+    }
+
+    .action-icon {
+      width: 100%;
+      text-align: right;
+
+      img {
+        width: 16px;
+        height: 16px;
+        border-radius: 2px;
+      }
+    }
+  }
+
+  .target {
+    .icon {
+      float: left;
+      width: 42px;
+      cursor: pointer;
+
+      img {
+        width: 32px;
+        height: 32px;
+        border-radius: 4px;
+      }
+    }
+
+    .detail {
+      margin: 8px 8px 0 42px;
+      color: #909399;
+
+      .content-wrapper /deep/ {
+        font-size: var(--base-font-size);
+        margin: 0;
+
+        .content {
+          font-size: var(--base-font-size);
+          word-wrap: break-word;
+        }
+
+        .content p {
+          unicode-bidi: plaintext;
+        }
+
+        .emojione {
+          width: 20px;
+          height: 20px;
+        }
+      }
+
+      .toot-header {
+        height: 22px;
+
+        .user {
+          float: left;
+          font-size: var(--base-font-size);
+          cursor: pointer;
+
+          .display-name /deep/ {
+            .emojione {
+              max-width: 14px;
+              max-height: 14px;
+            }
+          }
+        }
+
+        .timestamp {
+          font-size: var(--base-font-size);
+          text-align: right;
+          width: 100%;
+        }
+      }
+
+      .spoiler {
+        margin: 8px 0;
+
+        .spoil-button {
+          background-color: var(--theme-selected-background-color);
+          border-color: var(--theme-border-color);
+          padding: 2px 4px;
+        }
+      }
+
+      .attachments {
+        position: relative;
+        margin: 4px 0 8px;
+
+        .show-sensitive {
+          padding: 20px 32px;
+          margin-bottom: 4px;
+        }
+
+        .hide-sensitive {
+          position: absolute;
+          top: 2px;
+          left: 2px;
+          background-color: rgba(0, 0, 0, 0.5);
+          padding: 4px;
+
+          &:hover {
+            background-color: rgba(0, 0, 0, 0.9);
+          }
+        }
+
+        .media {
+          float: left;
+          margin-right: 8px;
+          width: 200px;
+          height: 200px;
+
+          img {
+            cursor: zoom-in;
+            object-fit: cover;
+            max-width: 200px;
+            max-height: 200px;
+            width: 100%;
+            height: 100%;
+            border-radius: 8px;
+          }
+
+          .media-label {
+            position: absolute;
+            bottom: 6px;
+            left: 4px;
+            color: #fff;
+            background: rgba(0, 0, 0, 0.5);
+          }
+        }
+      }
+    }
+  }
+}
+
+.filtered {
+  align-items: center;
+  display: flex;
+  height: 40px;
+  justify-content: center;
+}
+
+.status:focus {
+  background-color: var(--theme-selected-background-color);
+  outline: 0;
+}
+
+.fill-line {
+  height: 1px;
+  background-color: var(--theme-border-color);
+  margin: 4px 0 0;
+}
+</style>

src/renderer/components/organisms/Notification/PollVote.vue

@@ -7,7 +7,7 @@
     ref="status"
     @click="$emit('select')"
     role="article"
-    aria-label="polll vote"
+    aria-label="poll vote"
   >
     <div v-show="filtered(message)" class="filtered">Filtered</div>
     <div v-show="!filtered(message)" class="poll-vote">

src/renderer/components/organisms/Notification/Status.vue

@@ -26,11 +26,13 @@
       @selectToot="$emit('select')"
     >
     </toot>
+    <div class="clearfix"></div>
   </div>
 </template>
 
 <script>
 import emojify from '~/src/renderer/utils/emojify'
+import FailoverImg from '~/src/renderer/components/atoms/FailoverImg'
 import Toot from '../Toot'
 
 export default {
@@ -53,7 +55,7 @@ export default {
       default: false
     }
   },
-  components: { Toot },
+  components: { Toot, FailoverImg },
   methods: {
     updateToot(message) {
       return this.$emit('update', message)
@@ -82,40 +84,45 @@ export default {
   font-weight: bold;
 }
 
-.action {
+.notified-status {
-  margin: 8px 0 0 16px;
+  padding-top: 8px;
 
-  .action-mark {
+  .action {
-    color: #409eff;
+    padding: 0 0 0 16px;
-    float: left;
+    margin-right: 8px;
-    width: 32px;
-    text-align: right;
-  }
 
-  .action-detail {
+    .action-mark {
-    margin-left: 10px;
+      color: #409eff;
-    font-size: var(--base-font-size);
+      float: left;
-    float: left;
+      width: 32px;
-    max-width: 80%;
+      text-align: right;
+    }
 
-    .bold /deep/ {
+    .action-detail {
-      cursor: pointer;
+      margin-left: 10px;
+      font-size: var(--base-font-size);
+      float: left;
+      max-width: 80%;
 
-      .emojione {
+      .bold /deep/ {
-        max-width: 14px;
+        cursor: pointer;
-        max-height: 14px;
+
+        .emojione {
+          max-width: 14px;
+          max-height: 14px;
+        }
       }
     }
-  }
 
-  .action-icon {
+    .action-icon {
-    width: 100%;
+      width: 100%;
-    text-align: right;
+      text-align: right;
 
-    img {
+      img {
-      width: 16px;
+        width: 16px;
-      height: 16px;
+        height: 16px;
-      border-radius: 2px;
+        border-radius: 2px;
+      }
     }
   }
 }

src/renderer/store/App.ts

@@ -41,7 +41,8 @@ const state = (): AppState => ({
     follow_request: true,
     reaction: true,
     status: true,
-    poll_vote: true
+    poll_vote: true,
+    poll_expired: true
   },
   tootPadding: 8,
   timeFormat: TimeFormat.Absolute.value,

src/renderer/store/Preferences/Notification.ts

@@ -20,7 +20,8 @@ const state: NotificationState = {
       follow_request: true,
       reaction: true,
       status: true,
-      poll_vote: true
+      poll_vote: true,
+      poll_expired: true
     }
   }
 }

src/renderer/store/TimelineSpace/Contents/Notifications.ts

@@ -156,6 +156,7 @@ const getters: GetterTree<NotificationsState, RootState> = {
         case NotificationType.FollowRequest:
         case NotificationType.Status:
         case NotificationType.PollVote:
+        case NotificationType.PollExpired:
           return true
         default:
           return false

src/types/notify.ts

@@ -7,4 +7,5 @@ export type Notify = {
   reaction: boolean
   status: boolean
   poll_vote: boolean
+  poll_expired: boolean
 }