Merge branch 'main' of github.com:linqs/shark-clipper

README.md

@@ -48,6 +48,48 @@ After that, you may run the binary as any normal program:
 ./shark-clipper-linux-x64-latest.bin
 ```
 
+#### Using the Mac Prebuilt Binary
+
+Mac requires additional security steps to run the prebuilt binary.
+These steps need to be done every time a new binary is downloaded and run for the first time.
+Running binary files is best done via the command line.
+If you're not familiar with the terminal, you can use [this guide](https://gomakethings.com/navigating-the-file-system-with-terminal/)
+to get started.
+For a more comprehensive command line guide refer to MIT's [Missing Semester course](https://missing.csail.mit.edu/2020/course-shell/).
+
+1) Unzip the downloaded shark-clipper-macos-x64-latest.zip file.
+
+2) Open the Terminal application and navigate to the directory where shark-clipper-macos-x64-latest.bin is located e.g. if the file is in the "Downloads" folder:
+```
+cd ~/Downloads
+```
+
+3) Set execute permissions on the Mac prebuilt binary, e.g.:
+```
+chmod +x shark-clipper-macos-x64-latest.bin
+```
+
+4) Run the binary as any normal program:
+```
+./shark-clipper-macos-x64-latest.bin
+```
+
+5) Click "OK" on a popup that may appear saying that the file cannot be opened because Apple cannot check it for malicious software.
+
+6) Open System Settings and navigate to the "Privacy & Security" tab.
+
+7) Scroll down to the "Security" section.
+A message should appear stating that shark-clipper-macos-x64-latest.bin was blocked because it is not from an identified developer.
+Click the "Allow Anyway" button.
+You may be required to provide a password.
+
+8) Return to the terminal and re-run the binary:
+```
+./shark-clipper-macos-x64-latest.bin
+```
+
+9) Click "Open" on a popup that may appear again warning about running the file.
+
 #### Using the Windows Prebuilt Binary
 
 Windows requires some additional security steps to run the prebuilt binary.

sharkclipper/api/handlers.py

@@ -91,6 +91,11 @@ def save(handler, path, temp_dir = None, data = None, out_dir = None, **kwargs):
     # Out directory name is video name plus prefix of id.
     id_prefix = data['video']['id'].split('-')[0]
     out_dir = os.path.join(out_dir, data['video']['name'] + '-' + id_prefix)
+
+    # If directory already exists, remake to avoid conflicts.
+    if (os.path.exists(out_dir)):
+        sharkclipper.util.file.remove_dirent(out_dir)
+
     os.makedirs(out_dir, exist_ok = True)
 
     # Save screenshots.

static/js/main.js

@@ -135,14 +135,16 @@ function initVideo(info) {
 
     let video_location = metadata.location ?? {};
     let latitude = video_location.latitude ?? undefined;
+    let latitude_input_value = convertCoordinatesForInput(latitude);
     let longitude = video_location.longitude ?? undefined;
+    let longitude_input_value = convertCoordinatesForInput(longitude);
 
     window.shark.info['video'] = {
         id: info.video_id,
         name: name,
         start_time: start_time,
-        latitude: latitude,
-        longitude: longitude,
+        latitude: latitude_input_value,
+        longitude: longitude_input_value,
     };
 
     window.shark.info['key_metadata'] = info.key_metadata;
@@ -175,17 +177,19 @@ function initVideo(info) {
                 <input type='number' name='latitude' step='0.01'
                         data-video-id='${info.video_id}'
                         onchange='editVideo(this, "latitude")'
-                        value='${latitude}' />
+                        value='${latitude_input_value}' />
             </div>
             <div>
                 <label for='longitude'>Longitude:</label>
                 <input type='number' name='longitude' step='0.01'
                         data-video-id='${info.video_id}'
                         onchange='editVideo(this, "longitude")'
-                        value='${longitude}' />
+                        value='${longitude_input_value}' />
             </div>
         </div>
     `;
+
+    removeHotkeysOnText();
 }
 
 function toggleSelection() {
@@ -254,7 +258,9 @@ function addScreenshot(screenshot) {
         </div>
     `;
 
-    document.querySelector('.screenshot-area').insertAdjacentHTML('beforeend', html);
+    document.querySelector('.screenshot-area').insertAdjacentHTML('afterbegin', html);
+
+    removeHotkeysOnText();
 }
 
 // Flip a screenshot by adding it the the canvas flipped horizontally or vertically.
@@ -419,6 +425,15 @@ function convertUnixSecsForInput(unixSeconds) {
     return offsetDate.toISOString().slice(0, 19);
 }
 
+function convertCoordinatesForInput(coordinates) {
+    if (!coordinates) {
+        return undefined;
+    }
+
+    // Remove the leading + from coordinates.
+    return coordinates.replace(/^\+/, '');
+}
+
 // Fetch the server's version and add it to the page's title.
 function fetchVersion() {
     let promise = fetch('/version', {
@@ -462,6 +477,14 @@ function initializeHotkeys() {
             save();
         } 
     });
+
+    removeHotkeysOnText();
+}
+
+function removeHotkeysOnText() {
+    document.querySelectorAll('input[type="text"]').forEach((input) => {
+        input.setAttribute('onkeydown', 'event.stopPropagation()');
+    });
 }
 
 function main() {