theurere
12 years ago
9 changed files with 533 additions and 3 deletions
@ -0,0 +1,150 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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