@instructure/outcomes-ui 4.1.2 → 4.1.4

package/lib/translated/pt-BR/components/Gradebook/dialogs/MessageStudentsWhoDialog/index.js

@@ -0,0 +1,427 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _react = _interopRequireWildcard(require("react"));
+var _uiButtons = require("@instructure/ui-buttons");
+var _uiCheckbox = require("@instructure/ui-checkbox");
+var _uiFlex = require("@instructure/ui-flex");
+var _uiHeading = require("@instructure/ui-heading");
+var _uiIcons = require("@instructure/ui-icons");
+var _uiLink = require("@instructure/ui-link");
+var _uiModal = require("@instructure/ui-modal");
+var _uiSpinner = require("@instructure/ui-spinner");
+var _uiTable = require("@instructure/ui-table");
+var _uiText = require("@instructure/ui-text");
+var _uiTextArea = require("@instructure/ui-text-area");
+var _uiTextInput = require("@instructure/ui-text-input");
+var _uiTooltip = require("@instructure/ui-tooltip");
+var _uiView = require("@instructure/ui-view");
+var _compat = require("es-toolkit/compat");
+var _canvasMedia = _interopRequireDefault(require("@instructure/canvas-media"));
+var _Pill = _interopRequireDefault(require("./Pill.js"));
+var _messageAttachments = require("./messageAttachments.js");
+var _mediaComment = require("./mediaComment.js");
+function observerCount(students, observers) {
+  return students.reduce(function (acc, student) {
+    var _observers$student$id;
+    return acc + (((_observers$student$id = observers[student.id]) === null || _observers$student$id === void 0 ? void 0 : _observers$student$id.length) || 0);
+  }, 0);
+}
+function calculateObserverRecipientCount(selectedObservers) {
+  return Object.values(selectedObservers).reduce(function (acc, array) {
+    return acc + array.length;
+  }, 0);
+}
+function isLengthBetweenBoundaries(subsetLength, totalLength) {
+  return subsetLength > 0 && subsetLength < totalLength;
+}
+function initializeSelectedObservers(studentCollection) {
+  return studentCollection.reduce(function (map, student) {
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, map), {}, (0, _defineProperty2.default)({}, student.id, []));
+  }, {});
+}
+var MessageStudentsWhoDialog = function MessageStudentsWhoDialog(_ref) {
+  var onClose = _ref.onClose,
+    students = _ref.students,
+    onSend = _ref.onSend,
+    _ref$attachments = _ref.attachments,
+    attachments = _ref$attachments === void 0 ? [] : _ref$attachments,
+    _ref$pendingUploads = _ref.pendingUploads,
+    pendingUploads = _ref$pendingUploads === void 0 ? [] : _ref$pendingUploads,
+    onAddAttachment = _ref.onAddAttachment,
+    onDeleteAttachment = _ref.onDeleteAttachment,
+    _ref$observersByStude = _ref.observersByStudentID,
+    observersByStudentID = _ref$observersByStude === void 0 ? {} : _ref$observersByStude,
+    _ref$isLoadingObserve = _ref.isLoadingObservers,
+    isLoadingObservers = _ref$isLoadingObserve === void 0 ? false : _ref$isLoadingObserve,
+    userId = _ref.userId;
+  var _useState = (0, _react.useState)(true),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    sending = _useState4[0],
+    setSending = _useState4[1];
+  var _useState5 = (0, _react.useState)(''),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    message = _useState6[0],
+    setMessage = _useState6[1];
+  var _useState7 = (0, _react.useState)(''),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    subject = _useState8[0],
+    setSubject = _useState8[1];
+  var _useState9 = (0, _react.useState)(false),
+    _useState0 = (0, _slicedToArray2.default)(_useState9, 2),
+    isSubmitted = _useState0[0],
+    setIsSubmitted = _useState0[1];
+  var _useState1 = (0, _react.useState)(null),
+    _useState10 = (0, _slicedToArray2.default)(_useState1, 2),
+    pendingSendArgs = _useState10[0],
+    setPendingSendArgs = _useState10[1];
+  var _useState11 = (0, _react.useState)(false),
+    _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+    showTable = _useState12[0],
+    setShowTable = _useState12[1];
+  var _useState13 = (0, _react.useState)(false),
+    _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+    mediaUploadOpen = _useState14[0],
+    setMediaUploadOpen = _useState14[1];
+  var _useState15 = (0, _react.useState)(null),
+    _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+    mediaUploadFile = _useState16[0],
+    setMediaUploadFile = _useState16[1];
+  var _useState17 = (0, _react.useState)(null),
+    _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
+    mediaPreviewURL = _useState18[0],
+    setMediaPreviewURL = _useState18[1];
+  var _useState19 = (0, _react.useState)(null),
+    _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
+    mediaTitle = _useState20[0],
+    setMediaTitle = _useState20[1];
+  var close = function close() {
+    return setOpen(false);
+  };
+  var sortedStudents = (0, _react.useMemo)(function () {
+    return (0, _toConsumableArray2.default)(students).sort(function (a, b) {
+      return a.sortableName.localeCompare(b.sortableName);
+    });
+  }, [students]);
+  var _useState21 = (0, _react.useState)(function () {
+      return initializeSelectedObservers(sortedStudents);
+    }),
+    _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
+    selectedObservers = _useState22[0],
+    setSelectedObservers = _useState22[1];
+  var _useState23 = (0, _react.useState)(function () {
+      return sortedStudents.map(function (s) {
+        return s.id;
+      });
+    }),
+    _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
+    selectedStudents = _useState24[0],
+    setSelectedStudents = _useState24[1];
+  var observerRecipientCount = isLoadingObservers ? 0 : calculateObserverRecipientCount(selectedObservers);
+  var totalObserverCount = observerCount(sortedStudents, observersByStudentID);
+  var selectedObserverCount = Object.values(selectedObservers).reduce(function (acc, a) {
+    return acc + a.length;
+  }, 0);
+  var isDisabledStudentsCheckbox = sortedStudents.length === 0;
+  var isCheckedStudentsCheckbox = sortedStudents.length > 0 && selectedStudents.length === sortedStudents.length;
+  var isIndeterminateStudentsCheckbox = isLengthBetweenBoundaries(selectedStudents.length, sortedStudents.length);
+  var isDisabledObserversCheckbox = totalObserverCount === 0;
+  var isCheckedObserversCheckbox = totalObserverCount > 0 && selectedObserverCount === totalObserverCount;
+  var isIndeterminateObserversCheckbox = isLengthBetweenBoundaries(selectedObserverCount, totalObserverCount);
+  var isMessagePresent = message.trim().length > 0;
+  var areRecipientsPresent = selectedStudents.length + Object.values(selectedObservers).flat().length > 0;
+  var isFormDataValid = isMessagePresent && areRecipientsPresent;
+  var handleSendButton = function handleSendButton() {
+    setIsSubmitted(true);
+    if (!isFormDataValid) return;
+    var uniqueRecipientsIds = (0, _toConsumableArray2.default)(new Set([].concat((0, _toConsumableArray2.default)(selectedStudents), (0, _toConsumableArray2.default)(Object.values(selectedObservers).flat()))));
+    var args = {
+      recipientsIds: uniqueRecipientsIds,
+      subject: subject,
+      body: message.trim()
+    };
+    if (mediaUploadFile) {
+      args.mediaFile = {
+        id: mediaUploadFile.media_id,
+        type: mediaUploadFile.media_type
+      };
+    }
+    if (attachments !== null && attachments !== void 0 && attachments.length) {
+      args.attachmentIds = attachments.map(function (a) {
+        return a.id;
+      });
+    }
+    if (pendingUploads.length) {
+      setPendingSendArgs(args);
+      setSending(true);
+    } else {
+      onSend(args);
+      close();
+    }
+  };
+  var onReplaceAttachment = function onReplaceAttachment(id, e) {
+    onDeleteAttachment === null || onDeleteAttachment === void 0 ? void 0 : onDeleteAttachment(id);
+    onAddAttachment === null || onAddAttachment === void 0 ? void 0 : onAddAttachment(e);
+  };
+  var onRemoveMediaComment = function onRemoveMediaComment() {
+    if (mediaPreviewURL) URL.revokeObjectURL(mediaPreviewURL);
+    setMediaPreviewURL(null);
+    setMediaUploadFile(null);
+  };
+  var onMediaUploadStart = function onMediaUploadStart(file) {
+    setMediaTitle(file.title);
+  };
+  var onMediaUploadComplete = function onMediaUploadComplete(err, mediaData) {
+    if (!err && mediaData.mediaObject) {
+      setMediaUploadFile(mediaData.mediaObject.media_object);
+      setMediaPreviewURL(URL.createObjectURL(mediaData.uploadedFile));
+    }
+  };
+  var toggleSelection = function toggleSelection(id, array) {
+    var newArray = (0, _toConsumableArray2.default)(array);
+    var index = newArray.indexOf(id);
+    if (index === -1) newArray.push(id);else newArray.splice(index, 1);
+    return newArray;
+  };
+  var toggleStudentSelection = function toggleStudentSelection(id) {
+    setSelectedStudents(function (prev) {
+      return toggleSelection(id, prev);
+    });
+  };
+  var toggleObserverSelection = function toggleObserverSelection(studentId, observerId) {
+    setSelectedObservers(function (prev) {
+      var _prev$studentId;
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, (0, _defineProperty2.default)({}, studentId, toggleSelection(observerId, (_prev$studentId = prev[studentId]) !== null && _prev$studentId !== void 0 ? _prev$studentId : [])));
+    });
+  };
+  var onStudentsCheckboxChanged = function onStudentsCheckboxChanged(e) {
+    setSelectedStudents(e.target.checked ? sortedStudents.map(function (s) {
+      return s.id;
+    }) : []);
+  };
+  var onObserversCheckboxChanged = function onObserversCheckboxChanged(e) {
+    if (e.target.checked) {
+      setSelectedObservers(sortedStudents.reduce(function (map, student) {
+        var _observersByStudentID;
+        return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, map), {}, (0, _defineProperty2.default)({}, student.id, ((_observersByStudentID = observersByStudentID[student.id]) !== null && _observersByStudentID !== void 0 ? _observersByStudentID : []).map(function (o) {
+          return o.id;
+        })));
+      }, {}));
+    } else {
+      setSelectedObservers(initializeSelectedObservers(students));
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_uiModal.Modal, {
+    open: open,
+    label: "Compose Message",
+    onDismiss: close,
+    onExited: onClose,
+    overflow: "scroll",
+    shouldCloseOnDocumentClick: false,
+    size: "large"
+  }, /*#__PURE__*/_react.default.createElement(_uiModal.Modal.Header, null, /*#__PURE__*/_react.default.createElement(_uiButtons.CloseButton, {
+    placement: "end",
+    offset: "small",
+    onClick: close,
+    screenReaderLabel: "Fechar"
+  }), /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, null, "Compose Message")), /*#__PURE__*/_react.default.createElement(_uiModal.Modal.Body, null, isLoadingObservers ? /*#__PURE__*/_react.default.createElement(_uiSpinner.Spinner, {
+    renderTitle: "Carregando"
+  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, null, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+    weight: "bold"
+  }, "Send Message To:")), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+    margin: "0 0 0 medium"
+  }, /*#__PURE__*/_react.default.createElement(_uiCheckbox.Checkbox, {
+    indeterminate: isIndeterminateStudentsCheckbox,
+    disabled: isDisabledStudentsCheckbox,
+    onChange: onStudentsCheckboxChanged,
+    checked: isCheckedStudentsCheckbox,
+    defaultChecked: true,
+    "data-testid": "total-student-checkbox",
+    label: /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      weight: "bold"
+    }, selectedStudents.length + " Students")
+  })), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+    margin: "0 0 0 medium"
+  }, /*#__PURE__*/_react.default.createElement(_uiCheckbox.Checkbox, {
+    indeterminate: isIndeterminateObserversCheckbox,
+    disabled: isDisabledObserversCheckbox,
+    onChange: onObserversCheckboxChanged,
+    checked: isCheckedObserversCheckbox,
+    "data-testid": "total-observer-checkbox",
+    label: /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      weight: "bold"
+    }, observerRecipientCount + " Observers")
+  })), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+    as: "div",
+    shouldGrow: true,
+    textAlign: "end"
+  }, /*#__PURE__*/_react.default.createElement(_uiLink.Link, {
+    onClick: function onClick() {
+      return setShowTable(function (prev) {
+        return !prev;
+      });
+    },
+    renderIcon: showTable ? /*#__PURE__*/_react.default.createElement(_uiIcons.IconArrowOpenUpLine, null) : /*#__PURE__*/_react.default.createElement(_uiIcons.IconArrowOpenDownLine, null),
+    iconPlacement: "end",
+    "data-testid": "show_all_recipients"
+  }, showTable ? "Hide all recipients" : "Show all recipients"))), !areRecipientsPresent && isSubmitted && /*#__PURE__*/_react.default.createElement(_uiView.View, {
+    as: "div",
+    margin: "0 xxx-small xx-small 0"
+  }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+    size: "small",
+    color: "danger"
+  }, /*#__PURE__*/_react.default.createElement(_uiView.View, {
+    textAlign: "center"
+  }, /*#__PURE__*/_react.default.createElement(_uiView.View, {
+    as: "div",
+    display: "inline-block",
+    margin: "0 xxx-small xx-small 0"
+  }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconWarningSolid, null)), "Please select at least one recipient."))), showTable && /*#__PURE__*/_react.default.createElement(_uiTable.Table, {
+    caption: "List of students and observers"
+  }, /*#__PURE__*/_react.default.createElement(_uiTable.Table.Head, null, /*#__PURE__*/_react.default.createElement(_uiTable.Table.Row, null, /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
+    id: "students"
+  }, "Students"), /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
+    id: "observers"
+  }, "Observers"))), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Body, null, sortedStudents.map(function (student) {
+    return /*#__PURE__*/_react.default.createElement(_uiTable.Table.Row, {
+      key: student.id
+    }, /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, null, /*#__PURE__*/_react.default.createElement(_Pill.default, {
+      studentId: student.id,
+      text: student.name,
+      selected: selectedStudents.includes(student.id),
+      onClick: toggleStudentSelection
+    })), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, null, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+      direction: "row",
+      margin: "0 0 0 small",
+      wrap: "wrap"
+    }, (0, _compat.sortBy)(observersByStudentID[student.id] || [], function (observer) {
+      return observer.sortableName;
+    }).map(function (observer) {
+      var _selectedObservers$st;
+      return /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+        key: observer.id
+      }, /*#__PURE__*/_react.default.createElement(_Pill.default, {
+        studentId: student.id,
+        observerId: observer.id,
+        text: observer.name,
+        selected: (_selectedObservers$st = selectedObservers[student.id]) === null || _selectedObservers$st === void 0 ? void 0 : _selectedObservers$st.includes(observer.id),
+        onClick: toggleObserverSelection
+      }));
+    }))));
+  }))), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_uiTextInput.TextInput, {
+    "data-testid": "subject-input",
+    renderLabel: "Subject",
+    placeholder: "Type Something\u2026",
+    value: subject,
+    onChange: function onChange(_event, value) {
+      return setSubject(value);
+    }
+  }), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_uiTextArea.TextArea, {
+    "data-testid": "message-input",
+    required: true,
+    height: "200px",
+    label: "Message",
+    placeholder: "Type your message here\u2026",
+    value: message,
+    onChange: function onChange(e) {
+      return setMessage(e.target.value);
+    },
+    messages: !isMessagePresent && isSubmitted ? [{
+      type: 'error',
+      text: /*#__PURE__*/_react.default.createElement(_uiView.View, {
+        textAlign: "center"
+      }, /*#__PURE__*/_react.default.createElement(_uiView.View, {
+        as: "div",
+        display: "inline-block",
+        margin: "0 xxx-small xx-small 0"
+      }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconWarningSolid, null)), "A message is required to send this message.")
+    }] : []
+  }), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+    alignItems: "start"
+  }, mediaUploadFile && mediaPreviewURL && /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, /*#__PURE__*/_react.default.createElement(_mediaComment.MediaAttachment, {
+    file: {
+      mediaID: mediaUploadFile.media_id,
+      src: mediaPreviewURL,
+      title: mediaTitle || mediaUploadFile.title,
+      type: mediaUploadFile.media_type
+    },
+    onRemoveMediaComment: onRemoveMediaComment
+  })), onDeleteAttachment && onReplaceAttachment && /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+    shouldShrink: true
+  }, /*#__PURE__*/_react.default.createElement(_messageAttachments.AttachmentDisplay, {
+    attachments: [].concat((0, _toConsumableArray2.default)(attachments), (0, _toConsumableArray2.default)(pendingUploads)),
+    onDeleteItem: onDeleteAttachment,
+    onReplaceItem: onReplaceAttachment
+  }))))), /*#__PURE__*/_react.default.createElement(_uiModal.Modal.Footer, null, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+    justifyItems: "space-between",
+    width: "100%"
+  }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, onAddAttachment && /*#__PURE__*/_react.default.createElement(_messageAttachments.FileAttachmentUpload, {
+    onAddItem: onAddAttachment
+  }), userId && /*#__PURE__*/_react.default.createElement(_uiTooltip.Tooltip, {
+    renderTip: "Record an audio or video comment",
+    placement: "top"
+  }, /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, {
+    screenReaderLabel: "Record an audio or video comment",
+    onClick: function onClick() {
+      return setMediaUploadOpen(true);
+    },
+    margin: "xx-small",
+    "data-testid": "media-upload",
+    interaction: mediaUploadFile ? 'disabled' : 'enabled'
+  }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconAttachMediaLine, null)))), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, null, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+    focusColor: "info",
+    color: "primary-inverse",
+    onClick: close
+  }, "Cancelar")), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+    margin: "0 0 0 x-small"
+  }, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+    "data-testid": "send-message-button",
+    color: "primary",
+    onClick: handleSendButton
+  }, "Send"))))))), /*#__PURE__*/_react.default.createElement(_messageAttachments.AttachmentUploadSpinner, {
+    sendMessage: onSend,
+    isMessageSending: sending,
+    pendingUploads: pendingUploads,
+    sendArgs: pendingSendArgs
+  }), userId && /*#__PURE__*/_react.default.createElement(_canvasMedia.default, {
+    key: mediaUploadFile === null || mediaUploadFile === void 0 ? void 0 : mediaUploadFile.media_id,
+    onStartUpload: onMediaUploadStart,
+    onUploadComplete: onMediaUploadComplete,
+    onDismiss: function onDismiss() {
+      return setMediaUploadOpen(false);
+    },
+    open: mediaUploadOpen,
+    tabs: {
+      embed: false,
+      record: true,
+      upload: true
+    },
+    uploadMediaTranslations: {
+      UploadMediaStrings: _mediaComment.UploadMediaStrings,
+      MediaCaptureStrings: _mediaComment.MediaCaptureStrings,
+      SelectStrings: _mediaComment.SelectStrings
+    },
+    liveRegion: function liveRegion() {
+      return document.getElementById('flash_screenreader_holder');
+    },
+    rcsConfig: {
+      contextId: userId,
+      contextType: 'user'
+    },
+    disableSubmitWhileUploading: true
+  }));
+};
+var _default = exports.default = MessageStudentsWhoDialog;

package/lib/translated/pt-BR/components/Gradebook/dialogs/MessageStudentsWhoDialog/index.stories.js

@@ -0,0 +1,133 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithPendingUploads = exports.WithObservers = exports.WithMediaRecording = exports.WithFileAttachments = exports.NoStudents = exports.LoadingObservers = exports.FullyEquipped = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _addonActions = require("@storybook/addon-actions");
+var _decorators = require("../../storybook/decorators.js");
+var _index = _interopRequireDefault(require("../../../../index.js"));
+var meta = {
+  title: 'Gradebook/Dialogs/MessageStudentsWhoDialog',
+  component: _index.default,
+  args: {
+    onClose: (0, _addonActions.action)('onClose'),
+    onSend: (0, _addonActions.action)('onSend')
+  },
+  decorators: [function (Story) {
+    return /*#__PURE__*/_react.default.createElement(_decorators.StoryWrapper, null, /*#__PURE__*/_react.default.createElement(Story, null));
+  }]
+};
+var _default = exports.default = meta;
+var mockStudents = [{
+  id: '1',
+  name: 'Alice Johnson',
+  sortableName: 'Johnson, Alice',
+  submittedAt: null,
+  workflowState: 'graded'
+}, {
+  id: '2',
+  name: 'Bob Martinez',
+  sortableName: 'Martinez, Bob',
+  submittedAt: new Date('2026-03-01'),
+  workflowState: 'graded'
+}, {
+  id: '3',
+  name: 'Carol Williams',
+  sortableName: 'Williams, Carol',
+  submittedAt: null,
+  workflowState: 'unsubmitted'
+}];
+var mockObservers = {
+  '1': [{
+    id: 'obs-1',
+    name: 'Alice Parent',
+    sortableName: 'Parent, Alice'
+  }],
+  '2': [{
+    id: 'obs-2',
+    name: 'Bob Guardian',
+    sortableName: 'Guardian, Bob'
+  }, {
+    id: 'obs-3',
+    name: 'Bob Guardian 2',
+    sortableName: 'Guardian 2, Bob'
+  }]
+};
+var Default = exports.Default = {
+  args: {
+    students: mockStudents
+  }
+};
+var WithFileAttachments = exports.WithFileAttachments = {
+  args: {
+    students: mockStudents,
+    onAddAttachment: (0, _addonActions.action)('onAddAttachment'),
+    onDeleteAttachment: (0, _addonActions.action)('onDeleteAttachment'),
+    attachments: [{
+      id: 'att-1',
+      display_name: 'rubric.pdf',
+      mime_class: 'pdf'
+    }, {
+      id: 'att-2',
+      display_name: 'instructions.docx',
+      mime_class: 'doc'
+    }]
+  }
+};
+var WithPendingUploads = exports.WithPendingUploads = {
+  args: {
+    students: mockStudents,
+    onAddAttachment: (0, _addonActions.action)('onAddAttachment'),
+    onDeleteAttachment: (0, _addonActions.action)('onDeleteAttachment'),
+    attachments: [{
+      id: 'att-1',
+      display_name: 'rubric.pdf',
+      mime_class: 'pdf'
+    }],
+    pendingUploads: [{
+      id: 'pending-0-notes.txt',
+      display_name: 'notes.txt',
+      isLoading: true
+    }]
+  }
+};
+var WithMediaRecording = exports.WithMediaRecording = {
+  args: {
+    students: mockStudents,
+    userId: 'user-123'
+  }
+};
+var WithObservers = exports.WithObservers = {
+  args: {
+    students: mockStudents,
+    observersByStudentID: mockObservers
+  }
+};
+var LoadingObservers = exports.LoadingObservers = {
+  args: {
+    students: mockStudents,
+    isLoadingObservers: true
+  }
+};
+var NoStudents = exports.NoStudents = {
+  args: {
+    students: []
+  }
+};
+var FullyEquipped = exports.FullyEquipped = {
+  args: {
+    students: mockStudents,
+    observersByStudentID: mockObservers,
+    onAddAttachment: (0, _addonActions.action)('onAddAttachment'),
+    onDeleteAttachment: (0, _addonActions.action)('onDeleteAttachment'),
+    attachments: [{
+      id: 'att-1',
+      display_name: 'rubric.pdf',
+      mime_class: 'pdf'
+    }],
+    userId: 'user-123'
+  }
+};

package/lib/translated/pt-BR/components/Gradebook/dialogs/MessageStudentsWhoDialog/mediaComment.js

@@ -0,0 +1,86 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UploadMediaStrings = exports.SelectStrings = exports.MediaCaptureStrings = exports.MediaAttachment = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _messageAttachments = require("./messageAttachments.js");
+var _params;
+var MediaAttachment = exports.MediaAttachment = function MediaAttachment(_ref) {
+  var _file$type;
+  var file = _ref.file,
+    onRemoveMediaComment = _ref.onRemoveMediaComment;
+  var isAudio = (_file$type = file.type) === null || _file$type === void 0 ? void 0 : _file$type.startsWith('audio');
+  var player = isAudio ?
+  /*#__PURE__*/
+  // eslint-disable-next-line jsx-a11y/media-has-caption
+  _react.default.createElement("audio", {
+    src: file.src,
+    controls: true,
+    style: {
+      width: '20rem'
+    }
+  }) :
+  /*#__PURE__*/
+  // eslint-disable-next-line jsx-a11y/media-has-caption
+  _react.default.createElement("video", {
+    src: file.src,
+    controls: true,
+    style: {
+      width: '20rem',
+      height: '11.25rem'
+    }
+  });
+  if (onRemoveMediaComment) {
+    return /*#__PURE__*/_react.default.createElement(_messageAttachments.RemovableItem, {
+      onRemove: onRemoveMediaComment,
+      screenReaderLabel: "Remove media comment",
+      childrenAriaLabel: "Media comment content"
+    }, player);
+  }
+  return player;
+};
+var UploadMediaStrings = exports.UploadMediaStrings = {
+  LOADING_MEDIA: "Loading Media",
+  PROGRESS_LABEL: "Uploading media Progress",
+  ADD_CLOSED_CAPTIONS_OR_SUBTITLES: "Add CC/Subtitle",
+  COMPUTER_PANEL_TITLE: "Computer",
+  DRAG_FILE_TEXT: "Drag a File Here",
+  RECORD_PANEL_TITLE: "Record",
+  EMBED_PANEL_TITLE: "Embed",
+  SUBMIT_TEXT: "Submit",
+  CLOSE_TEXT: "Fechar",
+  UPLOAD_MEDIA_LABEL: "Upload Media",
+  CLEAR_FILE_TEXT: "Remove",
+  INVALID_FILE_TEXT: "Invalid file type",
+  DRAG_DROP_CLICK_TO_BROWSE: "Drag and drop, or click to browse your computer",
+  UPLOADING_ERROR: "Error uploading video/audio recording"
+};
+var MediaCaptureStrings = exports.MediaCaptureStrings = {
+  ARIA_VIDEO_LABEL: "Video Player",
+  ARIA_VOLUME: "Current Volume Level",
+  ARIA_RECORDING: "Recording",
+  DEFAULT_ERROR: "Something went wrong accessing your mic or webcam.",
+  DEVICE_AUDIO: "Mic",
+  DEVICE_VIDEO: "Webcam",
+  FILE_PLACEHOLDER: "Untitled",
+  FINISH: "Finish",
+  NO_WEBCAM: "No Video",
+  NOT_ALLOWED_ERROR: "Please allow Canvas to access your microphone and webcam.",
+  NOT_READABLE_ERROR: "Your webcam may already be in use.",
+  PLAYBACK_PAUSE: "Pause",
+  PLAYBACK_PLAY: "Play",
+  PREVIEW: "PREVIEW",
+  SAVE: "Save",
+  SR_FILE_INPUT: "File name",
+  START: "Start Recording",
+  START_OVER: "Start Over"
+};
+var SelectStrings = exports.SelectStrings = {
+  USE_ARROWS: "Use Arrows",
+  LIST_COLLAPSED: "List Collapsed",
+  LIST_EXPANDED: "List Expanded",
+  OPTION_SELECTED: _params.option + " Selected"
+};