Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
269 lines (249 sloc) 6.64 KB
<html>
<head>
<title>mobile layout demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script crossorigin src="https://unpkg.com/@daily-co/daily-js@0.9"></script>
<script src="create-demo-room.js"></script>
<style>
.mobile-wrapper {
display: flex;
flex-direction: column;
width: 375;
height: 812;
background-color: #444;
position: relative;
}
.mobile-statusbar {
background-image: url("image-mobile-statusbar@2x.png");
background-size: contain;
width: 375px;
height: 90px;
flex: none;
}
.mobile-navbar {
background-image: url("image-mobile-navbar@2x.png");
background-size: contain;
width: 375px;
height: 83px;
flex: none;
}
#call-container {
background-color: #f0f0f0;
width: 375px;
flex-grow: 1;
position: relative;
height: 100%;
min-height: 300px;
}
h4 {
margin: 0;
}
#header, #controller {
padding: 14px 20px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
background-color: #f0f0f0;
}
#controller ul {
margin: 0;
padding: 0;
}
#controller ul li img {
filter: invert(100%);
}
.red-button p {
color: #ff3b30;
text-align: right;
font-family: "Helvetica", Arial, sans-serif;
font-size: 12px;
font-weight: 800;
cursor: pointer;
}
#create-room-button {
display: block;
}
#leave-button {
display: none;
}
.controller-item {
list-style-type: none;
display: inline-block;
cursor: pointer;
}
.controller-item img {
width: 24px;
height: 24px;
}
.controller-item:nth-child(n+2) {
margin-left: 10px;
}
#message-quiescent {
display: block;
}
#message-creating {
display: none;
}
#message-joining {
display: none;
}
#message-incall {
display: none;
}
#message-exit {
display: none;
cursor: pointer;
}
/* smartphones, touchscreens */
@media (hover: none) and (pointer: coarse) {
.mobile-wrapper {
width: 100%;
height: 100%;
}
.mobile-statusbar, .mobile-navbar {
display: none;
}
#call-container {
width: 100%;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
}
</style>
</head>
<body onload="maybeJoinMeetingFromUrl()">
<script>
let fullScreenParticipantId = null;
function showEvent(e) { console.log('callFrame event', e) }
async function maybeJoinMeetingFromUrl() {
let params = (new URL(document.location)).searchParams;
// if our url includes a room `url` parameter, join that room
if (params.get('url')) {
document.getElementById('message-quiescent').style.display = 'none';
document.getElementById('create-room-button').style.display = 'none';
window.room = { url: decodeURIComponent(params.get('url')) };
run();
}
}
async function createRoomAndJoin() {
document.getElementById('create-room-button').style.display = 'none';
document.getElementById('message-quiescent').style.display = 'none';
document.getElementById('message-creating').style.display = 'block';
window.room = await createMtgRoom();
history.pushState(null, '', '?url=' + encodeURIComponent(room.url));
run();
}
function joiningMeeting() {
document.getElementById('message-creating').style.display = 'none';
document.getElementById('message-joining').style.display = 'block';
}
function joinedMeeting() {
document.getElementById('message-joining').style.display = 'none';
document.getElementById('message-incall').style.display = 'block';
document.getElementById('leave-button').style.display = 'block';
}
function leftMeeting() {
document.getElementById('message-incall').style.display = 'none';
document.getElementById('message-quiescent').style.display = 'block';
document.getElementById('leave-button').style.display = 'none';
document.getElementById('create-room-button').style.display = 'block';
}
function fullScreenClick(e) {
showEvent(e);
fullScreen(e.participant.session_id);
}
function unFullScreen() {
if (!fullScreenParticipantId) {
return;
}
callFrame.updateParticipant(fullScreenParticipantId, {
styles: {cam: {div: {}} }
});
fullScreenParticipantId = null;
}
function fullScreen(sessionId) {
if (fullScreenParticipantId === sessionId) {
unFullScreen();
return;
}
unFullScreen();
fullScreenParticipantId = sessionId;
callFrame.updateParticipant(fullScreenParticipantId, {
styles: {
cam: {
div: {
position: 'absolute',
zIndex: 98,
borderRadius: 0, // does not work on Safari 12.1
top: 0, left: 0, width: '100%', height: '100%',
},
}
}
});
}
async function createCallFrame() {
window.callFrame = window.DailyIframe.createFrame(
document.getElementById('call-container'),
{
customLayout: true,
cssFile: 'mobile-touches.css'
}
);
callFrame.on('joining-meeting', joiningMeeting)
.on('joined-meeting', joinedMeeting)
.on('left-meeting', leftMeeting)
.on('participant-joined', showEvent)
.on('participant-updated', showEvent)
.on('participant-left', showEvent)
.on('recording-started', showEvent)
.on('recording-stopped', showEvent)
.on('recording-stats', showEvent)
.on('recording-error', showEvent)
.on('recording-upload-completed', showEvent)
.on('error', showEvent)
.on('click', fullScreenClick)
.on('touchstart', fullScreenClick);
}
async function run() {
if (!window.callFrame) {
await createCallFrame();
}
callFrame.join({ url: room.url });
}
</script>
<div class="mobile-wrapper">
<div class="mobile-statusbar"></div>
<div id="header">
<h4 id="message-quiescent">Click the red button to create a new room, then copy the url to join from another tab or device</h4>
<h4 id="message-creating">Creating room…</h4>
<h4 id="message-joining">Joining call…</h4>
<h4 id="message-incall">You're in the call</h4>
<h4 id="message-exit" onclick="callFrame.join()">
You've exited, click to rejoin
</h4>
</div>
<div id="call-container"></div>
<div id="controller">
<ul>
<li class="controller-item"
onclick="callFrame.setLocalAudio(!callFrame.localAudio())">
<img src="/demo/icon-microphone.svg" />
</li>
<li class="controller-item"
onclick="callFrame.setLocalVideo(!callFrame.localVideo())">
<img src="/demo/icon-camera.svg" />
</li>
</ul>
<div onclick="createRoomAndJoin()" class="red-button"
id="create-room-button">
<p>Create room</p>
</div>
<div onclick="callFrame.leave()" class="red-button" id="leave-button">
<p>Leave call</p>
</div>
</div>
<div class="mobile-navbar"></div>
</div>
</body>
</html>
You can’t perform that action at this time.