make playing videos stop the suspending

2020-03-11 19:10:39 +02:00 · 2020-03-11 19:10:39 +02:00 · 42e43511de
commit 42e43511de
parent ed4825da0b
8 changed files with 83 additions and 25 deletions
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@ -73,6 +73,8 @@
        class="video"
        :attachment="attachment"
        :controls="allowPlay"
+        @play="$emit('play')"
+        @pause="$emit('pause')"
      />
      <i
        v-if="!allowPlay"
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@ -55,6 +55,14 @@ const conversation = {
    }
  },
  computed: {
+    hideStatus () {
+      if (this.$refs.statusComponent && this.$refs.statusComponent[0]) {
+        console.log(this.$refs.statusComponent[0].suspendable)
+        return this.virtualHidden && this.$refs.statusComponent[0].suspendable
+      } else {
+        return this.virtualHidden
+      }
+    },
    status () {
      return this.$store.state.statuses.allStatusesObject[this.statusId]
    },
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@ -1,12 +1,12 @@
 <template>
  <div
-    v-if="!virtualHidden"
+    v-if="!hideStatus"
    :style="hiddenStyle"
    class="timeline panel-default"
    :class="[isExpanded ? 'panel' : 'panel-disabled']"
  >
    <div
-      v-if="isExpanded && !virtualHidden"
+      v-if="isExpanded"
      class="panel-heading conversation-heading"
    >
      <span class="title"> {{ $t('timeline.conversation') }} </span>
@ -20,6 +20,7 @@
    <status
      v-for="status in conversation"
      :key="status.id"
+      ref="statusComponent"
      :inline-expanded="collapsable && isExpanded"
      :statusoid="status"
      :expandable="!isExpanded"
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@ -35,8 +35,7 @@ const Status = {
    'inlineExpanded',
    'showPinned',
    'inProfile',
-    'profileUserId',
-    'virtualHidden'
+    'profileUserId'
  ],
  data () {
    return {
@ -47,7 +46,9 @@ const Status = {
      showingLongSubject: false,
      error: null,
      // not as computed because it sets the initial state which will be changed later
-      expandingSubject: !this.$store.getters.mergedConfig.collapseMessageWithSubject
+      expandingSubject: !this.$store.getters.mergedConfig.collapseMessageWithSubject,
+      videosPlaying: [],
+      suspendable: true
    }
  },
  computed: {
@ -330,6 +331,9 @@ const Status = {
    },
    mergedConfig () {
      return this.$store.getters.mergedConfig
+    },
+    isSuspendable () {
+      return !this.replying && this.videosPlaying.length === 0
    }
  },
  components: {
@ -431,6 +435,13 @@ const Status = {
    setMedia () {
      const attachments = this.attachmentSize === 'hide' ? this.status.attachments : this.galleryAttachments
      return () => this.$store.dispatch('setMedia', attachments)
+    },
+    addVideoPlaying (id) {
+      console.log('video playing', id)
+      this.videosPlaying.push(id)
+    },
+    removeVideoPlaying (id) {
+      this.videosPlaying = this.videosPlaying.filter(videoId => videoId !== id)
    }
  },
  watch: {
@ -460,6 +471,10 @@ const Status = {
      if (this.isFocused && this.statusFromGlobalRepository.favoritedBy && this.statusFromGlobalRepository.favoritedBy.length !== num) {
        this.$store.dispatch('fetchFavs', this.status.id)
      }
+    },
+    'isSuspendable': function (val) {
+      console.log('suspendable changed', val)
+      this.suspendable = val
    }
  },
  filters: {
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@ -1,7 +1,6 @@
 <template>
  <!-- eslint-disable vue/no-v-html -->
  <div
-    v-if="!hideStatus"
    class="status-el"
    :class="[{ 'status-el_focused': isFocused }, { 'status-conversation': inlineExpanded }]"
  >
@ -143,7 +142,7 @@
                    :title="status.visibility | capitalize"
                  />
                </div>
-                <!--
+                <!-- -->
                <a
                  v-if="!status.is_local && !isPreview"
                  :href="status.external_url"
@ -167,7 +166,7 @@
                  href="#"
                  @click.prevent="toggleMute"
                ><i class="button-icon icon-eye-off" /></a>
-              -->
+              <!-- -->
              </span>
            </div>

@ -331,6 +330,8 @@
              :attachment="attachment"
              :allow-play="true"
              :set-media="setMedia()"
+              @play="addVideoPlaying(attachment.id)"
+              @pause="removeVideoPlaying(attachment.id)"
            />
            <gallery
              v-if="galleryAttachments.length > 0"
@ -351,7 +352,7 @@
            />
          </div>

-          <!-- Favs and Rts
+          <!-- Favs and Rts -->

          <transition name="fade">
            <div
@ -384,7 +385,7 @@
            </div>
          </transition>

-          -->
+          <!-- -->

          <!-- Emoji Reactions -->

--- a/src/components/video_attachment/video_attachment.js
+++ b/src/components/video_attachment/video_attachment.js
@ -3,25 +3,53 @@ const VideoAttachment = {
  props: ['attachment', 'controls'],
  data () {
    return {
-      loopVideo: this.$store.getters.mergedConfig.loopVideo
+      blocksSuspend: false,
+      hasAudio: false
+    }
+  },
+  computed: {
+    loopVideo () {
+      if (this.$store.getters.mergedConfig.loopVideoSilentOnly) {
+        console.log('do I have audio', this.hasAudio)
+        return !this.hasAudio
+      }
+      return this.$store.getters.mergedConfig.loopVideo
    }
  },
  methods: {
-    onVideoDataLoad (e) {
+    onPlaying (e) {
+      // Don't bother stopping suspend on small looping gif-like videos
+      this.checkForAudio(e)
+      if (this.loopVideo) {
+        return
+      }
+      this.$emit('play')
+    },
+    onPaused (e) {
+      this.$emit('pause')
+    },
+    checkForAudio (e) {
      const target = e.srcElement || e.target
+      if (this.hasAudio) return
+      console.log(target.webkitAudioDecodedByteCount)
      if (typeof target.webkitAudioDecodedByteCount !== 'undefined') {
        // non-zero if video has audio track
        if (target.webkitAudioDecodedByteCount > 0) {
-          this.loopVideo = this.loopVideo && !this.$store.getters.mergedConfig.loopVideoSilentOnly
+          console.log('1')
+          this.hasAudio = true
        }
-      } else if (typeof target.mozHasAudio !== 'undefined') {
+      }
+      if (typeof target.mozHasAudio !== 'undefined') {
        // true if video has audio track
        if (target.mozHasAudio) {
-          this.loopVideo = this.loopVideo && !this.$store.getters.mergedConfig.loopVideoSilentOnly
+          console.log('2')
+          this.hasAudio = true
        }
-      } else if (typeof target.audioTracks !== 'undefined') {
+      }
+      if (typeof target.audioTracks !== 'undefined') {
        if (target.audioTracks.length > 0) {
-          this.loopVideo = this.loopVideo && !this.$store.getters.mergedConfig.loopVideoSilentOnly
+          console.log('3')
+          this.hasAudio = true
        }
      }
    }
--- a/src/components/video_attachment/video_attachment.vue
+++ b/src/components/video_attachment/video_attachment.vue
@ -5,7 +5,8 @@
    :loop="loopVideo"
    :controls="controls"
    playsinline
-    @loadeddata="onVideoDataLoad"
+    @playing="onPlaying"
+    @pause="onPaused"
  />
 </template>

--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@ -488,15 +488,17 @@ const deleteUser = ({ credentials, ...user }) => {
  })
 }
 /* eslint-disable no-useless-escape */
-const statusStr = `{"account":{"acct":"lain","avatar":"https://lain.com/media/a95b8525b8d90c2d5ec81f46e1ca2b81da199ada0011922a262cf34fedf9125b.png","avatar_static":"https://lain.com/media/a95b8525b8d90c2d5ec81f46e1ca2b81da199ada0011922a262cf34fedf9125b.png","bot":false,"created_at":"2020-01-10T15:28:46.000Z","display_name":"lain","emojis":[],"fields":[],"followers_count":479,"following_count":80,"header":"https://lain.com/images/banner.png","header_static":"https://lain.com/images/banner.png","id":"9qrWmR0cKniB0YU0TA","locked":false,"note":"No more hiding","pleroma":{"background_image":null,"confirmation_pending":true,"hide_favorites":true,"hide_followers":false,"hide_followers_count":false,"hide_follows":false,"hide_follows_count":false,"is_admin":false,"is_moderator":false,"relationship":{},"skip_thread_containment":false,"tags":[]},"source":{"fields":[],"note":"No more hiding","pleroma":{"actor_type":"Person","discoverable":false},"sensitive":false},"statuses_count":7239,"url":"https://lain.com/users/lain","username":"lain"},"application":{"name":"Web","website":null},"bookmarked":false,"card":null,"content":"<span class=\\\"h-card\\\"><a data-user=\\\"9qrZenwP6NX6bmyTXE\\\" class=\\\"u-url mention\\\" href=\\\"https://pl.kotobank.ch/users/vaartis\\\" rel=\\\"ugc\\\">@<span>vaartis</span></a></span> to crush your enemies, see them driven before you, and to hear the lamentation of their women","created_at":"2020-02-26T14:14:50.000Z","emojis":[],"favourited":false,"favourites_count":4,"id":"9sQqKYcbpOcHH3J5kG","in_reply_to_account_id":"9qrZenwP6NX6bmyTXE","in_reply_to_id":"9sQqIMIifJtiTyxHrU","language":null,"media_attachments":[],"mentions":[{"acct":"vaartis@pl.kotobank.ch","id":"9qrZenwP6NX6bmyTXE","url":"https://pl.kotobank.ch/users/vaartis","username":"vaartis"}],"muted":false,"pinned":false,"pleroma":{"content":{"text/plain":"@vaartis to crush your enemies, see them driven before you, and to hear the lamentation of their women"},"conversation_id":343453,"direct_conversation_id":null,"emoji_reactions":[],"expires_at":null,"in_reply_to_account_acct":"vaartis@pl.kotobank.ch","local":true,"spoiler_text":{"text/plain":""},"thread_muted":false},"poll":null,"reblog":null,"reblogged":false,"reblogs_count":0,"replies_count":1,"sensitive":false,"spoiler_text":"","tags":[],"uri":"https://lain.com/objects/1052dcd5-498e-42e5-954b-35a7a5959102","url":"https://lain.com/notice/9sQqKYcbpOcHH3J5kG","visibility":"public"}`
+// const statusStr = `{"account":{"acct":"lain","avatar":"https://lain.com/media/a95b8525b8d90c2d5ec81f46e1ca2b81da199ada0011922a262cf34fedf9125b.png","avatar_static":"https://lain.com/media/a95b8525b8d90c2d5ec81f46e1ca2b81da199ada0011922a262cf34fedf9125b.png","bot":false,"created_at":"2020-01-10T15:28:46.000Z","display_name":"lain","emojis":[],"fields":[],"followers_count":479,"following_count":80,"header":"https://lain.com/images/banner.png","header_static":"https://lain.com/images/banner.png","id":"9qrWmR0cKniB0YU0TA","locked":false,"note":"No more hiding","pleroma":{"background_image":null,"confirmation_pending":true,"hide_favorites":true,"hide_followers":false,"hide_followers_count":false,"hide_follows":false,"hide_follows_count":false,"is_admin":false,"is_moderator":false,"relationship":{},"skip_thread_containment":false,"tags":[]},"source":{"fields":[],"note":"No more hiding","pleroma":{"actor_type":"Person","discoverable":false},"sensitive":false},"statuses_count":7239,"url":"https://lain.com/users/lain","username":"lain"},"application":{"name":"Web","website":null},"bookmarked":false,"card":null,"content":"<span class=\\\"h-card\\\"><a data-user=\\\"9qrZenwP6NX6bmyTXE\\\" class=\\\"u-url mention\\\" href=\\\"https://pl.kotobank.ch/users/vaartis\\\" rel=\\\"ugc\\\">@<span>vaartis</span></a></span> to crush your enemies, see them driven before you, and to hear the lamentation of their women","created_at":"2020-02-26T14:14:50.000Z","emojis":[],"favourited":false,"favourites_count":4,"id":"9sQqKYcbpOcHH3J5kG","in_reply_to_account_id":"9qrZenwP6NX6bmyTXE","in_reply_to_id":"9sQqIMIifJtiTyxHrU","language":null,"media_attachments":[],"mentions":[{"acct":"vaartis@pl.kotobank.ch","id":"9qrZenwP6NX6bmyTXE","url":"https://pl.kotobank.ch/users/vaartis","username":"vaartis"}],"muted":false,"pinned":false,"pleroma":{"content":{"text/plain":"@vaartis to crush your enemies, see them driven before you, and to hear the lamentation of their women"},"conversation_id":343453,"direct_conversation_id":null,"emoji_reactions":[],"expires_at":null,"in_reply_to_account_acct":"vaartis@pl.kotobank.ch","local":true,"spoiler_text":{"text/plain":""},"thread_muted":false},"poll":null,"reblog":null,"reblogged":false,"reblogs_count":0,"replies_count":1,"sensitive":false,"spoiler_text":"","tags":[],"uri":"https://lain.com/objects/1052dcd5-498e-42e5-954b-35a7a5959102","url":"https://lain.com/notice/9sQqKYcbpOcHH3J5kG","visibility":"public"}`
 /* eslint-enable no-useless-escape */

+/*
 const makeStatus = id => {
  let obj = JSON.parse(statusStr)
  obj.id = id
  obj.content += ` ${id}`
  return obj
 }
+*/

 const fetchTimeline = ({
  timeline,
@ -519,7 +521,7 @@ const fetchTimeline = ({
    favorites: MASTODON_USER_FAVORITES_TIMELINE_URL,
    tag: MASTODON_TAG_TIMELINE_URL
  }
-  // const isNotifications = timeline === 'notifications'
+  const isNotifications = timeline === 'notifications'
  const params = []

  let url = timelineUrls[timeline]
@ -556,10 +558,12 @@ const fetchTimeline = ({
  const queryString = map(params, (param) => `${param[0]}=${param[1]}`).join('&')
  url += `?${queryString}`

-  /*
+  /* */
  let status = ''
  let statusText = ''
-  */
+  /* */
+
+  /*
  let data = []

  let id = 50000000 + (timeline === 'publicAndExternal' ? 500000 : 0)
@ -581,8 +585,8 @@ const fetchTimeline = ({
  }
  url.toString()
  return new Promise((resolve, reject) => { setTimeout(() => resolve(data), 1000) })
+  */

-  /*
  return fetch(url, { headers: authHeaders(credentials) })
    .then((data) => {
      status = data.status
@ -591,7 +595,6 @@ const fetchTimeline = ({
    })
    .then((data) => data.json())
    .then((data) => {
-      console.log('data', data)
      if (!data.error) {
        return data.map(isNotifications ? parseNotification : parseStatus)
      } else {
@ -600,7 +603,6 @@ const fetchTimeline = ({
        return data
      }
    })
-  */
 }

 const fetchPinnedStatuses = ({ id, credentials }) => {