diff --git a/ui/v2/package.json b/ui/v2/package.json index fad8df252..8d5b6c529 100644 --- a/ui/v2/package.json +++ b/ui/v2/package.json @@ -19,7 +19,6 @@ "bulma": "0.7.5", "formik": "1.5.7", "graphql": "14.3.1", - "justified-layout": "^3.0.0", "localforage": "1.7.3", "lodash": "4.17.13", "node-sass": "4.12.0", diff --git a/ui/v2/src/components/Wall/WallItem.tsx b/ui/v2/src/components/Wall/WallItem.tsx index 0cdbc4b46..b7c3c7a64 100644 --- a/ui/v2/src/components/Wall/WallItem.tsx +++ b/ui/v2/src/components/Wall/WallItem.tsx @@ -11,18 +11,10 @@ interface IWallItemProps { scene?: GQL.SlimSceneDataFragment; sceneMarker?: GQL.SceneMarkerDataFragment; origin?: string; - position?: IWallItemPosition; onOverlay: (show: boolean) => void; clickHandler?: (item: GQL.SlimSceneDataFragment | GQL.SceneMarkerDataFragment) => void; } -export interface IWallItemPosition { - top: number, - width: number, - height: number, - left: number -} - export const WallItem: FunctionComponent = (props: IWallItemProps) => { const [videoPath, setVideoPath] = useState(undefined); const [previewPath, setPreviewPath] = useState(""); @@ -104,20 +96,12 @@ export const WallItem: FunctionComponent = (props: IWallItemProp const className = ["scene-wall-item-container"]; if (videoHoverHook.isHovering.current) { className.push("double-scale"); } const style: React.CSSProperties = {}; - - if (!!props.position) { - let position = props.position; - style.width = position.width; - style.height = position.height; - style.left = position.left; - style.top = position.top; - } - if (!!props.origin) { style.transformOrigin = props.origin; } return ( -
+
debouncedOnMouseEnter.current()} onMouseMove={() => debouncedOnMouseEnter.current()} diff --git a/ui/v2/src/components/Wall/WallPanel.tsx b/ui/v2/src/components/Wall/WallPanel.tsx index 52f7c2dce..df466f727 100644 --- a/ui/v2/src/components/Wall/WallPanel.tsx +++ b/ui/v2/src/components/Wall/WallPanel.tsx @@ -1,9 +1,8 @@ import _ from "lodash"; -import React, { FunctionComponent, useState, useEffect } from "react"; +import React, { FunctionComponent, useState } from "react"; import * as GQL from "../../core/generated-graphql"; import "./Wall.scss"; -import { WallItem, IWallItemPosition } from "./WallItem"; -import justifiedLayout from "justified-layout"; +import { WallItem } from "./WallItem"; interface IWallPanelProps { scenes?: GQL.SlimSceneDataFragment[]; @@ -13,36 +12,6 @@ interface IWallPanelProps { export const WallPanel: FunctionComponent = (props: IWallPanelProps) => { const [showOverlay, setShowOverlay] = useState(false); - const [wallItemPositions, setWallItemPositions] = useState([]); - - useEffect(() => { - if (!props.scenes) { - setWallItemPositions([]); - } else { - // need to get all of the aspect ratios - var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0); - w = w * 0.8; - - let newSceneAspectRatios = props.scenes.map((scene) => { - const defaultAspectRatio = 4 / 3; - if (!scene.file.width || !scene.file.height) { - return defaultAspectRatio; - } - return scene.file.width / scene.file.height; - }); - - const rowHeight = 290; - const heightTolerance = 0.1; - let layoutGeo = justifiedLayout(newSceneAspectRatios, { - containerWidth: w, - targetRowHeight: rowHeight, - targetRowHeightTolerance: heightTolerance, - boxSpacing: { horizontal: 0, vertical: 0 } - }); - - setWallItemPositions(layoutGeo.boxes as IWallItemPosition[]); - } - }, [props.scenes]); function onOverlay(show: boolean) { setShowOverlay(show); @@ -82,7 +51,6 @@ export const WallPanel: FunctionComponent = (props: IWallPanelP onOverlay={onOverlay} clickHandler={props.clickHandler} origin={origin} - position={wallItemPositions[index]} /> ); }); diff --git a/ui/v2/src/index.scss b/ui/v2/src/index.scss index a36e6fbcc..63df43ea4 100755 --- a/ui/v2/src/index.scss +++ b/ui/v2/src/index.scss @@ -43,7 +43,6 @@ code { &.wall { padding: 0; margin: 0; - position: relative; } & .bp3-button.favorite .bp3-icon { @@ -76,7 +75,6 @@ code { &.wall { width: calc(20%); margin: 0; - position: static; } } diff --git a/ui/v2/src/models/justified-layout.d.ts b/ui/v2/src/models/justified-layout.d.ts deleted file mode 100644 index 7819ee7d3..000000000 --- a/ui/v2/src/models/justified-layout.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -declare module "justified-layout" { - // typing module default export as `any` will allow you to access its members without compiler warning - var justifiedLayout: any; - export default justifiedLayout; -} \ No newline at end of file diff --git a/ui/v2/yarn.lock b/ui/v2/yarn.lock index df6337467..a961b7b03 100644 --- a/ui/v2/yarn.lock +++ b/ui/v2/yarn.lock @@ -7286,13 +7286,6 @@ jsx-ast-utils@^2.0.1: dependencies: array-includes "^3.0.3" -justified-layout@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/justified-layout/-/justified-layout-3.0.0.tgz#f8643ac51d97cf43dd40ddf38601161968ff8165" - integrity sha512-xki5bVJ84HokIV47mfHdmWB56zFrQKbtrU5KHA5GoatOnRwQWGOvNtBlbW8dU0yIa3pNmCPuacuuMRPvM9p5mg== - dependencies: - merge "1.2.1" - keycode@^2.2.0: version "2.2.0" resolved "https://registry.yarnpkg.com/keycode/-/keycode-2.2.0.tgz#3d0af56dc7b8b8e5cba8d0a97f107204eec22b04" @@ -7805,11 +7798,6 @@ merge2@^1.2.3: resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.2.3.tgz#7ee99dbd69bb6481689253f018488a1b902b0ed5" integrity sha512-gdUU1Fwj5ep4kplwcmftruWofEFt6lfpkkr3h860CXbAB9c3hGb55EOL2ali0Td5oebvW0E1+3Sr+Ur7XfKpRA== -merge@1.2.1: - version "1.2.1" - resolved "https://registry.yarnpkg.com/merge/-/merge-1.2.1.tgz#38bebf80c3220a8a487b6fcfb3941bb11720c145" - integrity sha512-VjFo4P5Whtj4vsLzsYBu5ayHhoHJ0UqNm7ibvShmbmoz7tGi0vXaoJbGdB+GmDMLUdg8DpQXEIeVDAe8MaABvQ== - methods@~1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"