Add player component and integrate into app layout
This commit is contained in:
1 parent
5b3ce94494
commit
d0d06f1513
4 files changed
+53
-1
No files matched your search
@@ -0,0 +1,37 @@
|
||||
<script setup lang="tsx">
|
||||
const widthFixer = useTemplateRef("width-fixer")
|
||||
const player = useTemplateRef("player")
|
||||
|
||||
onMounted(() => {
|
||||
const resizeObserver = new ResizeObserver((entries) => {
|
||||
for (const entry of entries) {
|
||||
if (player.value)
|
||||
player.value.style.width = `${entry.target.clientWidth}px`
|
||||
}
|
||||
})
|
||||
|
||||
if (widthFixer.value) resizeObserver.observe(widthFixer.value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="width-fixer" ref="width-fixer"></div>
|
||||
<article class="player" ref="player"></article>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use "@/styles/variables" as *;
|
||||
|
||||
#width-fixer {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.player {
|
||||
position: fixed;
|
||||
bottom: 1rem;
|
||||
|
||||
height: 72px;
|
||||
|
||||
border-radius: $border-radius-standard;
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user