Skip to content

Develop #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
luceinaltis wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Develop #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
941ee88
update
luceinaltis Dec 1, 2020
53d5e66
update
luceinaltis Dec 1, 2020
0ac68bf
update
luceinaltis Dec 1, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"scripts": {
"start": "react-scripts start",
"deploy": "npm run react_build && npm run server_deploy",
"react_build": "npm install && react-scripts --max_old_space_size=8000 build && rm -rf server/react && mv -f build server/react",
"react_build": "npm install && react-scripts --max_old_space_size=8000 build",
"server_deploy": "cd server && npm run deploy"
},
"keywords": [
Expand Down
3 changes: 3 additions & 0 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@
content="Web site created using create-react-app"
/>
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">
<title>Tming</title>
</head>
<body>
Expand Down
1 change: 1 addition & 0 deletions src/assets/scss/global.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
body {
background-color: $gray;
color: $white;
font-family: 'Noto Sans KR', sans-serif;
}
4 changes: 2 additions & 2 deletions src/components/HorizontalLayout/Header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,11 +110,11 @@ function Index({ lang: Lang, changeLanguage: changeLanguageDispatch }) {
<LangProvider LangKey="real_time_voting" />
</Button>
</Link>
<Link to="/wordcloud">
{/* <Link to="/wordcloud">
<Button type="button">
<LangProvider LangKey="wordcloud" />
</Button>
</Link>
</Link> */}
</FlexItems>

<div className="header-item">
Expand Down
129 changes: 7 additions & 122 deletions src/components/Languages/languages.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,32 +9,6 @@ const Language = {
};

const sentences = {
// 원하는 문자열 여기에 저장하면 됩니다.
// 메인 타이틀
main_upper_title: [
'Make your broadcast more fun',
'당신의 방송을 더욱 재밌게',
],

// 로그아웃 메세지
logout_alert: [
'After logging out from the Twitch homepage, close the app and run it again!',
'트위치 홈페이지에서 로그아웃을 한 후 어플을 종료하고 다시 실행시켜 주세요!',
],

// 새로고침 메세지
if_dont_work: [
"If the function doesn't work, click Refresh Button! (refresh button on the top right) ",
'만약 기능이 작동하지 않을땐 새로고침을 눌러보세요!(우측 상단 새로고침 버튼) ',
],

// 투표 안내 메세지

info_about_voting: [
'When the vote begins, the viewer can enter "!vote [item]", "!vote [item name]" to participate in the vote. ex) "!vote 1," "!vote chicken"',
'투표가 시작되면 시청자는 "!투표 [항목숫자]", "!투표 [항목이름]"을 입력하여 투표에 참여 할 수 있습니다. ex) "!투표 1", "!투표 치킨"',
],

// Home 화면
real_time_voting: ['Real time voting', '실시간 투표'],
my_top_clips: ['My Top Clips', '내 인기 클립'],
Expand Down Expand Up @@ -76,12 +50,12 @@ const sentences = {
'방송을 편하게, 시청자는 즐겁게',
],
login_description_1: [
'Easily set up a variety of viewer engagement content such as viewer engagement surveys and chat analysis.',
'시청자 참여 설문, 채팅 분석 등 다양한 시청자 참여 컨텐츠를 손쉽게 설정해보세요.',
'Easily set up a variety of viewer engagement content such as viewer engagement surveys.',
'시청자 참여 설문으로 다양한 시청자의 참여를 유도해보세요.',
],
login_description_2: [
'With Tming, you can create a richer broadcast.',
'Tming과 함께라면 더욱 풍성한 방송을 만들 수 있습니다.',
'트밍과 함께라면 더욱 풍성한 방송을 만들 수 있습니다.',
],
login_description_3: ['What is Tming?', '트밍이란?'],
login_twitch: ['Log in with Twitch', '트위치로 로그인'],
Expand All @@ -105,29 +79,10 @@ const sentences = {
wordcloudform_apply_option: ['Apply option', '옵션 적용'],
wordcloudform_apply_slot: ['Apply to broadcast screen', '방송화면에 적용'],

// VoteForm 화면
start_voting: ['Start voting', '투표 시작'],
end_voting: ['End voting', '투표 종료'],
vote_apply_slot: ['Apply to broadcast screen', '방송화면에 적용'],
voteform_placeholder: [
'Please enter your voting item',
'투표 항목을 입력후 엔터를 누르세요!',
],
vote_end_alert: ['Voting end', '투표 종료'],
vote_apply_to_slot_alert: [
'Successfully applied to broadcast screen',
'방송화면에 적용 되었습니다',
],
vote_already_exist_alert: [
'Voting is already exist. Please end voting',
'투표가 이미 진행중입니다. 진행중인 투표를 종료해주세요',
],
voted_user_1: ['voted at', '님이'],
voted_user_2: ['', '번에 투표하셨습니다.'],
vote_has_empty: [
'Blank spaces cannot be voting items.',
'빈 칸은 투표 항목이 될 수 없습니다.',
],
// Vote 화면
copy_slot: ['Copy slot', '슬롯 복사'],
vote_part: ['Voting participants', '투표 참여자'],
new_item: ['Add new item', '새 항목 추가'],

// Guide 화면
home_guide_1_1: ['Hello', '안녕하세요.'],
Expand Down Expand Up @@ -168,76 +123,6 @@ const sentences = {
'Please register the address "http://127.0.0.1:5000/slot" as an overlay to OBS or XSplit.',
'"http://127.0.0.1:5000/slot"의 주소를 OBS나 XSplit에 오버레이로 등록해주세요.',
],

// 설명서 화면
manual_item_1: ['How to Use Voting', '투표 이용하기'],
manual_item_2: ['How to Use WordCloud', '워드클라우드 이용하기'],
manual_vote_1_1: [
'1. Press the button to start voting (but not if voting is already in progress).',
'1. 해당 버튼을 누르면 투표가 시작됩니다.(단, 이미 투표가 진행중인 경우에는 투표를 시작할 수 없습니다)',
],
manual_vote_1_2: [
'2. You can set the vote you want.',
'2. 원하는 투표 항목을 설정 할 수 있습니다.',
],
manual_vote_1_3: [
'3. You can set the language you want.',
'3. 원하는 언어를 설정할 수 있습니다.',
],
manual_vote_1_4: [
'4. You can view your own Twitch chat room.',
'4. 자신의 트위치 채팅방을 볼 수 있습니다.',
],
manual_vote_2_1: [
'1. You can check when and where the people who voted voted.',
'1. 투표 한 사람들이 언제, 어디에 투표했는지 확인 할 수 있습니다.',
],
manual_vote_2_2: [
'2. Overlay Select the shape of the vote you want to float.',
'2. 오버레이 띄우기 원하는 투표의 모양을 선택 할 수 있습니다.',
],
manual_vote_2_3: [
'3. You can hide your current vote.',
'3. 현재 투표를 감출 수 있습니다.',
],
manual_vote_2_4: [
'4. Show everyone who has voted in window 1.',
'4. 현재 투표한 모든 사람들을 1번 창에 보여줍니다.',
],
manual_vote_2_5: [
'5. Show voting items. Click on each item to see who voted for that item.',
'5. 투표 항목들을 보여줍니다. 각 항목들을 클릭하면 해당 항목에 투표한 사람들을 확인 할 수 있습니다.',
],
manual_vote_2_6: [
'6. End the voting. Press the Apply Slot button to apply the current vote to the slot.',
'6. 투표를 종료합니다. 슬롯 적용 버튼을 누르면 현재 투표가 슬롯에 적용됩니다.',
],
manual_vote_2_7: [
'7. You can view your own Twitch chat room.',
'7. 자신의 트위치 채팅방을 볼 수 있습니다.',
],
manual_wordcloud_1_title: ['WordCloud setting', '워드클라우드 설정'],
manual_wordcloud_1_1: [
'1. You can resize the letters in WordCloud. You can specify the units in which the chat is saved and managed.',
'1. 워드클라우드의 글자 크기를 조정할 수 있습니다. 채팅이 저장되고 관리되는 단위를 지정 할 수 있습니다.',
],
manual_wordcloud_1_2: [
'2. You can apply the settings you want. Apply the word cloud to the slot.',
'2. 원하는 설정을 적용 할 수 있습니다. 워드클라우드를 슬롯에 적용시킵니다.',
],
manual_wordcloud_1_3: [
'3. You can check your twitch chat room.',
'3. 자신의 트위치 채팅방을 확인 할 수 있습니다.',
],

// Tooltips
bar_tooltip: ['Bar chart', '막대형 차트'],
pie_tooltip: ['Pie chart', '파이형 차트'],
hide_tooltip: ['Hide voting', '투표 숨기기'],
show_tooltip: ['Show voting', '투표 보기'],
see_all_tooltip: ['View all voted users', '투표한 모든 유저 보기'],
getLastVote: ['View last voting history', '지난 투표 보기'],
backgroundColor: ['Make background color darker', '배경색 어둡게 만들기'],
};

export function convert() {
Expand Down
27 changes: 26 additions & 1 deletion src/pages/Login/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@ const BrowserWrapper = styled.div`
width: 100vw;
height: 100vh;
overflow: hidden;
background-color: #222831;
`;

const LoginWrapper = styled.div`
Expand All @@ -89,16 +90,39 @@ const LoginBox = styled.div`

const TextMain = styled.div`
font-size: 24px;
line-height: 30px;

.login-box__strong {
font-size: 28px;
font-weight: 500;
line-height: 50px;
font-weight: 600;
}
`;

const TextSub = styled.div`
display: flex;
align-items: center;

input {
height: 30px;
border: none;

&:focus {
outline: none;
}
}

button {
height: 30px;
width: 60px;
border: none;
border-radius: 0.2rem;

&:hover {
background-color: #ffd369;
cursor: pointer;
}
}
`;

const Separator = styled.div`
Expand Down Expand Up @@ -280,6 +304,7 @@ function Index({
<TextSub>
<input
value={twitchId}
spellCheck={false}
onChange={onChangeTwitchId}
placeholder="트위치 아이디 입력"
/>
Expand Down
55 changes: 31 additions & 24 deletions src/pages/Slot/voteOverlay.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,24 @@
import React, { useEffect, useState } from 'react';
import tmi from 'tmi.js';
import Chart from 'react-apexcharts';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';

function VoteOverlay() {
// actions
import { startVote, endVote } from '../../store/actions';

function VoteOverlay({
startVote: dispatchStartVote,
endVote: dispatchEndVote,
}) {
const [series, setSeries] = useState(
JSON.parse(window.localStorage.getItem('series')),
JSON.parse(window.localStorage.getItem('labels')).map(() => 0),
);

const [labels] = useState(JSON.parse(window.localStorage.getItem('labels')));

// {userName: {string}, votedIndex: {number}}
const [votedUsers, setVotedUsers] = useState(
JSON.parse(window.localStorage.getItem('votedUsers')),
);
const [votedUsers, setVotedUsers] = useState([]);

useEffect(() => {
function vote(tags, message) {
Expand Down Expand Up @@ -66,22 +73,6 @@ function VoteOverlay() {
});
}

function onChangeStorage(event) {
if (event.key === 'isVoting' && event.newValue === 'true') {
const newSeries = JSON.parse(window.localStorage.getItem('labels'));

setSeries(
newSeries.map(() => {
return 0;
}),
);
window.localStorage.setItem(
'series',
JSON.stringify(newSeries.map(() => 0)),
);
}
}

const newTwitchChat = new tmi.Client({
connection: {
reconnect: true,
Expand All @@ -90,11 +81,20 @@ function VoteOverlay() {
});

connectToTwitchChat(newTwitchChat);
window.addEventListener('storage', onChangeStorage);
dispatchStartVote('true');

window.addEventListener('beforeunload', () => {
dispatchEndVote('false');
});

return () => {
newTwitchChat.disconnect();
window.removeEventListener('storage', onChangeStorage);
};
}, []);

useEffect(() => {
return () => {
dispatchEndVote('false');
};
}, []);

Expand Down Expand Up @@ -125,4 +125,11 @@ function VoteOverlay() {
);
}

export default VoteOverlay;
VoteOverlay.propTypes = {
startVote: PropTypes.func.isRequired,
endVote: PropTypes.func.isRequired,
};

const mapDispatchToProps = { startVote, endVote };

export default connect(null, mapDispatchToProps)(VoteOverlay);
Loading