Mirrors/webamp
1
0
Fork 0
mirror of https://github.com/captbaritone/webamp.git synced 2026-07-23 10:07:35 +00:00
Code Issues Projects Releases Wiki Activity

Hack in reviewing skins

Browse source
This commit is contained in:
Jordan Eldredge 2020-11-29 22:27:53 -08:00
parent f147a6f8be
commit ae96bae799
6 changed files with 136 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/App.js
View file

@ -9,13 +9,14 @@ import FocusedSkin from "./FocusedSkin";
import { useSelector } from "react-redux";
import * as Selectors from "./redux/selectors";
import * as Actions from "./redux/actionCreators";
import { ABOUT_PAGE } from "./constants";
import { ABOUT_PAGE, REVIEW_PAGE } from "./constants";
import { useWindowSize, useScrollbarWidth, useActionCreator } from "./hooks";
import { SCREENSHOT_WIDTH, SKIN_RATIO } from "./constants";
import UploadGrid from "./upload/UploadGrid";
import Metadata from "./components/Metadata";
import SkinReadme from "./SkinReadme";
import { useDropzone } from "react-dropzone";
import ReviewPage from "./ReviewPage";
const getTableDimensions = (windowWidth, scale) => {
const columnCount = Math.floor(windowWidth / (SCREENSHOT_WIDTH * scale));
@ -51,6 +52,10 @@ function App(props) {
const fileExplorerOpen = useSelector(Selectors.getFileExplorerOpen);
if (props.page === REVIEW_PAGE) {
return <ReviewPage />;
}
return (
<div>
<Head />

116
src/ReviewPage.js Normal file
View file

@ -0,0 +1,116 @@
import * as Utils from "./utils";
import { API_URL } from "./constants";
import React, { useState, useEffect } from "react";
function warmScreenshotImage(hash) {
const screenshotUrl = Utils.screenshotUrlFromHash(hash);
new Image().src = screenshotUrl;
}
function useQueuedSkin() {
const [queue, setQueue] = useState([]);
function remove() {
setQueue((queue) => {
const newQueue = [...queue];
newQueue.shift();
return newQueue;
});
}
useEffect(() => {
if (queue.length > 10) {
return;
}
let canceled = false;
fetch(`${API_URL}/to_review`, {
mode: "cors",
credentials: "include",
})
.then((response) => {
if (response.status === 403) {
window.location = `${API_URL}/auth`;
}
return response;
})
.then((response) => response.json())
.then((response) => {
if (canceled) {
return;
}
warmScreenshotImage(response.md5);
setQueue((queue) => [...queue, response]);
});
return () => (canceled = true);
}, [queue]);
const skin = queue[0];
return [skin || null, remove];
}
export default function ReviewPage() {
const [skin, remove] = useQueuedSkin();
async function approve() {
remove();
const response = await fetch(`${API_URL}/skins/${skin.md5}/approve`, {
method: "POST",
mode: "cors",
credentials: "include",
});
if (response.status === 403) {
window.location = `${API_URL}/auth`;
}
}
async function reject() {
remove();
const response = await fetch(`${API_URL}/skins/${skin.md5}/reject`, {
method: "POST",
mode: "cors",
credentials: "include",
});
if (response.status === 403) {
window.location = `${API_URL}/auth`;
}
}
useEffect(() => {
if (skin == null) {
return;
}
function handleKeypress(e) {
switch (e.key) {
case "ArrowUp":
approve();
break;
case "ArrowDown":
reject();
break;
default:
// noop
}
}
document.body.addEventListener("keydown", handleKeypress);
return () => {
document.body.removeEventListener("keydown", handleKeypress);
};
});
if (skin == null) {
return <h2 style={{ color: "white" }}>Loading...</h2>;
}
return (
<div style={{ color: "white" }}>
<h2>{skin.filename}</h2>
<img
style={{ width: "100%", maxWidth: 500, imageRendering: "pixelated" }}
src={Utils.screenshotUrlFromHash(skin.md5)}
alt={skin.filename}
/>
<br />
<button onClick={approve}>{"👍"} Approve</button>
<button onClick={reject}>{"👎"} Reject</button>
<p>Press up arrow to approve or down arrow to reject.</p>
</div>
);
}

2
src/constants.js
View file

@ -3,12 +3,14 @@ export const SCREENSHOT_HEIGHT = 348;
export const SKIN_RATIO = SCREENSHOT_HEIGHT / SCREENSHOT_WIDTH;
export const ABOUT_PAGE = "ABOUT_PAGE";
export const UPLOAD_PAGE = "UPLOAD_PAGE";
export const REVIEW_PAGE = "REVIEW_PAGE";
// export const CDN = "https://s3.amazonaws.com/webamp-uploaded-skins";
// export const CDN = "https://s3.amazonaws.com/cdn.webampskins.org";
export const S3_SCREENSHOT_CDN = "https://s3.amazonaws.com/cdn.webampskins.org";
export const SCREENSHOT_CDN = "https://cdn.webampskins.org";
export const SKIN_CDN = "https://cdn.webampskins.org";
export const API_URL = "https://api.webampskins.org";
// export const API_URL = "https://dev.webamp.org";
export const HEADING_HEIGHT = 46;
export const CHUNK_SIZE = 300;
export const SENTRY_DSN =

6
src/redux/actionCreators.js
View file

@ -1,4 +1,4 @@
import { ABOUT_PAGE, UPLOAD_PAGE } from "../constants";
import { ABOUT_PAGE, UPLOAD_PAGE, REVIEW_PAGE } from "../constants";
export function closeModal() {
return { type: "CLOSE_MODAL" };
}
@ -125,6 +125,10 @@ export function requestedAboutPage() {
return { type: "REQUESTED_PAGE", page: ABOUT_PAGE };
}
export function requestedReviewPage() {
return { type: "REQUESTED_PAGE", page: REVIEW_PAGE };
}
export function requestedUploadPage() {
return { type: "REQUESTED_PAGE", page: UPLOAD_PAGE };
}

3
src/redux/epics.js
View file

@ -33,6 +33,9 @@ const urlChangedEpic = (actions) =>
if (action.location.pathname === "/upload/") {
return of(Actions.requestedUploadPage());
}
if (action.location.pathname === "/review/") {
return of(Actions.requestedReviewPage());
}
const params = new URLSearchParams(action.location.search);
const query = params != null && params.get("query");

5
src/redux/selectors.js
View file

@ -1,6 +1,6 @@
import { createSelector } from "reselect";
import * as Utils from "../utils";
import { ABOUT_PAGE, UPLOAD_PAGE } from "../constants";
import { ABOUT_PAGE, UPLOAD_PAGE, REVIEW_PAGE } from "../constants";
export function getSelectedSkinHash(state) {
return state.selectedSkinHash;
@ -162,6 +162,9 @@ export const getRouteData = createSelector(
getPermalinkUrlFromHash,
skinData
) => {
if (activeContentPage === REVIEW_PAGE) {
return { url: "/review/", title: "Review" };
}
if (activeContentPage === ABOUT_PAGE) {
return { url: "/about/", title: "About" };
}