Various fixes and improvements

src/components/pages/OpenProductions.vue

@@ -1,5 +1,50 @@
 <template>
   <div class="open-productions page">
+    <div class="social-contributions flexrow" v-if="isContributions">
+      <img
+        class="flexrow-item kitsu-with-body"
+        src="../../assets/illustrations/kitsu-band.png"
+      />
+      <div class="filler">
+        <span class="close-contributions" @click="hideContributions">
+          <x-icon size="0.9x" />
+        </span>
+        <p>
+          {{ $t('intro.main') }}
+        </p>
+        <ul>
+          <li>
+            {{ $t('intro.first') }}
+            <a href="https://github.com/cgwire/kitsu">Github</a>
+          </li>
+          <li>
+            {{ $t('intro.second') }}
+            <a href="https://twitter.com/cgwirekitsu">X</a>
+            {{ $t('main.or') }}
+            <a href="https://www.linkedin.com/company/cgwire/">Linkedin</a>
+          </li>
+          <li>
+            {{ $t('intro.third') }}
+            <a href="https://discord.gg/VbCxtKN">Discord</a>
+          </li>
+          <li>
+            {{ $t('intro.four') }}
+            <a href="https://cgwire.canny.io">Canny</a>
+          </li>
+          <li>
+            {{ $t('intro.five') }}
+            <a href="https://liberapay.com/CGWire/donate">Liberapay</a>
+          </li>
+          <li>
+            {{ $t('intro.six') }}
+            <a href="https://cg-wire.com/pricing">offers</a>
+          </li>
+        </ul>
+        <p>
+          {{ $t('intro.seven') }}
+        </p>
+      </div>
+    </div>
     <div class="has-text-centered" v-if="isOpenProductionsLoading">
       <spinner />
     </div>
@@ -108,7 +153,9 @@
 <script>
 import { mapGetters, mapActions } from 'vuex'
 
+import { XIcon } from 'vue-feather-icons'
 import { buildNameIndex } from '@/lib/indexing'
+import preferences from '@/lib/preferences'
 
 import colors from '@/lib/colors'
 import EditProductionModal from '@/components/modals/EditProductionModal'
@@ -121,11 +168,13 @@ export default {
   components: {
     EditProductionModal,
     SearchField,
-    Spinner
+    Spinner,
+    XIcon
   },
 
   data() {
     return {
+      isContributions: false,
       filteredProductions: [],
       search: '',
       errors: {
@@ -144,6 +193,9 @@ export default {
     this.$refs['search-field']?.focus()
     this.filteredProductions = this.openProductions
     this.productionIndex = buildNameIndex(this.openProductions)
+    this.isContributions =
+      preferences.getPreference('open-productions:contributions') === 'true'
+    this.isContributions = false
   },
 
   computed: {
@@ -230,6 +282,11 @@ export default {
       } else {
         this.filteredProductions = this.productionIndex[search]
       }
+    },
+
+    hideContributions() {
+      this.isContributions = false
+      preferences.setPreference('open-productions:contributions', false)
     }
   },
 
@@ -401,6 +458,44 @@ a.secondary:hover {
   padding-bottom: 3em;
 }
 
+.social-contributions {
+  background: $white;
+  border: 3px solid $purple;
+  box-shadow: 0 0 3px 3px #eee;
+  border-radius: 1em;
+  color: $dark-purple;
+  font-size: 1.1rem;
+  max-width: 800px;
+  margin-bottom: 0em;
+  margin-top: 2em;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 2em;
+  position: relative;
+
+  a {
+    color: $green;
+  }
+
+  ul {
+    margin-bottom: 1em;
+    margin-top: 1em;
+  }
+
+  .close-contributions {
+    cursor: pointer;
+    position: absolute;
+    right: 30px;
+    top: 15px;
+    width: 2px;
+  }
+
+  .kitsu-with-body {
+    margin-right: 2em;
+    width: 320px;
+  }
+}
+
 .big-button {
   background: $white;
   border: 1px solid $green;

src/components/previews/PreviewPlayer.vue

@@ -1463,7 +1463,9 @@ export default {
     getAnnotation(time) {
       if (this.isMovie) {
         time = roundToFrame(time, this.fps)
-        return this.annotations.find(annotation => annotation.time === time)
+        return this.annotations.find(annotation => {
+          return roundToFrame(annotation.time, this.fps) === time
+        })
       } else if (this.isPicture) {
         return this.annotations.find(annotation => annotation.time === 0)
       }
@@ -1480,7 +1482,8 @@ export default {
     saveAnnotations() {
       let currentTime = 0
       if (this.isMovie) {
-        currentTime = this.currentTimeRaw
+        currentTime = this.currentFrame * this.frameDuration
+        currentTime = roundToFrame(currentTime, this.fps)
       }
       const annotation = this.getAnnotation(currentTime)
       const annotations = this.getNewAnnotations(currentTime, annotation)
@@ -1496,7 +1499,7 @@ export default {
       let currentTime = 0
       if (!annotation) {
         if (this.isMovie) {
-          currentTime = this.currentTimeRaw
+          currentTime = this.currentFrame * this.frameDuration
         }
         annotation = this.getAnnotation(currentTime)
         if (!annotation) {

src/components/sides/TaskInfo.vue

@@ -1237,9 +1237,9 @@ export default {
     onSetCurrentFrameAsThumbnail(isUseCurrentFrame) {
       if (this.$refs['preview-player']) {
         this.loading.setFrameThumbnail = true
-        let frame = undefined
-        if (isUseCurrentFrame && this.$refs['preview-player'].isMovie) {
-          frame = parseInt(this.$refs['preview-player'].currentFrame)
+        let frame = null
+        if (isUseCurrentFrame) {
+          frame = this.currentFrameRaw
         }
         return this.setCurrentPreviewAsEntityThumbnail(frame)
       }

src/components/tops/Topbar.vue

@@ -137,7 +137,7 @@
     <nav
       class="user-menu"
       :style="{
-        top: isUserMenuHidden ? '-480px' : '60px'
+        top: isUserMenuHidden ? '-500px' : '60px'
       }"
     >
       <ul>
@@ -180,6 +180,12 @@
         <a href="https://discord.gg/VbCxtKN" target="_blank">
           <li>Discord</li>
         </a>
+        <a href="https://linkedin.com/company/cgwire/" target="_blank">
+          <li>Linkedin</li>
+        </a>
+        <a href="https://twitter.com/cgwirekitsu" target="_blank">
+          <li>X</li>
+        </a>
         <a href="https://cgwire.canny.io" target="_blank">
           <li>Roadmap / Feedback</li>
         </a>

src/locales/en.js

@@ -325,6 +325,17 @@ export default {
     shortcuts: 'Shortcuts'
   },
 
+  intro: {
+    main: 'Welcome to Kitsu! To make our project thrives, we need your support. To help us, we propose you simple contributions:',
+    first: 'Star our repository on ',
+    second: 'Follow us on ',
+    third: 'Join our',
+    four: 'You can suggest new features on ',
+    five: 'Donate to our ',
+    six: 'Have a look at our cloud and on-premise ',
+    seven: 'Finally, you can help us by sharing Kitsu with your friends and colleagues. The more we are, the more we can improve Kitsu.'
+  },
+
   login: {
     back_to_login: 'Go back to login page',
     choose_totp: 'Enter two-factor authentication code via TOTP',