theurere
12 years ago
9 changed files with 533 additions and 3 deletions
@ -0,0 +1,150 @@ |
|||||||
|
/*! |
||||||
|
* Spreed WebRTC. |
||||||
|
* Copyright (C) 2013-2014 struktur AG |
||||||
|
* |
||||||
|
* This file is part of Spreed WebRTC. |
||||||
|
* |
||||||
|
* This program is free software: you can redistribute it and/or modify |
||||||
|
* it under the terms of the GNU Affero General Public License as published by |
||||||
|
* the Free Software Foundation, either version 3 of the License, or |
||||||
|
* (at your option) any later version. |
||||||
|
* |
||||||
|
* This program is distributed in the hope that it will be useful, |
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||||
|
* GNU Affero General Public License for more details. |
||||||
|
* |
||||||
|
* You should have received a copy of the GNU Affero General Public License |
||||||
|
* along with this program. If not, see <http://www.gnu.org/licenses/>. |
||||||
|
* |
||||||
|
*/ |
||||||
|
|
||||||
|
$darken-tour-opacity: .4; |
||||||
|
|
||||||
|
#helptour { |
||||||
|
} |
||||||
|
|
||||||
|
.helptour { |
||||||
|
.tourControl { |
||||||
|
top: initial; |
||||||
|
bottom: 10px; |
||||||
|
left: 10px; |
||||||
|
max-width: none; |
||||||
|
} |
||||||
|
.in { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
.popover { |
||||||
|
opacity: 0.95; |
||||||
|
} |
||||||
|
.roomPane { |
||||||
|
top: 97px; |
||||||
|
left: 10px; |
||||||
|
.arrow { |
||||||
|
left: 10%; |
||||||
|
} |
||||||
|
} |
||||||
|
.buddyListPane { |
||||||
|
left: initial; |
||||||
|
right: 280px; |
||||||
|
top: 70px; |
||||||
|
.arrow { |
||||||
|
top: 20%; |
||||||
|
} |
||||||
|
} |
||||||
|
.chatPane { |
||||||
|
left: initial; |
||||||
|
right: 540px; |
||||||
|
top: 70px; |
||||||
|
.arrow { |
||||||
|
top: 20%; |
||||||
|
} |
||||||
|
} |
||||||
|
.settingsPane { |
||||||
|
left: initial; |
||||||
|
right: 540px; |
||||||
|
top: 200px; |
||||||
|
.arrow { |
||||||
|
top: 20%; |
||||||
|
} |
||||||
|
} |
||||||
|
.mediaAccessPane { |
||||||
|
top: 10px; |
||||||
|
left: initial; |
||||||
|
right: 10px; |
||||||
|
} |
||||||
|
.welcomePane { |
||||||
|
position: relative; |
||||||
|
margin: 0 auto; |
||||||
|
top: 150px; |
||||||
|
.btn { |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.arrow+.secondArrow { |
||||||
|
border-width: 11px; |
||||||
|
&:after { |
||||||
|
border-width: 10px; |
||||||
|
content: ""; |
||||||
|
} |
||||||
|
} |
||||||
|
.arrow+.secondArrow, |
||||||
|
.arrow+.secondArrow:after { |
||||||
|
position: absolute; |
||||||
|
display: block; |
||||||
|
width: 0; |
||||||
|
height: 0; |
||||||
|
border-color: rgba(0, 0, 0, 0); |
||||||
|
border-style: solid; |
||||||
|
} |
||||||
|
.secondArrow.right { |
||||||
|
top: 50%; |
||||||
|
left: -11px; |
||||||
|
margin-top: -11px; |
||||||
|
border-left-width: 0; |
||||||
|
border-right-color: #999; |
||||||
|
border-right-color: rgba(0, 0, 0, 0.25); |
||||||
|
&:after { |
||||||
|
content: " "; |
||||||
|
left: 1px; |
||||||
|
bottom: -10px; |
||||||
|
border-left-width: 0; |
||||||
|
border-right-color: #FFF; |
||||||
|
} |
||||||
|
} |
||||||
|
.helptourShowRoomPane { |
||||||
|
#bar, |
||||||
|
#buddylist { |
||||||
|
opacity: $darken-tour-opacity; |
||||||
|
} |
||||||
|
.overlaybar { |
||||||
|
background: $componentfg2; |
||||||
|
} |
||||||
|
} |
||||||
|
.helptourShowSettingsPane { |
||||||
|
#roombar { |
||||||
|
opacity: $darken-tour-opacity; |
||||||
|
} |
||||||
|
} |
||||||
|
.helptourShowChatPane { |
||||||
|
#roombar, |
||||||
|
#buddylist { |
||||||
|
opacity: $darken-tour-opacity; |
||||||
|
} |
||||||
|
} |
||||||
|
.helptourShowBuddyListPane { |
||||||
|
#bar, |
||||||
|
#roombar { |
||||||
|
opacity: $darken-tour-opacity; |
||||||
|
} |
||||||
|
} |
||||||
|
.helptourShowMediaAccessPane, |
||||||
|
.helptourShowWelcomePane { |
||||||
|
#bar, |
||||||
|
#roombar, |
||||||
|
#buddylist { |
||||||
|
opacity: $darken-tour-opacity; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,288 @@ |
|||||||
|
/* |
||||||
|
* Spreed WebRTC. |
||||||
|
* Copyright (C) 2013-2014 struktur AG |
||||||
|
* |
||||||
|
* This file is part of Spreed WebRTC. |
||||||
|
* |
||||||
|
* This program is free software: you can redistribute it and/or modify |
||||||
|
* it under the terms of the GNU Affero General Public License as published by |
||||||
|
* the Free Software Foundation, either version 3 of the License, or |
||||||
|
* (at your option) any later version. |
||||||
|
* |
||||||
|
* This program is distributed in the hope that it will be useful, |
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||||
|
* GNU Affero General Public License for more details. |
||||||
|
* |
||||||
|
* You should have received a copy of the GNU Affero General Public License |
||||||
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
|
* |
||||||
|
*/ |
||||||
|
|
||||||
|
define(['jquery', 'angular', 'text!partials/helpoverlay.html', 'text!partials/helptour.html'], function($, angular, template, templatehelptour) { |
||||||
|
|
||||||
|
//helptour
|
||||||
|
return [function() { |
||||||
|
|
||||||
|
var controller = ['$scope', '$timeout', '$modal', '$rootScope', 'mediaStream', function($scope, $timeout, $modal, $rootScope, mediaStream) { |
||||||
|
var isToggled = false; |
||||||
|
var displayTime = 12000; |
||||||
|
var shown = localStorage.getItem('mediastream-helptour'); |
||||||
|
var timeoutAutoStepsIn = []; |
||||||
|
var timeoutAutoStepsOut = []; |
||||||
|
var menus = {}; |
||||||
|
var backupLayout = null; |
||||||
|
var tourLayout = { |
||||||
|
buddylist: true, |
||||||
|
buddylistAutoHide: false, |
||||||
|
chat: false, |
||||||
|
chatMaximized: false, |
||||||
|
main: null, |
||||||
|
presentation: false, |
||||||
|
roombar: false, |
||||||
|
screenshare: false, |
||||||
|
settings: false |
||||||
|
}; |
||||||
|
var tourLayoutShowRoomPane = { |
||||||
|
buddylist: true, |
||||||
|
buddylistAutoHide: false, |
||||||
|
chat: false, |
||||||
|
chatMaximized: false, |
||||||
|
main: null, |
||||||
|
presentation: false, |
||||||
|
roombar: true, |
||||||
|
screenshare: false, |
||||||
|
settings: false |
||||||
|
}; |
||||||
|
var tourLayoutShowBuddyListPane = { |
||||||
|
buddylist: true, |
||||||
|
buddylistAutoHide: false, |
||||||
|
chat: false, |
||||||
|
chatMaximized: false, |
||||||
|
main: null, |
||||||
|
presentation: false, |
||||||
|
roombar: false, |
||||||
|
screenshare: false, |
||||||
|
settings: false |
||||||
|
}; |
||||||
|
var tourLayoutShowChatPane = { |
||||||
|
buddylist: true, |
||||||
|
buddylistAutoHide: false, |
||||||
|
chat: true, |
||||||
|
chatMaximized: false, |
||||||
|
main: null, |
||||||
|
presentation: false, |
||||||
|
roombar: false, |
||||||
|
screenshare: false, |
||||||
|
settings: false |
||||||
|
}; |
||||||
|
var tourLayoutShowSettingsPane = { |
||||||
|
buddylist: false, |
||||||
|
buddylistAutoHide: false, |
||||||
|
chat: false, |
||||||
|
chatMaximized: false, |
||||||
|
main: null, |
||||||
|
presentation: false, |
||||||
|
roombar: false, |
||||||
|
screenshare: false, |
||||||
|
settings: true |
||||||
|
}; |
||||||
|
var tourLayoutShowMediaAccessPane = { |
||||||
|
buddylist: true, |
||||||
|
buddylistAutoHide: false, |
||||||
|
chat: false, |
||||||
|
chatMaximized: false, |
||||||
|
main: null, |
||||||
|
presentation: false, |
||||||
|
roombar: false, |
||||||
|
screenshare: false, |
||||||
|
settings: false |
||||||
|
}; |
||||||
|
var tourLayoutShowWelcomePane = { |
||||||
|
buddylist: true, |
||||||
|
buddylistAutoHide: false, |
||||||
|
chat: false, |
||||||
|
chatMaximized: false, |
||||||
|
main: null, |
||||||
|
presentation: false, |
||||||
|
roombar: false, |
||||||
|
screenshare: false, |
||||||
|
settings: false |
||||||
|
}; |
||||||
|
menus.triggerMediaAccess = function() { |
||||||
|
if (isToggled) { |
||||||
|
mediaStream.webrtc.testMediaAccess(function() {}); |
||||||
|
} else { |
||||||
|
mediaStream.webrtc.stop(); |
||||||
|
} |
||||||
|
}; |
||||||
|
menus.initRoomLayout = function() { |
||||||
|
$scope.layout = angular.extend($scope.layout, tourLayout); |
||||||
|
}; |
||||||
|
menus.toggleRoom = function() { |
||||||
|
$scope.layout = angular.extend($scope.layout, tourLayoutShowRoomPane); |
||||||
|
}; |
||||||
|
menus.toggleChat = function() { |
||||||
|
$scope.layout = angular.extend($scope.layout, tourLayoutShowChatPane); |
||||||
|
}; |
||||||
|
menus.toggleSettings = function() { |
||||||
|
$scope.layout = angular.extend($scope.layout, tourLayoutShowSettingsPane); |
||||||
|
}; |
||||||
|
menus.toggleCSS = function(css) { |
||||||
|
$('body').toggleClass(css); |
||||||
|
}; |
||||||
|
var toggleTargetMenu = function() { |
||||||
|
var menu = $($scope.steps[$scope.currentIndex]).data('menu'); |
||||||
|
var css = $($scope.steps[$scope.currentIndex]).data('css'); |
||||||
|
if (menu) { |
||||||
|
isToggled = !isToggled; |
||||||
|
if(!isToggled) { |
||||||
|
menus.initRoomLayout(); |
||||||
|
} else { |
||||||
|
menus[menu](); |
||||||
|
} |
||||||
|
} |
||||||
|
if (css) { |
||||||
|
menus.toggleCSS(css); |
||||||
|
} |
||||||
|
}; |
||||||
|
var outStep = function() { |
||||||
|
toggleTargetMenu(); |
||||||
|
$($scope.steps[$scope.currentIndex]).removeClass('in'); |
||||||
|
}; |
||||||
|
var inStep = function(i) { |
||||||
|
$scope.currentIndex = i; |
||||||
|
toggleTargetMenu(); |
||||||
|
$($scope.steps[$scope.currentIndex]).addClass('in'); |
||||||
|
}; |
||||||
|
var autoStep = function(i, elem, startIndex) { |
||||||
|
var inTime = startIndex ? displayTime * (i - startIndex) : displayTime * i; |
||||||
|
var outTime = startIndex ? displayTime * ((i + 1) - startIndex) : displayTime * (i + 1); |
||||||
|
timeoutAutoStepsIn[i] = $timeout(function() { |
||||||
|
inStep(i); |
||||||
|
}, inTime, true); |
||||||
|
timeoutAutoStepsOut[i] = $timeout(function() { |
||||||
|
if ($scope.steps.length === i + 1) { |
||||||
|
$scope.togglePause(); |
||||||
|
} else { |
||||||
|
outStep(); |
||||||
|
} |
||||||
|
}, outTime, true); |
||||||
|
}; |
||||||
|
var autoTour = function(startIndex) { |
||||||
|
if (!angular.isNumber(startIndex)) { |
||||||
|
startIndex = 0; |
||||||
|
// start again from the beginning and ensure window is hidden
|
||||||
|
} else if ($scope.currentIndex > $scope.steps.length - 2) { |
||||||
|
outStep(); |
||||||
|
startIndex = 0; |
||||||
|
} else { |
||||||
|
outStep(); |
||||||
|
} |
||||||
|
$scope.steps.each(function(i, x) { |
||||||
|
if (i >= startIndex) { |
||||||
|
autoStep(i, x, startIndex); |
||||||
|
} |
||||||
|
}); |
||||||
|
}; |
||||||
|
var manualTour = function() { |
||||||
|
timeoutAutoStepsIn.forEach(function(promise) { |
||||||
|
$timeout.cancel(promise); |
||||||
|
}); |
||||||
|
timeoutAutoStepsOut.forEach(function(promise) { |
||||||
|
$timeout.cancel(promise); |
||||||
|
}); |
||||||
|
}; |
||||||
|
var initTour = function() { |
||||||
|
backupLayout = angular.extend({}, $scope.layout); |
||||||
|
menus.initRoomLayout(); |
||||||
|
autoTour(); |
||||||
|
}; |
||||||
|
var reset = function() { |
||||||
|
outStep(); |
||||||
|
$scope.tourPaused = false; |
||||||
|
$scope.currentIndex = null; |
||||||
|
$scope.layout = angular.extend($scope.layout, backupLayout); |
||||||
|
}; |
||||||
|
var introTour = function() { |
||||||
|
var controller = ['$scope', '$modalInstance', function(scope, $modalInstance) { |
||||||
|
scope.goTour = function() { |
||||||
|
$modalInstance.dismiss(); |
||||||
|
initTour(); |
||||||
|
}; |
||||||
|
}]; |
||||||
|
$modal.open({ |
||||||
|
template: templatehelptour, |
||||||
|
controller: controller, |
||||||
|
size: 'sm' |
||||||
|
}); |
||||||
|
}; |
||||||
|
$scope.tourPaused = false; |
||||||
|
$scope.currentIndex = null; |
||||||
|
$scope.stepBeginning = function() { |
||||||
|
if (!$scope.tourPaused) { |
||||||
|
$scope.togglePause(); |
||||||
|
} |
||||||
|
outStep(); |
||||||
|
inStep(0); |
||||||
|
}; |
||||||
|
$scope.stepBackward = function() { |
||||||
|
if (!$scope.tourPaused) { |
||||||
|
$scope.togglePause(); |
||||||
|
} |
||||||
|
outStep(); |
||||||
|
inStep($scope.currentIndex - 1); |
||||||
|
}; |
||||||
|
$scope.stepForward = function() { |
||||||
|
if (!$scope.tourPaused) { |
||||||
|
$scope.togglePause(); |
||||||
|
} |
||||||
|
outStep(); |
||||||
|
inStep($scope.currentIndex + 1); |
||||||
|
}; |
||||||
|
$scope.stepEnd = function() { |
||||||
|
if (!$scope.tourPaused) { |
||||||
|
$scope.togglePause(); |
||||||
|
} |
||||||
|
outStep(); |
||||||
|
inStep($scope.steps.length - 1); |
||||||
|
}; |
||||||
|
$scope.togglePause = function() { |
||||||
|
$scope.tourPaused = !$scope.tourPaused; |
||||||
|
if ($scope.tourPaused) { |
||||||
|
manualTour(); |
||||||
|
} else { |
||||||
|
autoTour($scope.currentIndex + 1); |
||||||
|
} |
||||||
|
}; |
||||||
|
$scope.exitTour = function() { |
||||||
|
if (!$scope.tourPaused) { |
||||||
|
manualTour(); |
||||||
|
} |
||||||
|
reset(); |
||||||
|
}; |
||||||
|
$scope.$on('showHelpTour', function() { |
||||||
|
introTour(); |
||||||
|
}); |
||||||
|
$rootScope.$on("room", function(event, room) { |
||||||
|
if (!shown) { |
||||||
|
introTour(); |
||||||
|
localStorage.setItem('mediastream-helptour', 1); |
||||||
|
} |
||||||
|
}); |
||||||
|
}]; |
||||||
|
|
||||||
|
var link = function($scope, $elem, $attrs) { |
||||||
|
$scope.steps = $elem.find('.tourSteps .popover'); |
||||||
|
}; |
||||||
|
|
||||||
|
return { |
||||||
|
restrict: 'E', |
||||||
|
scope: true, |
||||||
|
replace: true, |
||||||
|
template: template, |
||||||
|
controller: controller, |
||||||
|
link: link |
||||||
|
}; |
||||||
|
}]; |
||||||
|
}); |
||||||
@ -0,0 +1,58 @@ |
|||||||
|
<div class="helptour"> |
||||||
|
<div class="tourSteps"> |
||||||
|
<div class="popover bottom roomPane" data-menu="toggleRoom" data-css="helptourShowRoomPane"> |
||||||
|
<div class="arrow"></div> |
||||||
|
<h3 class="popover-title">{{_('A room')}}</h3> |
||||||
|
<div class="popover-content">{{_('Place to meet people(buddy). Change rooms here and easily send friends a room link with the social media links provided. Not all room names are available and certain characters are automatically removed.')}}</div> |
||||||
|
</div> |
||||||
|
<div class="popover left buddyListPane" data-css="helptourShowBuddyListPane"> |
||||||
|
<div class="arrow"></div> |
||||||
|
<h3 class="popover-title">{{_('Buddy List')}}</h3> |
||||||
|
<div class="popover-content">{{_('List of all buddys in the same room and saved contacts.')}}</div> |
||||||
|
</div> |
||||||
|
<div class="popover left buddyListPane" data-css="helptourShowBuddyListPane"> |
||||||
|
<div class="arrow"></div> |
||||||
|
<h3 class="popover-title">{{_('A buddy')}}</h3> |
||||||
|
<div class="popover-content">{{_('An individual in the same room. If someone is in the same room, a buddy card will be shown. Simply hover over the card to callout chat/call actions. If a star appears next to a buddy comment, the buddy is logged in. When the star is filled the buddy is a contact. Click the star to add a buddy as a contact or remove a contact.')}}</div> |
||||||
|
</div> |
||||||
|
<div class="popover left chatPane" data-menu="toggleChat" data-css="helptourShowChatPane"> |
||||||
|
<div class="arrow"></div> |
||||||
|
<h3 class="popover-title">{{_('Chat sessions')}}</h3> |
||||||
|
<div class="popover-content">{{_('Group and individual chat sessions. Chat with everyone in a room or chat individually. In group chats you are able to share files and your current location. In individual chats you are also able to start a video call.')}}</div> |
||||||
|
</div> |
||||||
|
<div class="popover left settingsPane" data-menu="toggleSettings" data-css="helptourShowSettingsPane"> |
||||||
|
<div class="arrow"></div> |
||||||
|
<h3 class="popover-title">{{_('Settings')}}</h3> |
||||||
|
<div class="popover-content">{{_('Choose a name, upload a picture, signin, and customize you experience.')}}</div> |
||||||
|
</div> |
||||||
|
<div class="popover bottom mediaAccessPane" data-menu="triggerMediaAccess" data-css="helptourShowMediaAccessPane"> |
||||||
|
<div class="arrow"></div> |
||||||
|
<div class="secondArrow right"></div> |
||||||
|
<h3 class="popover-title">{{_('Media permission')}}</h3> |
||||||
|
<div class="popover-content">{{_('Everytime a call is made or recieved a permission window from the browser will show up like this. To make a call you must accept, otherwise the browser cannot use your wecam and video to make a call. This is a security and privacy precaution.')}}</div> |
||||||
|
</div> |
||||||
|
<div class="popover bottom welcomePane" data-css="helptourShowWelcomePane"> |
||||||
|
<h3 class="popover-title">{{_('Welcome')}}</h3> |
||||||
|
<div class="popover-content"> |
||||||
|
{{_('Welcome to spreed-webrtc! Start calling and chatting now.')}} |
||||||
|
<button class="btn btn-primary btn-block" ng-click="exitTour()">Exit Tour</button> |
||||||
|
<button class="btn btn-default btn-block" ng-click="togglePause()">Replay Tour</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="popover in tourControl" ng-if="currentIndex !== null"> |
||||||
|
<div class="arrow"></div><h3 class="popover-title ng-binding">{{_('Tour Control')}} / {{_('Window %d of %d', currentIndex + 1, steps.length)}}</h3> |
||||||
|
<div class="popover-content ng-binding"> |
||||||
|
<div class="btn-group"> |
||||||
|
<button class="btn btn-default" ng-model="tourPaused" ng-click="togglePause()"><i class="fa" ng-class="{'fa-play':tourPaused, 'fa-pause':!tourPaused}"></i></button> |
||||||
|
<button class="btn btn-default" ng-click="exitTour()"><i class="fa fa-stop"></i></button> |
||||||
|
</div> |
||||||
|
<div class="btn-group"> |
||||||
|
<button class="btn btn-default" ng-click="stepBeginning()" ng-disabled="currentIndex < 1"><i class="fa fa-fast-backward"></i></button> |
||||||
|
<button class="btn btn-default" ng-click="stepBackward()" ng-disabled="currentIndex < 1"><i class="fa fa-backward"></i></button> |
||||||
|
<button class="btn btn-default" ng-click="stepForward()" ng-disabled="currentIndex === steps.length - 1"><i class="fa fa-forward"></i></button> |
||||||
|
<button class="btn btn-default" ng-click="stepEnd()" ng-disabled="currentIndex === steps.length - 1"><i class="fa fa-fast-forward"></i></button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
@ -0,0 +1,15 @@ |
|||||||
|
<div> |
||||||
|
<div class="modal-header"> |
||||||
|
<button type="button" class="close" ng-click="$close()">×</button> |
||||||
|
<h3 class="modal-title">{{_('Tour')}}</h3> |
||||||
|
</div> |
||||||
|
<div class="modal-body"> |
||||||
|
<p>{{_('Congratulations! Anonymous secure peer to peer chat and video calls are a short click away. Quickly get started with the features tour below. The tour can be accessed again under settings.')}}</p> |
||||||
|
</div> |
||||||
|
<div class="modal-footer"> |
||||||
|
<div class="pull-right"> |
||||||
|
<button class="btn btn-default" ng-click="$dismiss()">{{_('Cancel')}}</button> |
||||||
|
<button class="btn btn-primary" ng-click="goTour()">{{_('Go')}}</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
Loading…
Reference in new issue