Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix audio video #351

Merged
merged 3 commits into from
Apr 26, 2023
Merged

Fix audio video #351

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f8f3dee
audio
dlaxcess Apr 25, 2023
5e6c994
refacto video
dlaxcess Apr 25, 2023
a3d1bef
clean PR
dlaxcess Apr 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions gulp/scss/front.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -248,6 +248,10 @@
position: relative;
}

.kre-media-line {
display: inline-block;
}

.detail {
position: absolute;
left: 0;
Expand Down
1 change: 1 addition & 0 deletions hardhat/lib/forge-std
Open in desktop
Submodule forge-std added at 2a2ce3
2 changes: 1 addition & 1 deletion svelte/components/Input/InputVideoMint.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
<div class="box-file">
{#if video}
<div class="kre-video-mint">
<MediaVideo src={video} mode="line" small={true} controls={true} muted={true} />
<MediaVideo src={video} mode="line" />

<span class="kre-delete-file" on:click={resetFileVideo} on:keydown={resetFileVideo}
><i class="fa fa-trash" aria-hidden="true" /></span
Expand Down
3 changes: 3 additions & 0 deletions svelte/components/Main/Dapp.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,9 @@
let refreshAll: Writable<number> = writable(1);
setContext("refreshAll", refreshAll);

let toPlayTokenID: Writable<string> = writable("");
setContext("toPlayTokenID", toPlayTokenID);

$: refresh = refreshingCollections || refreshingNfts;

// SET chainId on memataskChainId change
Expand Down
3 changes: 3 additions & 0 deletions svelte/components/Main/OpenSky.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,9 @@
let refreshAll: Writable<number> = writable(1);
setContext("refreshAll", refreshAll);

let toPlayTokenID: Writable<string> = writable("");
setContext("toPlayTokenID", toPlayTokenID);

const setNetwork = async () => {
if (chainId != $metamaskChainId) {
await metamaskSwitchChain(chainId);
Expand Down
2 changes: 1 addition & 1 deletion svelte/components/Media/Media.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
let gridScale = mode.startsWith("grid") ? " a-simul-cursor" : "";
</script>

<div id="media-{mode}-{tokenID}" class="media {cssMedia} media-{nftMediaContentType($nft)}{gridScale}">
<div id="media-{mode}-{tokenID}" class="media kre-media-{mode} {cssMedia} media-{nftMediaContentType($nft)}{gridScale}">
{#if nftMediaAnimationUrl($nft)}
<MediaAudio
animation_url={nftMediaAnimationUrl($nft)}
Expand Down
134 changes: 66 additions & 68 deletions svelte/components/Media/MediaAudio.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,59 +4,90 @@

import MediaImage from "./MediaImage.svelte";
/////////////////////////////////////////////////
// <DisplayAudio {src} {animation_url} {mode}? {alt}? {index}? {small}? {paused}? />
// <DisplayAudio {src} {tokenID} {animation_url} {mode}? {alt}? {paused}? />
// Display a player audio with its cover image according to its entering parameters
/////////////////////////////////////////////////
export let src: string;
export let tokenID: string = undefined;
export let animation_url: string;
export let mode: string = "line";
export let alt: string = "Cover image";
export let small: boolean = true;
export let paused: boolean = true;

let toPlayTokenID: Writable<string> = getContext("toPlayTokenID");
$: paused = $toPlayTokenID !== tokenID;
const playAudio = () => {
if (mode === "zoom") {

const togglePlayAudio = () => {
paused = !paused;
if (toPlayTokenID) {
$toPlayTokenID = $toPlayTokenID !== tokenID ? tokenID : "";
}
};

$: if (toPlayTokenID && $toPlayTokenID !== tokenID) paused = true;
$: mode && resetToPlayTokenID();
const resetToPlayTokenID = () => {
if (toPlayTokenID) $toPlayTokenID = "";
};
</script>

<div class="audio-cover-image {small ? '' : 'audioDeployed'}">
<div class="audio-cover-image">
<MediaImage {src} {alt} />
</div>
{#if small}
{#if mode === "line"}
<audio preload="none" bind:paused src={animation_url}>
<track kind="captions" />
Your browser does not support the
<code>audio</code> element.
</audio>
<button on:click={playAudio} class="krd-play-audio-button krd-play-audio-line-button">
<i class="fa {paused ? 'fa-play-circle' : 'fa-pause-circle'} video-play-icon" />
</button>
{:else}
<!-- <audio controls preload="none" bind:this={player} src={animation_url}> -->
<audio controls preload="none" bind:paused src={animation_url}>
<!-- <audio controls preload="none" src={animation_url}> -->
<track kind="captions" />
Your browser does not support the
<code>audio</code> element.
</audio>
<button on:click={playAudio} class="krd-play-audio-button">
<i class="fa {paused ? 'fa-play-circle' : 'fa-pause-circle'} video-play-icon" />
</button>
{/if}

{#if mode == "zoom"}
<audio class="kre-zoom-audio" controls autoplay src={animation_url}>
Your browser does not support the
<code>audio</code> element.
</audio>
{:else}
<audio controls autoplay src={animation_url}>
<!-- <audio controls preload="none" bind:this={player} src={animation_url}> -->
<audio preload="none" bind:paused src={animation_url}>
<!-- <audio controls preload="none" src={animation_url}> -->
<track kind="captions" />
Your browser does not support the
<code>audio</code> element.
</audio>
<button
on:click|stopPropagation={togglePlayAudio}
class="kre-play-media-button {mode === 'line' && 'kre-play-media-line-button'}"
>
<i class="fa {paused ? 'fa-play-circle' : 'fa-pause-circle'} video-play-icon" />
</button>
{/if}

<style>
.kre-play-media-button {
position: absolute;
bottom: 2%;
right: 2%;
background-color: transparent;
color: white;
border: none;
font-size: 2.7rem;
}

.kre-play-media-button i {
position: absolute;
bottom: 0;
right: 0;
background-color: lightgray;
border-radius: 50%;
cursor: pointer;
}

.kre-play-media-line-button {
top: 65px;
left: 35px;
bottom: unset;
width: 2.3rem;
font-size: 2.3rem;
}

.kre-play-media-line-button i {
border: 1px solid lightgray;
}

/* Specific for audio */
audio::-webkit-media-controls-enclosure {
border-radius: 6px;
background-color: rgba(0, 0, 0, 0.5);
Expand All @@ -71,51 +102,18 @@
height: 100%;
}

.audio-cover-image:not(.audioDeployed) + audio {
.kre-zoom-audio {
width: 50%;
position: absolute;
bottom: 0;
bottom: 60px;
left: 50%;
transform: translate(-50%, 0%);
width: 100%;
height: 54px;
transform: translate(-50%, 0);
}

@supports (-moz-appearance: none) {
/* @supports (-moz-appearance: none) {
.audio-cover-image:not(.audioDeployed) + audio {
padding: 0px 0 7px 0;
background-color: rgba(0, 0, 0, 1);
}
}

.audioDeployed + audio {
transform: translate(50%, 15%);
}

.krd-play-audio-button {
position: absolute;
bottom: 9px;
left: 0;
background-color: transparent;
color: white;
border: none;
font-size: 3.5rem;
}

.krd-play-audio-button i {
position: absolute;
bottom: 0;
background-color: lightgray;
border-radius: 50%;
cursor: pointer;
}

.krd-play-audio-line-button {
top: 65px;
left: 35px;
bottom: unset;
}

.krd-play-audio-line-button i {
border: 1px solid lightgray;
}
} */
</style>
28 changes: 24 additions & 4 deletions svelte/components/Media/MediaPreview.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,16 @@
<script lang="ts">
import { fade } from "svelte/transition";
import type { Writable } from "svelte/store";
import { getContext } from "svelte";

import Media from "./Media.svelte";
import { fade } from "svelte/transition";

import { clickOutside } from "@helpers/clickOutside";
import { nftMediaAnimationUrl, nftMediaContentType } from "@lib/nft/nft";
import { nftStore } from "@stores/nft/nft";

/////////////////////////////////////////////////
// <MediaPreview {chainId} {address} {tokenID} />
// <MediaPreview {chainId} {address} {tokenID} {mode}? />
// Display a clickable preview of media opening a zoom modal with full media
// Modal closing by clickoutside
/////////////////////////////////////////////////////////////////
Expand All @@ -14,14 +19,25 @@
export let tokenID: string;
export let mode: string = undefined;
/////////////////////////////////////////////////////////////////
let toPlayTokenID: Writable<string> = getContext("toPlayTokenID");

$: nft = nftStore(chainId, address, tokenID);
$: isAnimationMedia = nftMediaContentType($nft) === "video" || nftMediaAnimationUrl($nft) !== "";

let popupOpen = false;
const popupToggle = (): boolean => (popupOpen = !popupOpen);
const popupToggle = (): void => {
if (toPlayTokenID) $toPlayTokenID = "";
popupOpen = !popupOpen;
};
</script>

<div class="media-zoom">
<div class="media">
<span class="krd-pointer zoom-hover" on:click={popupToggle} on:keydown={popupToggle}>
<span
class="krd-pointer {isAnimationMedia ? 'no-zoom-hover' : 'zoom-hover'}"
on:click={popupToggle}
on:keydown={popupToggle}
>
<i class="fas fa-search" />
<Media {chainId} {address} {tokenID} {mode} />
</span>
Expand Down Expand Up @@ -92,4 +108,8 @@
.media-zoom .media .zoom-hover:hover .fas {
opacity: 1;
}

.krd-pointer.no-zoom-hover i.fas {
display: none;
}
</style>
Loading