77 lines
2.0 KiB
JavaScript
77 lines
2.0 KiB
JavaScript
import { ZipImagePlayer } from '../../vendor/pixiv-ugoira-player';
|
|
require("jquery-ui/ui/widgets/progressbar");
|
|
require("jquery-ui/ui/widgets/slider");
|
|
require("jquery-ui/themes/base/progressbar.css");
|
|
require("jquery-ui/themes/base/slider.css");
|
|
|
|
let Ugoira = {};
|
|
|
|
Ugoira.create_player = (mime_type, frames, file_url) => {
|
|
var meta_data = {
|
|
mime_type: mime_type,
|
|
frames: frames
|
|
};
|
|
var options = {
|
|
canvas: $("#image")[0],
|
|
source: file_url,
|
|
metadata: meta_data,
|
|
chunkSize: 300000,
|
|
loop: true,
|
|
autoStart: true,
|
|
debug: false,
|
|
}
|
|
|
|
Ugoira.player = new ZipImagePlayer(options);
|
|
Ugoira.player_manually_paused = false;
|
|
|
|
$(Ugoira.player).on("loadProgress.danbooru", (ev, progress) => {
|
|
$("#seek-slider").progressbar("value", Math.floor(progress * 100));
|
|
});
|
|
|
|
$("#ugoira-play").on("click.danbooru", e => {
|
|
Ugoira.player.play();
|
|
$("#ugoira-play").hide();
|
|
$("#ugoira-pause").show();
|
|
Ugoira.player_manually_paused = false;
|
|
e.preventDefault();
|
|
})
|
|
|
|
$("#ugoira-pause").on("click.danbooru", e => {
|
|
Ugoira.player.pause();
|
|
$("#ugoira-pause").hide();
|
|
$("#ugoira-play").show();
|
|
Ugoira.player_manually_paused = true;
|
|
e.preventDefault();
|
|
});
|
|
|
|
$("#seek-slider").progressbar({
|
|
value: 0
|
|
});
|
|
|
|
$("#seek-slider").slider({
|
|
min: 0,
|
|
max: Ugoira.player._frameCount - 1,
|
|
start: (event, ui) => {
|
|
// Need to pause while slider is being dragged or playback speed will bug out
|
|
Ugoira.player.pause();
|
|
},
|
|
slide: (event, ui) => {
|
|
Ugoira.player._frame = ui.value;
|
|
Ugoira.player._displayFrame();
|
|
},
|
|
stop: (event, ui) => {
|
|
// Resume playback when dragging stops, but only if player was not paused by the user earlier
|
|
if (!(Ugoira.player_manually_paused)) {
|
|
Ugoira.player.play();
|
|
}
|
|
}
|
|
});
|
|
|
|
$(Ugoira.player).on("frame.danbooru", (frame, frame_number) => {
|
|
$("#seek-slider").slider("option", "value", frame_number);
|
|
});
|
|
}
|
|
|
|
export default Ugoira;
|
|
|