ash/WebStudio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add loading progress. Close #15

Browse source
This commit is contained in:
Matthew Stratford 2020-04-06 14:39:17 +01:00
parent f070542c5d
commit c31147db97
4 changed files with 36 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -42,6 +42,7 @@
"eslint-plugin-jsx-a11y": "6.2.3",
"eslint-plugin-react": "7.14.3",
"eslint-plugin-react-hooks": "^1.6.1",
"fetch-progress": "github:UniversityRadioYork/fetch-progress",
"file-loader": "3.0.1",
"fs-extra": "7.0.1",
"html-webpack-plugin": "4.0.0-beta.5",

8
src/App.css
View file

@ -239,11 +239,7 @@ button{
height: 6vh !important;
}
.waveform .loading {
width: 100%;
text-align: center;
font-size: 1.5rem;
font-weight: 200;
opacity: 0.5;
background: #CCCCFF;
}
.bypass-click {
@ -266,4 +262,4 @@ button{
.ReactModal__Overlay {
z-index: 10000;
}
}

35
src/mixer/state.ts
View file

@ -4,6 +4,7 @@ import {
Dispatch,
Middleware
} from "@reduxjs/toolkit";
import fetchProgress, { FetchProgressData } from "fetch-progress";
import Between from "between.js";
import { PlanItem } from "../showplanner/state";
import * as BroadcastState from "../broadcast/state";
@ -45,7 +46,7 @@ export type MicErrorEnum = "NO_PERMISSION" | "NOT_SECURE_CONTEXT" | "UNKNOWN";
interface PlayerState {
loadedItem: PlanItem | Track | AuxItem | null;
loading: boolean;
loading: number;
loadError: boolean;
state: PlayerStateEnum;
volume: number;
@ -81,7 +82,7 @@ const mixerState = createSlice({
players: [
{
loadedItem: null,
loading: false,
loading: -1,
state: "stopped",
volume: 1,
gain: 1,
@ -97,7 +98,7 @@ const mixerState = createSlice({
},
{
loadedItem: null,
loading: false,
loading: -1,
state: "stopped",
volume: 1,
gain: 1,
@ -113,7 +114,7 @@ const mixerState = createSlice({
},
{
loadedItem: null,
loading: false,
loading: -1,
state: "stopped",
volume: 1,
gain: 1,
@ -148,17 +149,20 @@ const mixerState = createSlice({
) {
state.players[action.payload.player].loadedItem =
action.payload.item;
state.players[action.payload.player].loading = true;
state.players[action.payload.player].loading = 0;
state.players[action.payload.player].timeCurrent = 0;
state.players[action.payload.player].timeLength = 0;
state.players[action.payload.player].tracklistItemID = -1;
state.players[action.payload.player].loadError = false;
},
itemLoadPercentage(state, action: PayloadAction<{ player: number, percent: number }>) {
state.players[action.payload.player].loading = action.payload.percent;
},
itemLoadComplete(state, action: PayloadAction<{ player: number }>) {
state.players[action.payload.player].loading = false;
state.players[action.payload.player].loading = -1;
},
itemLoadError(state, action: PayloadAction<{ player: number }>) {
state.players[action.payload.player].loading = false;
state.players[action.payload.player].loading = -1;
state.players[action.payload.player].loadError = true;
},
setPlayerState(
@ -432,7 +436,18 @@ export const load = (
const result = await fetch(url, {
credentials: "include",
signal
});
}).then(
fetchProgress({
// implement onProgress method
onProgress(progress: FetchProgressData) {
const percent = progress.transferred / progress.total;
if (percent !== 1) {
console.log({ progress });
dispatch(mixerState.actions.itemLoadPercentage({ player, percent}));
}
},
})
);
const rawData = await result.arrayBuffer();
const blob = new Blob([rawData]);
const objectUrl = URL.createObjectURL(blob);
@ -474,7 +489,7 @@ export const play = (player: number): AppThunk => async (dispatch, getState) =>
await audioContext.resume();
}
var state = getState().mixer.players[player];
if (state.loading) {
if (state.loading !== -1) {
console.log("not ready");
return;
}
@ -510,7 +525,7 @@ export const stop = (player: number): AppThunk => (dispatch, getState) => {
return;
}
var state = getState().mixer.players[player];
if (state.loading) {
if (state.loading !== -1) {
console.log("not ready");
return;
}

14
src/showplanner/Player.tsx
View file

@ -15,7 +15,7 @@ export function Player({ id }: { id: number }) {
return (
<div
className={
playerState.loadedItem !== null && playerState.loading == false
playerState.loadedItem !== null && playerState.loading === -1
? "player loaded"
: "player"
}
@ -56,9 +56,9 @@ export function Player({ id }: { id: number }) {
<div className="card-body p-0">
<span className="card-title">
<strong>
{playerState.loadedItem !== null && !playerState.loading
{playerState.loadedItem !== null && playerState.loading === -1
? playerState.loadedItem.title
: playerState.loading
: playerState.loading !== -1
? `LOADING`
: playerState.loadError
? "LOAD FAILED"
@ -68,7 +68,7 @@ export function Player({ id }: { id: number }) {
className={
"border rounded border-danger text-danger p-1 m-1" +
(playerState.loadedItem !== null &&
!playerState.loading &&
playerState.loading === -1 &&
"clean" in playerState.loadedItem &&
!playerState.loadedItem.clean
? ""
@ -80,7 +80,7 @@ export function Player({ id }: { id: number }) {
</span>
<br />
<span className="text-muted">
{playerState.loadedItem !== null && !playerState.loading
{playerState.loadedItem !== null && playerState.loading === -1
? "artist" in playerState.loadedItem &&
playerState.loadedItem.artist
: ""}
@ -141,7 +141,9 @@ export function Player({ id }: { id: number }) {
- in
</span>
)}
<div className="m-0 graph" id={"waveform-" + id}></div>
<div className={"m-0 graph" + ((playerState.loading !== -1) ? " loading" : "")} id={"waveform-" + id} style={{
width: (playerState.loading*100) + "%"}}>
</div>
</div>
</div>