thecacophonyproject / cacophony-browse Goto Github PK

The "By Who" column should user usernames:

Identified in #62

The logo which should appear at the top left is missing at browse-test-beta.cacophony.org.nz. This is probably related to some recent webpack changes.

This could be confusing.

Unknown custom element: <font-awesome-layers> - did you register the component correctly? 
found in
---> <PrevNext> at src\components\Video\PrevNext.vue
       <RecordingView> at src\views\RecordingView.vue
         <App> at src\App.vue
           <Root>

#69 @jimmykl

So I realised this when I was reviewing the last PR. The app booted up fine and I could navigate to the Groups page, but it never went beyond 'Loading...' This was because I hadn't updated the app.config.js file (which is an easy fix no trouble)

However, it made me realise that if there is a problem with the API or the user's internet connection, they will still be logged in (because the data is in local storage) but the app will not work. I'm sure there is a way that this is usually dealt with, but I don't know what it is! Perhaps it is to implement better error handling every time the API is accessed, or perhaps it is part of the router authentication check...?? @adbs1

As per the old web UI

There are continual requests like this:

:authority: api-test.cacophony.org.nz
:method: GET
:path: /api/v1/devices
:scheme: https
accept: */*
accept-encoding: gzip, deflate, br
accept-language: en-GB,en-US;q=0.9,en;q=0.8
authorization: JWT ...
origin: http://localhost:8080
referer: http://localhost:8080/recordings
user-agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/68.0.3440.106 Chrome/68.0.3440.106 Safari/537.36

With empty responses like this:

{"devices":{"count":0,"rows":[]},"success":true,"messages":["Completed get devices query."]}

As reported by David Blake. This happens when he clicks a quick tag button:

This is Chrome on Windows.

• Add ability to search for group of devices
• Fix bug where pagination number shows above menu (see screenshot below)
• Add loading wheel (or similar) when query is running
• Fix false positive search

Currently the integer user id is used.

For example, a notification that a query has completed isn't all that useful or necessary.

{requiresAuth: false} is currently the default but should be the exception, change the following accordingly:

} else if(to.matched.some(record => record.meta.requiresAuth)) {
return next({
path: '/login',
params: { nextUrl: to.fullPath }
});
}

• The quick tag buttons are a bit messed up.
• The "Save comment" button is truncated

When on the recordings screen the favicons are being loaded using a relative path which means the wrong URL is being used. For example, https://browse.cacophony.org.nz/recordings/favicon-32x32.png should be https://browse.cacophony.org.nz/favicon-32x32.png

This is probably a trivial fix.

As per previous UI

.. replace all usages of the JSON success property with the http status code.

They shouldn't push the rest of the page down.

When a user has no groups or devices an empty page is presented for these sections which looks like things might be broken. A message indicating there's nothing to show would be better.

• Display devicename and date/time
• Display and auto-play video
• Populate tag table
  • Fix animal image not showing
  • Add 'Me!' if tag added by user
  • Add background colour to AI IDs
  • Activate delete button
• Quick tag buttons
  • Add new tag when animal button clicked
  • Add false positive event when fp button clicked
  • Display AddObservation component when + clicked
• Prev/next buttons
  • Bug - prev*/next* buttons returning server error
• Processing status
• Display comment
• Update comment
• Download buttons
• Delete button
• Add animal observation
  • Set time start / end / current buttons
• Set tag stop time to duration - 10s (??)
• Confirm responsive / mobile views
• Handle no recording at URL

Frontend will have to convert from username to user id (we should really fix this in the API server too).

The title is currently "cacophony-web-vue". "Cacophony Browser" or "Cacophony Project" would be better.

Screenshot compares new/Vuex on the left and old version on the right. As you can see, no user showing in user table when there should be.

I think the problem is groupData() computed property in GroupView.vue -> group.GroupUsers (which populates the b-table) doesn't exit. I think it should just use group.Users (group.Users.GroupUsers exists but doesn't have any useful info)

When the custom tag entry field is used (via the + button) the addition of the tag fails. It's then not possible to add any more tags, even using the quick tag buttons.

The other prev/next buttons work but the prev/next buttons for "interesting" recordings result in a "no recording" error.

As per previous UI

Similar to TheCacophonyProject/cacophony-web#113

• Search returns video and audio files
• Allow for filter by type (audio, video or both)
• Display type (audio or video) in the table
• Add support for audio on the view recording page

Identified in #62

If "Audio" or "Video and Audio" is selected can Tag Types and Animals be disabled (and their values ignored). Those don't currently make sense for audio recordings.

1. Need to improve the layout (CSS) for the error message so they look nicish
2. Split uses of error message between two classes:
   a. Actual error messages that need to stay visible until dismissed
   b. Warming messages that appear for a while and then disappear.

Screenshot compares new/Vuex on the left and old version on the right. I like how it was easy to change groups in the old version. It was a bit clunky and didn't work so well on mobile, but I think it would be good to have similar in the new version also. If there isn't space for a full list of devices, perhaps a 'choose a different group' type button, or back-ish button, or maybe hide the groups list behind a \/ arrow or something....

index.template.ejs currently refers to the favicons in src/assets/favicon which only works when the frontend is run in dev mode. Figure out how to get them included in the build and refer to them in the dist output instead. I'm pretty sure there's a way to get webpack to treat the favicons as dependencies so they get handled correctly.

Device and groups names are currently sorted by id number which isn't all that useful

This error is reliably seen the developer console when viewing a recording:

vendors~prod~staging.bundle.js:38 TypeError: Cannot read property 'devicename' of undefined
    at a.r (prod~staging.bundle.js:1)
    at a.t._render (vendors~prod~staging.bundle.js:38)
    at a.<anonymous> (vendors~prod~staging.bundle.js:38)
    at Te.get (vendors~prod~staging.bundle.js:38)
    at new Te (vendors~prod~staging.bundle.js:38)
    at vendors~prod~staging.bundle.js:38
    at a.pn.$mount (vendors~prod~staging.bundle.js:38)
    at a.pn.$mount (vendors~prod~staging.bundle.js:38)
    at init (vendors~prod~staging.bundle.js:38)
    at vendors~prod~staging.bundle.js:38

It looks like when querying by the end date, the time is set to 00:00 which doesn't give what the user expects.

This is no longer required

Indicate audio device (:speaker: ) or thermal device (:film_strip:)

When the recordings page loads it calls the signedUrl API with a null jwt argument. It seems that it's acting before the recording details have been set.

The page then goes on to load the recording correctly. All this isn't really visible to the user.

Also, remove "first name" and "last name" fields.

Addition of users to devices