Skip to content

Commit

Permalink
Merge pull request #7701 from roiLeo/fix/ui/errors
Browse files Browse the repository at this point in the history
  • Loading branch information
yangwao authored Oct 17, 2023
2 parents 7b790d4 + d60f4cf commit fa839bd
Show file tree
Hide file tree
Showing 21 changed files with 57 additions and 36 deletions.
1 change: 1 addition & 0 deletions libs/ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
},
"dependencies": {
"@google/model-viewer": "^1.12.1",
"@vueuse/core": "^9.13.0",
"bulma": "0.9.4",
"vue": "^3.3.4",
"vue-audio-visual": "2.5.0"
Expand Down
22 changes: 9 additions & 13 deletions libs/ui/src/components/MediaItem/MediaItem.story.vue
Original file line number Diff line number Diff line change
@@ -1,36 +1,32 @@
<template>
<Story title="MediaItem">
<Variant title="default">
<MediaItem />
</Variant>

<Variant title="image">
<MediaItem
src="https://kodadot.mypinata.cloud/ipfs/bafybeig6clbsbabxkku3m4furbj4klayyx7ovwtcocmgwqmv4nxllnbxxy" />
src="https://image-beta.w.kodadot.xyz/ipfs/bafybeig6clbsbabxkku3m4furbj4klayyx7ovwtcocmgwqmv4nxllnbxxy" />
</Variant>

<Variant title="video">
<MediaItem
src="https://kodadot.mypinata.cloud/ipfs/bafybeib22hxgpef7lpoltxsi2p2bm7jjhnntwedeupdjcz4pxgfps6dz7i"
animation-src="https://kodadot.mypinata.cloud/ipfs/bafybeigy4tyylo7hvk5qovlqwahl5dnh56wzdt3rrawceyqrlmvmbw7sey"
src="https://image-beta.w.kodadot.xyz/ipfs/bafybeib22hxgpef7lpoltxsi2p2bm7jjhnntwedeupdjcz4pxgfps6dz7i"
animation-src="https://image-beta.w.kodadot.xyz/ipfs/bafybeigy4tyylo7hvk5qovlqwahl5dnh56wzdt3rrawceyqrlmvmbw7sey"
mime-type="video/mp4" />
</Variant>

<Variant title="audio">
<MediaItem
src="https://kodadot.mypinata.cloud/ipfs/bafybeig6dnjacg4sipst4tkxm36ykkfuqkkb5dvfaale4u65hjtdlspvri"
animation-src="https://kodadot.mypinata.cloud/ipfs/bafybeibuet6ba3xquuhiurq2on2i5ccibuh3s7aiqp6c2gqlokgtgwvu5y"
src="https://image-beta.w.kodadot.xyz/ipfs/bafybeig6dnjacg4sipst4tkxm36ykkfuqkkb5dvfaale4u65hjtdlspvri"
animation-src="https://image-beta.w.kodadot.xyz/ipfs/bafybeibuet6ba3xquuhiurq2on2i5ccibuh3s7aiqp6c2gqlokgtgwvu5y"
mime-type="audio/mpeg" />
</Variant>

<Variant title="3d">
<MediaItem
animation-src="https://kodadot.mypinata.cloud/ipfs/bafybeiemgzrougue4cwbf3g5ejnmrjrjxdy45522zecz6eukcpwg42z2g4" />
animation-src="https://image-beta.w.kodadot.xyz/ipfs/bafybeiemgzrougue4cwbf3g5ejnmrjrjxdy45522zecz6eukcpwg42z2g4" />
</Variant>

<Variant title="json">
<MediaItem
src="https://kodadot.mypinata.cloud/ipfs/bafkreiatmzjr4tx46tyjh63bpyici6sb54cllvuozj2t2ct2vbx4ez4puy"
src="https://image-beta.w.kodadot.xyz/ipfs/bafkreiatmzjr4tx46tyjh63bpyici6sb54cllvuozj2t2ct2vbx4ez4puy"
mime-type="application/json" />
</Variant>

Expand All @@ -41,13 +37,13 @@

<Variant title="pdf">
<MediaItem
src="https://kodadot.mypinata.cloud/ipfs/bafybeih6yrucucyamosb2nk4qch4cg4bxdv3yheortwawttslvt7ameiiu"
src="https://image-beta.w.kodadot.xyz/ipfs/bafybeih6yrucucyamosb2nk4qch4cg4bxdv3yheortwawttslvt7ameiiu"
mime-type="application/pdf" />
</Variant>

<Variant title="unknown">
<MediaItem
src="https://kodadot.mypinata.cloud/ipfs/bafybeih6yrucucyamosb2nk4qch4cg4bxdv3yheortwawttslvt7ameiiu"
src="https://image-beta.w.kodadot.xyz/ipfs/bafybeih6yrucucyamosb2nk4qch4cg4bxdv3yheortwawttslvt7ameiiu"
mime-type="unknown" />
</Variant>
</Story>
Expand Down
13 changes: 8 additions & 5 deletions libs/ui/src/components/MediaItem/MediaItem.vue
Original file line number Diff line number Diff line change
Expand Up @@ -46,9 +46,12 @@
</template>

<script lang="ts" setup>
import { computed, ref, watch } from 'vue'
import { useElementHover } from '@vueuse/core'
import { NeoButton, NeoIcon } from '@kodadot1/brick'
import { getMimeType, resolveMedia } from '@/utils/gallery/media'
import { MediaType } from '@/components/rmrk/types'
import { NeoButton, NeoIcon } from '@kodadot1/brick'
import ImageMedia from './type/ImageMedia.vue'
import VideoMedia from './type/VideoMedia.vue'
import AudioMedia from './type/AudioMedia.vue'
Expand All @@ -57,7 +60,6 @@ import JsonMedia from './type/JsonMedia.vue'
import IFrameMedia from './type/IFrameMedia.vue'
import ObjectMedia from './type/ObjectMedia.vue'
import Media from './type/UnknownMedia.vue'
import { useElementHover } from '@vueuse/core'
const SUFFIX = 'Media'
const props = withDefaults(
Expand Down Expand Up @@ -86,7 +88,10 @@ const props = withDefaults(
disableOperation: undefined,
},
)
const isInteractive = ref<boolean>(false)
const isInteractive = computed(() => {
return resolveMedia(mimeType.value) === MediaType.IFRAME && !props.isDetail
})
const type = ref('')
// props.mimeType may be empty string "". Add `image/png` as fallback
Expand All @@ -105,9 +110,7 @@ const components = {
const resolveComponent = computed(() => {
let mediaType = resolveMedia(mimeType.value)
if (mediaType === MediaType.IFRAME && !props.isDetail) {
isInteractive.value = true
mediaType = MediaType.IMAGE
}
return components[mediaType + SUFFIX]
Expand Down
3 changes: 2 additions & 1 deletion libs/ui/src/components/MediaItem/type/AudioMedia.vue
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,10 @@
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { useElementHover, watchDebounced } from '@vueuse/core'
import { NeoAudioPlayer } from '@kodadot1/brick'
import ImageMedia from './ImageMedia.vue'
import { useElementHover, watchDebounced } from '@vueuse/core'
const props = withDefaults(
defineProps<{
Expand Down
2 changes: 2 additions & 0 deletions libs/ui/src/components/MediaItem/type/VideoMedia.vue
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@
</template>

<script lang="ts" setup>
import { computed } from 'vue'
const props = withDefaults(
defineProps<{
animationSrc?: string
Expand Down
1 change: 1 addition & 0 deletions libs/ui/src/components/NeoAudioPlayer/NeoAudioPlayer.vue
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'
import { useEventListener, useMediaControls } from '@vueuse/core'
import { NeoButton, NeoIcon, NeoSkeleton } from '@kodadot1/brick'
import { getRandomValues } from '@/components/unique/utils'
Expand Down
1 change: 1 addition & 0 deletions libs/ui/src/components/NeoAudioPlayer/NeoWaveform.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
</template>

<script setup lang="ts">
import { ref } from 'vue'
import WaveSurfer from 'wavesurfer.js'
const emit = defineEmits(['play', 'ready'])
Expand Down
2 changes: 1 addition & 1 deletion libs/ui/src/components/NeoAvatar/NeoAvatar.story.vue
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
import NeoAvatar from './NeoAvatar.vue'
const image =
'https://kodadot.mypinata.cloud/ipfs/bafybeigdh3ecetqmzplrjrovs5po23vwpikh2vgtfjai4vky5qzitjzaq4'
'https://image-beta.w.kodadot.xyz/ipfs/bafybeigdh3ecetqmzplrjrovs5po23vwpikh2vgtfjai4vky5qzitjzaq4'
const name = 'NFT Avatar'
const size = 70
Expand Down
2 changes: 2 additions & 0 deletions libs/ui/src/components/NeoAvatar/NeoAvatar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@
</template>

<script setup lang="ts">
import { computed } from 'vue'
const props = defineProps<{
avatar?: string
placeholder: string
Expand Down
1 change: 1 addition & 0 deletions libs/ui/src/components/NeoCheckbox/NeoCheckbox.vue
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
</template>

<script lang="ts" setup>
import { useVModel } from '@vueuse/core'
import { OCheckbox } from '@oruga-ui/oruga-next'
const props = defineProps<{
disabled?: boolean
Expand Down
13 changes: 8 additions & 5 deletions libs/ui/src/components/NeoDropdown/NeoDropdown.story.vue
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
<template>
<Story title="NeoDropdown" :layout="{ type: 'grid', width: '200px' }">
<Variant title="With Text">
{{ label }}
<NeoDropdownItem
v-for="(option, index) in options"
:key="index"
:item="option" />
<NeoDropdown>
<template #trigger>{{ label }}</template>

<NeoDropdownItem
v-for="(option, index) in options"
:key="index"
:item="option" />
</NeoDropdown>
</Variant>
<Variant title="With Button">
<NeoDropdown>
Expand Down
2 changes: 2 additions & 0 deletions libs/ui/src/components/NeoModal/NeoModal.vue
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { useVModel } from '@vueuse/core'
import { OModal } from '@oruga-ui/oruga-next'
const props = withDefaults(
Expand Down
1 change: 1 addition & 0 deletions libs/ui/src/components/NeoModalHead/NeoModalHead.vue
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { NeoButton, NeoIcon } from '@kodadot1/brick'
defineProps<{
Expand Down
6 changes: 5 additions & 1 deletion libs/ui/src/components/NeoNftCard/NFTMediaInfo.vue
Original file line number Diff line number Diff line change
Expand Up @@ -41,11 +41,15 @@
</div>
</div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { NftCardVariant } from '@kodadot1/brick'
import CommonTokenMoney from '@/components/shared/CommonTokenMoney.vue'
import { getChainNameByPrefix } from '@/utils/chain'
import { NftCardVariant } from '@kodadot1/brick'
import { NeoNFT } from './types'
const props = withDefaults(
defineProps<{
nft: NeoNFT
Expand Down
4 changes: 3 additions & 1 deletion libs/ui/src/components/NeoNftCard/NFTMediaInfoStacked.vue
Original file line number Diff line number Diff line change
Expand Up @@ -60,8 +60,10 @@
</template>

<script lang="ts" setup>
import CommonTokenMoney from '@/components/shared/CommonTokenMoney.vue'
import { computed } from 'vue'
import { NeoButton, NftCardVariant } from '@kodadot1/brick'
import CommonTokenMoney from '@/components/shared/CommonTokenMoney.vue'
import { NeoNFT } from './types'
const props = withDefaults(
Expand Down
4 changes: 3 additions & 1 deletion libs/ui/src/components/NeoNftCard/NeoNftCard.vue
Original file line number Diff line number Diff line change
Expand Up @@ -70,9 +70,11 @@
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { NeoSkeleton, NftCardVariant } from '@kodadot1/brick'
import type { ComputedOptions, ConcreteComponent, MethodOptions } from 'vue'
import MediaItem from '../MediaItem/MediaItem.vue'
import { NeoSkeleton, NftCardVariant } from '@kodadot1/brick'
import NFTMediaInfoStacked from './NFTMediaInfoStacked.vue'
import NFTMediaInfo from './NFTMediaInfo.vue'
import { NeoNFT } from './types'
Expand Down
2 changes: 2 additions & 0 deletions libs/ui/src/components/NeoSteps/NeoSteps.vue
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@
</template>

<script setup lang="ts">
import { useVModel } from '@vueuse/core'
import { computed } from 'vue'
import { OSteps } from '@oruga-ui/oruga-next'
const props = withDefaults(
Expand Down
1 change: 1 addition & 0 deletions libs/ui/src/components/NeoStickyModal/NeoStickyModal.vue
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@
</template>

<script setup lang="ts">
import { computed } from 'vue'
import NeoModal from '../NeoModal/NeoModal.vue'
import NeoButton from '../NeoButton/NeoButton.vue'
Expand Down
1 change: 1 addition & 0 deletions libs/ui/src/components/NeoTooltip/NeoTooltip.vue
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { OTooltip } from '@oruga-ui/oruga-next'
import { LocaleMessage } from 'vue-i18n'
export interface Props {
Expand Down
1 change: 0 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,6 @@
"@braintree/sanitize-url": "^6.0.4",
"@fortawesome/fontawesome-svg-core": "^6.4.2",
"@fortawesome/vue-fontawesome": "^3.0.3",
"@google/model-viewer": "^1.12.1",
"@kodadot1/brick": "workspace:*",
"@kodadot1/minimark": "^0.1.10",
"@kodadot1/minipfs": "0.4.1-rc.0",
Expand Down
10 changes: 3 additions & 7 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit fa839bd

Please sign in to comment.