+
+ )
+}
diff --git a/src/components/Article/Comment.tsx b/src/components/Article/Comment.tsx
index ea40a630..17496e02 100644
--- a/src/components/Article/Comment.tsx
+++ b/src/components/Article/Comment.tsx
@@ -1,5 +1,5 @@
import './Comment.scss'
-import { Icon } from '../Nav/Icon'
+import { Icon } from '../_shared/Icon'
import { AuthorCard } from '../Author/Card'
import { Show, createMemo } from 'solid-js'
import { clsx } from 'clsx'
diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx
index d521c250..6046c682 100644
--- a/src/components/Article/FullArticle.tsx
+++ b/src/components/Article/FullArticle.tsx
@@ -1,13 +1,12 @@
import { capitalize } from '../../utils'
import './Full.scss'
-import { Icon } from '../Nav/Icon'
+import { Icon } from '../_shared/Icon'
import ArticleComment from './Comment'
import { AuthorCard } from '../Author/Card'
import { createMemo, For, onMount, Show } from 'solid-js'
import type { Author, Reaction, Shout } from '../../graphql/types.gen'
import { t } from '../../utils/intl'
import { showModal } from '../../stores/ui'
-import { incrementView } from '../../stores/zine/articles'
import MD from './MD'
import { SharePopup } from './SharePopup'
import { useSession } from '../../context/session'
@@ -39,11 +38,6 @@ const formatDate = (date: Date) => {
export const FullArticle = (props: ArticleProps) => {
const { session } = useSession()
-
- onMount(() => {
- incrementView({ articleSlug: props.article.slug })
- })
-
const formattedDate = createMemo(() => formatDate(new Date(props.article.createdAt)))
const mainTopic = () =>
diff --git a/src/components/Article/MusicPlayer.tsx b/src/components/Article/MusicPlayer.tsx
deleted file mode 100644
index 4108f681..00000000
--- a/src/components/Article/MusicPlayer.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export default (props: { src?: string; cover?: string; title?: string }) => {
- // TODO: styling
- return (
-
+ 
+
+
+
+
+
+
+
+ {currentTrack().title}
+
+
+
+
+ -
+
-
+ + playMedia(m)} /> ++ {m.title} +
+ )}
+
-
- {props.title || ''}
-
- )
-}
diff --git a/src/components/Article/SharePopup.tsx b/src/components/Article/SharePopup.tsx
index fe0de743..90beb439 100644
--- a/src/components/Article/SharePopup.tsx
+++ b/src/components/Article/SharePopup.tsx
@@ -1,4 +1,4 @@
-import { Icon } from '../Nav/Icon'
+import { Icon } from '../_shared/Icon'
import { t } from '../../utils/intl'
import styles from '../_shared/Popup.module.scss'
diff --git a/src/components/Article/Soundwave.tsx b/src/components/Article/Soundwave.tsx
new file mode 100644
index 00000000..ba04b9d0
--- /dev/null
+++ b/src/components/Article/Soundwave.tsx
@@ -0,0 +1,109 @@
+import { onMount } from 'solid-js'
+
+/**
+ * A utility function for drawing our line segments
+ * @param {AudioContext} ctx the audio context
+ * @param {number} x the x coordinate of the beginning of the line segment
+ * @param {number} height the desired height of the line segment
+ * @param {number} width the desired width of the line segment
+ * @param {boolean} isEven whether or not the segmented is even-numbered
+ */
+const drawLineSegment = (ctx, x, height, width, isEven) => {
+ ctx.lineWidth = 1 // how thick the line is
+ ctx.strokeStyle = '#fff' // what color our line is
+ ctx.beginPath()
+ const h = isEven ? height : -height
+ ctx.moveTo(x, 0)
+ ctx.lineTo(x, h)
+ ctx.arc(x + width / 2, h, width / 2, Math.PI, 0, isEven)
+ ctx.lineTo(x + width, 0)
+ ctx.stroke()
+}
+
+/**
+ * Filters the AudioBuffer retrieved from an external source
+ * @param {AudioBuffer} audioBuffer the AudioBuffer from drawAudio()
+ * @returns {Array} an array of floating point numbers
+ */
+const filterData = (audioBuffer) => {
+ const rawData = audioBuffer.getChannelData(0) // We only need to work with one channel of data
+ const samples = 70 // Number of samples we want to have in our final data set
+ const blockSize = Math.floor(rawData.length / samples) // the number of samples in each subdivision
+ const filteredData = []
+ for (let i = 0; i < samples; i++) {
+ const blockStart = blockSize * i // the location of the first sample in the block
+ let sum = 0
+ for (let j = 0; j < blockSize; j++) {
+ sum = sum + Math.abs(rawData[blockStart + j]) // find the sum of all the samples in the block
+ }
+ filteredData.push(sum / blockSize) // divide the sum by the block size to get the average
+ }
+ return filteredData
+}
+
+/**
+ * Normalizes the audio data to make a cleaner illustration
+ * @param {Array} filteredData the data from filterData()
+ * @returns {Array} an normalized array of floating point numbers
+ */
+const normalizeData = (filteredData) => {
+ const multiplier = Math.pow(Math.max(...filteredData), -1)
+ return filteredData.map((n) => n * multiplier)
+}
+
+interface SoundwaveProps {
+ url: string
+ context: AudioContext
+}
+
+export const Soundwave = (props: SoundwaveProps) => {
+ let canvasRef: HTMLCanvasElement
+
+ /**
+ * Draws the audio file into a canvas element.
+ * @param {Array} normalizedData The filtered array returned from filterData()
+ * @returns {Array} a normalized array of data
+ */
+ const draw = (normalizedData) => {
+ // set up the canvas
+ const canvas = canvasRef
+ const dpr = window.devicePixelRatio || 1
+ const padding = 20
+ canvas.width = canvas.offsetWidth * dpr
+ canvas.height = (canvas.offsetHeight + padding * 2) * dpr
+ const ctx = canvas.getContext('2d')
+ ctx.scale(dpr, dpr)
+ ctx.translate(0, canvas.offsetHeight / 2 + padding) // set Y = 0 to be in the middle of the canvas
+
+ // draw the line segments
+ const width = canvas.offsetWidth / normalizedData.length
+ // eslint-disable-next-line unicorn/no-for-loop
+ for (let i = 0; i < normalizedData.length; i++) {
+ const x = width * i
+ let height = normalizedData[i] * canvas.offsetHeight - padding
+ if (height < 0) {
+ height = 0
+ } else if (height > canvas.offsetHeight / 2) {
+ height = height - canvas.offsetHeight / 2
+ }
+ drawLineSegment(ctx, x, height, width, (i + 1) % 2)
+ }
+ }
+
+ /**
+ * Retrieves audio from an external source, the initializes the drawing function
+ * @param {AudioContext} audioContext the audio context
+ * @param {String} url the url of the audio we'd like to fetch
+ */
+ const drawAudio = (audioContext, url) => {
+ fetch(url)
+ .then((response) => response.arrayBuffer())
+ .then((arrayBuffer) => audioContext.decodeAudioData(arrayBuffer))
+ .then((audioBuffer) => draw(normalizeData(filterData(audioBuffer))))
+ .catch(console.error)
+ }
+ onMount(() => {
+ drawAudio(props.context, props.url)
+ })
+ return
+}
diff --git a/src/components/Author/Card.tsx b/src/components/Author/Card.tsx
index 82b18b10..7cd3131a 100644
--- a/src/components/Author/Card.tsx
+++ b/src/components/Author/Card.tsx
@@ -1,6 +1,6 @@
import type { Author } from '../../graphql/types.gen'
import Userpic from './Userpic'
-import { Icon } from '../Nav/Icon'
+import { Icon } from '../_shared/Icon'
import styles from './Card.module.scss'
import { createMemo, For, Show } from 'solid-js'
import { translit } from '../../utils/ru2en'
diff --git a/src/components/Discours/Donate.tsx b/src/components/Discours/Donate.tsx
index 2fd74ce0..e072785e 100644
--- a/src/components/Discours/Donate.tsx
+++ b/src/components/Discours/Donate.tsx
@@ -20,7 +20,7 @@ export const Donate = () => {
const [period, setPeriod] = createSignal(monthly)
const [amount, setAmount] = createSignal(0)
- onMount(() => {
+ const initiated = () => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const {
cp: { CloudPayments }
@@ -51,6 +51,16 @@ export const Donate = () => {
provision: 0 // Сумма оплаты встречным предоставлением (сертификаты, др. мат.ценности) (2 знака после запятой)
}
})
+ }
+
+ onMount(() => {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const script = document.createElement('script')
+ script.type = 'text/javascript'
+ script.src = 'https://widget.cloudpayments.ru/bundles/cloudpayments.js'
+ script.async = true
+ script.addEventListener('load', initiated)
+ document.head.appendChild(script)
})
const show = () => {
@@ -103,70 +113,68 @@ export const Donate = () => {
}
return (
- <>
-