From d2ec70c3237844333b914c2d26b88f4afc9e0875 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 15 Aug 2018 11:20:40 +0300
Subject: added pointer cursor for nsfw placeholder. fixed nsfw videos
 requiring double-click

---
 src/components/attachment/attachment.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

(limited to 'src/components/attachment/attachment.vue')

diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index c48fb16b..66110de4 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -2,7 +2,7 @@
   <div v-if="size==='hide'">
     <a class="placeholder" v-if="type !== 'html'" target="_blank" :href="attachment.url">[{{nsfw ? "NSFW/" : ""}}{{type.toUpperCase()}}]</a>
   </div>
-  <div v-else class="attachment" :class="{[type]: true, loading, 'small-attachment': isSmall, 'fullwidth': fullwidth}" v-show="!isEmpty">
+  <div v-else class="attachment" :class="{[type]: true, loading, 'small-attachment': isSmall, 'fullwidth': fullwidth, 'nsfw-placeholder': hidden}" v-show="!isEmpty">
     <a class="image-attachment" v-if="hidden" @click.prevent="toggleHidden()">
       <img :key="nsfwImage" :src="nsfwImage"/>
     </a>
@@ -50,6 +50,10 @@
     margin-right: 0.5em;
   }
 
+  .nsfw-placeholder {
+    cursor: pointer;
+  }
+
   .small-attachment {
     &.image, &.video {
       max-width: 35%;
-- 
cgit v1.2.3-70-g09d2


From 0e5b74e3dd798703cf842257e528c85bc7c00121 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 15 Aug 2018 12:51:21 +0300
Subject: Configurable video looping, option to not to loop silent videos.
 Updated localization strings.

---
 src/components/attachment/attachment.js  | 18 ++++++++++++++++++
 src/components/attachment/attachment.vue |  2 +-
 src/components/settings/settings.js      | 20 ++++++++++++++++++--
 src/components/settings/settings.vue     | 21 ++++++++++++++++++++-
 src/i18n/messages.js                     | 13 ++++++++++---
 src/modules/config.js                    |  3 +++
 6 files changed, 70 insertions(+), 7 deletions(-)

(limited to 'src/components/attachment/attachment.vue')

diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index 775207c0..cc19714d 100644
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@@ -13,6 +13,7 @@ const Attachment = {
     return {
       nsfwImage,
       hideNsfwLocal: this.$store.state.config.hideNsfw,
+      loopVideo: this.$store.state.config.loopVideo,
       showHidden: false,
       loading: false,
       img: this.type === 'image' && document.createElement('img')
@@ -59,6 +60,23 @@ const Attachment = {
       } else {
         this.showHidden = !this.showHidden
       }
+    },
+    onVideoDataLoad (e) {
+      if (typeof e.srcElement.webkitAudioDecodedByteCount !== 'undefined') {
+        // non-zero if video has audio track
+        if (e.srcElement.webkitAudioDecodedByteCount > 0) {
+          this.loopVideo = this.loopVideo && !this.$store.state.config.loopVideoSilentOnly
+        }
+      } else if (typeof e.srcElement.mozHasAudio !== 'undefined') {
+        // true if video has audio track
+        if (e.srcElement.mozHasAudio) {
+          this.loopVideo = this.loopVideo && !this.$store.state.config.loopVideoSilentOnly
+        }
+      } else if (typeof e.srcElement.audioTracks !== 'undefined') {
+        if (e.srcElement.audioTracks.length > 0) {
+          this.loopVideo = this.loopVideo && !this.$store.state.config.loopVideoSilentOnly
+        }
+      }
     }
   }
 }
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index 66110de4..8342f34b 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -14,7 +14,7 @@
       <StillImage :class="{'small': isSmall}" referrerpolicy="no-referrer" :mimetype="attachment.mimetype" :src="attachment.large_thumb_url || attachment.url"/>
     </a>
 
-    <video :class="{'small': isSmall}" v-if="type === 'video' && !hidden" :src="attachment.url" controls loop></video>
+    <video :class="{'small': isSmall}" v-if="type === 'video' && !hidden" @loadeddata="onVideoDataLoad" :src="attachment.url" controls :loop="loopVideo"></video>
 
     <audio v-if="type === 'audio'" :src="attachment.url" controls></audio>
 
diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js
index e5f4b001..169b9080 100644
--- a/src/components/settings/settings.js
+++ b/src/components/settings/settings.js
@@ -1,3 +1,4 @@
+/* eslint-env browser */
 import StyleSwitcher from '../style_switcher/style_switcher.vue'
 import { filter, trim } from 'lodash'
 
@@ -7,12 +8,21 @@ const settings = {
       hideAttachmentsLocal: this.$store.state.config.hideAttachments,
       hideAttachmentsInConvLocal: this.$store.state.config.hideAttachmentsInConv,
       hideNsfwLocal: this.$store.state.config.hideNsfw,
+      loopVideoLocal: this.$store.state.config.loopVideo,
+      loopVideoSilentOnlyLocal: this.$store.state.config.loopVideoSilentOnly,
       muteWordsString: this.$store.state.config.muteWords.join('\n'),
       autoLoadLocal: this.$store.state.config.autoLoad,
       streamingLocal: this.$store.state.config.streaming,
-      pauseOnUnfocused: this.$store.state.config.pauseOnUnfocused,
+      pauseOnUnfocusedLocal: this.$store.state.config.pauseOnUnfocused,
       hoverPreviewLocal: this.$store.state.config.hoverPreview,
-      stopGifs: this.$store.state.config.stopGifs
+      stopGifs: this.$store.state.config.stopGifs,
+      loopSilentAvailable:
+        // Firefox
+        Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'mozHasAudio') ||
+        // Chrome-likes
+        Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'webkitAudioDecodedByteCount') ||
+        // Future spec, still not supported in Nightly 63 as of 08/2018
+        Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'audioTracks')
     }
   },
   components: {
@@ -33,6 +43,12 @@ const settings = {
     hideNsfwLocal (value) {
       this.$store.dispatch('setOption', { name: 'hideNsfw', value })
     },
+    loopVideoLocal (value) {
+      this.$store.dispatch('setOption', { name: 'loopVideo', value })
+    },
+    loopVideoSilentOnlyLocal (value) {
+      this.$store.dispatch('setOption', { name: 'loopVideoSilentOnly', value })
+    },
     autoLoadLocal (value) {
       this.$store.dispatch('setOption', { name: 'autoLoad', value })
     },
diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
index d6dbab27..d6aec2ff 100644
--- a/src/components/settings/settings.vue
+++ b/src/components/settings/settings.vue
@@ -22,7 +22,7 @@
           <ul class="setting-list suboptions" :class="[{disabled: !streamingLocal}]">
             <li>
               <input :disabled="!streamingLocal" type="checkbox" id="pauseOnUnfocused" v-model="pauseOnUnfocusedLocal">
-              <label for="pauseOnUnfocused">{{$t('settings.pauseOnUnfocused')}}</label>
+              <label for="pauseOnUnfocused">{{$t('settings.pause_on_unfocused')}}</label>
             </li>
           </ul>
         </li>
@@ -55,6 +55,19 @@
           <input type="checkbox" id="stopGifs" v-model="stopGifs">
           <label for="stopGifs">{{$t('settings.stop_gifs')}}</label>
         </li>
+        <li>
+          <input type="checkbox" id="loopVideo" v-model="loopVideoLocal">
+          <label for="loopVideo">{{$t('settings.loop_video')}}</label>
+          <ul class="setting-list suboptions" :class="[{disabled: !streamingLocal}]">
+            <li>
+              <input :disabled="!loopVideoLocal || !loopSilentAvailable" type="checkbox" id="loopVideoSilentOnly" v-model="loopVideoSilentOnlyLocal">
+              <label for="loopVideoSilentOnly">{{$t('settings.loop_video_silent_only')}}</label>
+              <div v-if="!loopSilentAvailable" class="unavailable">
+                <i class="icon-globe"/>! {{$t('settings.limited_availability')}}
+              </div>
+            </li>
+          </ul>
+        </li>
       </ul>
     </div>
   </div>
@@ -78,6 +91,12 @@
     height: 100px;
   }
 
+  .unavailable,
+  .unavailable i {
+    color: var(--cRed, $fallback--cRed);
+    color: $fallback--cRed;
+  }
+
   .old-avatar {
     width: 128px;
     border-radius: $fallback--avatarRadius;
diff --git a/src/i18n/messages.js b/src/i18n/messages.js
index d672fc41..3c11af8c 100644
--- a/src/i18n/messages.js
+++ b/src/i18n/messages.js
@@ -314,7 +314,9 @@ const en = {
     stop_gifs: 'Play-on-hover GIFs',
     autoload: 'Enable automatic loading when scrolled to the bottom',
     streaming: 'Enable automatic streaming of new posts when scrolled to the top',
-    pauseOnUnfocused: 'Pause streaming when tab is not focused',
+    pause_on_unfocused: 'Pause streaming when tab is not focused',
+    loop_video: 'Loop videos',
+    loop_video_silent_only: 'Loop only videos without sound (i.e. Mastodon\'s "gifs")',
     reply_link_preview: 'Enable reply-link preview on mouse hover',
     follow_import: 'Follow import',
     import_followers_from_a_csv_file: 'Import follows from a csv file',
@@ -333,7 +335,8 @@ const en = {
     confirm_new_password: 'Confirm new password',
     changed_password: 'Password changed successfully!',
     change_password_error: 'There was an issue changing your password.',
-    lock_account_description: 'Restrict your account to approved followers only'
+    lock_account_description: 'Restrict your account to approved followers only',
+    limited_availability: 'Unavailable in your browser'
   },
   notifications: {
     notifications: 'Notifications',
@@ -1606,6 +1609,9 @@ const ru = {
     nsfw_clickthrough: 'Включить скрытие NSFW вложений',
     autoload: 'Включить автоматическую загрузку при прокрутке вниз',
     streaming: 'Включить автоматическую загрузку новых сообщений при прокрутке вверх',
+    pause_on_unfocused: 'Приостановить загрузку когда вкладка не в фокусе',
+    loop_video: 'Зациливать видео',
+    loop_video_silent_only: 'Зацикливать только беззвучные видео (т.е. "гифки" с Mastodon)',
     reply_link_preview: 'Включить предварительный просмотр ответа при наведении мыши',
     follow_import: 'Импортировать читаемых',
     import_followers_from_a_csv_file: 'Импортировать читаемых из файла .csv',
@@ -1623,7 +1629,8 @@ const ru = {
     new_password: 'Новый пароль',
     confirm_new_password: 'Подтверждение нового пароля',
     changed_password: 'Пароль изменён успешно.',
-    change_password_error: 'Произошла ошибка при попытке изменить пароль.'
+    change_password_error: 'Произошла ошибка при попытке изменить пароль.',
+    limited_availability: 'Не доступно в вашем браузере'
   },
   notifications: {
     notifications: 'Уведомления',
diff --git a/src/modules/config.js b/src/modules/config.js
index 2b50655b..26930e1d 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -7,9 +7,12 @@ const defaultState = {
   hideAttachments: false,
   hideAttachmentsInConv: false,
   hideNsfw: true,
+  loopVideo: true,
+  loopVideoSilentOnly: true,
   autoLoad: true,
   streaming: false,
   hoverPreview: true,
+  pauseOnUnfocused: true,
   muteWords: [],
   highlight: {}
 }
-- 
cgit v1.2.3-70-g09d2


From 627e2270769826da337c1b1a4d3ec8467404ed5f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 15 Aug 2018 14:53:40 +0300
Subject: fixes hella ton of annoyances with file upload display

---
 src/components/attachment/attachment.vue           |  1 -
 .../post_status_form/post_status_form.vue          | 49 +++++++++++++++++++---
 2 files changed, 43 insertions(+), 7 deletions(-)

(limited to 'src/components/attachment/attachment.vue')

diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index 8342f34b..d01c8566 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -38,7 +38,6 @@
 .attachments {
   display: flex;
   flex-wrap: wrap;
-  margin-right: -0.7em;
 
   .attachment.media-upload-container {
     flex: 0 0 auto;
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 7aa0e7c4..ce078fe1 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -65,12 +65,14 @@
         <i class="icon-cancel" @click="clearError"></i>
       </div>
       <div class="attachments">
-        <div class="media-upload-container attachment" v-for="file in newStatus.files">
+        <div class="media-upload-wrapper" v-for="file in newStatus.files">
           <i class="fa icon-cancel" @click="removeMediaFile(file)"></i>
-          <img class="thumbnail media-upload" :src="file.image" v-if="type(file) === 'image'"></img>
-          <video v-if="type(file) === 'video'" :src="file.image" controls></video>
-          <audio v-if="type(file) === 'audio'" :src="file.image" controls></audio>
-          <a v-if="type(file) === 'unknown'" :href="file.image">{{file.url}}</a>
+          <div class="media-upload-container attachment">
+            <img class="thumbnail media-upload" :src="file.image" v-if="type(file) === 'image'"></img>
+            <video v-if="type(file) === 'video'" :src="file.image" controls></video>
+            <audio v-if="type(file) === 'audio'" :src="file.image" controls></audio>
+            <a v-if="type(file) === 'unknown'" :href="file.image">{{file.url}}</a>
+          </div>
         </div>
       </div>
     </form>
@@ -139,14 +141,49 @@
     text-align: center;
   }
 
+  .media-upload-wrapper {
+    flex: 0 0 auto;
+    max-width: 100%;
+    min-width: 50px;
+    margin-right: .2em;
+    margin-bottom: .5em;
+
+    .icon-cancel {
+      display: inline-block;
+      position: static;
+      margin: 0;
+      padding-bottom: 0;
+      margin-left: $fallback--attachmentRadius;
+      margin-left: var(--attachmentRadius, $fallback--attachmentRadius);
+      background-color: $fallback--btn;
+      background-color: var(--btn, $fallback--btn);
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+
   .attachments {
     padding: 0 0.5em;
 
     .attachment {
+      margin: 0;
       position: relative;
+      flex: 0 0 auto;
       border: 1px solid $fallback--border;
       border: 1px solid var(--border, $fallback--border);
-      margin: 0.5em 0.8em 0.2em 0;
+      text-align: center;
+
+      audio {
+        min-width: 300px;
+        flex: 1 0 auto;
+      }
+
+      a {
+        display: block;
+        text-align: left;
+        line-height: 1.2;
+        padding: .5em;
+      }
     }
 
     i {
-- 
cgit v1.2.3-70-g09d2

