@visualizevalue/mint-app-base 0.1.94 → 0.1.96
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/components/Embed.vue
CHANGED
|
@@ -3,7 +3,15 @@
|
|
|
3
3
|
class="embed"
|
|
4
4
|
@touchmove.stop.prevent="() => null"
|
|
5
5
|
>
|
|
6
|
-
<video
|
|
6
|
+
<video
|
|
7
|
+
v-if="isPlayable"
|
|
8
|
+
:autoplay="autoplay"
|
|
9
|
+
:loop="loop"
|
|
10
|
+
:muted="muted"
|
|
11
|
+
:controls="controls"
|
|
12
|
+
playsinline
|
|
13
|
+
crossorigin="anonymous"
|
|
14
|
+
>
|
|
7
15
|
<source :src="src" :type="mediaType">
|
|
8
16
|
Your browser does not support the video tag.
|
|
9
17
|
</video>
|
|
@@ -45,6 +53,22 @@ async function fetchMediaType(url: string): Promise<string | null> {
|
|
|
45
53
|
const config = useRuntimeConfig()
|
|
46
54
|
const props = defineProps({
|
|
47
55
|
src: String,
|
|
56
|
+
muted: {
|
|
57
|
+
type: Boolean,
|
|
58
|
+
default: true,
|
|
59
|
+
},
|
|
60
|
+
loop: {
|
|
61
|
+
type: Boolean,
|
|
62
|
+
default: true,
|
|
63
|
+
},
|
|
64
|
+
autoplay: {
|
|
65
|
+
type: Boolean,
|
|
66
|
+
default: true,
|
|
67
|
+
},
|
|
68
|
+
controls: {
|
|
69
|
+
type: Boolean,
|
|
70
|
+
default: false,
|
|
71
|
+
},
|
|
48
72
|
})
|
|
49
73
|
|
|
50
74
|
// Update on input change
|
|
@@ -74,13 +98,17 @@ watch(width, () => {
|
|
|
74
98
|
<style scoped>
|
|
75
99
|
.embed {
|
|
76
100
|
width: 100%;
|
|
77
|
-
height:
|
|
78
|
-
|
|
101
|
+
min-height: 20vh;
|
|
102
|
+
aspect-ratio: auto;
|
|
103
|
+
display: grid;
|
|
104
|
+
align-items: center;
|
|
105
|
+
justify-content: center;
|
|
79
106
|
position: relative;
|
|
80
107
|
touch-action: none;
|
|
81
108
|
overflow: hidden;
|
|
82
109
|
|
|
83
110
|
iframe {
|
|
111
|
+
aspect-ratio: 1/1;
|
|
84
112
|
width: 100%;
|
|
85
113
|
height: 100%;
|
|
86
114
|
position: absolute;
|
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
class="image"
|
|
4
4
|
:class="{ loaded }"
|
|
5
5
|
@click="$emit('click')"
|
|
6
|
-
:style="{ padding: `0 0 ${height}` }"
|
|
7
6
|
v-intersection-observer="loadImage"
|
|
8
7
|
>
|
|
9
8
|
<Loading v-if="! loaded" txt=""/>
|
|
@@ -31,15 +30,6 @@ const emit = defineEmits(['click', 'loaded'])
|
|
|
31
30
|
const uri = ref('')
|
|
32
31
|
const loaded = ref(false)
|
|
33
32
|
const imageEl = ref(null)
|
|
34
|
-
const aspectRatio = ref(1)
|
|
35
|
-
const computeAspectRatio = () => {
|
|
36
|
-
aspectRatio.value = (
|
|
37
|
-
props.aspectRatio || // The passed aspect ratio
|
|
38
|
-
(imageEl.value?.naturalWidth / (imageEl.value?.naturalHeight || 1)) || // The natural image element ratio
|
|
39
|
-
1 // The default square ratio
|
|
40
|
-
)
|
|
41
|
-
}
|
|
42
|
-
computeAspectRatio()
|
|
43
33
|
const height = computed(() => (1 / aspectRatio.value) * 100 + '%')
|
|
44
34
|
|
|
45
35
|
const loadImage = ([{ isIntersecting }]) => {
|
|
@@ -63,10 +53,9 @@ const imageLoaded = () => {
|
|
|
63
53
|
article.image {
|
|
64
54
|
overflow: hidden;
|
|
65
55
|
background-color: var(--background);
|
|
56
|
+
aspect-ratio: auto 1;
|
|
66
57
|
overflow: hidden;
|
|
67
58
|
position: relative;
|
|
68
|
-
height: 0;
|
|
69
|
-
padding-bottom: 100%;
|
|
70
59
|
display: flex;
|
|
71
60
|
|
|
72
61
|
.loader {
|
|
@@ -78,17 +67,11 @@ article.image {
|
|
|
78
67
|
}
|
|
79
68
|
|
|
80
69
|
img {
|
|
81
|
-
position: absolute;
|
|
82
|
-
top: 0;
|
|
83
|
-
left: 0;
|
|
84
|
-
right: 0;
|
|
85
|
-
bottom: 0;
|
|
86
70
|
width: 100%;
|
|
87
|
-
height:
|
|
71
|
+
height: auto;
|
|
88
72
|
object-fit: cover;
|
|
89
73
|
object-fit: contain;
|
|
90
74
|
transform: scale(1.2);
|
|
91
|
-
width: 100%;
|
|
92
75
|
opacity: 0;
|
|
93
76
|
transition: all var(--speed);
|
|
94
77
|
image-rendering: pixelated;
|
|
@@ -67,7 +67,7 @@ const { price, displayPrice } = useMintPrice(mintCount)
|
|
|
67
67
|
const mintRequest = computed(() => async () => {
|
|
68
68
|
const count = BigInt(props.mintCount)
|
|
69
69
|
|
|
70
|
-
const priceWithBlockBuffer = price.value *
|
|
70
|
+
const priceWithBlockBuffer = price.value * 110n / 100n
|
|
71
71
|
|
|
72
72
|
return writeContract($wagmi, {
|
|
73
73
|
abi: MINT_ABI,
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
<article class="token-detail">
|
|
3
3
|
<div class="artifact">
|
|
4
4
|
<div>
|
|
5
|
-
<Embed v-if="token.animationUrl" :src="token.animationUrl" />
|
|
5
|
+
<Embed v-if="token.animationUrl" :src="token.animationUrl" :muted="false" controls />
|
|
6
6
|
<Image v-else-if="token.image" :src="token.image" :alt="token.name" />
|
|
7
7
|
<ImageVoid v-else />
|
|
8
8
|
</div>
|