Merge pull request 'full' (#3) from front2 into main
Reviewed-on: https://maktraher.ru/moxitech/Drone-Rtc-Application/pulls/3
This commit is contained in:
commit
b5e1d5ddf3
@ -1,19 +1,17 @@
|
|||||||
/* ExploreContainer.css */
|
|
||||||
#container {
|
#container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-top: 20px;
|
justify-content: space-around; /* Распределение элементов с равным отступом */
|
||||||
|
height: 100vh; /* Высота на весь экран для центрирования */
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.peer-id-container {
|
.peer-id-container {
|
||||||
display: flex;
|
margin-bottom: 10px;
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.peer-id-text {
|
.peer-id-text {
|
||||||
margin-right: 10px;
|
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
@ -30,8 +28,9 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 10px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
max-width: 400px; /* Ограничение ширины для компактности */
|
||||||
}
|
}
|
||||||
|
|
||||||
.call-info-container {
|
.call-info-container {
|
||||||
@ -44,35 +43,40 @@
|
|||||||
|
|
||||||
.call-info-text {
|
.call-info-text {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 5px; /* Небольшой отступ снизу для Peer ID */
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.call-duration-text {
|
.call-duration-text {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 15px; /* Отступ снизу для времени */
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hang-up-button {
|
.custom-hang-up-button {
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
color: #ff3b30; /* Красная трубка */
|
cursor: pointer;
|
||||||
font-size: 24px;
|
padding: 0;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-hang-up-button svg {
|
||||||
|
transition: transform 0.2s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-hang-up-button:hover svg {
|
||||||
|
transform: scale(1.1); /* Увеличение кнопки при наведении */
|
||||||
}
|
}
|
||||||
|
|
||||||
.call-button {
|
.call-button {
|
||||||
background: none;
|
background: #007aff;
|
||||||
border: none;
|
border: none;
|
||||||
color: #007aff;
|
color: #ffffff;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
}
|
padding: 10px; /* Увеличение кнопки для удобства */
|
||||||
|
|
||||||
.call-button ion-icon {
|
|
||||||
font-size: 30px;
|
|
||||||
color: #007aff;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-optimizer {
|
.panel-optimizer {
|
||||||
@ -81,8 +85,15 @@
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ion-padding {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 100vh; /* Центрирование всего контента по высоте экрана */
|
||||||
|
}
|
||||||
|
|
||||||
.drone-gif {
|
.drone-gif {
|
||||||
width: 100px; /* Задайте нужный размер */
|
width: 300px; /* Задайте нужный размер */
|
||||||
height: auto;
|
height: auto;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
@ -2,7 +2,7 @@ import React, { useState, useEffect, useCallback } from 'react';
|
|||||||
import './ExploreContainer.css';
|
import './ExploreContainer.css';
|
||||||
import InputContainer from './Input';
|
import InputContainer from './Input';
|
||||||
import {
|
import {
|
||||||
IonButton, IonContent, IonFooter, IonToolbar, IonText, IonModal, IonIcon, IonHeader, IonTitle
|
IonButton, IonContent, IonFooter, IonToolbar, IonText, IonModal, IonIcon
|
||||||
} from '@ionic/react';
|
} from '@ionic/react';
|
||||||
import { call as callIcon, close as hangUpIcon } from 'ionicons/icons';
|
import { call as callIcon, close as hangUpIcon } from 'ionicons/icons';
|
||||||
import Peer, { MediaConnection } from 'peerjs';
|
import Peer, { MediaConnection } from 'peerjs';
|
||||||
@ -132,26 +132,6 @@ const ExploreContainer: React.FC = () => {
|
|||||||
<IonText className="peer-id-text">Ваш Peer ID: {connectionInfo}</IonText>
|
<IonText className="peer-id-text">Ваш Peer ID: {connectionInfo}</IonText>
|
||||||
<button className="copy-button" onClick={copyPeerId}>Копировать</button>
|
<button className="copy-button" onClick={copyPeerId}>Копировать</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Модальное окно для звонка */}
|
|
||||||
<IonModal isOpen={isCallActive}>
|
|
||||||
<IonContent className="ion-padding">
|
|
||||||
<div className="call-info-container">
|
|
||||||
{/* Добавляем гифку */}
|
|
||||||
<img src="/monkey-monkey-with-drone.gif" alt="Monkey with Drone" className="drone-gif" />
|
|
||||||
<IonText className="call-info-text">Peer ID: {currentCallId}</IonText>
|
|
||||||
<IonText className="call-duration-text"> {Math.floor(callDuration / 60)}:{callDuration % 60}</IonText>
|
|
||||||
<IonButton color="danger" onClick={endCall} className="hang-up-button">
|
|
||||||
<IonIcon icon={hangUpIcon} />
|
|
||||||
</IonButton>
|
|
||||||
</div>
|
|
||||||
</IonContent>
|
|
||||||
</IonModal>
|
|
||||||
</IonContent>
|
|
||||||
|
|
||||||
<IonFooter>
|
|
||||||
<IonToolbar className='panel-optimizer'>
|
|
||||||
<div className="input-container">
|
<div className="input-container">
|
||||||
<InputContainer
|
<InputContainer
|
||||||
callString={callString}
|
callString={callString}
|
||||||
@ -162,10 +142,27 @@ const ExploreContainer: React.FC = () => {
|
|||||||
<IonIcon icon={callIcon} />
|
<IonIcon icon={callIcon} />
|
||||||
</IonButton>
|
</IonButton>
|
||||||
</div>
|
</div>
|
||||||
</IonToolbar>
|
</div>
|
||||||
</IonFooter>
|
|
||||||
|
{/* Модальное окно для звонка */}
|
||||||
|
<IonModal isOpen={isCallActive}>
|
||||||
|
<IonContent className="ion-padding">
|
||||||
|
<div className="call-info-container">
|
||||||
|
{/* Добавляем гифку */}
|
||||||
|
<img src="/monkey-monkey-with-drone.gif" alt="Monkey with Drone" className="drone-gif" />
|
||||||
|
<IonText className="call-info-text">Peer ID: {currentCallId}</IonText>
|
||||||
|
<IonText className="call-duration-text">{Math.floor(callDuration / 60)}:{callDuration % 60}</IonText>
|
||||||
|
<button onClick={endCall} className="custom-hang-up-button">
|
||||||
|
<svg width="51" height="51" fill="#cd1818" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M18.327 22.5c-.915 0-2.2-.331-4.125-1.407-2.34-1.312-4.15-2.524-6.478-4.846-2.245-2.243-3.337-3.695-4.865-6.476C1.132 6.63 1.426 4.984 1.755 4.28c.392-.842.97-1.345 1.718-1.844a8.263 8.263 0 0 1 1.343-.712l.13-.057c.231-.105.583-.263 1.028-.094.297.112.562.34.978.75.852.84 2.015 2.71 2.445 3.63.288.619.479 1.028.48 1.486 0 .537-.27.95-.598 1.397l-.182.242c-.356.469-.435.604-.383.846.104.486.884 1.933 2.165 3.212 1.281 1.278 2.686 2.008 3.174 2.112.253.054.39-.027.875-.397.069-.053.14-.107.215-.162.5-.372.894-.635 1.418-.635h.003c.456 0 .847.198 1.493.524.844.426 2.771 1.575 3.616 2.427.412.415.64.679.753.976.169.447.01.797-.094 1.031l-.057.129a8.27 8.27 0 0 1-.716 1.34c-.499.745-1.004 1.322-1.846 1.714a3.16 3.16 0 0 1-1.386.304Z"></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</IonContent>
|
||||||
|
</IonModal>
|
||||||
|
</IonContent>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default ExploreContainer;
|
export default ExploreContainer;
|
Loading…
Reference in New Issue
Block a user