tbs093a
/
music.service.frontend
1
0
Fork 0
Code Issues Pull Requests 5 Packages Projects Releases Wiki Activity

add text segment with highlights -> songPanel.js

develop
TBS093A 2020-05-31 15:43:23 +02:00
parent fec739574c
commit e76544ea44
5 changed files with 284 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
src/components/alphabeth.js
View File

@ -273,6 +273,94 @@ export const alphabeth = {
+ " -=-=-=-=\n"
+ "=-=-=--=-\n",
'#':
" =- -= \n"
+ "-=-=-=-=-\n"
+ " =- -= \n"
+ " =- -= \n"
+ "-=-=-=-=-\n"
+ " =- -= \n",
'0':
" =-=-=-= \n"
+ "=-=-*-=-=\n"
+ "=-= =-=\n"
+ "=-= =-=\n"
+ "=-=-_-=-=\n"
+ " =-=-=-= \n",
'1':
" =-= \n"
+ " =-=-= \n"
+ " =-= \n"
+ " =-= \n"
+ " =-= \n"
+ " =-= \n",
'2':
" =-=-=-= \n"
+ "=-=-=-=-=\n"
+ "=-= =-=\n"
+ " =-= \n"
+ " -=-=-=-=\n"
+ "-=-=-=-==\n",
'3':
" =-=-=-= \n"
+ "=-= =-=\n"
+ " ___=-= \n"
+ " ***=-= \n"
+ "=-= =-=\n"
+ " =-=-=-= \n",
'4':
" =-= \n"
+ " =-= \n"
+ " =-=_-=--\n"
+ "=-=-==-=-\n"
+ " =-= \n"
+ " =-= \n",
'5':
"=-=-=-=-=\n"
+ "=-= *-=\n"
+ "=-=-=-=_ \n"
+ " ^*=-=\n"
+ "=-,._*=-=\n"
+ "=-=-=-=-=\n",
'6':
" =-=-=-= \n"
+ "=-= =-=\n"
+ "=-=-___ \n"
+ "=-=-=--= \n"
+ "=-= =-=\n"
+ " =-=-=-= \n",
'7':
"=-=-=-=-=\n"
+ "=-=-=-=- \n"
+ " =-= \n"
+ " =-= \n"
+ " =-= \n"
+ " =-= \n",
'8':
" =-=-=-= \n"
+ "=-= =-=\n"
+ " -=-=-=- \n"
+ "=-= =-=\n"
+ "=-=-=-=-=\n"
+ " =-=-=-= \n",
'9':
" =-=-=-= \n"
+ "=-= =-=\n"
+ " =-=-=-=-\n"
+ " ***=-=\n"
+ "=-= =-=\n"
+ " =-=-=-= \n",
' ':
"\n\n\n",

BIN
src/images/audioTest3.mp3 100644
View File

Binary file not shown.

169
src/pages/index/indexPanel/panels/songPanel.js
View File

@ -1,17 +1,21 @@
import React, { useEffect } from 'react'
import React, { useEffect, useState } from 'react'
import '../../../../styles/songPanel.scss'
const SongPanel = () => {
useEffect( () => generateTitleCode())
useEffect( () => generateTitleCode() )
useEffect( () => setTextHeight() )
const [openDescription, setOpen] = useState(-1)
// ANSI: ▀▁▂▃▄▅▆▇█▉▊▋▌▍▎▏░▒▓▐▔▕▖▗▘▙▚▛▜▝▞▟
let title = 'rzukk x bragga bad'
let address = '/op?song=aQ2ed#!WkL#csd435fk'
let code = ''
const generateTitleCode = () => {
//let randomChars = '▀▁▂▃▄▅▆▇█▉▊▋▌▍▎▏░▒▓▐▔▕▖▗▘▙▚▛▜▝▞▟'
let randomChars = '░▒'
let charInRowCount = parseInt((document.getElementById('songCode').clientWidth) / 10) - 6
for (let i = 0; i < 3; i++) {
@ -26,10 +30,91 @@ const SongPanel = () => {
document.getElementById('songCode').innerHTML = code
}
let exampleText = 'Znam wielu co robią zajebistą muzykę, kolego,\n'
+ 'Nie znam ani jednego, z kogo zrobiłaby zajebistego,\n'
+ 'Ludzie płyną z nurtem, bo fajne, bo modne,\n'
+ 'Leczą swe komplexy, rozmieniają się na drobne,\n'
const setTextHeight = () => {
let titleDivHeight = document.getElementById('songDetails').clientHeight
let textDivHeight = window.innerHeight - titleDivHeight
document.getElementById('songText').style = 'height: ' + (textDivHeight - 50) + 'px;'
}
let exampleText = [
'[Zwrotka Rzukk]\n',
'Znam wielu co robią zajebistą muzykę, kolego,\n',
'Nie znam ani jednego, z kogo zrobiłaby zajebistego,\n',
'Ludzie płyną z nurtem, bo fajne, bo modne,\n',
'Leczą swe komplexy, rozmieniają się na drobne,\n',
'\nZnam wielu co robią zajebistą muzykę, kolego,\n',
'Nie znam ani jednego, z kogo zrobiłaby zajebistego,\n',
'Ludzie płyną z nurtem, bo fajne, bo modne,\n',
'Leczą swe komplexy, rozmieniają się na drobne,\n',
'\nZnam wielu co robią zajebistą muzykę, kolego,\n',
'Nie znam ani jednego, z kogo zrobiłaby zajebistego,\n',
'Ludzie płyną z nurtem, bo fajne, bo modne,\n',
'Leczą swe komplexy, rozmieniają się na drobne,\n',
'\nZnam wielu co robią zajebistą muzykę, kolego,\n',
'Nie znam ani jednego, z kogo zrobiłaby zajebistego,\n',
'Ludzie płyną z nurtem, bo fajne, bo modne,\n',
'Leczą swe komplexy, rozmieniają się na drobne,\n',
'\n[Zwrotka Rzukk]\n',
'Znam wielu co robią zajebistą muzykę, kolego,\n',
'Nie znam ani jednego, z kogo zrobiłaby zajebistego,\n',
'Ludzie płyną z nurtem, bo fajne, bo modne,\n',
'Leczą swe komplexy, rozmieniają się na drobne,\n',
'\nZnam wielu co robią zajebistą muzykę, kolego,\n',
'Nie znam ani jednego, z kogo zrobiłaby zajebistego,\n',
'Ludzie płyną z nurtem, bo fajne, bo modne,\n',
'Leczą swe komplexy, rozmieniają się na drobne,\n',
'\nZnam wielu co robią zajebistą muzykę, kolego,\n',
'Nie znam ani jednego, z kogo zrobiłaby zajebistego,\n',
'Ludzie płyną z nurtem, bo fajne, bo modne,\n',
'Leczą swe komplexy, rozmieniają się na drobne,\n',
'\nZnam wielu co robią zajebistą muzykę, kolego,\n',
'Nie znam ani jednego, z kogo zrobiłaby zajebistego,\n',
'Ludzie płyną z nurtem, bo fajne, bo modne,\n',
'Leczą swe komplexy, rozmieniają się na drobne,\n'
]
let exampleRowDetails = {
1: {
group: false,
leader: true,
text: 'Znam wielu co robią',
description: 'chodzi o to, że ktoś coś robi, itpchodzi o to, że ktoś coś robi, itpchodzi o to, że ktoś coś robi, itp',
image: ''
},
4: {
group: false,
leader: true,
text: 'rozmieniają się na drobne',
description: 'leczą no wszystko jasne leczą no wszystko jasne leczą no wszystko jasne leczą no wszystko jasne leczą no wszystko jasne',
image: ''
},
14: {
group: true,
leader: false,
link: 16,
text: ''
},
15: {
group: true,
leader: false,
link: 16,
text: ''
},
16: {
group: true,
leader: true,
text: '',
description: 'lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum',
image: ''
}
}
return (
<div id='songPanel'>
@ -48,12 +133,72 @@ const SongPanel = () => {
</div>
<div id='songText'>
<div className='textSection'>
<pre className='generalText'>
{ exampleText }
</pre>
<div className='rowDetails'>
{ exampleText.map( (row, key) => {
</div>
const textHighlight = (text, mark) => {
let markRow = text.replace(RegExp(mark, 'g'), '<pre class="textHighlights">' + mark + '</pre>')
return { __html: markRow }
}
if(exampleRowDetails[key] !== undefined) {
if (exampleRowDetails[key].group === false && exampleRowDetails[key].leader === true){
return (
<div>
<pre
id={'row' + key}
className='generalText'
onClick={ openDescription === key ? () => setOpen( -1 ) : () => setOpen( key )}
dangerouslySetInnerHTML={ textHighlight(row, exampleRowDetails[key].text) }>
</pre>
<pre
id={'description' + key}
className={ openDescription === key ? 'rowDetails rowDetailsOpen' : 'rowDetails'}>
{exampleRowDetails[key].description}
</pre>
</div>
)
}
else if (exampleRowDetails[key].group === true && exampleRowDetails[key].leader === false) {
let link = exampleRowDetails[key].link
let text = exampleRowDetails[key].text
return (
<div>
<pre
id={'row' + key}
className='generalText'
onClick={ openDescription === link ? () => setOpen( -1 ) : () => setOpen( link )}
dangerouslySetInnerHTML={ text === '' ? textHighlight(row, row) : textHighlight(row, text) }>
</pre>
</div>
)
}
else if (exampleRowDetails[key].group === true && exampleRowDetails[key].leader === true) {
let text = exampleRowDetails[key].text
return (
<div>
<pre
id={'row' + key}
className='generalText'
onClick={ openDescription === key ? () => setOpen( -1 ) : () => setOpen( key )}
dangerouslySetInnerHTML={ text === '' ? textHighlight(row, row) : textHighlight(row, text) }>
</pre>
<pre
id={'description' + key}
className={ openDescription === key ? 'rowDetails rowDetailsOpen' : 'rowDetails'}>
{exampleRowDetails[key].description}
</pre>
</div>
)
}
}
else
return (
<pre id={key} className='generalText'>
{row}
</pre>
)
}
)
}
</div>
</div>
</div>

4
src/pages/index/playerInterface/audioPlayer.js
View File

@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
import '../../../styles/audioVisualizer.scss'
import { alphabeth } from '../../../components/alphabeth'
import audioTest from '../../../images/audioTest.mp3'
import audioTest from '../../../images/audioTest3.mp3'
const AudioPlayer = () => {
@ -190,7 +190,7 @@ const AudioPlayer = () => {
}
const viewTitleAudio = async() => {
let title = 'rzukk x bragga bad'
let title = 'rzukk #hot16chellenge2'
title = title.toUpperCase()
let titleASCII = [];
let i

48
src/styles/songPanel.scss
View File

@ -6,12 +6,13 @@
.songPanelColumn {
width: 50%;
height: 100%;
//border-left: 1px solid rgba(172,36,36,1);
#songDetails {
width: 90%;
width: 95%;
height: 85px;
padding: 5%;
padding-right: 5%;
padding-top: 50px;
padding-bottom: 25px;
#songCode {
text-align: left;
@ -23,36 +24,59 @@
#songAddress {
text-align: right;
padding-top: 10px;
width: 50%;
float: left;
width: auto;
float: right;
}
#songTitle {
text-align: left;
padding-top: 10px;
width: 50%;
width: auto;
float: left;
}
}
}
#songText {
width: 90%;
height: auto;
padding: 5%;
padding-top: 0;
width: 95%;
overflow: hidden;
overflow-y: scroll;
padding-right: 5%;
margin-bottom: 50px;
.textSection {
width: 100%;
height: auto;
padding-top: 2.5%;
.generalText {
width: 100%;
font-size: 13px;
display: flex;
.textHighlights {
background-color: rgba(172,36,36,1);
color: black;
margin: 0;
cursor: pointer;
}
}
.rowDetails {
width: 0%;
width: 90%;
max-width: 90%;
height: auto;
display: none;
white-space: normal;
padding-left: 5%;
padding-right: 5%;
padding-top: 10px;
padding-bottom: 10px;
}
.rowDetailsOpen {
display: block;
}
}
}