diff --git a/packages/fakeyou.com/src/components/common/WeightCoverImage/WeightCoverImage.scss b/packages/fakeyou.com/src/components/common/WeightCoverImage/WeightCoverImage.scss
index 972853e2cd..d7a7b5af21 100644
--- a/packages/fakeyou.com/src/components/common/WeightCoverImage/WeightCoverImage.scss
+++ b/packages/fakeyou.com/src/components/common/WeightCoverImage/WeightCoverImage.scss
@@ -8,14 +8,47 @@
position: relative;
background-color: #57577d;
- img {
+ img, .cover-img-edit {
+ position: absolute;
width: 100%;
height: 100%;
+ }
+
+ img {
object-fit: cover;
pointer-events: none;
- position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
+
+ .cover-img-edit {
+ padding: .25rem;
+ font-size: .75rem;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: all .25s ease-in-out;
+ color: transparent;
+
+ span { text-align: center }
+
+ svg {
+ position: absolute;
+ color: #fff;
+ transition: background .25s ease-in-out;
+ background: rgba(#000, .5);
+ border-radius: .25rem;
+ padding: .5rem;
+ right: .25rem;
+ bottom: .25rem;
+ }
+
+ &:hover {
+ color: #fff;
+ background: rgba(#000, .5);
+ svg { background: none }
+ }
+ }
}
diff --git a/packages/fakeyou.com/src/components/common/WeightCoverImage/WeightCoverImage.tsx b/packages/fakeyou.com/src/components/common/WeightCoverImage/WeightCoverImage.tsx
index 3d770a463f..bd58a47f0a 100644
--- a/packages/fakeyou.com/src/components/common/WeightCoverImage/WeightCoverImage.tsx
+++ b/packages/fakeyou.com/src/components/common/WeightCoverImage/WeightCoverImage.tsx
@@ -1,9 +1,15 @@
import React from "react";
+import { Link } from "react-router-dom";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faPen } from "@fortawesome/pro-solid-svg-icons";
import "./WeightCoverImage.scss";
+
interface WeightCoverImageProps {
src?: string;
alt?: string;
height?: number;
+ onClick?: (e: any) => any;
+ to?: string,
width?: number;
coverIndex?: number;
}
@@ -12,9 +18,12 @@ export default function WeightCoverImage({
src,
alt,
height = 100,
+ onClick,
+ to,
width = 100,
coverIndex,
}: WeightCoverImageProps) {
+ console.log("👕",onClick);
const containerStyle = {
height: `${height}px`,
width: `${width}px`,
@@ -27,8 +36,15 @@ export default function WeightCoverImage({
}
return (
-
+

+ { to ?
+
Edit cover image
+
+ : null }
);
}
diff --git a/packages/fakeyou.com/src/components/entities/EntityInput/EntityInput.tsx b/packages/fakeyou.com/src/components/entities/EntityInput/EntityInput.tsx
index 34e74a8f9e..fe628a54c5 100644
--- a/packages/fakeyou.com/src/components/entities/EntityInput/EntityInput.tsx
+++ b/packages/fakeyou.com/src/components/entities/EntityInput/EntityInput.tsx
@@ -43,7 +43,13 @@ const EntityInputFull = ({ media, clear }: SlideProps) => {
const mediaType = mediaCategoryfromString(media?.media_type || "");
switch (mediaType) {
- case MediaFilters.image: return
![]()
+ case MediaFilters.image: return <>
+
![]()
+
+ Your file
+
+ >;
case MediaFilters.video: return <>
diff --git a/packages/fakeyou.com/src/v2/view/pages/media/EditCoverImage.scss b/packages/fakeyou.com/src/v2/view/pages/media/EditCoverImage.scss
index 3d0ff53b5e..f89e529707 100644
--- a/packages/fakeyou.com/src/v2/view/pages/media/EditCoverImage.scss
+++ b/packages/fakeyou.com/src/v2/view/pages/media/EditCoverImage.scss
@@ -1,30 +1,41 @@
.cover-image-page {
- header {
- display: flex;
- margin-bottom: 1rem;
- width: 100%;
- justify-content: space-between;
- }
- h1 {
- display: inline;
- }
+ header {
+ display: flex;
+ margin-bottom: 1rem;
+ width: 100%;
+ justify-content: space-between;
+ }
+ h1 {
+ display: inline;
+ }
- .cover-image-panel {
- gap: 1rem;
- width: 100%;
- display: grid;
- grid-auto-flow: column;
- grid-auto-columns: 1fr;
- }
+ .cover-image-panel {
+ gap: 1rem;
+ width: 100%;
+ display: grid;
+ grid-auto-flow: column;
+ grid-auto-columns: 50%;
- .cover-image-empty {
- background-color: rgba(#000,.33);
- border-radius: .5rem;
- color: rgba(#fff, .5);
- display: flex;
- justify-content: center;
- align-items: center;
- margin: .5rem 0;
- aspect-ratio: 4/3;
- }
+ .cover-image-current {
+ border-radius: .5rem;
+ overflow: hidden;
+ width: 100%;
+ margin: .5rem 0;
+ }
+
+ .fy-entity-input-square {
+ height: auto;
+ }
+ }
+
+ .cover-image-empty {
+ background-color: rgba(#000,.33);
+ border-radius: .5rem;
+ color: rgba(#fff, .5);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin: .5rem 0;
+ aspect-ratio: 4/3;
+ }
}
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/v2/view/pages/media/EditCoverImage.tsx b/packages/fakeyou.com/src/v2/view/pages/media/EditCoverImage.tsx
index 76106541c6..c42b244a24 100644
--- a/packages/fakeyou.com/src/v2/view/pages/media/EditCoverImage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/media/EditCoverImage.tsx
@@ -5,25 +5,24 @@ import { EntityInput } from "components/entities";
import { EditCoverImage, EditCoverImageResponse } from "@storyteller/components/src/api/media_files/EditCoverImage";
import { BucketConfig } from "@storyteller/components/src/api/BucketConfig";
import "./EditCoverImage.scss";
-import { useParams } from "react-router-dom";
+import { useHistory, useParams } from "react-router-dom";
export default function EditCoverImagePage() {
const { token: targetToken } = useParams<{ token: string }>();
const { studioAccessCheck } = useSession();
+ const history = useHistory();
const [coverToken, coverTokenSet] = useState("");
const { media } = useMedia({ mediaToken: targetToken });
const bucketConfig = new BucketConfig();
const currentSrc = bucketConfig.getGcsUrl(media?.cover_image?.maybe_cover_image_public_bucket_path || "");
- console.log("😎 loaded target media",media);
-
const onClick = () => {
if (coverToken) {
EditCoverImage(targetToken,{
cover_image_media_file_token: coverToken,
})
.then((res: EditCoverImageResponse) => {
-
+ history.push(`/media/${targetToken}`);
});
}
};
@@ -50,14 +49,18 @@ export default function EditCoverImagePage() {
Current cover image
{
media?.cover_image?.maybe_cover_image_public_bucket_path ?
-
![]()
:
+
![]()
:
No cover image
}
{
+ const coverMediaPath = mediaFile?.cover_image?.maybe_cover_image_public_bucket_path || "";
+ if (mediaFile) {
+ switch (mediaFile.media_type) {
+ case MediaFileType.BVH:
+ case MediaFileType.GLB:
+ case MediaFileType.GLTF:
+ case MediaFileType.SceneRon: return ;
+ default: return null;
+ }
+ }
+ }
+
return (
+ {
+ showEngineCover()
+ }
{title}
@@ -790,9 +813,7 @@ export default function MediaPage() {
- {canEditMediaFile(
- mediaFile?.maybe_creator_user?.user_token || ""
- ) && (
+ { viewerCanEdit && (
<>