test plan:
* Go to account settings
* Enable the flag to disable toast notification timeouts
* Do something that would force a toast notification to pop up
(remove a user from/add a user to a course, join a course, etc.)
* Wait *roughly* seven seconds - the toast notification should not
disappear. It will take a day for this notification to disappear.
* Disabling the flag and repeating steps 3 and 4 should result
in the toast notification disappearing after *roughly* seven
seconds as expected.
closes LS-1138
flag = none
Change-Id: I2cacf0bf48568c9b5e88743c44bfd1faececfc51
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/242612
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Ed Schiebel <eschiebel@instructure.com>
QA-Review: Robin Kuss <rkuss@instructure.com>
Product-Review: Peyton Craighill <pcraighill@instructure.com>
Adds an autosave update in the textarea's onchange handler.
Removes the window unload handler, since it was not getting called anyway
closes LS-1074
flag=rce_auto_save
test plan:
- follow the recreate steps in the ticket, because
the syllabus edit page is different from other edit pages
- on re-editing
> expect not to get prompted for autosaved content
> expect the RCE text to be everything you entered last time
- on any other RCE page (edit assignment, announcement, ...
- enter some text in the rce
- flip to html mode and enter some more
- leave w/o saving (refresh or cancel)
- edit again
> expect to be prompted with autosaved content that contains
everything you entered.
- flip to html mode and enter some more text
- save
> expect the saved item to have all the text
- edit again
> expect not to be prompted with autosaved content
Change-Id: I860ebf290ff1494dcf060176041d5e350c1771b0
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/243011
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Alex Anderson <raanderson@instructure.com>
QA-Review: Robin Kuss <rkuss@instructure.com>
Product-Review: Ed Schiebel <eschiebel@instructure.com>
I tried to get a selenium spec to test this, but no matter
what I did, sending a delete or backspace key to the selected
link text just unselected it.
closes LS-1146
flag=rce_enhancements
test plan:
- see recreate steps in the ticket
Change-Id: I9d1a3bf9a3f5959f90d8ea15d2ca77a5a312eab2
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/242307
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Alex Anderson <raanderson@instructure.com>
QA-Review: Robin Kuss <rkuss@instructure.com>
Product-Review: Ed Schiebel <eschiebel@instructure.com>
This gives a more descriptive error message if a user tries to
upload a media file that exceeds the size limit.
Fixes LS-222
flag = rce_enhancements
Test plan:
- Go to an instance of the new RCE
- Click Upload/Record media
- Add a video larger than 500MB
- Expect a message saying 'Size of {file} is greater than the
the maximum {max} MB allowed file size.'
Change-Id: I9a35856832c52c72074d346f756e7678bdf37b83
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/243150
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Alex Anderson <raanderson@instructure.com>
Reviewed-by: Ed Schiebel <eschiebel@instructure.com>
QA-Review: Robin Kuss <rkuss@instructure.com>
Product-Review: Jackson Howe <jackson.howe@instructure.com>
We used to require the user to type a magic kb shortcut to see the menubar.
It's always visible, so we don't require that any more.
This change also fixes focus issues when opening then closing the kb shortcut
modal that was discovered while fixing the RCE's kb shortcuts.
This change also cleans up the kb shortcut handling
closes LS-1183
flag=rce_enhancements
test plan:
- open a page with the RCE
> expect to see the menubar
- anywhere in the editor's content area or menubar or toolbar or statusbar
type: alt-0 or alt-f8
> expect the kb shortcut modal to open
- type ESC or click the close button
> expect focus to return to where it was
- anywhere in the editor's content area or menubar or toolbar or statusbar
- type alt-F9
> expect focus to move to the menubar
> expect arrow keys to move in the menu
> expect TAB to move to the toolbar
> expect ESC to return you to the content area
- anywhere in the editor's content area or menubar or toolbar or statusbar
type alt-f10
> expect focus to move to the toolbar
> expect arrow keys to move among the buttons in the section of the toolbar
> expect tab to move between sections of the toolbar
> expect esc to move to the content area
- fron somewhere before the RCE, tab into it
> expect the show-on-focus-kb-shortcut-button to appear
- click it
> expect the modal to open
- close the modal
> expect focus to return to the magic button
- click the kb shortcut button in the status bar
> expect the modal to open
- close the modal
> expect focus to return to the button
Change-Id: I22549aab501a909cfff78fd9fa05c4ec16a59238
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/242571
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Jeremy Stanley <jeremy@instructure.com>
QA-Review: Robin Kuss <rkuss@instructure.com>
Product-Review: Ed Schiebel <eschiebel@instructure.com>
Once the bits have been uploaded, it can take a while for notorious
to transcode the video and make it available. After a while (time TBD)
show the user an alert telling them we're working on it. If we
eventually give up, tell the user that too. If we get an error, tell
the user that too.
closes LS-565
flag=rce_enhancements
test plan:
- you have 2 choices:
1. record a very long video so it takes notorious a very
long time to process, or
2. cheat
i) add a video to the RCE
ii) in devtools, open media_player_iframe_contents.js
iii) set a conditional breakpoint at or before line 59 where
the CanvasMediaPlayer is rendered. Something like:
ENV.SHOW_MEDIA_SOURCE_BE_PATIENT_MSG_AFTER_ATTEMPTS=2, ENV.MAX_MEDIA_SOURCE_RETRY_ATTEMPTS=4, 0
this will make the transitions happen much faster.
- record a video in the RCE (if you went with #1, loooong, #2, 30sec will do)
> expect to see a spinner
> expect a SR to say "loading"
> after a little while,, expect an info alert telling
you your media has been uploaded but is still being processed, be patient.
> expect a SR to say that too
> after a while longer (#1 == an hour, #2 == ~15sec), expect an alert saying we're giving up"
> expect the SR to say that too
- save your page
- If you wait long enough, the video will eventually appear, or go get
some lunch, come back and refresh the page
- go back to the RCE and record another video
- save
- while the spinner is spinning, but before you see the video, disconnect your network
> expect a failure message in an error alert
the point is, the media player tries for a long while. notorious will eventually
finish its work and the video will be viewable.
Change-Id: Iacc8e5dc877ebecd330b60c8a42a6f717e5cfcea
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/242076
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Jeremy Stanley <jeremy@instructure.com>
QA-Review: Robin Kuss <rkuss@instructure.com>
Product-Review: Ed Schiebel <eschiebel@instructure.com>
HTML entities, like < > and & were being encoded twice in the RCE,
leading to text appearing as & in the editor. This fix removes
the duplicate encoding.
flag = rce_enhancements
Fixes LS-1160
Test plan:
- Create a page whose title contains a special character like &
- Open a page/assignment/etc with the new rce
- Create a 'course link' to that page
- Expect the link to look normal, i.e. no entity symbols
- Create an 'external link' where the text contains a special
character
- Expect normal-looking link
Change-Id: I361d29bc84a04e609aa59db89f813df4e0cd0937
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/242779
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Ed Schiebel <eschiebel@instructure.com>
QA-Review: Robin Kuss <rkuss@instructure.com>
Product-Review: Jackson Howe <jackson.howe@instructure.com>
closes LS-1185
flag=rce_enhancements
test plan:
- open the rce
> expect the external tools toolbar button to be in the section
of the toolbar with Links, Images, Media, and Documents
Change-Id: I80c5f9ed904d33cd99fdfb51b2e981922bb1f350
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/242617
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Jackson Howe <jackson.howe@instructure.com>
QA-Review: Robin Kuss <rkuss@instructure.com>
Product-Review: Ed Schiebel <eschiebel@instructure.com>
Explanation about how to run tests in the RCE package.
flag=none
Change-Id: I166627972712454285fbf8a85f61393815b0f513
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/242792
Reviewed-by: Ed Schiebel <eschiebel@instructure.com>
QA-Review: Ed Schiebel <eschiebel@instructure.com>
Product-Review: Ed Schiebel <eschiebel@instructure.com>
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
The RCE depends on a textarea element on the Wiki edit page to
contain the raw HTML output of the RCE.
That textarea didn't have a label on it, so it failed A11y tests.
This adds the label, but keeps it hidden except when the raw HTML
textarea is shown. Then it shows the label to screen readers.
This also updates the RCE wrapper to handle hiding and showing
the textarea's label along with the textarea.
Test Plan:
Navigate to a page with the RCE Enhancements flag on
Verify that the label doesn't appear to screen readers when the RCE
is showing
Show the HTML editor
The screenreader should announce "Raw HTML Editor" immediately
because the textarea receives focus when you show it.
flag = rce_enhancements
Fixes LS-1155
Change-Id: Id1b9cbe169e095f02e665318e3637657fb0cb098
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/242639
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Jackson Howe <jackson.howe@instructure.com>
QA-Review: Robin Kuss <rkuss@instructure.com>
Product-Review: Alex Anderson <raanderson@instructure.com>
closes LS-1157
flag=rce_enhancements
The problem was that when we flip to html edit mode, half the buttons
are hidden, and this wasn't accounted for.
Also discovered that the unit tests weren't really testing anything.
test plan:
- in the new rce, tab into the status bar.
- use the right and left arrow keys to move focus among the buttons
> expect focus to wrap around when getting to the end
- tab out of the RCE, then shift-tab back in
> expect focus to return to the button that had focus before
- flip to html-edit mode and repeat.
- click on the status bar's kb shortcut button, then close the
popup dialog
> expect focus to return to the button
- click on the a11y checker button, then close the tray
> expect focus to return to the button
Change-Id: I26ca75de153837d9145e122c32044578aaf44af2
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/242490
Reviewed-by: Jackson Howe <jackson.howe@instructure.com>
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
QA-Review: Robin Kuss <rkuss@instructure.com>
Product-Review: Ed Schiebel <eschiebel@instructure.com>
When RCEWrapper renders CanvasContentTray, the tray registers itself
with the bridge. Since the bridge is a singleton, it was stuck
on the last RCE in the page. This commit changes Bridge so it keeps
a map of editor.id -> tray controller. Now it can find the right
controller for the active tray. As a side-effect, the CanvasContentTray
has to know its parent RCE's id, so that's a new prop.
I also added keys to RCEWrapper and CanvasContentTray. Focus management
can get wonky if there are >1 instance of a component on the page, and
w/o the key, React can't tell them apart.
I also changed the Bridge var in RCEWrapper to bridge (lower-case)
since it's an instance, not the class. Just fo clarity.
closes LS-895
flag = rce_enhancements
test plan:
- see the ticket recreate scenario
- it should work for inserting anything from the tray
Change-Id: I0b46d56113ce2a22ecd07831c0f7102d40abc25d
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/242423
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Jeremy Stanley <jeremy@instructure.com>
QA-Review: Jeremy Stanley <jeremy@instructure.com>
Product-Review: Jeremy Stanley <jeremy@instructure.com>
Jest automatically parallelizes tests, and is causing the node to have too high of a load. Splitting this into its own job reduces our timeout failure rates significantly.
Test Plan:
1. Ensure JS test results are accurate
2. Ensure JS skips build execution if previously successful
refs DE-38
Change-Id: Iaabf83bac02427d2686ff407209b3496cf0ca485
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/242095
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: James Butters <jbutters@instructure.com>
Reviewed-by: Ryan Norton <rnorton@instructure.com>
QA-Review: James Butters <jbutters@instructure.com>
Product-Review: Aaron Ogata <aogata@instructure.com>
closes LS-1147
flag = rce_enhancements
test plan: see the ticket acceptance criteria
Change-Id: I16cfa998b419505069556a6fc7a0e8a857b221cb
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/240738
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Alex Anderson <raanderson@instructure.com>
QA-Review: Robin Kuss <rkuss@instructure.com>
Product-Review: Ed Schiebel <eschiebel@instructure.com>
The problem was that in switching from Course Links to
Files, we default to All Files, which has to be in the
user context, not course so we can retrieve the media.
Since we are switching from Links to All Files, it also
didn't make sense for the top drop-down in the tray to have
Course Files and User Files, so that menu is now
just Links and Files. If you've gone from Links -> Files
then change All -> something else (say Images), since we're already
in the user context, we change to User Files / Images.
From there you can change to Course Files if you want.
closes LS-1168
flag=rce_enhancements
test plan:
- in the new rce
- click Links > Course Links from the toolbar
> expect the tray to open
- open the Select where "Links" is currently selected
> expect the options to be "Links" and "Files"
- select "Files"
> expect to see All Files
- change "All" to Documents
> expect to see User Files / Documents
- change to "Links"
> expect to see course links
- try any other transition you can think of.
Change-Id: Ifa695abb7529ab5349429d27ec9835ed4973883a
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/241717
Reviewed-by: Alex Anderson <raanderson@instructure.com>
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
QA-Review: Robin Kuss <rkuss@instructure.com>
Product-Review: Ed Schiebel <eschiebel@instructure.com>
when I replaced tinymce's down-arrow icon with INSTUI's version
I missed a place where we need CSS to size it correctly.
closes LS-1169
flag=rce_enhancements
test plan:
- follow the ticket's recreate scenario
Change-Id: Id7ec9bb8c7fff6a9e77b79fd756d92ed75794df2
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/241723
Reviewed-by: Alex Anderson <raanderson@instructure.com>
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
QA-Review: Ed Schiebel <eschiebel@instructure.com>
Product-Review: Ed Schiebel <eschiebel@instructure.com>
Takes external tools labeled as favorite and includes them in the toolbar.
Embeds the icon into an SVG to be used as the toolbar icon.
Only shows a max of 2 favorite tools.
Also moved the tools favorites to be next to the media upload icons,
as per Peyton's request.
Includes Selenium tests
Test plan:
Enable RCE Enhancements
Activate some apps (Wikipedia and Dropbox work well)
Use Ed's new work to favorite those two apps (or one of them - you do you)
Open an RCE page.
The icons should appear in the toolbar to the right.
Clicking the icon opens up the LTI tool modal properly.
flag = rce_enhancements
Closes LS-532
Change-Id: I96ace173793093f1fd2aa9dba546e7d4cd973c42
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/240530
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Ed Schiebel <eschiebel@instructure.com>
Product-Review: Peyton Craighill <pcraighill@instructure.com>
QA-Review: Robin Kuss <rkuss@instructure.com>
If an image is selected when the user creates a link, link the
image and don't replace it with the link text.
I tried creating a unit test for the change, but it became more about
testing the mock tinymce than it did the actual code.
closes LS-1140
flag = rce_enhanements
test plan:
- add an image to the RCE
- click it, then create a link (external or course, doesn't matter)
> expect the image to be linked and not replaced with text
(you can confirm there's a link there by looking at the HTML view)
- try all manner of other link creating and editing scenarios and
make sure they still work. This is the umteenth time I've tweaked
link editing. Seems I fix 1 thing and break another.
Change-Id: I25316807c03e675186743c8422ee64a94c6cbcef
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/240491
QA-Review: Robin Kuss <rkuss@instructure.com>
Tested-by: Ed Schiebel <eschiebel@instructure.com>
Tested-by: Keith Garner <kgarner@instructure.com>
Product-Review: Ed Schiebel <eschiebel@instructure.com>
Reviewed-by: Alex Anderson <raanderson@instructure.com>
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/241634
Reviewed-by: Ben Rinaca <brinaca@instructure.com>
Tested-by: Ben Rinaca <brinaca@instructure.com>
QA-Review: Ben Rinaca <brinaca@instructure.com>
Product-Review: Ben Rinaca <brinaca@instructure.com>
Refs FOO-649
flag=none
Finishes up the <Spinner> imports, pulling the stuff in from
packages.
Test plan:
* Similar to g/240804, just spot-check some of the stuff in the
planner and RCE to make sure everything is still functioning
Change-Id: I3ee605cd0982fef179a28994a39290ee3f8b2c12
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/240996
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Ahmad Amireh <ahmad@instructure.com>
QA-Review: Ahmad Amireh <ahmad@instructure.com>
Product-Review: Ahmad Amireh <ahmad@instructure.com>
closes LA-541
flag = rce_enhancements
test plan:
- load a page with the RCE
- add content or just drag the handle to make it nearly as tall
as your browser window
- now, scroll the page down
> expect the RCE's scrollbar to remain on visible at the top of the
browser's window.
> expect the contents of the RCE not to bleed into the bottom of
the toolbar (new as of PS3)
- keep scrolling so the RCE is completely out of view
> expect the scrollbar to scroll out of sight
Change-Id: I13960c1ab914cbfb9ba9ce96cedcc6d6597277ca
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/240466
Product-Review: Peyton Craighill <pcraighill@instructure.com>
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Jeremy Stanley <jeremy@instructure.com>
QA-Review: Jeremy Stanley <jeremy@instructure.com>
closes LA-991
flag=rce_enhancements
Replaced a few toolbar icons with the instui versions for consistency.
test plan:
- specs pass and everything still works
Change-Id: Ibb488d6df2457f2e41138e40b3b3d9469eb68215
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/239388
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Product-Review: Ed Schiebel <eschiebel@instructure.com>
Reviewed-by: Jeremy Stanley <jeremy@instructure.com>
QA-Review: Robin Kuss <rkuss@instructure.com>
According to WCAG 2.1, the "status" role is supposed to be used
to announce to the user when something changes. The linked ticket
specifically says we don't want that behavior, so I removed
`aria="status"` from the RCE status bar.
See https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA22.html
Test Plan:
With the RCE Enhancements feature flag on
Navigate to an RCE page
Turn on the screen reader (VoiceOver)
Start typing.
The contents of the status bar are not announced, unless
you navigate the screen reader to that section of the webpage.
flag = rce_enhancements
Closes LS-1072
Change-Id: I74d0262b1a2e22ed3ca3d8f6959c58ad822af57f
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/240268
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Jeremy Stanley <jeremy@instructure.com>
QA-Review: Robin Kuss <rkuss@instructure.com>
Product-Review: Alex Anderson <raanderson@instructure.com>
The files need icons based on their type, especially for media
which display their title, and not filename so the user won't
know what it is. Because the INSTUI TreeBrowser doesn't support
setting per-item icons (see INSTUI-2636), this change works around
that by creating data url with the correct icon's SVG, then using
that as the item's tnumbnail.
Because I edited FileBrowser.js, I had to fix eslint issues found,
and I took the opportunity to address React proptype warnings.
closes LA-1132
flag = rce_enhancements
test plan:
- have a course+user with a variety of file types and
at least 1 audio and 1 video media
- open the content tray, and change to All
- expand the folders
> expect images to have their thumbnail
> expect all other file types to have the appropriate icon
(we distinguish between video, audio, Word, Powerpoint, Excel,
and pdf. everything eles is a generic document icon)
Change-Id: Idbac9e17660b6ba863b589ace454ef6e2337df71
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/240119
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Jeremy Stanley <jeremy@instructure.com>
QA-Review: Robin Kuss <rkuss@instructure.com>
Product-Review: Ed Schiebel <eschiebel@instructure.com>
In the old RCE, images were added and let the prevailing CSS
constrain the width to 100%. With COREFE-241, I incorrectly
thought that was poor UX and constrained the images to be 320px
on the long side when first embedded. Turns out I was wrong.
This change reverts that and lets the images be their natural size,
subject to the 100% max-width constraint, just like the old RCE
closes LA-1127
flag = rce_enhancements
test plan:
- add a large photo to the RCE
> expect it to be constrained in size only by the width of
the RCE
> expect the RCE's height to expand to the eventual rendered
size of the image, and not the image's _real_ height
- save
> expect the same result
- edit again
- use the Image Options tray or drag handles to change
its size
> expect it to respect the new size
- save
> expect it to look like it did before
Change-Id: I9046f1fd2d9dd3af7435e75ff30bc1031e823f02
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/239976
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Jeremy Stanley <jeremy@instructure.com>
QA-Review: Robin Kuss <rkuss@instructure.com>
Product-Review: Ed Schiebel <eschiebel@instructure.com>
closes LA-507
flag=rce_enhancements
test plan:
- in the RCE, select Documents > Course Documents
> expect the tray to open to course documents
- change "Documents" to "All"
> expect "Course Files" to change to "User Files"
> expect the file browser to get populated with all your
folders and files
> expect a new "My Media" folder with all your media listed
- from the "All" tray, click on an image file
> expect it to be embedded, not linked
- repeat for an audio or video
> expect it to be embedded, not linked
- repeat for some other file type
> expect it to be linked
Change-Id: Ic0fb955dcd9924d0055826113eedeb4a8b519a19
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/239202
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Alex Anderson <raanderson@instructure.com>
QA-Review: Robin Kuss <rkuss@instructure.com>
Product-Review: Ed Schiebel <eschiebel@instructure.com>
closes: LA-1100
flag=rce_enhancements
when the video's aspect ratio is such that it's height/width is
less than the container it's been put in, shrink the container down
to match.
test plan:
- create a short-and-wide video (screen capture of a region
using QuickTie works)
- choose upload media and pick it
> expect it to fill the preview area as much as possible
- submit to upload
> expect the box around the video player to shrink to fit the video
- choose upload media and add a "normal" apsect video
> expect the preview to look good
- submit to upload
> expect it to fit in it's container
- add a portrait layout video
> expect the video to be letterboxed, centered in the preview
- submit
> expect it to be letterboxed inside the landscape container
- save
> expect all 3 videos to still be rendered as we expect
- put all the videos into fullscreen and back
> expect them to look right both fullscreen, and after
returning to normal size.
Change-Id: I0ead3e7fc20de1e0046263613f64f511ca3bc9d6
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/239267
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Jeremy Stanley <jeremy@instructure.com>
QA-Review: Robin Kuss <rkuss@instructure.com>
Product-Review: Peyton Craighill <pcraighill@instructure.com>
closes LA-929
flag=rce_enhancements
The canvas files api will reject an empty file, resulting in a generic
error message. Let's stop the user from doing this in the first place
with a better message.
test plan
- in the rce, try uploading an empty file (touch filename will create one)
> expect an error message saying you can't do that
> expect the Submit button to be disabled
- try uploading a non-empty file
> expect it to still work
Change-Id: I6b8b9bedf3f904f5fd25f82d7e29e0b23243b2d7
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/239119
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Jeremy Stanley <jeremy@instructure.com>
QA-Review: Robin Kuss <rkuss@instructure.com>
Product-Review: Peyton Craighill <pcraighill@instructure.com>
RCE images used to be identified by the presence of the data-is-decorative
attribute, and no alt text.This caused a11y audit failures. The new
approach is to mark the image with role="presentation" and leave the allt
text alone. This has the nice side effect of letting the user change her
mind about being decorative w/o losing the alt text.
The image options tray no longer disables the alt text textbox.
closes LA-1116
flag = rce_enhancements
test plan:
- embed an image in the rce (having some text around it will be
helpful later)
- click on it and Options
- in the Image Options tray, check the "Decorative Image" checkbox
- click Done
- inspect the image
> expect role="presentation" to be present
> expect the alt="your text here" to be present
- click the a11y audit button
> expect the image to pass the audit
- save the learning object you were working in
- read the resulting page with a screenreader
> expect the image to be skipped over
Change-Id: Ia0aadd1d65fe207af0b676464078b08e98285761
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/239726
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Jeremy Stanley <jeremy@instructure.com>
QA-Review: Robin Kuss <rkuss@instructure.com>
Product-Review: Ed Schiebel <eschiebel@instructure.com>
There are a couple places in canvas doesn't treat uploaded svg files
as images. When returned from the files api, svg files are missing
a thumbnail url, and the response from canvas on uploading an svg file
misclassified it as a 'file' and not an 'image'
This commit reverts some generalization introduced into mime class categorization.
In an attempt to keep from having to play whack-a-mole with new mime types, I had
introduced changes where anything "image/*" was an image, and the same for "audio/*"
and "video/*", but there are a _lot_ of types I didn't consider that we wouldn't
be able to handle. For example, safari doesn't handle image/webp, so we shouldn't
yet treat that as an image file type.
closes LA-860
flag = rce_enhancements
test plan:
- in the RCE, upload an svg file
> expect it to be previewed in the image > upload dialog
> expect it to be embedded (not linked) in the RCE
- inspect the "create_success" network request's response
> expect the returned "mime_class" to be "image"
- from images > user or course images
> expect the tray to display the svg
- select the svg
> expect it to be embedded, not linked
- from media > record and upload, record audio
> expect it to show up in the rce as the embedded
audio player, and not as a link (this confirms
a fix from an earlier ticket wasn't broken)
Change-Id: I6a2b27550c674555e4f62a97a18091467d094b71
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/239633
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Jeremy Stanley <jeremy@instructure.com>
QA-Review: Robin Kuss <rkuss@instructure.com>
Product-Review: Ed Schiebel <eschiebel@instructure.com>
closes LA-255
flag=rce_enhancements
test plan:
- specs all pass
- the rce still works
Change-Id: Ib33fc1e69d45ce27d36cab4930a6a1afda5b3f8b
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/239373
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Jeremy Stanley <jeremy@instructure.com>
QA-Review: Robin Kuss <rkuss@instructure.com>
Product-Review: Ed Schiebel <eschiebel@instructure.com>
closes LA-729
flag=rce_enhancements
The original intent for the audio player was to size it so the buttons
just fit. This ignored the fact that it's rendered w/in an iframe,
so popup menus are clipped. This change sizes the player to leave
room for those popups.
While the ticket was written against the audio player, the same issues
may occur in the video player, either for portrait videos or videos < 400px
wide when closed captions are present. The original code for
sizing the video player shrank the width to fit
thea video's size, which clipped the buttons. This change sets a minimum
width for the player and letter-boxes the video.
test plan:
- in the new rce
- add an audio file
> expect it to be wide enough to show all the buttons and
tall enough for the speed and volume popups
- add a vertical video
> expect the video sized to fit in the available space in the Computer
tab of the Upload Media modal
- Submit to upload
> expect the player to be wide enough to show all the buttons
- click the fullscreen button
> expect the video to be the height of the screen and letterboxed
- restore to windowed size
> expect the video to return to its letterboxed size
- click the video, then the Options button
- change the video's size
> expect the video to remain letterboxed
- add a horizontal video
> expect the video sized to fit in the available space in the Computer
tab of the Upload Media modal
- submit to upload
> expect the player to be sized to the size of the video
- fullscreen
> expect the video to be letterboxed in the fullscreen player
(if the aspect ration of the video !== that of your monitor,
or fill the screen if they match)
- for the horizontal video, select Opitons and
change the size to be "medium" or "custom" and < 400px wide
and add subtitles
> expect the video to be letterboxed in a 400px wide iframe.
Change-Id: Ib5d08dbd7796985d00f656e38a642ab92939d614
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/238432
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Alex Anderson <raanderson@instructure.com>
QA-Review: Robin Kuss <rkuss@instructure.com>
Product-Review: Ed Schiebel <eschiebel@instructure.com>
It's tricky. When creating a new link, we have to keep the existing text
in place. This is true for external links, course links, document links, etc.
But then when editing the link, we need to update the text according to
what the user entered in the Link Options tray. To that end, we now
keep track of whether the link is being edited or created.
closes LA-1012
flag=rce_enhancements
test plan:
- enter some text into the rce, then select some
- create a link (Link > Course Links or Documents toolbar button)
> expect the selected text to become the link
- click the link then Options button
- change the link text and save
> expect the link text to be updated
- select some of the link text, then click Options
- in the tray, edit the text and save
> expect all the link text to be replaced by the new
text
- click w/in a link, then use Documents to link a new doc
> expect the text to reamin the same, but the link to now
point to the new doc
- select all the text in a link, then use Documents to link
to a new doc
> expect the text to remain the same, but the link to point
to the new doc
- try all kinds of other stuff with editing and creating links
> expect something reasonable to happen. if not, let me know
- select some plain text
- do Links > External Links
> expect the text field in the popup dialog to be populated
with the selected text
- change the text, add a url, and click Done
> expect the created link to use the updated text
Change-Id: I94d0c660897a6c482f8bc6f1011d73616539f472
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/238684
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
QA-Review: Jeremy Stanley <jeremy@instructure.com>
Reviewed-by: Alex Anderson <raanderson@instructure.com>
Product-Review: Ed Schiebel <eschiebel@instructure.com>
Lauren worked with @dans and felt new-improved wording in the
rce's keyboard shortcut popup dialog will suffice.
test plan:
- in the rce, click on the "view keyboard shortcuts" button
> expect the "CTRL+F9" help text to be " Focus element options toolbar"
Change-Id: I9b17888e2aee954a16c493e3a7840a51ff5d014b
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/238880
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Jeremy Stanley <jeremy@instructure.com>
QA-Review: Jeremy Stanley <jeremy@instructure.com>
Product-Review: Ed Schiebel <eschiebel@instructure.com>
Jared Amen