make playing videos stop the suspending

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"

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]
     },

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"

src/components/status/status.js

@@ -35,8 +35,7 @@ const Status = {
     'inlineExpanded',
     'showPinned',
     'inProfile',
-    'profileUserId',
+    'profileUserId'
-    'virtualHidden'
   ],
   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: {

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 -->
 

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
         }
       }
     }

src/components/video_attachment/video_attachment.vue

@@ -5,7 +5,8 @@
     :loop="loopVideo"
     :controls="controls"
     playsinline
-    @loadeddata="onVideoDataLoad"
+    @playing="onPlaying"
+    @pause="onPaused"
   />
 </template>
 

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 }) => {