<!-- 媒体加载状态组件，统一展示加载中和加载失败反馈。 -->
<script setup lang="ts">
import { CircleAlert, LoaderCircle } from "@/icons";

withDefaults(defineProps<{ failed?: boolean; compact?: boolean; label?: string; errorLabel?: string }>(), {
  failed: false,
  compact: false,
  label: "媒体加载中",
  errorLabel: "媒体加载失败",
});
</script>

<template>
  <div
    class="media-loading-state"
    :class="{ failed, compact }"
  >
    <CircleAlert
      v-if="failed"
      :size="24"
      :stroke-width="1.7"
    />
    <LoaderCircle
      v-else
      class="media-loading-spinner"
      :size="26"
      :stroke-width="1.8"
    />
    <span>{{ failed ? errorLabel : label }}</span>
  </div>
</template>

<style scoped>
.media-loading-state {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--web-media-loading-text);
  background: var(--web-media-state-mask);
  font-size: 12px;
  pointer-events: none;
}

.media-loading-state.failed {
  color: var(--web-media-error-text);
}

.media-loading-state.compact span {
  display: none;
}

.media-loading-state.compact svg {
  width: 19px;
  height: 19px;
}

.media-loading-spinner {
  animation: media-loading-spin 0.9s linear infinite;
}

@keyframes media-loading-spin {
  to {
    transform: rotate(360deg);
  }
}
</style>
