Skip to content

Commit

Permalink
Added initial (unstyled controls). Have not yet redone style (and bou…
Browse files Browse the repository at this point in the history 
…nding box) to compensate for new controls.
  • Loading branch information
@eriq-augustine
eriq-augustine committed Nov 16, 2024
1 parent 5820585 commit 69f5807
Show file tree
Hide file tree
Showing 6 changed files with 328 additions and 73 deletions.
2 changes: 1 addition & 1 deletion pyproject.toml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ requires = [

[project]
name = "shark-clipper"
version = "0.0.1"
version = "0.1.0"
description = "A tool for getting clips of shark fins from full videos."
readme = "README.md"
requires-python = ">=3.8"
Expand Down
13 changes: 12 additions & 1 deletion static/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -176,10 +176,21 @@ img.spinner {
.media-area img,
.media-area video {
max-width: 100%;
height: 100%;
border-radius: 10px;
}

.media-area img {
height: 100%;
}

.media-area video {
height: 80%;
}

.media-area .video-controls {
height: 20%;
}

.metadata-area {
width: 45%;
}
Expand Down
2 changes: 2 additions & 0 deletions static/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,9 @@
<link rel='stylesheet' href='/static/css/style.css'>

<script type='application/javascript' src='/static/js/vendor/interact.min.js'></script>
<script type='application/javascript' src='/static/js/html.js'></script>
<script type='application/javascript' src='/static/js/resize.js'></script>
<script type='application/javascript' src='/static/js/media.js'></script>
<script type='application/javascript' src='/static/js/util.js'></script>

<script type='application/javascript' src='/static/js/main.js'></script>
Expand Down
94 changes: 94 additions & 0 deletions static/js/html.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
'use strict';

function createVideoAreaHTML(videoInfo, path, type, latitude_input_value, longitude_input_value) {
let start_time_input_value = convertUnixSecsForInput(videoInfo.start_time);

return `
<div class='video-container media-area media-area-background'>
<video preload='auto' muted>
<source src='${path}' type='${type}' />
</video>
<div class='video-controls'>
<div class='vido-controls-row video-controls-progress'>
<progress value='0.0' min='0.0' onclick='videoSeekProgress(this, event)'></progress>
</div>
<div class='vido-controls-row video-controls-seek'>
<button class='skip-far-back' onclick='videoSeekOffset(-5.0)'>↺</button>
<button class='skip-back' onclick='videoSeekOffset(-0.5)'>↶</button>
<button class='play-pause' onclick='videoTogglePlay()'>⏵</button>
<button class='skip-far-back' onclick='videoSeekOffset(0.5)'>↷</button>
<button class='skip-far-back' onclick='videoSeekOffset(5.0)'>↻</button>
</div>
<div class='vido-controls-row video-controls-clip'>
<input type='text' class='clip-start' onchange='setClip(this, true)' />
<input type='text' class='current-time' onchange='videoSeek(this)' />
<input type='text' class='clip-end' onchange='setClip(this, false)' />
</div>
</div>
</div>
<div class='metadata-area'>
<div>
<label for='name'>Name:</label>
<input type='text' name='name'
data-video-id='${videoInfo.id}'
onchange='editVideo(this, "name")'
value='${videoInfo.name}' />
</div>
<div>
<label for='name'>Video Start Time:</label>
<input type='datetime-local' name='start_time'
data-video-id='${videoInfo.id}'
onchange='editVideo(this, "start_time")'
value='${start_time_input_value}' />
</div>
<div>
<label for='latitude'>Latitude:</label>
<input type='number' name='latitude' step='0.01'
data-video-id='${videoInfo.id}'
onchange='editVideo(this, "latitude")'
value='${latitude_input_value}' />
</div>
<div>
<label for='longitude'>Longitude:</label>
<input type='number' name='longitude' step='0.01'
data-video-id='${videoInfo.id}'
onchange='editVideo(this, "longitude")'
value='${longitude_input_value}' />
</div>
</div>
`;
}

function createScreenshotHTML(screenshot) {
let time_input_value = convertUnixSecsForInput(screenshot.time);

return `
<div class='screenshot media-metadata-container' data-id='${screenshot.id}'>
<div class='image-area media-area' width='${screenshot.width}' height='${screenshot.height}'>
<img class='media-area-background' src='${screenshot.dataURL}'/>
</div>
<div class='metadata-area'>
<div>
<label for='name'>Name:</label>
<input type='text' name='name'
onchange='editScreenshot(this, "${screenshot.id}", "name")'
value='${screenshot.name}' />
</div>
<div>
<label for='time'>Time:</label>
<input type='datetime-local' name='time' readonly='true' disabled
value='${time_input_value}' />
</div>
<div>
<span>
<button onclick='flipScreenshot("${screenshot.id}", true)'>Vertical Flip</button>
<button onclick='flipScreenshot("${screenshot.id}", false)'>Horizontal Flip</button>
</span>
</div>
<div>
<button onclick='deleteScreenshot("${screenshot.id}")'>Delete</button>
</div>
</div>
</div>
`;
}
78 changes: 7 additions & 71 deletions static/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,65 +131,31 @@ function initVideo(info) {
let metadata = info.key_metadata ?? {};

let start_time = metadata.start_time_unix ?? undefined;
let start_time_input_value = convertUnixSecsForInput(start_time);

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'] = {
let videoInfo = {
id: info.video_id,
name: name,
start_time: start_time,
latitude: latitude_input_value,
longitude: longitude_input_value,
};

window.shark.info['video'] = videoInfo;
window.shark.info['key_metadata'] = info.key_metadata;
window.shark.info['all_metadata'] = info.all_metadata;

let videoContainer = document.querySelector('.work-screen .video-area');
videoContainer.innerHTML = `
<div class='video-container media-area media-area-background'>
<video controls>
<source src='${info.path}' type='${info.type}' />
</video>
</div>
<div class='metadata-area'>
<div>
<label for='name'>Name:</label>
<input type='text' name='name'
data-video-id='${info.video_id}'
onchange='editVideo(this, "name")'
value='${info.original_name}' />
</div>
<div>
<label for='name'>Video Start Time:</label>
<input type='datetime-local' name='start_time'
data-video-id='${info.video_id}'
onchange='editVideo(this, "start_time")'
value='${start_time_input_value}' />
</div>
<div>
<label for='latitude'>Latitude:</label>
<input type='number' name='latitude' step='0.01'
data-video-id='${info.video_id}'
onchange='editVideo(this, "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_input_value}' />
</div>
</div>
`;
videoContainer.innerHTML = createVideoAreaHTML(videoInfo, info.path, info.type, latitude_input_value, longitude_input_value);

removeHotkeysOnText();

initVideoControls();
}

function toggleSelection() {
Expand Down Expand Up @@ -226,38 +192,8 @@ function captureFrame() {

function addScreenshot(screenshot) {
window.shark.screenshots[screenshot.id] = screenshot;
let time_input_value = convertUnixSecsForInput(screenshot.time);

let html = `
<div class='screenshot media-metadata-container' data-id='${screenshot.id}'>
<div class='image-area media-area' width='${screenshot.width}' height='${screenshot.height}'>
<img class='media-area-background' src='${screenshot.dataURL}'/>
</div>
<div class='metadata-area'>
<div>
<label for='name'>Name:</label>
<input type='text' name='name'
onchange='editScreenshot(this, "${screenshot.id}", "name")'
value='${screenshot.name}' />
</div>
<div>
<label for='time'>Time:</label>
<input type='datetime-local' name='time' readonly='true' disabled
value='${time_input_value}' />
</div>
<div>
<span>
<button onclick='flipScreenshot("${screenshot.id}", true)'>Vertical Flip</button>
<button onclick='flipScreenshot("${screenshot.id}", false)'>Horizontal Flip</button>
</span>
</div>
<div>
<button onclick='deleteScreenshot("${screenshot.id}")'>Delete</button>
</div>
</div>
</div>
`;

let html = createScreenshotHTML(screenshot);
document.querySelector('.screenshot-area').insertAdjacentHTML('afterbegin', html);

removeHotkeysOnText();
Expand Down Expand Up @@ -475,7 +411,7 @@ function initializeHotkeys() {
captureFrame();
} else if (event.code === 'KeyS') {
save();
}
}
});

removeHotkeysOnText();
Expand Down
Loading

0 comments on commit 69f5807

Please sign in to comment.