@instructure/outcomes-ui 4.1.3 → 4.1.4

package/es/translated/is/components/Gradebook/dialogs/MessageStudentsWhoDialog/index.js

@@ -0,0 +1,419 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import React, { useState, useMemo } from 'react';
+import { Button, CloseButton, IconButton } from '@instructure/ui-buttons';
+import { Checkbox } from '@instructure/ui-checkbox';
+import { Flex } from '@instructure/ui-flex';
+import { Heading } from '@instructure/ui-heading';
+import { IconArrowOpenDownLine, IconArrowOpenUpLine, IconAttachMediaLine, IconWarningSolid } from '@instructure/ui-icons';
+import { Link } from '@instructure/ui-link';
+import { Modal } from '@instructure/ui-modal';
+import { Spinner } from '@instructure/ui-spinner';
+import { Table } from '@instructure/ui-table';
+import { Text } from '@instructure/ui-text';
+import { TextArea } from '@instructure/ui-text-area';
+import { TextInput } from '@instructure/ui-text-input';
+import { Tooltip } from '@instructure/ui-tooltip';
+import { View } from '@instructure/ui-view';
+import { sortBy } from 'es-toolkit/compat';
+import UploadMedia from '@instructure/canvas-media';
+import Pill from "./Pill.js";
+import { AttachmentDisplay, AttachmentUploadSpinner, FileAttachmentUpload } from "./messageAttachments.js";
+import { MediaAttachment, UploadMediaStrings, MediaCaptureStrings, SelectStrings } from "./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 _objectSpread(_objectSpread({}, map), {}, _defineProperty({}, 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 = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    sending = _useState4[0],
+    setSending = _useState4[1];
+  var _useState5 = useState(''),
+    _useState6 = _slicedToArray(_useState5, 2),
+    message = _useState6[0],
+    setMessage = _useState6[1];
+  var _useState7 = useState(''),
+    _useState8 = _slicedToArray(_useState7, 2),
+    subject = _useState8[0],
+    setSubject = _useState8[1];
+  var _useState9 = useState(false),
+    _useState0 = _slicedToArray(_useState9, 2),
+    isSubmitted = _useState0[0],
+    setIsSubmitted = _useState0[1];
+  var _useState1 = useState(null),
+    _useState10 = _slicedToArray(_useState1, 2),
+    pendingSendArgs = _useState10[0],
+    setPendingSendArgs = _useState10[1];
+  var _useState11 = useState(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    showTable = _useState12[0],
+    setShowTable = _useState12[1];
+  var _useState13 = useState(false),
+    _useState14 = _slicedToArray(_useState13, 2),
+    mediaUploadOpen = _useState14[0],
+    setMediaUploadOpen = _useState14[1];
+  var _useState15 = useState(null),
+    _useState16 = _slicedToArray(_useState15, 2),
+    mediaUploadFile = _useState16[0],
+    setMediaUploadFile = _useState16[1];
+  var _useState17 = useState(null),
+    _useState18 = _slicedToArray(_useState17, 2),
+    mediaPreviewURL = _useState18[0],
+    setMediaPreviewURL = _useState18[1];
+  var _useState19 = useState(null),
+    _useState20 = _slicedToArray(_useState19, 2),
+    mediaTitle = _useState20[0],
+    setMediaTitle = _useState20[1];
+  var close = function close() {
+    return setOpen(false);
+  };
+  var sortedStudents = useMemo(function () {
+    return _toConsumableArray(students).sort(function (a, b) {
+      return a.sortableName.localeCompare(b.sortableName);
+    });
+  }, [students]);
+  var _useState21 = useState(function () {
+      return initializeSelectedObservers(sortedStudents);
+    }),
+    _useState22 = _slicedToArray(_useState21, 2),
+    selectedObservers = _useState22[0],
+    setSelectedObservers = _useState22[1];
+  var _useState23 = useState(function () {
+      return sortedStudents.map(function (s) {
+        return s.id;
+      });
+    }),
+    _useState24 = _slicedToArray(_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 = _toConsumableArray(new Set([].concat(_toConsumableArray(selectedStudents), _toConsumableArray(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 = _toConsumableArray(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 _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, 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 _objectSpread(_objectSpread({}, map), {}, _defineProperty({}, student.id, ((_observersByStudentID = observersByStudentID[student.id]) !== null && _observersByStudentID !== void 0 ? _observersByStudentID : []).map(function (o) {
+          return o.id;
+        })));
+      }, {}));
+    } else {
+      setSelectedObservers(initializeSelectedObservers(students));
+    }
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Modal, {
+    open: open,
+    label: "Compose Message",
+    onDismiss: close,
+    onExited: onClose,
+    overflow: "scroll",
+    shouldCloseOnDocumentClick: false,
+    size: "large"
+  }, /*#__PURE__*/React.createElement(Modal.Header, null, /*#__PURE__*/React.createElement(CloseButton, {
+    placement: "end",
+    offset: "small",
+    onClick: close,
+    screenReaderLabel: "Loka"
+  }), /*#__PURE__*/React.createElement(Heading, null, "Compose Message")), /*#__PURE__*/React.createElement(Modal.Body, null, isLoadingObservers ? /*#__PURE__*/React.createElement(Spinner, {
+    renderTitle: "S\xE6ki"
+  }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(Text, {
+    weight: "bold"
+  }, "Send Message To:")), /*#__PURE__*/React.createElement(Flex.Item, {
+    margin: "0 0 0 medium"
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    indeterminate: isIndeterminateStudentsCheckbox,
+    disabled: isDisabledStudentsCheckbox,
+    onChange: onStudentsCheckboxChanged,
+    checked: isCheckedStudentsCheckbox,
+    defaultChecked: true,
+    "data-testid": "total-student-checkbox",
+    label: /*#__PURE__*/React.createElement(Text, {
+      weight: "bold"
+    }, selectedStudents.length + " Students")
+  })), /*#__PURE__*/React.createElement(Flex.Item, {
+    margin: "0 0 0 medium"
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    indeterminate: isIndeterminateObserversCheckbox,
+    disabled: isDisabledObserversCheckbox,
+    onChange: onObserversCheckboxChanged,
+    checked: isCheckedObserversCheckbox,
+    "data-testid": "total-observer-checkbox",
+    label: /*#__PURE__*/React.createElement(Text, {
+      weight: "bold"
+    }, observerRecipientCount + " Observers")
+  })), /*#__PURE__*/React.createElement(Flex.Item, {
+    as: "div",
+    shouldGrow: true,
+    textAlign: "end"
+  }, /*#__PURE__*/React.createElement(Link, {
+    onClick: function onClick() {
+      return setShowTable(function (prev) {
+        return !prev;
+      });
+    },
+    renderIcon: showTable ? /*#__PURE__*/React.createElement(IconArrowOpenUpLine, null) : /*#__PURE__*/React.createElement(IconArrowOpenDownLine, null),
+    iconPlacement: "end",
+    "data-testid": "show_all_recipients"
+  }, showTable ? "Hide all recipients" : "Show all recipients"))), !areRecipientsPresent && isSubmitted && /*#__PURE__*/React.createElement(View, {
+    as: "div",
+    margin: "0 xxx-small xx-small 0"
+  }, /*#__PURE__*/React.createElement(Text, {
+    size: "small",
+    color: "danger"
+  }, /*#__PURE__*/React.createElement(View, {
+    textAlign: "center"
+  }, /*#__PURE__*/React.createElement(View, {
+    as: "div",
+    display: "inline-block",
+    margin: "0 xxx-small xx-small 0"
+  }, /*#__PURE__*/React.createElement(IconWarningSolid, null)), "Please select at least one recipient."))), showTable && /*#__PURE__*/React.createElement(Table, {
+    caption: "List of students and observers"
+  }, /*#__PURE__*/React.createElement(Table.Head, null, /*#__PURE__*/React.createElement(Table.Row, null, /*#__PURE__*/React.createElement(Table.ColHeader, {
+    id: "students"
+  }, "Students"), /*#__PURE__*/React.createElement(Table.ColHeader, {
+    id: "observers"
+  }, "Observers"))), /*#__PURE__*/React.createElement(Table.Body, null, sortedStudents.map(function (student) {
+    return /*#__PURE__*/React.createElement(Table.Row, {
+      key: student.id
+    }, /*#__PURE__*/React.createElement(Table.Cell, null, /*#__PURE__*/React.createElement(Pill, {
+      studentId: student.id,
+      text: student.name,
+      selected: selectedStudents.includes(student.id),
+      onClick: toggleStudentSelection
+    })), /*#__PURE__*/React.createElement(Table.Cell, null, /*#__PURE__*/React.createElement(Flex, {
+      direction: "row",
+      margin: "0 0 0 small",
+      wrap: "wrap"
+    }, sortBy(observersByStudentID[student.id] || [], function (observer) {
+      return observer.sortableName;
+    }).map(function (observer) {
+      var _selectedObservers$st;
+      return /*#__PURE__*/React.createElement(Flex.Item, {
+        key: observer.id
+      }, /*#__PURE__*/React.createElement(Pill, {
+        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.createElement("br", null), /*#__PURE__*/React.createElement(TextInput, {
+    "data-testid": "subject-input",
+    renderLabel: "Subject",
+    placeholder: "Type Something\u2026",
+    value: subject,
+    onChange: function onChange(_event, value) {
+      return setSubject(value);
+    }
+  }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(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.createElement(View, {
+        textAlign: "center"
+      }, /*#__PURE__*/React.createElement(View, {
+        as: "div",
+        display: "inline-block",
+        margin: "0 xxx-small xx-small 0"
+      }, /*#__PURE__*/React.createElement(IconWarningSolid, null)), "A message is required to send this message.")
+    }] : []
+  }), /*#__PURE__*/React.createElement(Flex, {
+    alignItems: "start"
+  }, mediaUploadFile && mediaPreviewURL && /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(MediaAttachment, {
+    file: {
+      mediaID: mediaUploadFile.media_id,
+      src: mediaPreviewURL,
+      title: mediaTitle || mediaUploadFile.title,
+      type: mediaUploadFile.media_type
+    },
+    onRemoveMediaComment: onRemoveMediaComment
+  })), onDeleteAttachment && onReplaceAttachment && /*#__PURE__*/React.createElement(Flex.Item, {
+    shouldShrink: true
+  }, /*#__PURE__*/React.createElement(AttachmentDisplay, {
+    attachments: [].concat(_toConsumableArray(attachments), _toConsumableArray(pendingUploads)),
+    onDeleteItem: onDeleteAttachment,
+    onReplaceItem: onReplaceAttachment
+  }))))), /*#__PURE__*/React.createElement(Modal.Footer, null, /*#__PURE__*/React.createElement(Flex, {
+    justifyItems: "space-between",
+    width: "100%"
+  }, /*#__PURE__*/React.createElement(Flex.Item, null, onAddAttachment && /*#__PURE__*/React.createElement(FileAttachmentUpload, {
+    onAddItem: onAddAttachment
+  }), userId && /*#__PURE__*/React.createElement(Tooltip, {
+    renderTip: "Record an audio or video comment",
+    placement: "top"
+  }, /*#__PURE__*/React.createElement(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.createElement(IconAttachMediaLine, null)))), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(Button, {
+    focusColor: "info",
+    color: "primary-inverse",
+    onClick: close
+  }, "H\xE6tta vi\xF0")), /*#__PURE__*/React.createElement(Flex.Item, {
+    margin: "0 0 0 x-small"
+  }, /*#__PURE__*/React.createElement(Button, {
+    "data-testid": "send-message-button",
+    color: "primary",
+    onClick: handleSendButton
+  }, "Send"))))))), /*#__PURE__*/React.createElement(AttachmentUploadSpinner, {
+    sendMessage: onSend,
+    isMessageSending: sending,
+    pendingUploads: pendingUploads,
+    sendArgs: pendingSendArgs
+  }), userId && /*#__PURE__*/React.createElement(UploadMedia, {
+    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: UploadMediaStrings,
+      MediaCaptureStrings: MediaCaptureStrings,
+      SelectStrings: SelectStrings
+    },
+    liveRegion: function liveRegion() {
+      return document.getElementById('flash_screenreader_holder');
+    },
+    rcsConfig: {
+      contextId: userId,
+      contextType: 'user'
+    },
+    disableSubmitWhileUploading: true
+  }));
+};
+export default MessageStudentsWhoDialog;

package/es/translated/is/components/Gradebook/dialogs/MessageStudentsWhoDialog/index.stories.js

@@ -0,0 +1,126 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { StoryWrapper } from "../../storybook/decorators.js";
+import MessageStudentsWhoDialog from "../../../../index.js";
+var meta = {
+  title: 'Gradebook/Dialogs/MessageStudentsWhoDialog',
+  component: MessageStudentsWhoDialog,
+  args: {
+    onClose: action('onClose'),
+    onSend: action('onSend')
+  },
+  decorators: [function (Story) {
+    return /*#__PURE__*/React.createElement(StoryWrapper, null, /*#__PURE__*/React.createElement(Story, null));
+  }]
+};
+export 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'
+  }]
+};
+export var Default = {
+  args: {
+    students: mockStudents
+  }
+};
+export var WithFileAttachments = {
+  args: {
+    students: mockStudents,
+    onAddAttachment: action('onAddAttachment'),
+    onDeleteAttachment: action('onDeleteAttachment'),
+    attachments: [{
+      id: 'att-1',
+      display_name: 'rubric.pdf',
+      mime_class: 'pdf'
+    }, {
+      id: 'att-2',
+      display_name: 'instructions.docx',
+      mime_class: 'doc'
+    }]
+  }
+};
+export var WithPendingUploads = {
+  args: {
+    students: mockStudents,
+    onAddAttachment: action('onAddAttachment'),
+    onDeleteAttachment: 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
+    }]
+  }
+};
+export var WithMediaRecording = {
+  args: {
+    students: mockStudents,
+    userId: 'user-123'
+  }
+};
+export var WithObservers = {
+  args: {
+    students: mockStudents,
+    observersByStudentID: mockObservers
+  }
+};
+export var LoadingObservers = {
+  args: {
+    students: mockStudents,
+    isLoadingObservers: true
+  }
+};
+export var NoStudents = {
+  args: {
+    students: []
+  }
+};
+export var FullyEquipped = {
+  args: {
+    students: mockStudents,
+    observersByStudentID: mockObservers,
+    onAddAttachment: action('onAddAttachment'),
+    onDeleteAttachment: action('onDeleteAttachment'),
+    attachments: [{
+      id: 'att-1',
+      display_name: 'rubric.pdf',
+      mime_class: 'pdf'
+    }],
+    userId: 'user-123'
+  }
+};

package/es/translated/is/components/Gradebook/dialogs/MessageStudentsWhoDialog/mediaComment.js

@@ -0,0 +1,79 @@
+var _params;
+import React from 'react';
+import { RemovableItem } from "./messageAttachments.js";
+export var 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.createElement("audio", {
+    src: file.src,
+    controls: true,
+    style: {
+      width: '20rem'
+    }
+  }) :
+  /*#__PURE__*/
+  // eslint-disable-next-line jsx-a11y/media-has-caption
+  React.createElement("video", {
+    src: file.src,
+    controls: true,
+    style: {
+      width: '20rem',
+      height: '11.25rem'
+    }
+  });
+  if (onRemoveMediaComment) {
+    return /*#__PURE__*/React.createElement(RemovableItem, {
+      onRemove: onRemoveMediaComment,
+      screenReaderLabel: "Remove media comment",
+      childrenAriaLabel: "Media comment content"
+    }, player);
+  }
+  return player;
+};
+export var 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: "Loka",
+  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"
+};
+export var 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"
+};
+export var SelectStrings = {
+  USE_ARROWS: "Use Arrows",
+  LIST_COLLAPSED: "List Collapsed",
+  LIST_EXPANDED: "List Expanded",
+  OPTION_SELECTED: _params.option + " Selected"
+};