@elice/material-runbox 1.260908.0 → 1.260910.0

package/cjs/components/material-runbox/runtime/RuntimeOverlayConflicted.js

@@ -8,10 +8,10 @@ var React = require('react');
 var apiClient = require('@elice/api-client');
 var intl = require('@elice/intl');
 var muiElements = require('@elice/mui-elements');
-var muiSystem = require('@elice/mui-system');
 var proSolidSvgIcons = require('@fortawesome/pro-solid-svg-icons');
 var material = require('@mui/material');
 var reactQuery = require('@tanstack/react-query');
+var theme = require('../theme.js');
 var RuntimeChangeMaterialDialog = require('./RuntimeChangeMaterialDialog.js');
 var terminated = require('../../../assets/terminated.png.js');
 var en = require('../locales/en.json.js');
@@ -28,8 +28,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var RuntimeOverlayConflicted = function RuntimeOverlayConflicted(_ref) {
   var intl = _ref.__intl,
     courseId = _ref.courseId,
-    runningRunbox = _ref.runningRunbox,
-    startRuntime = _ref.startRuntime;
+    runningRunbox = _ref.runningRunbox;
   var _React$useState = React__default.default.useState(false),
     _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
     isChangeMaterialDialogOpen = _React$useState2[0],
@@ -101,7 +100,7 @@ var RuntimeOverlayConflicted = function RuntimeOverlayConflicted(_ref) {
         width: '32rem',
         maxWidth: '100%',
         padding: '1rem',
-        color: 'text.primary.contrastText',
+        color: 'text.primary',
         bgcolor: 'grey.100',
         cursor: runningRunboxLinkProps ? 'pointer' : 'default',
         '&:hover': {
@@ -114,10 +113,10 @@ var RuntimeOverlayConflicted = function RuntimeOverlayConflicted(_ref) {
         direction: "column",
         alignItems: "flex-start",
         children: [courseId !== runningCourse.id ? jsxRuntime.jsx(material.Typography, {
-          color: "text.tertiary.contrastText",
+          color: "text.tertiary",
           children: runningCourse === null || runningCourse === void 0 ? void 0 : runningCourse.title
         }) : null, jsxRuntime.jsx(material.Typography, {
-          color: "text.primary.contrastText",
+          color: "text.primary",
           children: runningRunbox.title
         })]
       })
@@ -130,13 +129,15 @@ var RuntimeOverlayConflicted = function RuntimeOverlayConflicted(_ref) {
     if (!isChangeMaterialDialogOpen) {
       return null;
     }
-    return jsxRuntime.jsx(RuntimeChangeMaterialDialog.default, {
-      intl: intl,
-      open: isChangeMaterialDialogOpen,
-      startRuntime: startRuntime,
-      onClose: function onClose() {
-        return setChangeMaterialDialogOpen(false);
-      }
+    return jsxRuntime.jsx(material.ThemeProvider, {
+      theme: theme.runboxDarkTheme,
+      children: jsxRuntime.jsx(RuntimeChangeMaterialDialog.default, {
+        intl: intl,
+        open: isChangeMaterialDialogOpen,
+        onClose: function onClose() {
+          return setChangeMaterialDialogOpen(false);
+        }
+      })
     });
   };
   /**
@@ -149,58 +150,61 @@ var RuntimeOverlayConflicted = function RuntimeOverlayConflicted(_ref) {
   //
   //
   var renderOverlay = function renderOverlay() {
-    return jsxRuntime.jsx(material.Box, {
-      sx: {
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        width: '100%',
-        height: '100%'
-      },
-      children: jsxRuntime.jsxs(material.Stack, {
-        gap: "1.5rem",
-        alignItems: "center",
-        children: [jsxRuntime.jsx(material.Box, {
-          component: "img",
-          src: terminated.default,
-          alt: "terminated",
-          sx: {
-            maxWidth: '10rem',
-            height: 'auto'
-          }
-        }), jsxRuntime.jsx(material.Typography, {
-          variant: "h6",
-          textAlign: "center",
-          children: intl.formatMessage({
-            id: 'runbox.runtime.overlay.conflicted.title'
-          })
-        }), renderNavButton(), jsxRuntime.jsx(material.Typography, {
-          variant: "body1",
-          textAlign: "center",
-          whiteSpace: "pre-line",
-          children: intl.formatMessage({
-            id: 'runbox.runtime.overlay.conflicted.description'
-          })
-        }), jsxRuntime.jsx(material.Button, {
-          variant: "contained",
-          color: "primary",
-          startIcon: jsxRuntime.jsx(muiElements.EliceIcon, {
-            icon: proSolidSvgIcons.faLinkSimple
-          }),
-          sx: {
-            width: '20rem',
-            maxWidth: '100%',
-            color: 'text.primary',
-            bgcolor: muiSystem.colors.elicepurple[700],
-            '&:hover': {
-              bgcolor: muiSystem.colors.elicepurple[800]
+    return jsxRuntime.jsx(material.ThemeProvider, {
+      theme: theme.runboxLightTheme,
+      children: jsxRuntime.jsx(material.Box, {
+        sx: {
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          width: '100%',
+          height: '100%',
+          backgroundColor: 'background.paper',
+          color: 'text.primary'
+        },
+        children: jsxRuntime.jsxs(material.Stack, {
+          gap: "1.5rem",
+          alignItems: "center",
+          children: [jsxRuntime.jsx(material.Box, {
+            component: "img",
+            src: terminated.default,
+            alt: "terminated",
+            sx: {
+              maxWidth: '10rem',
+              height: 'auto'
             }
-          },
-          onClick: handleClickConnect,
-          children: intl.formatMessage({
-            id: 'runbox.common.connect'
-          })
-        })]
+          }), jsxRuntime.jsx(material.Typography, {
+            variant: "h6",
+            textAlign: "center",
+            children: intl.formatMessage({
+              id: 'runbox.runtime.overlay.conflicted.title'
+            })
+          }), renderNavButton(), jsxRuntime.jsx(material.Typography, {
+            variant: "body1",
+            textAlign: "center",
+            whiteSpace: "pre-line",
+            children: intl.formatMessage({
+              id: 'runbox.runtime.overlay.conflicted.description'
+            })
+          }), jsxRuntime.jsx(material.Box, {
+            sx: {
+              width: '20rem',
+              maxWidth: '100%'
+            },
+            children: jsxRuntime.jsx(material.Button, {
+              fullWidth: true,
+              variant: "contained",
+              color: "primary",
+              startIcon: jsxRuntime.jsx(muiElements.EliceIcon, {
+                icon: proSolidSvgIcons.faLinkSimple
+              }),
+              onClick: handleClickConnect,
+              children: intl.formatMessage({
+                id: 'runbox.common.connect'
+              })
+            })
+          })]
+        })
       })
     });
   };

package/cjs/components/material-runbox/runtime/RuntimeOverlayLoading.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { WithIntlComponentBuilderProps } from '@elice/intl';
+export interface RuntimeOverlayLoadingProps {
+    activeStep: 1 | 2 | 3;
+    /** Container image name, which picks the tips shown while the runbox starts. */
+    containerImageName?: string;
+}
+declare const _default: React.ForwardRefExoticComponent<import("@elice/intl").IntlComponentExtraProps & Omit<WithIntlComponentBuilderProps<RuntimeOverlayLoadingProps>, keyof import("@elice/intl").IntlComponentExtraProps | "__intl"> & React.RefAttributes<any>>;
+export default _default;

package/cjs/components/material-runbox/runtime/RuntimeOverlayLoading.js

@@ -0,0 +1,283 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactUse = require('react-use');
+var intl = require('@elice/intl');
+var muiElements = require('@elice/mui-elements');
+var muiSystem = require('@elice/mui-system');
+var proSolidSvgIcons = require('@fortawesome/pro-solid-svg-icons');
+var material = require('@mui/material');
+var theme = require('../theme.js');
+var runtimeLoadingTips = require('./runtime-loading-tips.js');
+var runboxLoading = require('../../../assets/runbox-loading.svg.js');
+var en = require('../locales/en.json.js');
+var ko = require('../locales/ko.json.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+//
+//
+//
+var STEPS = [{
+  labelId: 'runbox.runtime.loading.step.prepare',
+  progressId: 'runbox.runtime.loading.step.prepare_progress'
+}, {
+  labelId: 'runbox.runtime.loading.step.connect',
+  progressId: 'runbox.runtime.loading.step.connect_progress'
+}, {
+  labelId: 'runbox.runtime.loading.step.material',
+  progressId: 'runbox.runtime.loading.step.material_progress'
+}];
+var STEP_STATUS_ID = Object.freeze({
+  completed: 'runbox.runtime.loading.step.status.completed',
+  active: 'runbox.runtime.loading.step.status.active',
+  pending: 'runbox.runtime.loading.step.status.pending'
+});
+/** Two tips fit side by side, and one pair holds long enough to read. */
+var TIPS_PER_PAGE = 2;
+var PAGE_DURATION_MS = 7000;
+//
+//
+//
+var RuntimeOverlayLoading = function RuntimeOverlayLoading(_ref) {
+  var intl = _ref.__intl,
+    activeStep = _ref.activeStep,
+    containerImageName = _ref.containerImageName;
+  var _React$useState = React__default.default.useState(0),
+    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
+    page = _React$useState2[0],
+    setPage = _React$useState2[1];
+  var tips = runtimeLoadingTips.getRuntimeLoadingTips(containerImageName);
+  var shownTips = tips.slice(page * TIPS_PER_PAGE, page * TIPS_PER_PAGE + TIPS_PER_PAGE);
+  var pageCount = Math.floor(tips.length / TIPS_PER_PAGE);
+  //
+  //
+  //
+  reactUse.useInterval(function () {
+    return setPage(function (current) {
+      return (current + 1) % pageCount;
+    });
+  }, pageCount > 1 ? PAGE_DURATION_MS : null);
+  //
+  //
+  //
+  return jsxRuntime.jsx(material.ThemeProvider, {
+    theme: theme.runboxLightTheme,
+    children: jsxRuntime.jsxs(material.Stack, {
+      sx: {
+        width: '100%',
+        height: '100%',
+        padding: {
+          xs: '1.5rem',
+          sm: '2.5rem'
+        },
+        gap: '2.5rem',
+        overflow: 'auto',
+        backgroundColor: 'background.paper',
+        color: 'text.primary'
+      },
+      children: [jsxRuntime.jsxs(material.Stack, {
+        direction: {
+          xs: 'column',
+          md: 'row'
+        },
+        sx: {
+          flex: 1,
+          justifyContent: 'center',
+          alignItems: 'center',
+          gap: {
+            xs: '1rem',
+            md: '2rem'
+          }
+        },
+        children: [jsxRuntime.jsxs(material.Stack, {
+          sx: {
+            width: '100%',
+            maxWidth: '30rem',
+            flex: {
+              md: '1 1 0'
+            },
+            gap: '1.5rem'
+          },
+          children: [jsxRuntime.jsxs(material.Stack, {
+            gap: "0.5rem",
+            children: [jsxRuntime.jsx(material.Typography, {
+              variant: "h4",
+              color: "text.primary",
+              children: intl.formatMessage({
+                id: 'runbox.runtime.loading.title'
+              })
+            }), jsxRuntime.jsx(material.Typography, {
+              variant: "body1",
+              color: "text.secondary",
+              children: intl.formatMessage({
+                id: 'runbox.runtime.loading.description'
+              })
+            })]
+          }), jsxRuntime.jsx(material.Stack, {
+            children: STEPS.map(function (step, index) {
+              var stepNumber = index + 1;
+              var isActive = stepNumber === activeStep;
+              var isCompleted = stepNumber < activeStep;
+              return jsxRuntime.jsxs(material.Stack, {
+                direction: "row",
+                sx: {
+                  alignItems: 'center',
+                  gap: '0.75rem',
+                  padding: '0.625rem 0.75rem',
+                  borderRadius: '0.5rem',
+                  backgroundColor: isActive ? material.alpha(muiSystem.colors.elicepurple[700], 0.04) : 'transparent'
+                },
+                children: [jsxRuntime.jsx(material.Box, {
+                  sx: {
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    width: '1rem'
+                  },
+                  children: isActive ? jsxRuntime.jsx(material.CircularProgress, {
+                    size: "1rem",
+                    sx: {
+                      color: muiSystem.colors.elicepurple[700]
+                    }
+                  }) : isCompleted ? jsxRuntime.jsx(muiElements.EliceIcon, {
+                    icon: proSolidSvgIcons.faCheck,
+                    sx: {
+                      fontSize: '1rem',
+                      color: muiSystem.colors.elicepurple[700]
+                    }
+                  }) : jsxRuntime.jsx(material.Typography, {
+                    variant: "body2",
+                    color: "text.tertiary",
+                    children: stepNumber
+                  })
+                }), jsxRuntime.jsx(material.Typography, {
+                  variant: "body2",
+                  fontWeight: isActive ? 700 : 500,
+                  color: isActive ? 'text.primary' : 'text.secondary',
+                  sx: {
+                    flex: 1
+                  },
+                  children: intl.formatMessage({
+                    id: step.labelId
+                  })
+                }), jsxRuntime.jsx(material.Typography, {
+                  variant: "caption",
+                  color: "text.tertiary",
+                  whiteSpace: "nowrap",
+                  children: intl.formatMessage({
+                    id: isCompleted ? STEP_STATUS_ID.completed : isActive ? STEP_STATUS_ID.active : STEP_STATUS_ID.pending
+                  })
+                })]
+              }, step.labelId);
+            })
+          }), jsxRuntime.jsxs(material.Stack, {
+            direction: "row",
+            sx: {
+              alignItems: 'center',
+              gap: '0.75rem'
+            },
+            children: [jsxRuntime.jsx(material.LinearProgress, {
+              variant: "determinate",
+              value: activeStep / STEPS.length * 100,
+              sx: _rollupPluginBabelHelpers.defineProperty({
+                flex: 1,
+                height: '0.25rem',
+                borderRadius: '0.25rem',
+                backgroundColor: material.alpha(muiSystem.colors.elicepurple[700], 0.2)
+              }, "& .MuiLinearProgress-bar", {
+                backgroundColor: muiSystem.colors.elicepurple[700]
+              })
+            }), jsxRuntime.jsx(material.Typography, {
+              variant: "caption",
+              color: "text.tertiary",
+              whiteSpace: "nowrap",
+              children: intl.formatMessage({
+                id: STEPS[activeStep - 1].progressId
+              }, {
+                current: activeStep,
+                total: STEPS.length
+              })
+            })]
+          })]
+        }), jsxRuntime.jsx(material.Box, {
+          sx: {
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            flex: {
+              md: 1
+            }
+          },
+          children: jsxRuntime.jsx(material.Box, {
+            component: "img",
+            src: runboxLoading.default,
+            alt: intl.formatMessage({
+              id: 'runbox.runtime.loading.illustration_alt'
+            }),
+            sx: {
+              width: '100%',
+              maxWidth: {
+                xs: '9.625rem',
+                md: '13rem'
+              },
+              height: 'auto'
+            }
+          })
+        })]
+      }), jsxRuntime.jsx(material.Fade, {
+        "in": true,
+        appear: page > 0,
+        children: jsxRuntime.jsx(material.Stack, {
+          direction: {
+            xs: 'column',
+            md: 'row'
+          },
+          gap: "1rem",
+          children: shownTips.map(function (tip) {
+            return jsxRuntime.jsxs(material.Stack, {
+              direction: "row",
+              sx: {
+                flex: 1,
+                gap: '0.75rem'
+              },
+              children: [jsxRuntime.jsx(muiElements.EliceIcon, {
+                icon: tip.icon,
+                sx: {
+                  fontSize: '1.25rem',
+                  color: 'text.secondary',
+                  marginTop: '0.125rem'
+                }
+              }), jsxRuntime.jsxs(material.Stack, {
+                gap: "0.125rem",
+                children: [jsxRuntime.jsx(material.Typography, {
+                  variant: "body1",
+                  fontWeight: 700,
+                  color: "text.primary",
+                  children: intl.formatMessage({
+                    id: tip.titleId
+                  })
+                }), jsxRuntime.jsx(material.Typography, {
+                  variant: "caption",
+                  color: "text.tertiary",
+                  children: intl.formatMessage({
+                    id: tip.descriptionId
+                  })
+                })]
+              })]
+            }, tip.titleId);
+          })
+        })
+      }, page)]
+    })
+  });
+};
+var RuntimeOverlayLoading$1 = new intl.IntlComponentBuilder(RuntimeOverlayLoading).add('en', en.default).add('ko', ko.default).addAsync('th', Promise.resolve().then(function () { return require('../locales/th.json.js'); })).addAsync('ja', Promise.resolve().then(function () { return require('../locales/ja.json.js'); })).build();
+
+exports.default = RuntimeOverlayLoading$1;

package/cjs/components/material-runbox/runtime/RuntimeOverlayQueued.d.ts

@@ -1,5 +1,7 @@
-import type { WithIntlComponentBuilderProps } from '@elice/intl';
 import type { EliceRunboxViewerOverlayQueuedComponentProps as QueuedComponentProps } from '@elice/runbox-client';
 import type React from 'react';
-declare const _default: React.ForwardRefExoticComponent<import("@elice/intl").IntlComponentExtraProps & Omit<WithIntlComponentBuilderProps<QueuedComponentProps>, keyof import("@elice/intl").IntlComponentExtraProps | "__intl"> & React.RefAttributes<any>>;
-export default _default;
+export interface RuntimeOverlayQueuedProps extends QueuedComponentProps {
+    containerImageName?: string;
+}
+declare const RuntimeOverlayQueued: React.FC<RuntimeOverlayQueuedProps>;
+export default RuntimeOverlayQueued;

package/cjs/components/material-runbox/runtime/RuntimeOverlayQueued.js

@@ -3,72 +3,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var intl = require('@elice/intl');
-var muiSystem = require('@elice/mui-system');
-var iconsMaterial = require('@mui/icons-material');
-var material = require('@mui/material');
-var queue = require('../../../assets/queue.gif.js');
-var en = require('../locales/en.json.js');
-var ko = require('../locales/ko.json.js');
-var MaterialRunboxContext = require('../contexts/MaterialRunboxContext.js');
+var RuntimeOverlayLoading = require('./RuntimeOverlayLoading.js');
 
-//
-//
-//
 var RuntimeOverlayQueued = function RuntimeOverlayQueued(_ref) {
-  var intl = _ref.__intl,
-    numWaiters = _ref.numWaiters;
-  var _useMaterialRunboxCon = MaterialRunboxContext.useMaterialRunboxContext(),
-    showMessenger = _useMaterialRunboxCon.showMessenger;
-  //
-  //
-  //
-  return jsxRuntime.jsxs(material.Stack, {
-    gap: "1.5rem",
-    sx: {
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      width: '100%',
-      height: '100%'
-    },
-    children: [jsxRuntime.jsx(material.Box, {
-      component: "img",
-      src: queue.default,
-      alt: "queue",
-      sx: {
-        width: '100%',
-        height: 'auto',
-        maxWidth: '13.375rem'
-      }
-    }), jsxRuntime.jsx(material.Typography, {
-      variant: "subtitle2",
-      color: "text:secondary",
-      sx: {
-        whiteSpace: 'pre-wrap',
-        textAlign: 'center'
-      },
-      children: numWaiters > 0 ? intl.formatMessage({
-        id: 'runbox.runtime.overlay.queued.description'
-      }, {
-        waiters: numWaiters
-      }) : intl.formatMessage({
-        id: 'runbox.runtime.overlay.queued.description_zero'
-      })
-    }), typeof showMessenger === 'function' ? jsxRuntime.jsx(material.Button, {
-      variant: "outlined",
-      startIcon: jsxRuntime.jsx(iconsMaterial.QuestionAnswer, {}),
-      sx: {
-        color: muiSystem.colors.elicepurple[700],
-        borderColor: muiSystem.colors.elicepurple[700]
-      },
-      onClick: showMessenger,
-      children: intl.formatMessage({
-        id: 'runbox.common.support'
-      })
-    }) : null]
+  var containerImageName = _ref.containerImageName;
+  return jsxRuntime.jsx(RuntimeOverlayLoading.default, {
+    activeStep: 1,
+    containerImageName: containerImageName
   });
 };
-var RuntimeOverlayQueued$1 = new intl.IntlComponentBuilder(RuntimeOverlayQueued).add('en', en.default).add('ko', ko.default).addAsync('th', Promise.resolve().then(function () { return require('../locales/th.json.js'); })).addAsync('ja', Promise.resolve().then(function () { return require('../locales/ja.json.js'); })).build();
 
-exports.default = RuntimeOverlayQueued$1;
+exports.default = RuntimeOverlayQueued;

package/cjs/components/material-runbox/runtime/RuntimeOverlayTerminated.d.ts

@@ -2,7 +2,10 @@ import type { WithIntlComponentBuilderProps } from '@elice/intl';
 import type { EliceRunboxViewerOverlayTerminatedComponentProps as TerminatedComponentProps } from '@elice/runbox-client';
 import type React from 'react';
 interface RuntimeOverlayTerminatedProps extends TerminatedComponentProps {
-    startRuntime: () => Promise<void>;
+    runtimeTemplateId: string;
+    courseId: number;
+    /** User ID for tutoring. */
+    studentUserId?: number;
 }
 declare const _default: React.ForwardRefExoticComponent<import("@elice/intl").IntlComponentExtraProps & Omit<WithIntlComponentBuilderProps<RuntimeOverlayTerminatedProps>, keyof import("@elice/intl").IntlComponentExtraProps | "__intl"> & React.RefAttributes<any>>;
 export default _default;