<template>
    <div class="mk-media-banner" @click.stop>
        <div
            v-if="magTransProperty(media, 'sensitive', 'isSensitive') && hide"
            class="sensitive"
            @click="hide = false"
        >
            <span class="icon"><i class="ph-warning ph-bold ph-lg"></i></span>
            <b>{{ i18n.ts.sensitive }}</b>
            <span>{{ i18n.ts.clickToShow }}</span>
        </div>
        <div
            v-else-if="
                ((type) => type.startsWith('audio') && type !== 'audio/midi')(
                    magTransProperty(media, 'mime_type', 'type')
                )
            "
            class="audio"
        >
            <MagVideoPlayer :video="media"></MagVideoPlayer>
        </div>
        <a
            v-else
            class="download"
            :href="media.url"
            :title="media.name"
            :download="media.name"
        >
            <span class="icon"
                ><i class="ph-download-simple ph-bold ph-lg"></i
            ></span>
            <b>{{ media.name }}</b>
        </a>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import type * as misskey from "calckey-js";
import { ColdDeviceStorage } from "@/store";
import { i18n } from "@/i18n";
import { packed } from "magnetar-common";
import { magTransProperty } from "@/scripts-mag/mag-util";

const props = withDefaults(
    defineProps<{
        media: packed.PackDriveFileBase | misskey.entities.DriveFile;
    }>(),
    {}
);

const audioEl = ref<HTMLAudioElement | null>();
let hide = ref(true);
</script>

<style lang="scss" scoped>
.mk-media-banner {
    width: 100%;
    border-radius: 4px;
    margin-top: 4px;
    overflow: hidden;
    --plyr-color-main: var(--accent);
    --plyr-audio-controls-background: var(--panelHighlight);
    --plyr-audio-controls-background-hover: var(--accentedBg);
    --plyr-audio-control-color: var(--navFg);

    > .download,
    > .sensitive {
        display: flex;
        align-items: center;
        font-size: 12px;
        padding: 8px 12px;
        white-space: nowrap;

        > * {
            display: block;
        }

        > b {
            overflow: hidden;
            text-overflow: ellipsis;
        }

        > *:not(:last-child) {
            margin-right: 0.2em;
        }

        > .icon {
            font-size: 1.6em;
        }
    }

    > .download {
        background: var(--noteAttachedFile);
    }

    > .sensitive {
        background: #111;
        color: #fff;
    }

    > .audio {
        .audio {
            display: block;
            width: 100%;
        }
    }
}
</style>
