From e9a2afb7adac3ef72a6e2daf468955ad2de46aa3 Mon Sep 17 00:00:00 2001 From: Mark Hulbert <39801222+m-hulbert@users.noreply.github.com> Date: Thu, 18 Jul 2024 17:50:27 +0200 Subject: [PATCH] Remove tutorial scripts from main --- .../tutorials/channel-enumeration-rest.js | 41 --- .../tutorials/channel-lifecycle-events.js | 128 ------- .../tutorials/channel-occupancy-events.js | 109 ------ static/scripts/tutorials/encryption.js | 42 --- static/scripts/tutorials/history.js | 321 ------------------ .../scripts/tutorials/jwt-authentication.js | 17 - static/scripts/tutorials/newsfeed-react.js | 20 -- static/scripts/tutorials/presence.js | 117 ------- static/scripts/tutorials/publish-subscribe.js | 38 --- .../tutorials/web-rtc-data-channels.js | 20 -- .../tutorials/web-rtc-file-transfer.js | 20 -- .../tutorials/web-rtc-screen-sharing.js | 20 -- .../tutorials/web-rtc-video-calling.js | 20 -- 13 files changed, 913 deletions(-) delete mode 100644 static/scripts/tutorials/channel-enumeration-rest.js delete mode 100644 static/scripts/tutorials/channel-lifecycle-events.js delete mode 100644 static/scripts/tutorials/channel-occupancy-events.js delete mode 100644 static/scripts/tutorials/encryption.js delete mode 100644 static/scripts/tutorials/history.js delete mode 100644 static/scripts/tutorials/jwt-authentication.js delete mode 100644 static/scripts/tutorials/newsfeed-react.js delete mode 100644 static/scripts/tutorials/presence.js delete mode 100644 static/scripts/tutorials/publish-subscribe.js delete mode 100644 static/scripts/tutorials/web-rtc-data-channels.js delete mode 100644 static/scripts/tutorials/web-rtc-file-transfer.js delete mode 100644 static/scripts/tutorials/web-rtc-screen-sharing.js delete mode 100644 static/scripts/tutorials/web-rtc-video-calling.js diff --git a/static/scripts/tutorials/channel-enumeration-rest.js b/static/scripts/tutorials/channel-enumeration-rest.js deleted file mode 100644 index 931b84b5ec..0000000000 --- a/static/scripts/tutorials/channel-enumeration-rest.js +++ /dev/null @@ -1,41 +0,0 @@ -/* eslint-disable no-undef */ -const authUrl = 'https://ably.com/ably-auth/token/docs'; - -const resultArea = document.getElementById('result'); -//request a list of channels on button click - -window.addEventListener('load', () => { - window.ably = { - ...window.ably, - docs: { - channelCount: 0, - }, - }; - function handleResultPage(err, resultPage) { - let channelCount = window.ably.docs.channelCount; - if (err || !resultPage.success) { - resultArea.value += 'An error occurred; err = ' + (err || resultPage.errorMessage); - return; - } - if (channelCount === 0) { - if (resultPage.items.length == 0) { - resultArea.value += 'Your app does not have any active channels\n'; - return; - } - resultArea.value += 'Your app has the following active channels:\n'; - } - resultPage.items.forEach(function (channel) { - resultArea.value += ++window.ably.docs.channelCount + '. ' + channel + '\n'; - }); - if (resultPage.hasNext()) { - resultPage.next(handleResultPage); - } - } - function enumerateChannels() { - const endpoint = '/channels'; - resultArea.value += 'Enumerating channels ...\n'; - const ably = new Ably.Rest({ authUrl: authUrl }); - ably.request('get', endpoint, { limit: 100, by: 'id' }, null, null, handleResultPage); - } - document.getElementById('enumerate').onclick = enumerateChannels; -}); diff --git a/static/scripts/tutorials/channel-lifecycle-events.js b/static/scripts/tutorials/channel-lifecycle-events.js deleted file mode 100644 index 8412b4d6c3..0000000000 --- a/static/scripts/tutorials/channel-lifecycle-events.js +++ /dev/null @@ -1,128 +0,0 @@ -/* eslint-disable no-undef */ -window.addEventListener('load', () => { - window.ably = { - ...window.ably, - docs: { - ably: false, - resultArea: document.getElementById('result'), - }, - }; - window.ably.docs.resultArea.scrollTop = window.ably.docs.resultArea.scrollHeight; - function initClient() { - const userApiKey = document.getElementById('api-key').value; - resultArea.value += '[LOCAL LOG - ' + new Date().toLocaleTimeString() + ' ]: Client instantiated\n'; - const ably = new Ably.Realtime(userApiKey); - const metaChannel = ably.channels.get('[meta]channel.lifecycle'); - metaChannel.subscribe('channel.opened', (msg) => { - var msgJSONobj = JSON.parse(JSON.stringify(msg.data)); - resultArea.value += - '[METADATA - ' + - new Date().toLocaleTimeString() + - ' ]: Channel "' + - msgJSONobj.name + - '" has been activated globally\n'; - resultArea.scrollTop = resultArea.scrollHeight; - }); - metaChannel.subscribe('channel.closed', (msg) => { - var msgJSONobj = JSON.parse(JSON.stringify(msg.data)); - resultArea.value += - '[METADATA - ' + - new Date().toLocaleTimeString() + - ' ]: Channel "' + - msgJSONobj.name + - '" has been deactivated globally\n'; - resultArea.scrollTop = resultArea.scrollHeight; - }); - metaChannel.subscribe('channel.region.active', (msg) => { - var msgJSONobj = JSON.parse(JSON.stringify(msg.data)); - resultArea.value += - '[METADATA - ' + - new Date().toLocaleTimeString() + - ' ]: Channel "' + - msgJSONobj.name + - '" has been activated in ' + - msgJSONobj.region + - ' region\n'; - resultArea.scrollTop = resultArea.scrollHeight; - }); - metaChannel.subscribe('channel.region.inactive', (msg) => { - var msgJSONobj = JSON.parse(JSON.stringify(msg.data)); - resultArea.value += - '[METADATA - ' + - new Date().toLocaleTimeString() + - ' ]: Channel "' + - msgJSONobj.name + - '" has been deactivated in ' + - msgJSONobj.region + - ' region\n'; - resultArea.scrollTop = resultArea.scrollHeight; - }); - window.ably.docs.ably = ably; - } - function createChannel() { - if (!window.ably.docs.ably) { - alert('You must instantiate a client first'); - return; - } - const ably = window.ably.docs.ably; - var channelName = document.getElementById('create-ch-name').value; - if (channelName == '') { - alert('Enter a channel name to attach'); - return; - } else { - ably.channels.get(channelName); - resultArea.value += - '[LOCAL LOG - ' + - new Date().toLocaleTimeString() + - ' ]: Channel instance obtained for "' + - channelName + - '" \n'; - resultArea.scrollTop = resultArea.scrollHeight; - var chList = document.getElementById('attached-channels'); - chList.options[chList.options.length] = new Option(channelName, channelName); - var channelInstances = document.getElementById('channel-instances'); - channelInstances.options[channelInstances.options.length] = new Option(channelName, channelName); - } - } - function attachChannel() { - if (!ably) { - alert('You must instantiate a client first'); - return; - } - var channelsList = document.getElementById('channel-instances'); - var chToAttach = channelsList.options[channelsList.selectedIndex].text; - var channel = ably.channels.get(chToAttach); - if (chToAttach == 'None') { - alert('Select a channel to delete'); - } else { - channel.attach(() => { - resultArea.value += - '[LOCAL LOG - ' + new Date().toLocaleTimeString() + ' ]: Channel "' + channel.name + '" is now attached\n'; - resultArea.scrollTop = resultArea.scrollHeight; - }); - } - } - function detachChannel() { - if (!ably) { - alert('You must instantiate a client first'); - return; - } - var channelsList = document.getElementById('attached-channels'); - var chToDetach = channelsList.options[channelsList.selectedIndex].text; - var channel = ably.channels.get(chToDetach); - if (chToDetach == 'None') { - alert('Select a channel to delete'); - } else { - channel.detach(() => { - resultArea.value += - '[LOCAL LOG - ' + new Date().toLocaleTimeString() + ' ]: Channel "' + channel.name + '" is now detached\n'; - resultArea.scrollTop = resultArea.scrollHeight; - }); - } - } - - document.getElementById('init-client').onclick = initClient; - document.getElementById('create-channel').onclick = createChannel; - document.getElementById('attach-channel').onclick = attachChannel; - document.getElementById('detach-channel').onclick = detachChannel; -}); diff --git a/static/scripts/tutorials/channel-occupancy-events.js b/static/scripts/tutorials/channel-occupancy-events.js deleted file mode 100644 index 77f88bf462..0000000000 --- a/static/scripts/tutorials/channel-occupancy-events.js +++ /dev/null @@ -1,109 +0,0 @@ -/* eslint-disable no-undef */ -window.addEventListener('load', () => { - window.ably = { - ...window.ably, - docs: { - ably: false, - resultArea: document.getElementById('result'), - }, - }; - - const authUrl = 'https://ably.com/ably-auth/token/docs'; - const ably = new Ably.Realtime({ - authUrl: authUrl, - }); - - const regularChannelName = 'channel-' + Math.random().toString(36).substr(2, 16); - const channelOpts = { params: { occupancy: 'metrics' } }; - const channel = ably.channels.get(regularChannelName, channelOpts); - const resultArea = document.getElementById('result'); - resultArea.scrollTop = resultArea.scrollHeight; - - function localLog(msg) { - const logDate = new Date().toLocaleTimeString(); - const template = `\n\n[LOCAL LOG - ${logDate}] - ${msg}\n`; - resultArea.value += template; - } - - function logData(channelName, metrics) { - const logDate = new Date().toLocaleTimeString(); - const prompt = `\n\n[METADATA - ${logDate}] - Occupancy on channel ${channelName} has been updated: \n`; - const template = `Connections: ${metrics.connections} - Publishers: ${metrics.publishers} - Subscribers: ${metrics.subscribers} - Presence Connections: ${metrics.presenceConnections} - Presence Members: ${metrics.presenceMembers} - Presence Subscribers: ${metrics.presenceSubscribers}`; - - return prompt + template; - } - - channel.subscribe('[meta]occupancy', (msg) => { - const occupancyMetrics = msg.data.metrics; - if (occupancyMetrics && msg.name.includes('[meta]')) { - resultArea.value += logData(regularChannelName, occupancyMetrics); - resultArea.scrollTop = resultArea.scrollHeight; - } - }); - - function addPublisherInstance() { - const str = 'Adding new publisher instance'; - localLog(str); - const ably = new Ably.Realtime({ - authUrl: authUrl, - }); - const regularChannel = ably.channels.get(regularChannelName); - regularChannel.publish('test-data', { - data: 'Dummy Data', - time: Date.now(), - }); - } - - function addSubscriberInstance() { - const str = 'Adding new subscriber instance'; - localLog(str); - const ably = new Ably.Realtime({ - authUrl: authUrl, - }); - const regularChannel = ably.channels.get(regularChannelName); - regularChannel.subscribe('test-data', () => { - console.log('Subscription working'); - }); - } - - function addPublisherInstanceWithPresence() { - const str = 'Adding new publisher instance with presence'; - localLog(str); - const myId = 'clientId-' + Math.random().toString(36).substr(2, 16); - const ably = new Ably.Realtime({ - authUrl: authUrl, - clientId: myId, - }); - const regularChannel = ably.channels.get(regularChannelName); - regularChannel.publish('test-data', { - data: 'Dummy Data', - time: Date.now(), - }); - regularChannel.presence.enter(); - } - - function addSubscriberInstanceWithPresence() { - const str = 'Adding new subscriber instance with presence'; - localLog(str); - const myId = 'clientId-' + Math.random().toString(36).substr(2, 16); - const ably = new Ably.Realtime({ - authUrl: authUrl, - clientId: myId, - }); - const regularChannel = ably.channels.get(regularChannelName); - regularChannel.subscribe('test-data', () => { - console.log('Subscription working'); - }); - regularChannel.presence.enter(); - } - - document.getElementById('add-publisher-instance').onclick = addPublisherInstance; - document.getElementById('add-subscriber-instance').onclick = addSubscriberInstance; - document.getElementById('add-publisher-instance-presence').onclick = addPublisherInstanceWithPresence; - document.getElementById('add-subscriber-instance-presence').onclick = addSubscriberInstanceWithPresence; -}); diff --git a/static/scripts/tutorials/encryption.js b/static/scripts/tutorials/encryption.js deleted file mode 100644 index 728cccb28a..0000000000 --- a/static/scripts/tutorials/encryption.js +++ /dev/null @@ -1,42 +0,0 @@ -/* eslint-disable no-undef */ -window.addEventListener('load', function () { - Ably.Realtime.Crypto.generateRandomKey(function (err, key) { - var ably = new Ably.Realtime({ authUrl: 'https://ably.com/ably-auth/token/docs' }), - channelName = getQueryParam('channel') || getRandomChannelName(), - cipherParams = Ably.Realtime.Crypto.getDefaultParams({ key: key }), - channelOpts = { cipher: cipherParams }, - channel = ably.channels.get(channelName, channelOpts), - $result = $('#result'); - - ably.connection.on('connecting', function () { - log('[Connecting to Ably...]'); - }); - - ably.connection.on('connected', function () { - log('[Connected to Ably] Waiting for messages...'); - }); - - channel.subscribe(function (msg) { - log('[Received] ' + msg.data); - }); - - $('button#send-message').on('click', function () { - var text = $('input#message-text').val(); - log('[Publishing Secret Message...] ' + text); - channel.publish('msg', text); - }); - - /* Set up the link to open a new window with this random channel name */ - var urlWithChannel = document.location.href.replace(/#.*$/, ''); - if (urlWithChannel.indexOf('channel=') < 0) { - urlWithChannel += (urlWithChannel.indexOf('?') < 0 ? '?' : '&') + 'channel=' + escape(channelName); - } - $('a#new-browser').attr('href', urlWithChannel + '#live-demo'); - - var started = new Date().getTime(); - function log(msg) { - var timePassed = Math.round((new Date().getTime() - started) / 100) / 10; - $result.text(timePassed + 's - ' + msg + '\n' + $result.text()); - } - }); -}); diff --git a/static/scripts/tutorials/history.js b/static/scripts/tutorials/history.js deleted file mode 100644 index f5d8070c71..0000000000 --- a/static/scripts/tutorials/history.js +++ /dev/null @@ -1,321 +0,0 @@ -/* eslint-disable no-undef */ -window.addEventListener('load', function () { - var ably = new Ably.Realtime({ authUrl: 'https://ably.com/ably-auth/token/docs', echoMessages: false }), - channelName = getQueryParam('channel') || 'persisted:' + getRandomChannelName(), - channel = ably.channels.get(channelName), - $result = $('#result'), - MaxReplayDelay = 2000, - MaxReplayDuration = 2000; - - ably.connection.on('connecting', function () { - log('[Connecting to Ably...]'); - }); - - ably.connection.on('connected', function () { - log('[Connected to Ably] Ready to publish...'); - }); - - channel.attach(function () { - log('[Piano channel] Attached to channel ' + channelName + ', ready to record...'); - }); - - channel.subscribe(function (msg) { - var key = msg.data.key; - press(key, '#FF0000'); - setTimeout(function () { - depressed[key] = false; - fade(key)(); - }, msg.data.duration); - }); - - function recordKeyDepressed(key) { - var payload = { - key: key, - pressed: depressed[key], - duration: new Date().getTime() - depressed[key], - }; - channel.publish('play', payload, function (err) { - if (err) { - return log('[Publish FAILED] ' + JSON.stringify(err)); - } - log('[Published] ' + JSON.stringify(payload)); - }); - depressed[key] = false; - } - - $('button#replay-button').on('click', function () { - var lastKeyTimestamp, - song = [], - delay = 0; - log('[Loading history...]'); - - channel.history({ limit: 10 }, function (err, resultPage) { - if (err) { - return log('[History FAILED] ' + JSON.stringify(err)); - } - - resultPage.items.forEach(function (msg) { - if (!lastKeyTimestamp) { - lastKeyTimestamp = msg.data.pressed; - } - song.unshift({ key: msg.data.key, pressed: lastKeyTimestamp - msg.data.pressed, duration: msg.data.duration }); - }); - - if (song.length) { - lastKeyTimestamp = song[0].pressed; - song.forEach(function (note) { - delay += Math.min(MaxReplayDelay, lastKeyTimestamp - note.pressed); - setTimeout(function () { - press(note.key); - }, delay); - setTimeout(function () { - depressed[note.key] = false; - fade(note.key)(); - }, delay + Math.min(MaxReplayDuration, note.duration) + 10); - lastKeyTimestamp = note.pressed; - }); - log( - '[History] Replaying ' + - song - .map(function (note) { - return note.key; - }) - .join(' > '), - ); - } else { - log('[No song to play as nothing in history] Play something first and try again'); - } - }); - }); - - var started = new Date().getTime(); - function log(msg) { - var timePassed = Math.round((new Date().getTime() - started) / 100) / 10; - $result.text(timePassed + 's - ' + msg + '\n' + $result.text()); - } - - /* Set up the link to open a new window with this random channel name */ - var urlWithChannel = document.location.href.replace(/#.*$/, ''); - if (urlWithChannel.indexOf('channel=') < 0) { - urlWithChannel += (urlWithChannel.indexOf('?') < 0 ? '?' : '&') + 'channel=' + escape(channelName); - } - $('a#new-browser').attr('href', urlWithChannel + '#live-demo'); - - /* Piano thanks to https://github.com/michaelmp/js-piano */ - /* Piano keyboard pitches. Names match sound files by ID attribute. */ - - var keys = [ - 'A2', - 'Bb2', - 'B2', - 'C3', - 'Db3', - 'D3', - 'Eb3', - 'E3', - 'F3', - 'Gb3', - 'G3', - 'Ab3', - 'A3', - 'Bb3', - 'B3', - 'C4', - 'Db4', - 'D4', - 'Eb4', - 'E4', - 'F4', - 'Gb4', - 'G4', - 'Ab4', - 'A4', - 'Bb4', - 'B4', - 'C5', - ]; - - /* Corresponding keyboard keycodes, in order w/ 'keys'. */ - /* QWERTY layout: - /* upper register: Q -> P, with 1-0 as black keys. */ - /* lower register: Z -> M, , with A-L as black keys. */ - - var codes = [ - 90, 83, 88, 67, 70, 86, 71, 66, 78, 74, 77, 75, 81, 50, 87, 69, 52, 82, 53, 84, 89, 55, 85, 56, 73, 57, 79, 80, - ]; - - var pedal = 32; /* Keycode for sustain pedal. */ - var tonic = 'A2'; /* Lowest pitch. */ - - /* Piano state. */ - - var intervals = {}; - var depressed = {}; - - /* Selectors */ - - function pianoClass(name) { - return '.piano-' + name; - } - - function soundId(id) { - return 'sound-' + id; - } - - function sound(id) { - var it = document.getElementById(soundId(id)); - return it; - } - - /* Virtual piano keyboard events. */ - - function keyup(code) { - var offset = codes.indexOf(code); - var k; - if (offset >= 0) { - k = keys.indexOf(tonic) + offset; - return keys[k]; - } - } - - function keydown(code) { - return keyup(code); - } - - function press(key, color) { - var audio = sound(key); - if (depressed[key]) { - return; - } - clearInterval(intervals[key]); - if (audio) { - audio.pause(); - audio.volume = 1.0; - if (audio.readyState >= 2) { - audio.currentTime = 0; - audio.play(); - depressed[key] = new Date().getTime(); - } - } - $(pianoClass(key)).css({ - backgroundColor: color || '#88FFAA', - }); - } - - /* Manually diminish the volume when the key is not sustained. */ - /* These values are hand-selected for a pleasant fade-out quality. */ - - function fade(key) { - var audio = sound(key); - var stepfade = function () { - if (audio) { - if (audio.volume < 0.03) { - kill(key)(); - } else { - if (audio.volume > 0.2) { - audio.volume = audio.volume * 0.95; - } else { - audio.volume = audio.volume - 0.01; - } - } - } - }; - return function () { - clearInterval(intervals[key]); - intervals[key] = setInterval(stepfade, 5); - }; - } - - /* Bring a key to an immediate halt. */ - - function kill(key) { - var audio = sound(key); - return function () { - clearInterval(intervals[key]); - if (audio) { - audio.pause(); - } - if (key.length > 2) { - $(pianoClass(key)).css({ - backgroundColor: 'black', - }); - } else { - $(pianoClass(key)).css({ - backgroundColor: 'white', - }); - } - }; - } - - /* Simulate a gentle release, as opposed to hard stop. */ - - var fadeout = true; - - /* Sustain pedal, toggled by user. */ - - var sustaining = false; - - /* Register mouse event callbacks. */ - - keys.forEach(function (key) { - $(pianoClass(key)).mousedown(function () { - $(pianoClass(key)).css({ - backgroundColor: '#88FFAA', - }); - press(key); - }); - if (fadeout) { - $(pianoClass(key)).mouseup(function () { - recordKeyDepressed(key); - if (!sustaining) { - fade(key)(); - } - }); - } else { - $(pianoClass(key)).mouseup(function () { - recordKeyDepressed(key); - if (!sustaining) { - kill(key)(); - } - }); - } - }); - - /* Register keyboard event callbacks. */ - - $(document).keydown(function (event) { - if (event.which === pedal) { - sustaining = true; - $(pianoClass('pedal')).addClass('piano-sustain'); - } - press(keydown(event.which)); - }); - - $(document).keyup(function (event) { - if (event.which === pedal) { - event.preventDefault(); - event.stopImmediatePropagation(); - sustaining = false; - $(pianoClass('pedal')).removeClass('piano-sustain'); - Object.keys(depressed).forEach(function (key) { - if (!depressed[key]) { - if (fadeout) { - fade(key)(); - } else { - kill(key)(); - } - } - }); - } - if (keyup(event.which)) { - recordKeyDepressed(keyup(event.which)); - if (!sustaining) { - if (fadeout) { - fade(keyup(event.which))(); - } else { - kill(keyup(event.which))(); - } - } - } - }); -}); diff --git a/static/scripts/tutorials/jwt-authentication.js b/static/scripts/tutorials/jwt-authentication.js deleted file mode 100644 index d6b8deba51..0000000000 --- a/static/scripts/tutorials/jwt-authentication.js +++ /dev/null @@ -1,17 +0,0 @@ -/* eslint-disable no-undef */ -window.addEventListener('load', () => { - /* Set up a Realtime client that authenticates with the local web server auth endpoint */ - var result = document.getElementById('result'); - result.value += 'On login page now\n'; - function login(e) { - e.preventDefault(); - result.value += 'Fetching JWT token from auth server\n'; - const realtime = new Ably.Realtime({ authUrl: 'https://ably.com/ably-auth/jwt-token/demos' }); - realtime.connection.once('connected', () => { - console.log('Client connected to Ably'); - result.value += 'Client connected to Ably using JWT\n'; - alert('Client successfully connected to Ably using JWT auth'); - }); - } - document.querySelector('p:submit > button').onclick = login; -}); diff --git a/static/scripts/tutorials/newsfeed-react.js b/static/scripts/tutorials/newsfeed-react.js deleted file mode 100644 index 6a03fdbf91..0000000000 --- a/static/scripts/tutorials/newsfeed-react.js +++ /dev/null @@ -1,20 +0,0 @@ -/* eslint-disable no-undef */ -window.addEventListener('load', function () { - var urlParams = new URLSearchParams(location.search); - var channelName = urlParams.has('channel') - ? urlParams.get('channel') - : 'chatChannel-' + Math.random().toString(36).substr(2, 16); - /* Set up the link to open a new window with this random channel name */ - var base = 'https://radiant-bayou-73847.herokuapp.com/'; - var urlWithChannel = document.location.href.replace(/#.*$/, ''); - if (urlWithChannel.indexOf('channel=') < 0) { - base += (urlWithChannel.indexOf('?') < 0 ? '?' : '&') + 'channel=' + escape(channelName); - } - $('a#new-browser').attr('href', base); - var iframe = document.createElement('iframe'); - iframe.setAttribute('src', base); - iframe.setAttribute('width', '100%'); - iframe.setAttribute('height', '400px'); - iframe.setAttribute('allow', 'geolocation; microphone; camera'); - document.getElementById('lvideo').appendChild(iframe); -}); diff --git a/static/scripts/tutorials/presence.js b/static/scripts/tutorials/presence.js deleted file mode 100644 index 6dfddf4b46..0000000000 --- a/static/scripts/tutorials/presence.js +++ /dev/null @@ -1,117 +0,0 @@ -/* eslint-disable no-undef */ -window.addEventListener('load', function () { - var started, - $output = $('#output'), - $togglePresence = $('button#toggle-presence'), - inPresenceSet = false, - $name = $('input#name'), - $connectBtn = $('#connect-to-ably'), - channelName = getQueryParam('channel') || getRandomChannelName(); - - $name.val(getRandomName()); - - $('#connect-to-ably').on('click', function () { - var name = $.trim($name.val()); - if (!name) { - log('You need to enter your name before you can enter presence'); - return; - } - - (started = new Date().getTime()), - (ably = new Ably.Realtime({ - clientId: name, - authUrl: 'https://ably.com/ably-auth/token/docs', - closeOnUnload: true, // See https://faqs.ably.com/why-dont-presence-members-leave-as-soon-as-i-close-a-tab - })), - (channel = ably.channels.get(channelName)); - - ably.connection.on(function (stateChange) { - log('[Ably: ' + stateChange.current + ' ]'); - }); - - ably.connection.on('connected', function () { - $connectBtn.text('Connected to Ably'); - $connectBtn.prop('disabled', true); - $name.prop('disabled', true); - }); - - channel.attach(function (err) { - if (err) { - log('[Error attaching to channel: ' + err.toString() + ']'); - } else { - log('[Attached to channel ' + channelName + ']'); - $('#presence-controls').slideDown(); - channel.presence.subscribe(function (msg) { - log('[Received presence ' + msg.action + ' from ' + msg.clientId + ', avatar: ' + msg.data + ']'); - channel.presence.get(function (err, presenceSet) { - $('#presence-set').html( - $.map(presenceSet, function (item) { - return '
  • ' + (item.data || '') + ' ' + item.clientId + '
    • '; - }).join(), - ); - }); - }); - } - }); - - function enterPresence() { - var avatar = $('input[name=avatar]:checked').val(); - log('[Entering...] '); - channel.presence.enter(avatar, function (err) { - if (err) { - log('[Error entering presence: ' + err.toString() + ']'); - } else { - log('[Successfully entered the presence set]'); - inPresenceSet = true; - $togglePresence.text('Leave Presence'); - $('#avatar-tip').slideDown(); - } - }); - } - - function leavePresence() { - log('[Leaving...] '); - channel.presence.leave(function (err) { - if (err) { - log('[Error leaving presence: ' + err.toString() + ']'); - } else { - log('[Successfully left the presence set]'); - $togglePresence.text('Enter Presence'); - inPresenceSet = false; - } - }); - } - - $togglePresence.on('click', function () { - inPresenceSet ? leavePresence() : enterPresence(); - }); - - $('input[type=radio][name=avatar]').change(function () { - if (!inPresenceSet) { - return; - } - var avatar = $('input[name=avatar]:checked').val(); - - log('[Updating avatar...] '); - channel.presence.update(avatar, function (err) { - if (err) { - log('[Error updating avatar: ' + err.toString() + ']'); - } else { - log('[Successfully updated avatar]'); - } - }); - }); - }); - - /* Set up the link to open a new window with this random channel name */ - var urlWithChannel = document.location.href.replace(/#.*$/, ''); - if (urlWithChannel.indexOf('channel=') < 0) { - urlWithChannel += (urlWithChannel.indexOf('?') < 0 ? '?' : '&') + 'channel=' + escape(channelName); - } - $('a#new-browser').attr('href', urlWithChannel + '#live-demo'); - - function log(msg) { - var timePassed = Math.round((new Date().getTime() - started) / 100) / 10; - $output.text(timePassed + 's - ' + msg + '\n' + $output.text()); - } -}); diff --git a/static/scripts/tutorials/publish-subscribe.js b/static/scripts/tutorials/publish-subscribe.js deleted file mode 100644 index 36a558c7f7..0000000000 --- a/static/scripts/tutorials/publish-subscribe.js +++ /dev/null @@ -1,38 +0,0 @@ -/* eslint-disable no-undef */ -window.addEventListener('load', function () { - var ably = new Ably.Realtime({ authUrl: 'https://ably.com/ably-auth/token/docs' }), - channelName = getQueryParam('channel') || getRandomChannelName(), - channel = ably.channels.get(channelName), - $result = $('#result'); - - ably.connection.on('connecting', function () { - log('[Connecting to Ably...]'); - }); - - ably.connection.on('connected', function () { - log('[Connected to Ably] Waiting for messages...'); - }); - - channel.subscribe(function (msg) { - log('[Received] ' + msg.data); - }); - - $('button#send-message').on('click', function () { - var text = $('input#message-text').val(); - log('[Publishing...] ' + text); - channel.publish('msg', text); - }); - - /* Set up the link to open a new window with this random channel name */ - var urlWithChannel = document.location.href.replace(/#.*$/, ''); - if (urlWithChannel.indexOf('channel=') < 0) { - urlWithChannel += (urlWithChannel.indexOf('?') < 0 ? '?' : '&') + 'channel=' + escape(channelName); - } - $('a#new-browser').attr('href', urlWithChannel + '#live-demo'); - - var started = new Date().getTime(); - function log(msg) { - var timePassed = Math.round((new Date().getTime() - started) / 100) / 10; - $result.text(timePassed + 's - ' + msg + '\n' + $result.text()); - } -}); diff --git a/static/scripts/tutorials/web-rtc-data-channels.js b/static/scripts/tutorials/web-rtc-data-channels.js deleted file mode 100644 index eaa870d4ed..0000000000 --- a/static/scripts/tutorials/web-rtc-data-channels.js +++ /dev/null @@ -1,20 +0,0 @@ -/* eslint-disable no-undef */ -window.addEventListener('load', function () { - var urlParams = new URLSearchParams(location.search); - var channelName = urlParams.has('channel') - ? urlParams.get('channel') - : 'chatChannel-' + Math.random().toString(36).substr(2, 16); - /* Set up the link to open a new window with this random channel name */ - var base = 'https://datachannels.herokuapp.com/'; - var urlWithChannel = document.location.href.replace(/#.*$/, ''); - if (urlWithChannel.indexOf('channel=') < 0) { - base += (urlWithChannel.indexOf('?') < 0 ? '?' : '&') + 'channel=' + escape(channelName); - } - $('a#new-browser').attr('href', base); - var iframe = document.createElement('iframe'); - iframe.setAttribute('src', base); - iframe.setAttribute('width', '100%'); - iframe.setAttribute('height', '400px'); - iframe.setAttribute('allow', 'geolocation; microphone; camera'); - document.getElementById('lvideo').appendChild(iframe); -}); diff --git a/static/scripts/tutorials/web-rtc-file-transfer.js b/static/scripts/tutorials/web-rtc-file-transfer.js deleted file mode 100644 index 3be16bd8d8..0000000000 --- a/static/scripts/tutorials/web-rtc-file-transfer.js +++ /dev/null @@ -1,20 +0,0 @@ -/* eslint-disable no-undef */ -window.addEventListener('load', function () { - var urlParams = new URLSearchParams(location.search); - var channelName = urlParams.has('channel') - ? urlParams.get('channel') - : 'fileChannel-' + Math.random().toString(36).substr(2, 16); - /* Set up the link to open a new window with this random channel name */ - var base = 'https://ablyfiletransfer.herokuapp.com/'; - var urlWithChannel = document.location.href.replace(/#.*$/, ''); - if (urlWithChannel.indexOf('channel=') < 0) { - base += (urlWithChannel.indexOf('?') < 0 ? '?' : '&') + 'channel=' + escape(channelName); - } - $('a#new-browser').attr('href', base); - var iframe = document.createElement('iframe'); - iframe.setAttribute('src', base); - iframe.setAttribute('width', '100%'); - iframe.setAttribute('height', '400px'); - iframe.setAttribute('allow', 'geolocation; microphone; camera'); - document.getElementById('lvideo').appendChild(iframe); -}); diff --git a/static/scripts/tutorials/web-rtc-screen-sharing.js b/static/scripts/tutorials/web-rtc-screen-sharing.js deleted file mode 100644 index 124d40df30..0000000000 --- a/static/scripts/tutorials/web-rtc-screen-sharing.js +++ /dev/null @@ -1,20 +0,0 @@ -/* eslint-disable no-undef */ -window.addEventListener('load', function () { - var urlParams = new URLSearchParams(location.search); - var channelName = urlParams.has('channel') - ? urlParams.get('channel') - : 'screenChannel-' + Math.random().toString(36).substr(2, 16); - /* Set up the link to open a new window with this random channel name */ - var base = 'https://ablyscreenshare.herokuapp.com/'; - var urlWithChannel = document.location.href.replace(/#.*$/, ''); - if (urlWithChannel.indexOf('channel=') < 0) { - base += (urlWithChannel.indexOf('?') < 0 ? '?' : '&') + 'channel=' + escape(channelName); - } - $('a#new-browser').attr('href', base); - var iframe = document.createElement('iframe'); - iframe.setAttribute('src', base); - iframe.setAttribute('width', '100%'); - iframe.setAttribute('height', '400px'); - iframe.setAttribute('allow', 'geolocation; microphone; camera'); - document.getElementById('lvideo').appendChild(iframe); -}); diff --git a/static/scripts/tutorials/web-rtc-video-calling.js b/static/scripts/tutorials/web-rtc-video-calling.js deleted file mode 100644 index afed7a3dec..0000000000 --- a/static/scripts/tutorials/web-rtc-video-calling.js +++ /dev/null @@ -1,20 +0,0 @@ -/* eslint-disable no-undef */ -window.addEventListener('load', function () { - var urlParams = new URLSearchParams(location.search); - var channelName = urlParams.has('channel') - ? urlParams.get('channel') - : 'videoChannel-' + Math.random().toString(36).substr(2, 16); - /* Set up the link to open a new window with this random channel name */ - var base = 'https://ablyvideocall.herokuapp.com/'; - var urlWithChannel = document.location.href.replace(/#.*$/, ''); - if (urlWithChannel.indexOf('channel=') < 0) { - base += (urlWithChannel.indexOf('?') < 0 ? '?' : '&') + 'channel=' + escape(channelName); - } - $('a#new-browser').attr('href', base); - var iframe = document.createElement('iframe'); - iframe.setAttribute('src', base); - iframe.setAttribute('width', '100%'); - iframe.setAttribute('height', '400px'); - iframe.setAttribute('allow', 'geolocation; microphone; camera'); - document.getElementById('lvideo').appendChild(iframe); -});