Commit 81f10519 authored by Olivier FAURE's avatar Olivier FAURE
Browse files

Add time counter to overlay

parent a2228e5a
......@@ -16,22 +16,27 @@ function get_layout(canvas) {
const VOLUME_BAR_WIDTH = 100;
const VOLUME_BAR_HEIGHT = 20;
const PROGRESS_TEXT_WIDTH = 80;
const PROGRESS_BAR_WIDTH = canvas.width -
(GAP_SIZE + BUTTON_SIZE + GAP_SIZE + GAP_SIZE + BUTTON_SIZE + GAP_SIZE + VOLUME_BAR_WIDTH + GAP_SIZE);
(GAP_SIZE + BUTTON_SIZE + GAP_SIZE + GAP_SIZE + BUTTON_SIZE + GAP_SIZE + PROGRESS_TEXT_WIDTH + GAP_SIZE + VOLUME_BAR_WIDTH + GAP_SIZE);
const PROGRESS_BAR_HEIGHT = 10;
const PLAY_BUTTON_X = GAP_SIZE;
const PROGRESS_BAR_X = PLAY_BUTTON_X + BUTTON_SIZE + GAP_SIZE;
const VOLUME_BUTTON_X = PROGRESS_BAR_X + PROGRESS_BAR_WIDTH + GAP_SIZE;
const PROGRESS_TEXT_X = PROGRESS_BAR_X + PROGRESS_BAR_WIDTH + GAP_SIZE;
const VOLUME_BUTTON_X = PROGRESS_TEXT_X + PROGRESS_TEXT_WIDTH + GAP_SIZE;
const VOLUME_BAR_X = VOLUME_BUTTON_X + BUTTON_SIZE + GAP_SIZE;
return {
VOLUME_BAR_WIDTH,
VOLUME_BAR_HEIGHT,
PROGRESS_TEXT_WIDTH,
PROGRESS_BAR_WIDTH,
PROGRESS_BAR_HEIGHT,
PLAY_BUTTON_X,
PROGRESS_BAR_X,
PROGRESS_TEXT_X,
VOLUME_BUTTON_X,
VOLUME_BAR_X,
};
......@@ -60,10 +65,12 @@ export function update_overlay(overlay) {
const {
VOLUME_BAR_WIDTH,
VOLUME_BAR_HEIGHT,
PROGRESS_TEXT_WIDTH,
PROGRESS_BAR_WIDTH,
PROGRESS_BAR_HEIGHT,
PLAY_BUTTON_X,
PROGRESS_BAR_X,
PROGRESS_TEXT_X,
VOLUME_BUTTON_X,
VOLUME_BAR_X,
} = get_layout(overlay);
......@@ -113,6 +120,24 @@ export function update_overlay(overlay) {
PROGRESS_BAR_WIDTH * position, PROGRESS_BAR_HEIGHT
);
// DRAW PROGRESS TEXT (eg: 12:31 / 15:00) --
let time = media_player.get_time();
let seconds = Math.trunc(time / 1000);
let minutes = Math.trunc(seconds / 60);
seconds = seconds % 60;
let max_time = media_player.get_length();
let max_seconds = Math.trunc(max_time / 1000);
let max_minutes = Math.trunc(max_seconds / 60);
max_seconds = max_seconds % 60;
ctx.textAlign = "right";
ctx.textBaseline = "middle";
ctx.fillStyle = TEXT_COLOR;
ctx.fillText(
`${minutes}:${seconds} / ${max_minutes}:${max_seconds}`,
PROGRESS_TEXT_X + PROGRESS_TEXT_WIDTH, y + MENU_BAR_HEIGHT / 2,
);
// -- DRAW VOLUME/MUTE BUTTON --
let is_muted = media_player.get_mute();
ctx.drawImage(is_muted ? muted_button : volume_button,
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment