agora-appbuilder-core 3.0.9 → 3.0.10

package/template/src/utils/common.tsx

@@ -10,11 +10,21 @@
 *********************************************
 */
 import React from 'react';
-import {Platform as ReactNativePlatform} from 'react-native';
+import {
+  Platform as ReactNativePlatform,
+  useWindowDimensions,
+} from 'react-native';
 import Platform from '../subComponents/Platform';
 
 import * as ReactIs from 'react-is';
 
+const trimText = (text: string, length: number = 25) => {
+  if (!text) {
+    return '';
+  }
+  return text?.substring(0, length) + (text?.length > length ? '...' : '');
+};
+const maxInputLimit = 60;
 const isValidReactComponent = <T,>(Component?: React.ComponentType<T>) =>
   Component && ReactIs.isValidElementType(Component) ? true : false;
 
@@ -57,10 +67,150 @@ const isIOS = () => Platform === 'native' && ReactNativePlatform.OS === 'ios';
 //@ts-ignore
 const isDesktop = () => Platform === 'electron';
 
+/**
+ * Checks whether the application is running on mobile device (user agent) and returns true/false.
+ * @returns function
+ */
+//@ts-ignore
+const isMobileUA = () => {
+  let check = false;
+  (function (a) {
+    if (
+      /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(
+        a,
+      ) ||
+      isAndroid() ||
+      isIOS()
+    )
+      check = true;
+  })(navigator?.userAgent || navigator?.vendor || window?.opera);
+  return check;
+};
+
 const isArray = (data: any[]) =>
   data && Array.isArray(data) && data.length ? true : false ? true : false;
+
+interface calculatedPositionProps {
+  px: number;
+  py: number;
+  localWidth: number;
+  localHeight: number;
+  globalWidth: number;
+  globalHeight: number;
+  extra?: {
+    top?: number;
+    bottom?: number;
+    left?: number;
+    right?: number;
+  };
+  popupWidth?: number;
+}
+const calculatePosition = (params: calculatedPositionProps) => {
+  const {
+    px,
+    py,
+    localWidth,
+    localHeight,
+    globalWidth,
+    globalHeight,
+    extra: {top = 0, bottom = 0, left = 0, right = 0} = {},
+    popupWidth = 220,
+  } = params;
+  //right hand side
+  if (px > globalWidth / 2) {
+    // if actionmenu overflow - horizontal
+    const w = globalWidth - px + popupWidth;
+    let minus = 0;
+    if (w > globalWidth) {
+      minus = w - globalWidth + 10;
+    }
+    //right bottom
+    if (py > globalHeight / 2) {
+      return {
+        bottom: globalHeight - py + bottom,
+        right: globalWidth - px - minus + right,
+      };
+    }
+    //right top
+    else {
+      return {
+        top: py + localHeight + top,
+        right: globalWidth - px - minus + right,
+      };
+    }
+  }
+  //left hand side
+  else {
+    // if actionmenu overflow - horizontal
+    const w = px + localWidth + popupWidth;
+    let minus = 0;
+    if (w > globalWidth) {
+      minus = w - globalWidth + 10;
+    }
+    //left bottom
+    if (py > globalHeight / 2) {
+      return {
+        bottom: globalHeight - py + bottom,
+        left: px + localWidth - minus + left,
+      };
+    }
+    //left top
+    else {
+      return {
+        top: py + localHeight + top + top,
+        left: px + localWidth - minus + left,
+      };
+    }
+  }
+};
+
+const BREAKPOINTS = {
+  xs: 360,
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1330,
+  xxl: 1400,
+};
+
+const useIsDesktop = () => {
+  const {width, height} = useWindowDimensions();
+  return (from: 'default' | 'toolbar' | 'popup' = 'default') => {
+    if (from === 'default') {
+      return width > height ? true : false;
+    } else if (from === 'toolbar') {
+      return width > BREAKPOINTS.xl;
+    } else if (from === 'popup') {
+      return width > BREAKPOINTS.md;
+    }
+    return width >= BREAKPOINTS.xl;
+  };
+};
+const useIsSmall = () => {
+  const {width} = useWindowDimensions();
+  return (number = BREAKPOINTS.sm) => {
+    return width < number;
+  };
+};
+
+const useResponsive = () => {
+  const {width} = useWindowDimensions();
+  return (input: number) => {
+    if (width < BREAKPOINTS.xs) {
+      return input / 3;
+    } else if (width < BREAKPOINTS.md) {
+      return input / 2;
+    } else {
+      return input;
+    }
+  };
+};
 export {
+  useIsDesktop,
+  useIsSmall,
+  BREAKPOINTS,
   useHasBrandLogo,
+  isMobileUA,
   isAndroid,
   isIOS,
   isWebInternal,
@@ -69,4 +219,8 @@ export {
   shouldAuthenticate,
   isArray,
   isValidReactComponent,
+  maxInputLimit,
+  trimText,
+  calculatePosition,
+  useResponsive,
 };

package/template/src/utils/hexadecimalTransparency.ts

@@ -0,0 +1,108 @@
+/**
+ * Hexadecimal color code for transparency
+ * ref https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4
+ */
+const hexadecimalTransparency = {
+  '100%': 'FF',
+  '99%': 'FC',
+  '98%': 'FA',
+  '97%': 'F7',
+  '96%': 'F5',
+  '95%': 'F2',
+  '94%': 'F0',
+  '93%': 'ED',
+  '92%': 'EB',
+  '91%': 'E8',
+  '90%': 'E6',
+  '89%': 'E3',
+  '88%': 'E0',
+  '87%': 'DE',
+  '86%': 'DB',
+  '85%': 'D9',
+  '84%': 'D6',
+  '83%': 'D4',
+  '82%': 'D1',
+  '81%': 'CF',
+  '80%': 'CC',
+  '79%': 'C9',
+  '78%': 'C7',
+  '77%': 'C4',
+  '76%': 'C2',
+  '75%': 'BF',
+  '74%': 'BD',
+  '73%': 'BA',
+  '72%': 'B8',
+  '71%': 'B5',
+  '70%': 'B3',
+  '69%': 'B0',
+  '68%': 'AD',
+  '67%': 'AB',
+  '66%': 'A8',
+  '65%': 'A6',
+  '64%': 'A3',
+  '63%': 'A1',
+  '62%': '9E',
+  '61%': '9C',
+  '60%': '99',
+  '59%': '96',
+  '58%': '94',
+  '57%': '91',
+  '56%': '8F',
+  '55%': '8C',
+  '54%': '8A',
+  '53%': '87',
+  '52%': '85',
+  '51%': '82',
+  '50%': '80',
+  '49%': '7D',
+  '48%': '7A',
+  '47%': '78',
+  '46%': '75',
+  '45%': '73',
+  '44%': '70',
+  '43%': '6E',
+  '42%': '6B',
+  '41%': '69',
+  '40%': '66',
+  '39%': '63',
+  '38%': '61',
+  '37%': '5E',
+  '36%': '5C',
+  '35%': '59',
+  '34%': '57',
+  '33%': '54',
+  '32%': '52',
+  '31%': '4F',
+  '30%': '4D',
+  '29%': '4A',
+  '28%': '47',
+  '27%': '45',
+  '26%': '42',
+  '25%': '40',
+  '24%': '3D',
+  '23%': '3B',
+  '22%': '38',
+  '21%': '36',
+  '20%': '33',
+  '19%': '30',
+  '18%': '2E',
+  '17%': '2B',
+  '16%': '29',
+  '15%': '26',
+  '14%': '24',
+  '13%': '21',
+  '12%': '1F',
+  '11%': '1C',
+  '10%': '1A',
+  '9%': '17',
+  '8%': '14',
+  '7%': '12',
+  '6%': '0F',
+  '5%': '0D',
+  '4%': '0A',
+  '3%': '08',
+  '2%': '05',
+  '1%': '03',
+  '0%': '00',
+};
+export default hexadecimalTransparency;

package/template/src/utils/index.tsx

@@ -55,3 +55,22 @@ export function isEmptyObject(obj: object) {
   }
   return true;
 }
+
+export const randomNameGenerator = (num: number) => {
+  let res = '';
+  for (let i = 0; i < num; i++) {
+    const random = Math.floor(Math.random() * 10);
+    res += String.fromCharCode(97 + random);
+  }
+  return res;
+};
+export function formatAMPM(date) {
+  var hours = date.getHours();
+  var minutes = date.getMinutes();
+  var ampm = hours >= 12 ? 'pm' : 'am';
+  hours = hours % 12;
+  hours = hours ? hours : 12; // the hour '0' should be '12'
+  minutes = minutes < 10 ? '0' + minutes : minutes;
+  var strTime = hours + ':' + minutes + ' ' + ampm;
+  return strTime;
+}

package/template/src/utils/isMobileOrTablet.ts

@@ -13,14 +13,19 @@ const isMobileOrTablet = () => {
   (function (a) {
     if (
       /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(
-        a,
+        a
       ) ||
       /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(
-        a.substr(0, 4),
+        a.substr(0, 4)
       )
     )
       check = true;
   })(navigator?.userAgent || navigator?.vendor || window?.opera);
+  check =
+    (/Macintosh/i.test(navigator?.userAgent) &&
+      navigator?.maxTouchPoints &&
+      navigator?.maxTouchPoints > 1) ||
+    check;
   return check;
 };
 

package/template/src/utils/pendingStateUpdateHelper.ts

@@ -0,0 +1,19 @@
+/**
+ * Wrapper around 200ms buffered updates.
+ * @param action - The asynchronous action that causes update
+ * @param cb - Callback method called with true if 200ms exceeded in performing 
+   * provided action and called with false after action completed
+ */
+const pendingStateUpdateHelper = async (
+  action: () => Promise<any>,
+  cb: (exceeded200ms: boolean) => void,
+) => {
+  const pendingTimeout = setTimeout(() => {
+    cb(true);
+  }, 200);
+  await action();
+  clearTimeout(pendingTimeout);
+  cb(false);
+};
+
+export default pendingStateUpdateHelper;

package/template/src/utils/useButtonTemplate.tsx

@@ -16,6 +16,7 @@ import {createHook} from 'customization-implementation';
 export enum ButtonTemplateName {
   topBar,
   bottomBar,
+  actionBar,
 }
 
 export interface ButtonTemplateInferface {

package/template/src/utils/useFocus.tsx

@@ -0,0 +1,46 @@
+/*
+********************************************
+ Copyright © 2021 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
+
+import React, {SetStateAction} from 'react';
+import {createHook} from 'customization-implementation';
+
+export interface currentFocus {
+  editName: boolean;
+}
+export interface FocusContextInterface {
+  currentFocus: currentFocus;
+  setFocus: React.Dispatch<SetStateAction<currentFocus>>;
+}
+
+const FocusContext = React.createContext<FocusContextInterface>({
+  currentFocus: {editName: false},
+  setFocus: () => {},
+});
+
+interface FocusProviderProps {
+  value: FocusContextInterface;
+  children: React.ReactNode;
+}
+const FocusProvider = (props: FocusProviderProps) => {
+  return (
+    <FocusContext.Provider value={{...props.value}}>
+      {props.children}
+    </FocusContext.Provider>
+  );
+};
+
+/**
+ * The Focus app state governs the chatinput and editname.
+ */
+const useFocus = createHook(FocusContext);
+
+export {FocusProvider, useFocus};

package/template/src/utils/useIsActiveSpeaker.ts

@@ -0,0 +1,27 @@
+/*
+********************************************
+ Copyright © 2021 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
+import {useRender} from 'customization-api';
+import {UidType} from '../../agora-rn-uikit';
+
+/**
+ * Returns a function that checks whether the given uid is a active speaker and returns true/false
+ * @returns function
+ */
+function useIsActiveSpeaker() {
+  const {activeSpeaker, renderList} = useRender();
+  const isActiveSpeaker = (uid: UidType) => {
+    return renderList[uid].audio && activeSpeaker === uid;
+  };
+  return isActiveSpeaker;
+}
+
+export default useIsActiveSpeaker;

package/template/src/utils/useIsHandRaised.ts

@@ -0,0 +1,13 @@
+import {useContext} from 'react';
+import {UidType} from '../../agora-rn-uikit';
+import LiveStreamContext from '../components/livestream/LiveStreamContext';
+import {RaiseHandValue} from '../components/livestream/Types';
+
+const useIsHandRaised = () => {
+  const {raiseHandList} = useContext(LiveStreamContext);
+  const isHandRaised = (uid: UidType) => {
+    return raiseHandList[uid]?.raised === RaiseHandValue.TRUE;
+  };
+  return isHandRaised;
+};
+export default useIsHandRaised;

package/template/src/utils/useMuteToggleLocal.ts

@@ -10,7 +10,11 @@
 *********************************************
 */
 import {useLocalUserInfo, useRtc} from 'customization-api';
+import {useContext, useEffect, useRef, useState} from 'react';
+
 import {ToggleState} from '../../agora-rn-uikit/src/Contexts/PropsContext';
+import {isMobileUA, isWebInternal} from './common';
+import {AppState} from 'react-native';
 
 export enum MUTE_LOCAL_TYPE {
   audio,
@@ -23,6 +27,48 @@ function useMuteToggleLocal() {
   const {RtcEngine, dispatch} = useRtc();
   const local = useLocalUserInfo();
 
+  const appState = useRef(AppState.currentState);
+  const [appStateVisible, setAppStateVisible] = useState(appState.current);
+  const isCamON = useRef(local.video);
+
+  useEffect(() => {
+    if ($config.AUDIO_ROOM || !isMobileUA()) return;
+    const subscription = AppState.addEventListener('change', (nextAppState) => {
+      appState.current = nextAppState;
+      setAppStateVisible(appState.current);
+    });
+
+    return () => {
+      subscription?.remove();
+    };
+  }, []);
+
+  useEffect(() => {
+    // console.log(`Video State  ${local.video} in Mode  ${appStateVisible}`);
+    if (appStateVisible === 'background') {
+      isCamON.current = local.video;
+      if (isCamON.current) {
+        isWebInternal()
+          ? RtcEngine.muteLocalVideoStream(true)
+          : RtcEngine.enableLocalVideo(false);
+
+        dispatch({
+          type: 'LocalMuteVideo',
+          value: [0],
+        });
+      }
+    }
+    if (appStateVisible === 'active' && isCamON.current) {
+      isWebInternal()
+        ? RtcEngine.muteLocalVideoStream(false)
+        : RtcEngine.enableLocalVideo(true);
+      dispatch({
+        type: 'LocalMuteVideo',
+        value: [1],
+      });
+    }
+  }, [appStateVisible]);
+
   return async (type: MUTE_LOCAL_TYPE) => {
     switch (type) {
       case MUTE_LOCAL_TYPE.audio:
@@ -82,9 +128,14 @@ function useMuteToggleLocal() {
           });
 
           try {
-            await RtcEngine.muteLocalVideoStream(
-              localVideoState === ToggleState.enabled ? true : false,
-            );
+            //enableLocalVideo not available on web
+            isWebInternal()
+              ? await RtcEngine.muteLocalVideoStream(
+                  localVideoState === ToggleState.enabled ? true : false,
+                )
+              : await RtcEngine.enableLocalVideo(
+                  localVideoState === ToggleState.enabled ? false : true,
+                );
 
             // Enable UI
             dispatch({

package/template/src/utils/useRemoteEndScreenshare.ts

@@ -0,0 +1,26 @@
+import {controlMessageEnum} from '../components/ChatContext';
+import {useMeetingInfo} from '../components/meeting-info/useMeetingInfo';
+import {UidType} from '../../agora-rn-uikit';
+import events, {EventPersistLevel} from '../rtm-events-api';
+
+/**
+ * Returns a function to end the screenshare for a remote user with the given uid.
+ */
+const useRemoteEndScreenshare = () => {
+  const {
+    data: {isHost},
+  } = useMeetingInfo();
+  return (uid: UidType) => {
+    if (isHost && uid) {
+      events.send(
+        controlMessageEnum.kickScreenshare,
+        '',
+        EventPersistLevel.LEVEL1,
+        uid,
+      );
+    } else {
+      console.error('A host can only remove the screenshare from the call.');
+    }
+  };
+};
+export default useRemoteEndScreenshare;

package/template/src/utils/useRemoteRequest.ts

@@ -0,0 +1,84 @@
+/*
+********************************************
+ Copyright © 2021 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
+import {useMeetingInfo} from '../components/meeting-info/useMeetingInfo';
+import {controlMessageEnum} from '../components/ChatContext';
+import useIsPSTN from './useIsPSTN';
+import useMutePSTN from './useMutePSTN';
+import {UidType} from '../../agora-rn-uikit';
+import events, {EventPersistLevel} from '../rtm-events-api';
+
+export enum REQUEST_REMOTE_TYPE {
+  audio,
+  video,
+}
+/**
+ * Returns an asynchronous function to request audio/video for a remote user with the given uid or if no uid provided, request everyone else in the meeting.
+ */
+function useRemoteRequest() {
+  const {
+    data: {isHost},
+  } = useMeetingInfo();
+  const isPSTN = useIsPSTN();
+
+  return async (type: REQUEST_REMOTE_TYPE, uid?: UidType) => {
+    if (isHost) {
+      switch (type) {
+        case REQUEST_REMOTE_TYPE.audio:
+          // To individual
+          if (uid) {
+            if (isPSTN(uid)) {
+              //can't ask pstn user to unmute
+            } else {
+              events.send(
+                controlMessageEnum.requestAudio,
+                '',
+                EventPersistLevel.LEVEL1,
+                uid,
+              );
+            }
+          } else {
+            // To everyone
+            events.send(
+              controlMessageEnum.requestAudio,
+              '',
+              EventPersistLevel.LEVEL1,
+            );
+          }
+          break;
+        case REQUEST_REMOTE_TYPE.video:
+          if (uid) {
+            // To individual
+            if (!isPSTN(uid)) {
+              events.send(
+                controlMessageEnum.requestVideo,
+                '',
+                EventPersistLevel.LEVEL1,
+                uid,
+              );
+            }
+          } else {
+            // To everyone
+            events.send(
+              controlMessageEnum.requestVideo,
+              '',
+              EventPersistLevel.LEVEL1,
+            );
+          }
+          break;
+      }
+    } else {
+      console.error('A host can only request audience audio or video.');
+    }
+  };
+}
+
+export default useRemoteRequest;

package/template/web/index.html

@@ -3,9 +3,14 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <!-- moved to template/src/assets/font-styles.css as it was not available for sdks-->
+    <!-- <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap" rel="stylesheet"> -->
 
     <base href="/">
     <title><%= htmlWebpackPlugin.options.title %></title>
+
 </head>
 <body>
     <style>