fix #99

pycs/projects/Project.py

@@ -63,6 +63,10 @@ class Project(ObservableDict):
                 self.unmanaged_files_keys.append(uuid)
                 self.unmanaged_files[uuid] = next
 
+            length = len(self.unmanaged_files_keys)
+            for key in self.unmanaged_files:
+                self.unmanaged_files[key].length(length)
+
         # initialize super
         super().__init__(obj, parent)
 

pycs/projects/UnmanagedImageFile.py

@@ -19,6 +19,9 @@ class UnmanagedImageFile(ImageFile):
     def next(self, value):
         self['next'] = value['id']
 
+    def length(self, value):
+        self['length'] = value
+
     @property
     def data_path(self):
         return join('projects', self.project['id'], 'data', self['id'] + '.json')

pycs/projects/UnmanagedVideoFile.py

@@ -19,6 +19,9 @@ class UnmanagedVideoFile(VideoFile):
     def next(self, value):
         self['next'] = value['id']
 
+    def length(self, value):
+        self['length'] = value
+
     @property
     def data_path(self):
         return join('projects', self.project['id'], 'data', self['id'] + '.json')

webui/src/components/media/annotated-media-view.vue

@@ -22,7 +22,9 @@
                      @filter="filter"
                      :extremeClicking="extremeClicking"
                      @extremeClicking="extremeClicking = $event"
-                     @update="update"/>
+                     @update="update"
+                     :current="current"
+                     @jump="current = $event"/>
     </div>
 
     <div class="selector" v-if="showMediaSelector && !currentProject.unmanaged">
@@ -138,4 +140,4 @@ export default {
   white-space: nowrap;
   background-color: rgba(0, 0, 0, 0.5);
 }
-</style>
+</style>

webui/src/components/media/media-control.vue

@@ -83,6 +83,13 @@
                   @click.stop="$emit('extremeClicking', false)">
       <img alt="label" src="@/assets/icons/check.svg">
     </button-input>
+
+    <div class="current">
+      <text-input v-if="displayedCurrent"
+                  v-model="displayedCurrent"
+                  @change="currentChange"/>
+      / {{ data.length }}
+    </div>
   </div>
 
 </template>
@@ -90,15 +97,28 @@
 <script>
 import ButtonInput from "@/components/base/button-input";
 import ButtonRow from "@/components/base/button-row";
+import TextInput from "@/components/base/text-input";
 
 export default {
   name: "media-control",
-  components: {ButtonRow, ButtonInput},
-  props: ['hasPrevious', 'hasNext', 'control', 'data', 'project', 'socket', 'filter', 'extremeClicking'],
+  components: {TextInput, ButtonRow, ButtonInput},
+  props: ['hasPrevious', 'hasNext', 'control', 'data', 'project', 'socket', 'filter', 'extremeClicking', 'current'],
   data: function () {
     return {
       showLabelSelection: false,
-      showFilterSelection: false
+      showFilterSelection: false,
+      displayedCurrent: false
+    }
+  },
+  watch: {
+    current: {
+      immediate: true,
+      handler: function (newVal) {
+        if (this.project.unmanaged)
+          this.displayedCurrent = newVal + 1;
+        else
+          this.displayedCurrent = false;
+      }
     }
   },
   computed: {
@@ -149,6 +169,14 @@ export default {
       });
 
       this.$emit('update', true);
+    },
+    currentChange: function (value) {
+      if (value < 1)
+        this.displayedCurrent = 1;
+      if (value > this.data.length)
+        this.displayedCurrent = this.data.length;
+
+      this.$emit('jump', this.displayedCurrent - 1);
     }
   }
 }
@@ -181,4 +209,13 @@ select {
   width: 100%;
   height: 100%;
 }
+
+.current {
+  display: flex;
+  color: whitesmoke;
+}
+
+.current > .text-input {
+  width: 2.5rem;
+}
 </style>