Improve avatar loading

.eslintrc.js

@@ -20,8 +20,10 @@ module.exports = {
         destructuring: 'all'
       }
     ],
+    'vue/component-name-in-template-casing': ['error', 'kebab-case'],
     'vue/multi-word-component-names': 'off',
-    'vue/no-use-v-if-with-v-for': 'off'
+    'vue/no-use-v-if-with-v-for': 'off',
+    'vue/prop-name-casing': ['error', 'camelCase']
   },
   globals: {
     Canny: true

package.json

@@ -45,7 +45,6 @@
     "vue-drag-drop": "1.1.4",
     "vue-feather-icons": "5.1.0",
     "vue-i18n": "8.28.2",
-    "vue-lazyload": "1.3.5",
     "vue-meta": "2.4.0",
     "vue-router": "3.6.5",
     "vue-scroll": "2.1.13",

src/components/cells/TimeSliderCell.vue

@@ -59,7 +59,7 @@ export default {
   },
 
   props: {
-    'task-id': {
+    taskId: {
       type: String,
       default: ''
     },

src/components/cells/ValidationCell.vue

@@ -17,7 +17,7 @@
     @click="onClick"
   >
     <div class="wrapper" v-if="!minimized">
-      <span v-if="task">
+      <template v-if="task">
         <span
           class="tag"
           :title="taskStatus.name"
@@ -59,31 +59,17 @@
         >
           &nbsp; &nbsp; &nbsp; &nbsp;
         </span>
-      </span>
-      <span> </span>
+      </template>
       <span
         class="avatar has-text-centered"
-        :title="personMap.get(personId).full_name"
-        :style="{
-          background: personMap.get(personId).color,
-          width: '20px',
-          height: '20px',
-          'font-size': '10px'
-        }"
-        :key="'avatar-' + personId"
-        v-for="personId in assignees"
+        :title="person.full_name"
+        :style="{ background: person.color }"
+        :key="`avatar-${person.id}`"
+        v-for="person in assignees"
         v-if="isAssignees && !isCurrentUserClient && !disabled"
       >
-        <img
-          v-lazy="avatarPath(personId)"
-          :key="avatarKey(personId)"
-          width="20"
-          height="20"
-          v-if="personMap.get(personId).has_avatar"
-        />
-        <span v-else>
-          {{ personMap.get(personId).initials }}
-        </span>
+        <img loading="lazy" :src="person.avatarPath" v-if="person.has_avatar" />
+        <template v-else>{{ person.initials }}</template>
       </span>
       <span class="subscribed" v-if="task && task.is_subscribed">
         <eye-icon size="0.8x" />
@@ -216,11 +202,9 @@ export default {
     ]),
 
     assignees() {
-      if (this.task) {
-        return this.task.assignees
-      } else {
-        return []
-      }
+      return (
+        this.task?.assignees.map(personId => this.personMap.get(personId)) || []
+      )
     },
 
     backgroundColor() {
@@ -346,24 +330,6 @@ export default {
       }
     },
 
-    avatarPath(personId) {
-      const person = this.personMap.get(personId)
-      if (person) {
-        return person.avatarPath + '?unique=' + person.uniqueHash
-      } else {
-        return ''
-      }
-    },
-
-    avatarKey(personId) {
-      const person = this.personMap.get(personId)
-      if (person) {
-        return person.id + '-' + person.uniqueHash
-      } else {
-        return ''
-      }
-    },
-
     changeStyleBasedOnSelected() {
       if (this.selected) {
         const background = this.isDarkTheme ? '#5E60BA' : '#BFC1FF'
@@ -445,10 +411,9 @@ span.person-avatar:nth-child(2) {
   align-items: center;
   justify-content: center;
   margin-right: 2px;
-}
-
-.avatar span {
-  flex: 1;
+  width: 20px;
+  height: 20px;
+  font-size: 10px;
 }
 
 .avatar img {

src/components/modals/EditCommentModal.vue

@@ -13,7 +13,7 @@
           {{ $t('comments.edit_title') }}
         </h1>
 
-        <form v-on:submit.prevent>
+        <form @submit.prevent>
           <combo-box-status
             :label="$t('task_status.title')"
             :task-status-list="taskStatusForCurrentUser"
@@ -31,7 +31,6 @@
                     class="flexrow-item"
                     :person="team.item"
                     :size="20"
-                    :no-cache="true"
                   />
                   <span class="flexrow-item">
                     {{ team.item.full_name }}

src/components/pages/Episode.vue

@@ -146,7 +146,6 @@
                       :empty-width="103"
                       :empty-height="103"
                       :with-link="false"
-                      :no-cache="true"
                     />
                     <div class="break-word">
                       {{ asset.asset_name }}

src/components/pages/Logs.vue

@@ -14,9 +14,8 @@
         </li>
       </ul>
     </div>
-
-    <Events v-if="isActiveTab('events')" />
-    <PreviewFiles v-if="isActiveTab('preview_files')" />
+    <events v-if="isActiveTab('events')" />
+    <preview-files v-if="isActiveTab('preview_files')" />
   </div>
 </template>
 

src/components/pages/MyChecks.vue

@@ -64,7 +64,7 @@
             {{ nbTasksToCheck }} tasks to check
           </h1>
           <div class="filler"></div>
-          <ButtonSimple
+          <button-simple
             class="flexrow-item"
             @click="isPlaylist = true"
             text="Build playlist from list"

src/components/pages/People.vue

@@ -285,13 +285,8 @@ export default {
     },
 
     deleteText() {
-      const person = this.personToDelete
-      if (person !== undefined) {
-        const personName = `${person.first_name} ${person.last_name}`
-        return this.$t('people.delete_text', { personName })
-      } else {
-        return ''
-      }
+      const personName = this.personToDelete?.full_name
+      return personName ? this.$t('people.delete_text', { personName }) : ''
     },
 
     filteredPeople() {

src/components/pages/ProductionSettings.vue

@@ -41,7 +41,7 @@
       </div>
 
       <div class="tab" v-show="isActiveTab('brief')">
-        <ProductionBrief />
+        <production-brief />
       </div>
 
       <div class="tab" v-show="isActiveTab('assetTypes')">

src/components/pages/Profile.vue

@@ -4,8 +4,7 @@
       <div class="has-text-centered profile-header">
         <div class="profile-header-content has-text-centered">
           <people-avatar
-            ref="avatar"
-            :no-cache="true"
+            :is-lazy="false"
             :person="this.user"
             :size="150"
             :font-size="60"
@@ -1071,14 +1070,15 @@ export default {
     uploadAvatarFile() {
       this.changeAvatar.isLoading = true
       this.changeAvatar.isError = false
-      this.uploadAvatar(err => {
-        if (err) {
+      this.uploadAvatar()
+        .catch(err => {
+          console.error(err)
           this.changeAvatar.isError = true
-        }
-        this.changeAvatar.isLoading = false
-        this.$refs.avatar.reloadAvatar()
-        this.hideAvatarModal()
-      })
+        })
+        .finally(() => {
+          this.changeAvatar.isLoading = false
+          this.hideAvatarModal()
+        })
     },
 
     hideAvatarModal() {

src/components/pages/Sequence.vue

@@ -148,7 +148,6 @@
                       :empty-width="103"
                       :empty-height="103"
                       :with-link="false"
-                      :no-cache="true"
                     />
                     <div class="break-word">
                       {{ asset.asset_name }}

src/components/pages/Shot.vue

@@ -229,7 +229,6 @@
                       :empty-width="103"
                       :empty-height="103"
                       :with-link="false"
-                      :no-cache="true"
                     />
                     <div class="break-word">
                       {{ asset.asset_name }}

src/components/pages/TaskType.vue

@@ -1139,7 +1139,6 @@ export default {
           avatar: true,
           has_avatar: person.has_avatar,
           avatarPath: person.avatarPath,
-          uniqueHash: person.uniqueHash,
           initials: person.initials,
           id: person.id,
           name: person.full_name,

src/components/pages/breakdown/AssetBlock.vue

@@ -16,12 +16,8 @@
       <div class="asset-add" @click="removeOneAsset" v-if="!readOnly">- 1</div>
       <div class="asset-picture" v-if="asset.preview_file_id">
         <img
-          v-lazy="
-            '/api/pictures/thumbnails-square/preview-files/' +
-            asset.preview_file_id +
-            '.png'
-          "
-          alt=""
+          loading="lazy"
+          :src="`/api/pictures/thumbnails-square/preview-files/${asset.preview_file_id}.png`"
         />
         <span class="nb-occurences" v-if="nbOccurences > 1">
           {{ nbOccurences }}

src/components/pages/breakdown/AvailableAssetBlock.vue

@@ -13,12 +13,8 @@
     <div class="asset-add-10" @click="addTenAssets">+ 10</div>
     <div class="asset-picture" v-if="asset.preview_file_id.length > 0">
       <img
-        v-lazy="
-          '/api/pictures/thumbnails-square/preview-files/' +
-          asset.preview_file_id +
-          '.png'
-        "
-        alt=""
+        loading="lazy"
+        :src="`/api/pictures/thumbnails-square/preview-files/${asset.preview_file_id}.png`"
       />
     </div>
     <div class="asset-picture" v-else>

src/components/pages/playlists/RawVideoPlayer.vue

@@ -1,7 +1,7 @@
 <template>
   <div ref="container" class="video-wrapper filler flexrow-item">
     <div class="video-loader" v-show="isLoading">
-      <Spinner class="mt2" style="color: white" />
+      <spinner class="mt2" style="color: white" />
     </div>
     <video
       ref="player1"

src/components/pages/schedule/Schedule.vue

@@ -61,7 +61,6 @@
                   :is-link="false"
                   :font-size="14"
                   :size="28"
-                  :no-cache="true"
                   v-else
                 />
               </span>

src/components/sides/PeopleQuotaInfo.vue

@@ -7,7 +7,7 @@
     </div>
 
     <div class="flexrow">
-      <people-avatar class="flexrow-item" :person="person" :no-cache="true" />
+      <people-avatar class="flexrow-item" :person="person" :is-lazy="false" />
       <page-title class="flexrow-item" :text="person.full_name" />
     </div>
     <div class="info-date" v-if="isMonthInfo">{{ monthString }} {{ year }}</div>

src/components/sides/PeopleTimesheetInfo.vue

@@ -7,7 +7,7 @@
     </div>
 
     <div class="flexrow">
-      <people-avatar class="flexrow-item" :person="person" :no-cache="true" />
+      <people-avatar class="flexrow-item" :person="person" :is-lazy="false" />
       <page-title class="flexrow-item" :text="person.full_name" />
     </div>
 

src/components/tops/GlobalSearchField.vue

@@ -268,10 +268,9 @@ export default {
         this.searchData({ query: this.searchQuery })
           .then(results => {
             this.assets = results.assets
-            results.persons.forEach(person => {
-              peopleStore.helpers.addAdditionalInformation(person)
-            })
-            this.persons = results.persons
+            this.persons = results.persons.map(
+              peopleStore.helpers.addAdditionalInformation
+            )
             this.shots = results.shots
           })
           .catch(console.error)

src/components/tops/Topbar.vue

@@ -3,7 +3,7 @@
     <div
       id="c-mask-user-menu"
       @click="toggleUserMenu()"
-      v-bind:class="{ 'is-active': !isUserMenuHidden }"
+      :class="{ 'is-active': !isUserMenuHidden }"
     ></div>
 
     <nav class="nav">
@@ -121,11 +121,10 @@
           @click="toggleUserMenu"
         >
           <people-avatar
-            ref="avatar"
             class="avatar"
-            :no-cache="true"
-            :person="user"
+            :is-lazy="false"
             :is-link="false"
+            :person="user"
           />
         </div>
       </div>
@@ -809,12 +808,6 @@ export default {
         ) {
           this.incrementNotificationCounter()
         }
-      },
-
-      'person:update'(eventData) {
-        if (this.user.id === eventData.person_id) {
-          this.$refs.avatar.reloadAvatar()
-        }
       }
     }
   }