@modul/mbui 0.0.2 → 0.0.3-beta-pv-52770-7d2f2b64

package/src/@/config/button.ts

@@ -0,0 +1,89 @@
+export default {
+	textColor: {
+		btn: {
+			primary: {
+				DEFAULT: 'var(--btn-primary)',
+				outline: {
+					DEFAULT: 'var(--btn-primary-bg)',
+					hover: 'var(--btn-primary-hover-bg)',
+					focus: 'var(var(--btn-primary-focus-bg)',
+					active: 'var(--btn-primary-active-bg)',
+				}
+			},
+			secondary: 'var(--btn-secondary)',
+			success: 'var(--btn-success)',
+			ghost: 'var(--btn-ghost)',
+			outline: {
+				DEFAULT: 'var(--btn-ghost)',
+				hover: 'var(--btn-ghost-hover-bg)',
+				focus: 'var(var(--btn-ghost-focus-bg)',
+				active: 'var(--btn-ghost-active-bg)',
+			}
+		}
+	},
+	backgroundColor: {
+		btn: {
+			primary: {
+				DEFAULT: 'var(--btn-primary-bg)',
+				hover: 'var(--btn-primary-hover-bg)',
+				focus: 'var(var(--btn-primary-focus-bg)',
+				active: 'var(--btn-primary-active-bg)',
+			},
+			secondary: {
+				DEFAULT: 'var(--btn-secondary-bg)',
+				hover: 'var(--btn-secondary-hover-bg)',
+				focus: 'var(var(--btn-secondary-focus-bg)',
+				active: 'var(--btn-secondary-active-bg)',
+			},
+			success: {
+				DEFAULT: 'var(--btn-success-bg)',
+				hover: 'var(--btn-success-hover-bg)',
+				focus: 'var(var(--btn-success-focus-bg)',
+				active: 'var(--btn-success-active-bg)',
+			},
+			ghost: {
+				DEFAULT: 'var(--btn-ghost-bg)',
+				hover: 'var(--btn-ghost-hover-bg)',
+				focus: 'var(var(--btn-ghost-focus-bg)',
+				active: 'var(--btn-ghost-active-bg)',
+			}
+		}
+	},
+	borderColor: {
+		btn: {
+			primary: {
+				DEFAULT: 'var(--btn-primary-bg)',
+				hover: 'var(--btn-primary-hover-bg)',
+				focus: 'var(var(--btn-primary-focus-bg)',
+				active: 'var(--btn-primary-active-bg)',
+				outline: {
+					DEFAULT: 'var(--btn-primary-bg)',
+					hover: 'var(--btn-primary-hover-bg)',
+					focus: 'var(var(--btn-primary-focus-bg)',
+					active: 'var(--btn-primary-active-bg)',
+				}
+			},
+			secondary: {
+				DEFAULT: 'var(--btn-secondary-bg)',
+				hover: 'var(--btn-secondary-hover-bg)',
+				focus: 'var(var(--btn-secondary-focus-bg)',
+				active: 'var(--btn-secondary-active-bg)',
+			},
+			success: {
+				DEFAULT: 'var(--btn-success-bg)',
+				hover: 'var(--btn-success-hover-bg)',
+				focus: 'var(var(--btn-success-focus-bg)',
+				active: 'var(--btn-success-active-bg)',
+			},
+			ghost: {
+				DEFAULT: 'var(--btn-ghost-bg)',
+				hover: 'var(--btn-ghost-hover-bg)',
+				focus: 'var(var(--btn-ghost-focus-bg)',
+				active: 'var(--btn-ghost-active-bg)',
+			},
+			outline: {
+				DEFAULT: 'var(--btn-ghost)',
+			}
+		}
+	}
+}

package/src/@/config/index.ts

@@ -0,0 +1,99 @@
+import button from "./button"
+
+export default {
+		container: {},
+		extend: {
+			colors: {
+				primary: {
+					DEFAULT: 'var(--primary)',
+					hover: 'var(--primary-hover)',
+					focus: 'var(var(--primary-focus)',
+					active: 'var(--primary-active)',
+				},
+				success: {
+					DEFAULT: 'var(--success)',
+					hover: 'var(--success-hover)',
+					focus: 'var(var(--success-focus)',
+					active: 'var(--success-active)',
+				},
+				secondary: {
+					DEFAULT: 'var(--secondary)',
+					hover: 'var(--secondary-hover)',
+					focus: 'var(var(--secondary-focus)',
+					active: 'var(--secondary-active)',
+				},
+				transparent: 'transparent',
+				current: 'currentColor',
+			},
+			...button,
+			// textColor: {
+				// base: 'var(--text-cl)',
+				// 'btn-primary': 'var(--btn-primary-cl)',
+				// 'btn-success': 'var(--btn-success-cl)',
+				// primary: 'var(--btn-txt-primary)',
+				// 'primary-hover': 'var(--btn-txt-primary-hover)',
+				// 'primary-focus': 'var(--btn-txt-primary-focus)',
+				// 'primary-active': 'var(--btn-txt-primary-active)',
+			// },
+
+			// border: {
+			// 	'btn-primary-outline': '2px solid red'
+			// },
+
+			// colors: {
+			// 	border: 'hsl(var(--border))',
+			// 	input: 'hsl(var(--input))',
+			// 	ring: 'hsl(var(--ring))',
+			// 	background: 'hsl(var(--background))',
+			// 	foreground: 'hsl(var(--foreground))',
+			// 	primary: {
+			// 		DEFAULT: 'hsl(var(--primary))',
+			// 		foreground: 'hsl(var(--primary-foreground))',
+			// 	},
+			// 	secondary: {
+			// 		DEFAULT: 'hsl(var(--secondary))',
+			// 		foreground: 'hsl(var(--secondary-foreground))',
+			// 	},
+			// 	destructive: {
+			// 		DEFAULT: 'hsl(var(--destructive))',
+			// 		foreground: 'hsl(var(--destructive-foreground))',
+			// 	},
+			// 	muted: {
+			// 		DEFAULT: 'hsl(var(--muted))',
+			// 		foreground: 'hsl(var(--muted-foreground))',
+			// 	},
+			// 	accent: {
+			// 		DEFAULT: 'hsl(var(--accent))',
+			// 		foreground: 'hsl(var(--accent-foreground))',
+			// 	},
+			// 	popover: {
+			// 		DEFAULT: 'hsl(var(--popover))',
+			// 		foreground: 'hsl(var(--popover-foreground))',
+			// 	},
+			// 	card: {
+			// 		DEFAULT: 'hsl(var(--card))',
+			// 		foreground: 'hsl(var(--card-foreground))',
+			// 	},
+			// },
+			// borderRadius: {
+			// 	lg: `var(--radius)`,
+			// 	md: `calc(var(--radius) - 2px)`,
+			// 	sm: 'calc(var(--radius) - 4px)',
+			// },
+
+			keyframes: {
+				'accordion-down': {
+					from: { height: '0' },
+					to: { height: 'var(--radix-accordion-content-height)' },
+				},
+				'accordion-up': {
+					from: { height: 'var(--radix-accordion-content-height)' },
+					to: { height: '0' },
+				},
+			},
+			animation: {
+				'accordion-down': 'accordion-down 0.2s ease-out',
+				'accordion-up': 'accordion-up 0.2s ease-out',
+			},
+		},
+	}

package/src/@/lib/utils.ts

@@ -0,0 +1,7 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+

package/src/Audio/Audio.styl

@@ -0,0 +1,115 @@
+
+.player
+    display flex
+    align-items center
+
+    &__btn
+        position relative
+        margin-right 12px
+        width 40px
+        height @width
+        font-size $fz-large
+        color $cl-white
+        background-color $cl-green-3
+        border 0
+        border-radius 50%
+        outline 0
+        transition background-color .3s ease-in-out
+
+        &:hover
+        &:focus
+            background-color $cl-green-4
+
+        &:active
+            background-color $cl-green-2
+
+        [class*=icon]
+            position absolute
+            top 50%
+            left 53%
+            transform translate(-50%, -50%)
+
+    &__progress
+        position relative
+        flex-grow 1
+
+        &-buffer
+            position absolute
+            top 0
+            left 0
+            height 2px
+            background-color $ca-graphite-5
+            border-radius 1px
+
+        .ant-slider-rail
+            cursor pointer
+            height 2px
+            background-color $ca-graphite-5
+            border-radius 1px
+
+        .ant-slider-track
+            position absolute
+            top 0
+            left 0
+            height 2px
+            background-color $cl-green-2
+            border-radius 1px
+
+        .ant-slider-handle
+            margin 0
+            cursor pointer
+            position absolute
+            top -4px
+            width 10px
+            height @width
+            border-radius 0
+            border 0
+            background-color transparent
+            transform translateX(-50%)
+            &::before
+                position absolute
+                display block
+                content ''
+                width 2px
+                height 8px
+                left 50%
+                top 50%
+                transform translate(-50%, -50%)
+                background-color $cl-green-2
+                border-radius 1px
+
+        .player__time
+            margin-top 14px
+
+        & + .player__time
+            margin-left 12px
+
+    &__range
+        position relative
+        height 2px
+        border-radius 1px
+
+    &__slider
+        position absolute
+        top 50%
+        left 0
+        margin-left -5px
+        width 10px
+        height @width
+        transform translateY(-50%)
+
+        &::after
+            content ''
+            position absolute
+            top 1px
+            left 50%
+            width 2px
+            height 8px
+            background-color $cl-green-2
+            border-radius 1px
+            transform translateX(-50%)
+
+    &__time
+        line-height 1
+        font-size 12px
+        color $cl-text-success

package/src/Audio/Audio.tsx

@@ -0,0 +1,359 @@
+import React from 'react'
+import Slider from '../Slider'
+// import './Audio.styl'
+import {EAudioStatuses, IAudioProps, IState} from "./types";
+
+/**
+ * Функция отображения продолжительности записи в "мм:cc"
+ * @param {number} value Значение в секундах
+ * @returns {string}
+ */
+function Duration(value) {
+	let result = '––:––'
+	if (value || value === 0) {
+		const minutes = Math.floor(value / 60)
+		const seconds = Math.round(value - minutes * 60)
+		const leadZero = (value) => `${value < 10 ? '0' : ''}${value}`
+		result = `${leadZero(minutes)}:${leadZero(seconds)}`
+	}
+	return result
+}
+
+/**
+ * Компонент прослушивания аудиозаписей
+ */
+export class Audio extends React.Component<IAudioProps, IState> {
+	/* начальное состояние */
+	state: any = {
+		loadingProgress: 0,
+		progress: 0,
+		duration: 0,
+		status: EAudioStatuses.PAUSED,
+		currentTime: 0,
+		drag: false,
+	}
+
+	// static defaultProps = {
+	// 	onlyOneIsPlayed: true,
+	// }
+
+	/**
+	 * ссылка на аудио элемент на странице
+	 * @memberof Audio
+	 */
+	audioRef = React.createRef<HTMLAudioElement>()
+
+	componentDidMount() {
+		this.changeVolume(this.props.volume)
+		this.setState({
+			duration: this.props.duration,
+		})
+	}
+
+	componentDidUpdate(prevProps) {
+		if (prevProps.changeVolume !== this.props.volume) {
+			this.changeVolume(this.props.volume)
+		}
+	}
+
+	changeVolume(value) {
+		const audio = this.audioRef.current
+		if (audio.volume) {
+			audio.volume = value || 0.5
+		}
+	}
+
+	getDuration = () => {
+		const audio = this.audioRef.current
+		return Number(this.state.duration || audio.duration)
+	}
+
+	/**
+	 * Метод включение записи на проигрывание
+	 * @memberof Audio
+	 */
+	play() {
+		const audio = this.audioRef.current
+		if (audio && (!audio.src || audio.src.indexOf('_abortedAudio') >= 0)) {
+			audio.src = this.props.src
+		}
+		/** Останавливаем проигрывание остальных записей */
+		const allAudioElements = document.getElementsByTagName('audio')
+		for (let i = allAudioElements.length - 1; i >= 0; i--) {
+			const audioElement = allAudioElements.item(i)
+			if (audioElement !== this.audioRef.current && !!audioElement.getAttribute('data-only-one-is-played')) {
+				audioElement.pause()
+			}
+		}
+		audio.play().catch(() => {
+			audio.pause()
+		})
+	}
+
+	/**
+	 * Метод постановки проигрываемой записи на паузу
+	 * @memberof Audio
+	 */
+	pause() {
+		const audio = this.audioRef.current
+		audio.pause()
+	}
+
+	/**
+	 * Метод прерывания процесса загрузки записи
+	 * @memberof Audio
+	 */
+	loadCancel() {
+		this.pause()
+		const audio = this.audioRef.current
+		if (audio.src) {
+			audio.src = '_abortedAudio'
+		}
+	}
+
+	/**
+	 * Метод перемотки записи до нужной секунды
+	 * @param {number} sec значение в секундах
+	 * @memberof Audio
+	 */
+	seek(sec) {
+		const audio = this.audioRef.current
+		audio.currentTime = Math.min(Math.max(sec, 0), this.getDuration())
+	}
+
+	/**
+	 * Обработчик изменения позиции слайдера момента исполнения записи
+	 * @param {*} value значение слайдера
+	 * @memberof Audio
+	 */
+	onSliderChange = (value) => {
+		const duration = this.getDuration()
+		const newTimeValue = (value / 100) * duration
+		this.seek(newTimeValue)
+		const audio = this.audioRef.current
+		const progress = audio ? (audio.currentTime / duration) * 100 : 0
+		this.setState({ progress, drag: true, currentTime: newTimeValue })
+	}
+
+	onAfterChange = () => {
+		this.setState({ drag: false })
+	}
+
+	/**
+	 * Обработчик нажатия кнопки управления
+	 * @memberof Audio
+	 */
+	onButtonClick = () => {
+		switch (this.state.status) {
+			case EAudioStatuses.LOADING:
+				this.loadCancel()
+				break
+			case EAudioStatuses.PLAYING:
+				this.pause()
+				break
+			default:
+				this.play()
+		}
+	}
+
+	/**
+	 * Обработчик события загрузки метаданных записи
+	 * @param {*} event дескриптор события
+	 * @memberof Audio
+	 */
+	onLoadedMetaData = ({ target }) => {
+		const { duration } = target || {}
+		this.setState({
+			duration: duration,
+		})
+	}
+
+	/**
+	 * Обработчик изменения отметки времени исполнения
+	 * @param {*} event дексриптор события
+	 * @memberof Audio
+	 */
+	onTimeUpdate = (event) => {
+		const { currentTime } = event.target
+		const progress = (currentTime / this.getDuration()) * 100
+		this.setState({ progress, currentTime })
+	}
+
+	/**
+	 * Метод расчета прогресса загруженной записи
+	 * @param {TimeRanges} timeRanges загруженные промежутки
+	 * @param {number} duration длительность записи
+	 * @returns {number}
+	 * @memberof Audio
+	 */
+	calcProgress(timeRanges, duration) {
+		let buffered = 0
+		if (timeRanges && timeRanges.length) {
+			for (let i = timeRanges.length - 1; 0 <= i; i--) {
+				buffered += timeRanges.end(i) - timeRanges.start(i) + 1
+			}
+		}
+		return Math.min(duration && buffered !== duration ? (buffered / duration) * 100 : 0, 100)
+	}
+
+	updateLoadingProgress(buffered, duration) {
+		this.setState({
+			loadingProgress: this.calcProgress(buffered, duration),
+		})
+	}
+
+	/**
+	 * Обработчик загрузки нового фрагмента записи
+	 * @param {*} event
+	 * @memberof Audio
+	 */
+	onProgress = ({ target }) => {
+		const { buffered, duration } = target || {}
+		/* считаем и записываем процент загрузки аудиозаписи*/
+		this.updateLoadingProgress(buffered, duration)
+	}
+
+	/**
+	 * Обработчик при включении проигрывания записи
+	 * @param {*} event
+	 * @memberof Audio
+	 */
+	onPlay = () => {
+		this.setState({ status: EAudioStatuses.PLAYING })
+	}
+
+	/**
+	 * Обработчик при постновки записи на паузу
+	 * @param {*} event дескриптор события
+	 * @memberof Audio
+	 */
+	onPause = () => {
+		this.setState({ status: EAudioStatuses.PAUSED })
+	}
+
+	/**
+	 * Обработчик перехода к проигрыванию записи
+	 * @memberof Audio
+	 */
+	onPlaying = () => {
+		if (this.state.waitingTimerId) {
+			clearTimeout(this.state.waitingTimerId)
+		}
+		this.setState({ status: EAudioStatuses.PLAYING })
+	}
+
+	/**
+	 * Обработчик события ожидания, когда что-то грузится
+	 * @param {*} event дескриптор события
+	 * @memberof Audio
+	 */
+	onWaiting = (event) => {
+		const { buffered, duration } = event.target || {}
+		/* устанавливаем статус "загрузка" через задержку, чтобы не видеть моргания "||" -> "Х" -> "||" при переходе к уже загруженному фрагменту */
+		this.setState({
+			waitingTimerId: setTimeout(() => {
+				this.setState({
+					status: EAudioStatuses.LOADING,
+				})
+			}, 5),
+		})
+		this.updateLoadingProgress(buffered, duration)
+	}
+
+	/**
+	 * Обработчик достижения конца проигрываемой записи
+	 * @param {*} event дескриптор события
+	 * @memberof Audio
+	 */
+	onEnded = (event) => {
+		event.target.currentTime = 0
+		this.setState({ status: EAudioStatuses.PAUSED })
+	}
+
+	/**
+	 * Обработчик возникновения ошибки аудио элемента
+	 * @memberof Audio
+	 */
+	onError = () => {
+		this.setState({ status: EAudioStatuses.PAUSED })
+	}
+
+	/**
+	 * Метод рендера содержимого кнопки управления
+	 * @returns
+	 * @memberof Audio
+	 */
+	getButtonCaption() {
+		switch (this.state.status) {
+			case EAudioStatuses.PAUSED:
+				return <i className="icon-play-solid" />
+			case EAudioStatuses.PLAYING:
+				return <i className="icon-pause" />
+			case EAudioStatuses.LOADING:
+				return (
+					<div>
+						<i className="icon-close" />
+					</div>
+				)
+		}
+	}
+
+	durationRender = () => {
+		const duration = this.state.currentTime || this.state.drag ? this.state.currentTime : this.state.duration
+		return Duration(duration)
+	}
+
+	render() {
+		let { src, fileName, durationView = 'right', onlyOneIsPlayed } = this.props
+		return (
+			<>
+				<div className="player">
+					{/* кнопка */}
+					<button
+						className="player__btn"
+						onClick={this.onButtonClick}
+					>
+						{this.getButtonCaption()}
+					</button>
+					{/* полоса прогресса и перемотки */}
+					<div className="player__progress">
+						<div
+							className="player__progress-buffer"
+							style={{ width: `${this.state.loadingProgress}%` }}
+						/>
+						<Slider
+							value={[this.state.progress ? this.state.progress : 0]}
+							onValueChange={this.onSliderChange}
+							onValueCommit={this.onAfterChange}
+						/>
+						{durationView === 'bottom' && <div className="player__time">{this.durationRender()}</div>}
+					</div>
+					{/* продолжительность аудиозаписи */}
+					{durationView === 'right' && <div className="player__time">{this.durationRender()}</div>}
+					{/* HTML5 элемент аудио */}
+					<audio
+						ref={this.audioRef}
+						preload="none"
+						onLoadedMetadata={this.onLoadedMetaData}
+						onDurationChange={this.onLoadedMetaData}
+						onTimeUpdate={this.onTimeUpdate}
+						onProgress={this.onProgress}
+						onPlay={this.onPlay}
+						onPause={this.onPause}
+						onPlaying={this.onPlaying}
+						onWaiting={this.onWaiting}
+						onEnded={this.onEnded}
+						onAbort={this.onError}
+						onError={this.onError}
+						src={src}
+						data-only-one-is-played={onlyOneIsPlayed ? 'true' : ''}
+					>
+						<p>
+							<a href={src}>{fileName}</a>
+						</p>
+					</audio>
+				</div>
+			</>
+		)
+	}
+}

package/src/Audio/index.ts

@@ -0,0 +1,4 @@
+import { Audio } from './Audio'
+
+export default Audio
+export { Audio }