etherpad: refactor to share code with mobile

- simplify initialization procedure
- set user display name as the Etherpad name\
- use SharedDocumentButton

modules/UI/UI.js

@@ -15,7 +15,7 @@ import Filmstrip from './videolayout/Filmstrip';
 
 import { getLocalParticipant } from '../../react/features/base/participants';
 import { toggleChat } from '../../react/features/chat';
-import { setEtherpadHasInitialzied } from '../../react/features/etherpad';
+import { setDocumentUrl } from '../../react/features/etherpad';
 import { setFilmstripVisible } from '../../react/features/filmstrip';
 import { setNotificationsEnabled } from '../../react/features/notifications';
 import {
@@ -240,10 +240,12 @@ UI.initEtherpad = name => {
         return;
     }
     logger.log('Etherpad is enabled');
-    etherpadManager
-        = new EtherpadManager(config.etherpad_base, name, eventEmitter);
 
-    APP.store.dispatch(setEtherpadHasInitialzied());
+    etherpadManager = new EtherpadManager(eventEmitter);
+
+    const url = new URL(name, config.etherpad_base);
+
+    APP.store.dispatch(setDocumentUrl(url.toString()));
 };
 
 /**

modules/UI/etherpad/Etherpad.js

@@ -1,22 +1,12 @@
 /* global $, APP, interfaceConfig */
 
-import { setDocumentEditingState } from '../../../react/features/etherpad';
+import { getSharedDocumentUrl, setDocumentEditingState } from '../../../react/features/etherpad';
 import { getToolboxHeight } from '../../../react/features/toolbox';
 
 import VideoLayout from '../videolayout/VideoLayout';
 import LargeContainer from '../videolayout/LargeContainer';
 import Filmstrip from '../videolayout/Filmstrip';
 
-/**
- * Etherpad options.
- */
-const options = $.param({
-    showControls: true,
-    showChat: false,
-    showLineNumbers: true,
-    useMonospaceFont: false
-});
-
 /**
  *
  */
@@ -70,13 +60,13 @@ class Etherpad extends LargeContainer {
     /**
      * Creates new Etherpad object
      */
-    constructor(domain, name) {
+    constructor(url) {
         super();
 
         const iframe = document.createElement('iframe');
 
         iframe.id = 'etherpadIFrame';
-        iframe.src = `${domain + name}?${options}`;
+        iframe.src = url;
         iframe.frameBorder = 0;
         iframe.scrolling = 'no';
         iframe.width = DEFAULT_WIDTH;
@@ -199,13 +189,7 @@ export default class EtherpadManager {
     /**
      *
      */
-    constructor(domain, name, eventEmitter) {
-        if (!domain || !name) {
-            throw new Error('missing domain or name');
-        }
-
-        this.domain = domain;
-        this.name = name;
+    constructor(eventEmitter) {
         this.eventEmitter = eventEmitter;
         this.etherpad = null;
     }
@@ -228,7 +212,7 @@ export default class EtherpadManager {
      * Create new Etherpad frame.
      */
     openEtherpad() {
-        this.etherpad = new Etherpad(this.domain, this.name);
+        this.etherpad = new Etherpad(getSharedDocumentUrl(APP.store.getState));
         VideoLayout.addLargeVideoContainer(
             ETHERPAD_CONTAINER_TYPE,
             this.etherpad

react/features/etherpad/actionTypes.js

@@ -1,13 +1,3 @@
-/**
- * The type of the action which signals document editing has been enabled.
- *
- * {
- *     type: ETHERPAD_INITIALIZED
- * }
- */
-export const ETHERPAD_INITIALIZED = 'ETHERPAD_INITIALIZED';
-
-
 /**
  * The type of the action which signals document editing has stopped or started.
  *

react/features/etherpad/actions.js

@@ -1,7 +1,6 @@
 // @flow
 
 import {
-    ETHERPAD_INITIALIZED,
     SET_DOCUMENT_EDITING_STATUS,
     SET_DOCUMENT_URL,
     TOGGLE_DOCUMENT_EDITING
@@ -40,19 +39,6 @@ export function setDocumentUrl(documentUrl: ?string) {
     };
 }
 
-/**
- * Dispatches an action to set Etherpad as having been initialized.
- *
- * @returns {{
- *    type: ETHERPAD_INITIALIZED
- * }}
- */
-export function setEtherpadHasInitialzied() {
-    return {
-        type: ETHERPAD_INITIALIZED
-    };
-}
-
 /**
  * Dispatches an action to show or hide Etherpad.
  *

react/features/etherpad/reducer.js

@@ -2,11 +2,7 @@
 
 import { ReducerRegistry } from '../base/redux';
 
-import {
-    ETHERPAD_INITIALIZED,
-    SET_DOCUMENT_EDITING_STATUS,
-    SET_DOCUMENT_URL
-} from './actionTypes';
+import { SET_DOCUMENT_EDITING_STATUS, SET_DOCUMENT_URL } from './actionTypes';
 
 const DEFAULT_STATE = {
 
@@ -21,15 +17,7 @@ const DEFAULT_STATE = {
      * @public
      * @type {boolean}
      */
-    editing: false,
-
-    /**
-     * Whether or not Etherpad is ready to use.
-     *
-     * @public
-     * @type {boolean}
-     */
-    initialized: false
+    editing: false
 };
 
 /**
@@ -39,12 +27,6 @@ ReducerRegistry.register(
     'features/etherpad',
     (state = DEFAULT_STATE, action) => {
         switch (action.type) {
-        case ETHERPAD_INITIALIZED:
-            return {
-                ...state,
-                initialized: true
-            };
-
         case SET_DOCUMENT_EDITING_STATUS:
             return {
                 ...state,

react/features/toolbox/components/web/Toolbox.js

@@ -21,7 +21,6 @@ import {
     IconRaisedHand,
     IconRec,
     IconShareDesktop,
-    IconShareDoc,
     IconShareVideo
 } from '../../../base/icons';
 import {
@@ -34,7 +33,7 @@ import { OverflowMenuItem } from '../../../base/toolbox';
 import { getLocalVideoTrack, toggleScreensharing } from '../../../base/tracks';
 import { VideoBlurButton } from '../../../blur';
 import { ChatCounter, toggleChat } from '../../../chat';
-import { toggleDocument } from '../../../etherpad';
+import { SharedDocumentButton } from '../../../etherpad';
 import { openFeedbackDialog } from '../../../feedback';
 import {
     beginAddPeople,
@@ -111,16 +110,6 @@ type Props = {
      */
     _dialog: boolean,
 
-    /**
-     * Whether or not the local participant is currently editing a document.
-     */
-    _editingDocument: boolean,
-
-    /**
-     * Whether or not collaborative document editing is enabled.
-     */
-    _etherpadInitialized: boolean,
-
     /**
      * Whether or not call feedback can be sent.
      */
@@ -247,8 +236,6 @@ class Toolbox extends Component<Props, State> {
         this._onToolbarOpenVideoQuality
             = this._onToolbarOpenVideoQuality.bind(this);
         this._onToolbarToggleChat = this._onToolbarToggleChat.bind(this);
-        this._onToolbarToggleEtherpad
-            = this._onToolbarToggleEtherpad.bind(this);
         this._onToolbarToggleFullScreen
             = this._onToolbarToggleFullScreen.bind(this);
         this._onToolbarToggleProfile
@@ -424,16 +411,6 @@ class Toolbox extends Component<Props, State> {
         this.props.dispatch(toggleChat());
     }
 
-    /**
-     * Dispatches an action to show or hide document editing.
-     *
-     * @private
-     * @returns {void}
-     */
-    _doToggleEtherpad() {
-        this.props.dispatch(toggleDocument());
-    }
-
     /**
      * Dispatches an action to toggle screensharing.
      *
@@ -749,25 +726,6 @@ class Toolbox extends Component<Props, State> {
         this._doToggleChat();
     }
 
-    _onToolbarToggleEtherpad: () => void;
-
-    /**
-     * Creates an analytics toolbar event and dispatches an action for toggling
-     * the display of document editing.
-     *
-     * @private
-     * @returns {void}
-     */
-    _onToolbarToggleEtherpad() {
-        sendAnalytics(createToolbarEvent(
-            'toggle.etherpad',
-            {
-                enable: !this.props._editingDocument
-            }));
-
-        this._doToggleEtherpad();
-    }
-
     _onToolbarToggleFullScreen: () => void;
 
     /**
@@ -960,8 +918,6 @@ class Toolbox extends Component<Props, State> {
      */
     _renderOverflowMenuContent() {
         const {
-            _editingDocument,
-            _etherpadInitialized,
             _feedbackConfigured,
             _fullScreen,
             _screensharing,
@@ -1007,16 +963,9 @@ class Toolbox extends Component<Props, State> {
                         ? t('toolbar.stopSharedVideo')
                         : t('toolbar.sharedvideo') } />,
             this._shouldShowButton('etherpad')
-                && _etherpadInitialized
-                && <OverflowMenuItem
-                    accessibilityLabel =
-                        { t('toolbar.accessibilityLabel.document') }
-                    icon = { IconShareDoc }
+                && <SharedDocumentButton
                     key = 'etherpad'
-                    onClick = { this._onToolbarToggleEtherpad }
-                    text = { _editingDocument
-                        ? t('toolbar.documentClose')
-                        : t('toolbar.documentOpen') } />,
+                    showLabel = { true } />,
             <VideoBlurButton
                 key = 'videobackgroundblur'
                 showLabel = { true }
@@ -1365,8 +1314,6 @@ function _mapStateToProps(state) {
         _desktopSharingEnabled: desktopSharingEnabled,
         _desktopSharingDisabledTooltipKey: desktopSharingDisabledTooltipKey,
         _dialog: Boolean(state['features/base/dialog'].component),
-        _editingDocument: Boolean(state['features/etherpad'].editing),
-        _etherpadInitialized: Boolean(state['features/etherpad'].initialized),
         _feedbackConfigured: Boolean(callStatsID),
         _hideInviteButton:
             iAmRecorder || (!addPeopleEnabled && !dialOutEnabled),