Merge pull request #64 from GuiLeme/feat-implement-time-window

feat: Implement time window look back

Author: antobinary

README.md

@@ -19,17 +19,36 @@ For more information about the plugin API features, see the documentation (`read
 
 If you have any suggestions, requirements, or questions, don’t hesitate to contact us.
 
-## Necessary configurations
+## Configurations
 
-By default, no ping is sounded for the randomly picked user. To activate this feature, one must add the following configurations in their `/etc/bigbluebutton/bbb-html5.yml` file.
+Down below, we list all the possible configurations this plugin supports, and then a brief explanation:
+
+```yaml
+- name: PickRandomUserPlugin
+  settings:
+    pingSoundEnabled: false
+    pingSoundUrl: resources/sounds/doorbell.mp3
+    pickedUserTimeWindow: 30 seconds
+```
+
+| Name                   | Description                          | Default                     |
+|------------------------|--------------------------------------|-----------------------------|
+| `pingSoundEnabled`     | Whether the ping sound is enabled    | `false`                      |
+| `pingSoundUrl`         | URL of the ping sound file           | `resources/sounds/doorbell.mp3` |
+| `pickedUserTimeWindow` | Time window to consider a user as recently picked (users that join after that time will not see the last modal) | `30`               |
+
+
+### Notification/Ping sound
+
+By default, no ping sound is played for the randomly picked user. To activate this feature, one must add the following configurations in their `/etc/bigbluebutton/bbb-html5.yml` file.
 
 So within that file and in `public.plugins` add the following configurations:
 
 ```yaml
 - name: PickRandomUserPlugin
-      settings:
-        pingSoundEnabled: true
-        pingSoundUrl: resources/sounds/doorbell.mp3
+  settings:
+    pingSoundEnabled: true
+    pingSoundUrl: resources/sounds/doorbell.mp3
 ```
 
 The result yaml will look like:

src/components/pick-random-user/component.tsx

@@ -24,6 +24,8 @@ const LOCALE_REQUEST_OBJECT = (!process.env.NODE_ENV || process.env.NODE_ENV ===
     },
   } : null;
 
+const PICKED_USER_TIME_WINDOW = 30; // seconds
+
 function PickRandomUserPlugin({ pluginUuid: uuid }: PickRandomUserPluginProps) {
   BbbPluginSdk.initialize(uuid);
   const pluginApi: PluginApi = BbbPluginSdk.getPluginApi(uuid);
@@ -35,6 +37,7 @@ function PickRandomUserPlugin({ pluginUuid: uuid }: PickRandomUserPluginProps) {
   const [userFilterViewer, setUserFilterViewer] = useState<boolean>(true);
   const [filterOutPresenter, setFilterOutPresenter] = useState<boolean>(true);
   const [filterOutPickedUsers, setFilterOutPickedUsers] = useState<boolean>(true);
+  const [pickedUserTimeWindow, setPickedUserTimeWindow] = useState<number>(PICKED_USER_TIME_WINDOW);
 
   const { data: pluginSettings, loading: isPluginSettingsLoading } = pluginApi.usePluginSettings();
 
@@ -44,6 +47,14 @@ function PickRandomUserPlugin({ pluginUuid: uuid }: PickRandomUserPluginProps) {
       && pluginSettings.pingSoundEnabled) {
       Notification.requestPermission();
     }
+    if (!isPluginSettingsLoading
+      && pluginSettings
+      && pluginSettings.pickedUserTimeWindow
+      && typeof pluginSettings.pickedUserTimeWindow === 'number'
+      && !Number.isNaN(pluginSettings.pickedUserTimeWindow)
+    ) {
+      setPickedUserTimeWindow(pluginSettings.pickedUserTimeWindow);
+    }
   }, [isPluginSettingsLoading, pluginSettings]);
 
   const currentUserInfo = pluginApi.useCurrentUser();
@@ -154,15 +165,23 @@ function PickRandomUserPlugin({ pluginUuid: uuid }: PickRandomUserPluginProps) {
         currentUser?.userId,
         pickedUserToUpdate?.payloadJson.userId,
       );
-      if (!hasCurrentUserSeen && !pickedUserSeenEntries?.loading) {
+      const isPreviousPickInTimeWindow = (
+        (new Date().getTime() - new Date(pickedUserToUpdate.createdAt).getTime()) / 1000
+          <= pickedUserTimeWindow
+      );
+      if (
+        !hasCurrentUserSeen
+        && !pickedUserSeenEntries?.loading
+        && isPreviousPickInTimeWindow
+      ) {
         setShowModal(true);
       }
     } else if (pickedUserFromDataChannel.data
         && pickedUserFromDataChannel.data?.length === 0) {
       setPickedUserWithEntryId(null);
       if (currentUser && !currentUser.presenter) setShowModal(false);
     }
-  }, [pickedUserFromDataChannelResponse, pickedUserSeenEntries]);
+  }, [pickedUserFromDataChannelResponse, pickedUserSeenEntries, pickedUserTimeWindow]);
 
   useEffect(() => {
     if (!pickedUserWithEntryId && !currentUser?.presenter) setShowModal(false);