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

Update Item.tsx

Browse source
This commit is contained in:
Matthew Stratford 2021-05-31 21:23:33 +01:00
parent 9c6c7eec47
commit 25a58acb17
1 changed files with 29 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/showplanner/Item.tsx
View file

@ -1,9 +1,10 @@
import React, { memo } from "react"; import React, { memo } from "react";
import { PlanItem, itemId } from "./state"; import { PlanItem, itemId } from "./state";
import { Track, AuxItem } from "../api"; import { Track, AuxItem } from "../api";
import { useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { RootState } from "../rootReducer"; import { RootState } from "../rootReducer";
import * as MixerState from "../mixer/state";
import { Draggable } from "react-beautiful-dnd"; import { Draggable } from "react-beautiful-dnd";
import { ContextMenuTrigger } from "react-contextmenu"; import { ContextMenuTrigger } from "react-contextmenu";
import "./item.scss"; import "./item.scss";
@ -20,6 +21,7 @@ export const Item = memo(function Item({
index: number; index: number;
column: number; column: number;
}) { }) {
const dispatch = useDispatch();
const id = itemId(x); const id = itemId(x);
const isReal = "timeslotitemid" in x; const isReal = "timeslotitemid" in x;
const isGhost = "ghostid" in x; const isGhost = "ghostid" in x;
@ -34,20 +36,33 @@ export const Item = memo(function Item({
const isLoaded = loadedItem !== null ? itemId(loadedItem) === id : false; const isLoaded = loadedItem !== null ? itemId(loadedItem) === id : false;
const showDebug = useSelector(
(state: RootState) => state.settings.showDebugInfo
);
function triggerClick() { function triggerClick() {
if (column > -1) { if (column > -1) {
console.log("Clicking to load:", x);
if (process.env.REACT_APP_BAPSICLE_INTERFACE) {
sendBAPSicleChannel({ sendBAPSicleChannel({
channel: column, channel: column,
command: "LOAD", command: "LOAD",
weight: index, weight: index,
}); });
console.log("Clicking to load:", x); return;
//dispatch(MixerState.load(column, x)); }
dispatch(MixerState.load(column, x));
} }
} }
let isDragDisabled = isGhost;
if (process.env.REACT_APP_BAPSICLE_INTERFACE) {
isDragDisabled = isDragDisabled || isLoaded;
}
return ( return (
<Draggable draggableId={id} index={index} isDragDisabled={isGhost}> <Draggable draggableId={id} index={index} isDragDisabled={isDragDisabled}>
{(provided, snapshot) => ( {(provided, snapshot) => (
<div <div
ref={provided.innerRef} ref={provided.innerRef}
@ -67,7 +82,7 @@ export const Item = memo(function Item({
id={isReal ? TS_ITEM_MENU_ID : ""} id={isReal ? TS_ITEM_MENU_ID : ""}
collect={() => ({ id, column, index })} collect={() => ({ id, column, index })}
> >
<span className={"icon " + x.type}></span> <span className={"icon " + x.type} />
&nbsp; &nbsp;
{"play_count" in x && ( {"play_count" in x && (
<> <>
@ -87,10 +102,11 @@ export const Item = memo(function Item({
> >
Explicit Explicit
</small> </small>
{showDebug && (
<code> <code>
{"weight" in x && x.weight} {index}{" "} {itemId(x)} {"channel" in x && x.channel + "/" + x.weight}
{"weight" in x && x.weight !== index && "!!!!!!!!!!!"}
</code> </code>
)}
</ContextMenuTrigger> </ContextMenuTrigger>
</div> </div>
)} )}