@ihabdevteam/core 0.8.0

package/dist/packages/core/src/components/Training/TrainingStepAudioPlayer.css

@@ -0,0 +1,320 @@
+/* AudioPlayer — moved into TrainingStep and renamed to TrainingStepAudioPlayer */
+.audio-player {
+    width: 100%;
+    display: flex;
+    /* 패널 아래 안내 문구(no-waveform) 배치를 위해 세로 방향 — 자식이 패널 하나뿐일 땐 기존과 동일 */
+    flex-direction: column;
+    align-items: center;
+}
+
+/* 문장 waveform을 숨긴 화면(소리 비교 등) 안내 문구 — 패널 아래 좌측 정렬, 경고 아이콘 포함 */
+.audio-player__no-waveform {
+    margin: 6px 0 0;
+    align-self: flex-start;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    color: var(--color-lightGray);
+}
+/* 아이콘 래퍼가 라인 높이만큼 커져 텍스트와 수평(세로 중앙)이 어긋나지 않도록 */
+.audio-player__no-waveform .iconRenderer-icon {
+    display: inline-flex;
+    align-items: center;
+}
+
+.audio-player__panel {
+    position: relative;
+    width: 100%;
+    height: 120px;
+    border-radius: var(--radius-m);
+    background: linear-gradient(var(--angle, 90deg), var(--color-main), var(--color-sub));
+    display: flex;
+    align-items: center;
+}
+
+.audio-player.is-disabled .audio-player__panel {
+    background: var(--color-darkWhite);
+    border: 1px solid var(--color-darkWhite);
+}
+.audio-player.is-disabled .audio-player__play,
+.audio-player.is-disabled .audio-player__buttons,
+.audio-player.is-disabled .audio-player__wave {
+    pointer-events: none;
+}
+.audio-player.is-disabled .audio-player__play .button,
+.audio-player.is-disabled .audio-player__buttons .button {
+    opacity: 0.7;
+}
+
+.audio-player__play {
+    position: relative;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0;
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 160ms ease, transform 160ms ease;
+}
+
+.audio-player__play.is-visible {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.audio-player__panel>.button {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 35;
+    transition: opacity 160ms ease, transform 160ms ease;
+    will-change: opacity, transform;
+}
+
+/* ── Triangle listen button ── */
+.audio-player__button {
+    position: absolute;
+    inset: 0;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 35;
+    padding: 0;
+}
+.audio-player__button-triangle-wrap {
+    width: 90px;
+    height: 90px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform .32s cubic-bezier(.2,.7,.2,1);
+}
+.audio-player__button:hover .audio-player__button-triangle-wrap { transform: scale(1.18); }
+.audio-player__button:active .audio-player__button-triangle-wrap { transform: scale(1.06); }
+.audio-player__button-triangle {
+    width: 100%;
+    height: 100%;
+}
+.audio-player__button-triangle path {
+    fill: none;
+    stroke: #ffffff;
+    stroke-width: 2.6;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+}
+.audio-player.is-disabled .audio-player__button { cursor: default; opacity: 0.5; pointer-events: none; }
+
+.audio-player__slider {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    right: 20px;
+    bottom: 50px;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    pointer-events: none;
+}
+
+.audio-player__buttons {
+    position: absolute;
+    left: 0;
+    right:0;
+    bottom: 10px;
+    height: 28px;
+    display: flex;
+    gap: 0px;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    z-index: 40;
+    pointer-events: auto;
+    border-radius: 999px;
+}
+
+.audio-player__source-buttons {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: visible;
+    border: 1px solid var(--color-white-a30);
+    border-radius: var(--radius-m);
+}
+.audio-player__source-buttons .button {
+    flex: 0 0 auto;
+    max-width: 60px;
+}
+
+.audio-player__buttons .button[aria-label="이전"],
+.audio-player__buttons .button[aria-label="정지"],
+.audio-player__buttons .button[aria-label="다음"] {
+    display: none;
+}
+
+.audio-player__buttons>.button {
+    width: auto;
+    margin: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.audio-player__fill {
+    position: absolute;
+    left: 0;
+    top: 50%;
+    height: 100%;
+    width: 8px;
+    transform: translateX(-50%) translateY(-50%) scaleY(0);
+    transform-origin: center center;
+    border-radius: var(--radius-sm);
+    background: var(--color-pureWhite);
+    pointer-events: none;
+    z-index: 70; /* waveform(58~62) 앞으로 */
+    transition: transform 280ms cubic-bezier(.2,.8,.2,1), opacity 160ms ease;
+    will-change: transform, opacity;
+    backface-visibility: hidden;
+    opacity: 0;
+}
+
+.audio-player__fill.is-visible { opacity: 1; }
+.audio-player__fill.is-expanded { transform: translateX(-50%) translateY(-50%) scaleY(1); }
+.audio-player__fill.is-paused { transition: opacity 160ms ease; }
+
+/* out 애니메이션: 마커가 축소되며 사라집니다 */
+.audio-player__fill.is-out {
+    animation: audio-player-fill-out 280ms cubic-bezier(.2,.8,.2,1) forwards;
+}
+
+@keyframes audio-player-fill-out {
+    from {
+        opacity: 1;
+        transform: translateX(-50%) translateY(-50%) scaleY(1);
+    }
+    to {
+        opacity: 0;
+        transform: translateX(-50%) translateY(-50%) scaleY(0);
+    }
+}
+
+
+.audio-player__loading {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+    padding: 0;
+    background: transparent;
+    color: var(--audio-loading-foreground, rgba(0, 0, 0, 0.85));
+    border-radius: var(--radius-sm);
+    font-size: 13px;
+    z-index: 999;
+    pointer-events: none;
+}
+
+.audio-player__debug {
+  position: absolute;
+  right: 12px;
+  top: 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: rgba(255,255,255,0.06);
+  padding: 6px 10px;
+  border-radius: 18px;
+  color: white;
+  font-size: 12px;
+  pointer-events: none;
+}
+
+.audio-player__debug-dot {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 10px;
+  box-shadow: 0 0 6px rgba(0,0,0,0.4);
+}
+
+/* Show spinner only during loading — hide the textual label.
+   !important 불필요 — .audio-player__loading-text의 display를 지정하는 규칙이 이것뿐이라 경합 대상이 없음. */
+.audio-player__loading .audio-player__loading-text,
+.audio-player__panel.is-loading .audio-player__loading-text {
+    display: none;
+}
+
+.audio-player__loading-spinner {
+    width: 40px;
+    height: 40px;
+    border: 4px solid rgba(255, 255, 255, 0.2);
+    border-top-color: #ffffff;
+    border-radius: 50%;
+    animation: audio-player-spinner 900ms linear infinite;
+    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));
+}
+
+@keyframes audio-player-spinner { to { transform: rotate(360deg); } }
+
+.audio-player__wave { position: absolute; width: 100%; height: 90%; z-index: 60; display: flex; align-items: center; justify-content: center; pointer-events: none; }
+
+/* 두 레이어(미재생/재생)를 겹쳐서 진행도를 시각화합니다 */
+.audio-player__wave-inner { display: flex; align-items: center; gap: var(--bar-gap, 3px); padding: 0; width: 100%; margin: 0 auto; justify-content: center; z-index: 60; height: 100%; pointer-events: none; cursor: default; }
+.audio-player__wave-inner:not(.is-ready) .audio-player__bar::after { opacity: 0; }
+.audio-player__wave-inner.is-ready .audio-player__bar::after {
+  animation: wave-bar-in 350ms cubic-bezier(.22,.9,.3,1) both;
+  animation-delay: calc(var(--i, 0) * 2ms);
+}
+@keyframes wave-bar-in {
+  from { transform: translateY(-50%) scaleY(0.05); opacity: 0; }
+  to   { transform: translateY(-50%) scaleY(var(--val, 0.15)); opacity: 1; }
+}
+/* MIN_BAR_PX 이하로 숨겨지는 바(--hidden)는 등장 애니메이션 중간에 잠깐 비쳐 보이는 것도 막는다 */
+.audio-player__wave-inner.is-ready .audio-player__bar--hidden::after,
+.audio-player__wave-noise.is-ready .audio-player__bar--hidden::after {
+  animation: none;
+  opacity: 0;
+}
+.audio-player__wave-played { position: absolute; left: 0; right: 0; top: 0; bottom: 0; /* clip-path 으로 재생된 구간만 표시 — RAF 루프가 --progress 를 직접 갱신합니다 */ clip-path: inset(0 calc((1 - var(--progress, 0)) * 100%) 0 0); pointer-events: none; }
+.audio-player__bar { flex: 0 0 var(--bar-w, 3px); height: 100%; position: relative; box-sizing: border-box; }
+/* 미재생 바: 사운드 크기에 비례한 opacity (0 ~ 70%). 가로 위치 비율(--mix)로 lightMain~lightSub 그라디언트 */
+.audio-player__wave-unplayed .audio-player__bar::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%) scaleY(var(--val, 0.15)); transform-origin: center center; height: 100%; background: color-mix(in srgb, var(--color-lightMain), var(--color-lightSub) calc(var(--mix, 0) * 100%)); border-radius: 999px; opacity: 1; z-index: 61; }
+/* 재생된 바: 사운드 크기에 비례한 opacity (0 ~ 70%). 가로 위치 비율(--mix)로 lightMain~lightSub 그라디언트 */
+.audio-player__wave-played .audio-player__bar::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%) scaleY(var(--val, 0.15)); transform-origin: center center; height: 100%; background: color-mix(in srgb, var(--color-lightMain), var(--color-lightSub) calc(var(--mix, 0) * 100%)); border-radius: 999px; opacity: 1; z-index: 62; }
+
+/* 소음 waveform — 문장 바 뒤에 깔리는 은은한 레이어. 진하기는 --noise-op(소음 크기)로 조절 */
+.audio-player__wave-noise {
+  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
+  display: flex; align-items: center; justify-content: center;
+  gap: var(--bar-gap, 3px); width: 100%; margin: 0 auto;
+  z-index: 58; pointer-events: none;
+}
+.audio-player__wave-noise .audio-player__bar::after {
+  content: ""; position: absolute; left: 0; right: 0; top: 50%;
+  transform: translateY(-50%) scaleY(var(--val, 0.1));
+  transform-origin: center center; height: 100%;
+  background: color-mix(in srgb, var(--color-deepMain), var(--color-deepSub) calc(var(--mix, 0) * 100%));
+  border-radius: 999px;
+  opacity: 1; z-index: 58;
+}
+/* 문장 바(.audio-player__wave-inner)와 동일한 진입 연출 — is-ready 전까지 숨겨서 계산 완료 시 동시에 드러난다 */
+.audio-player__wave-noise:not(.is-ready) .audio-player__bar::after { opacity: 0; }
+.audio-player__wave-noise.is-ready .audio-player__bar::after {
+  animation: wave-bar-in 350ms cubic-bezier(.22,.9,.3,1) both;
+  animation-delay: calc(var(--i, 0) * 2ms);
+}
+
+.audio-player__segments { display: flex; align-items: center; height: 100%; width: 100%; position: relative; gap: var(--bar-gap, 3px); }
+.audio-player__segment { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; pointer-events: auto; cursor: pointer; padding: 10px 0; }
+.audio-player__segment-inner { display: flex; align-items: center; gap: var(--bar-gap, 3px); height: 100%; width: 100%; justify-content: center; }

package/dist/packages/core/src/components/Training/TrainingStepAudioPlayer.d.ts

@@ -0,0 +1,5 @@
+import './TrainingStepAudioPlayer.css';
+export type { SoundSource, TrainingStepAudioPlayerProps } from './trainingStepAudioPlayerTypes';
+import type { TrainingStepAudioPlayerProps } from './trainingStepAudioPlayerTypes';
+/** @public */
+export default function TrainingStepAudioPlayer({ btnLabel, soundSrc, bucketPath, onDone, disabled, ttsText, className, showSoundWaveForm, showNoiseWaveForm }: TrainingStepAudioPlayerProps): import("react").JSX.Element;