First pass on video drawer

[rhysyngsun]

Pre-Flight checklist

• Screenshots and design review for any changes that affect layout or styling
  • Desktop screenshots
  • Mobile width screenshots
  • Tag @Ferdi or @pdpinch for review
• Migrations
  • Migration is backwards-compatible with current production code
• Testing
  • Code is tested
  • Changes have been manually tested

What are the relevant tickets?

(Required)

What's this PR do?

(Required)

How should this be manually tested?

• Reimport youtube videos (course_catalog.etl.pipelines.youtube_etl())
• Go to search page and verify the drawer works and data displays as expected (e.g. duration, etc)

Screenshots (if appropriate)

Desktop:

Mobile:

[pdpinch]

Looks good, but we have an updated design in InVision: https://projects.invisionapp.com/d/main#/console/17477251/390731424/preview

[rhysyngsun]

@pdpinch if you're referring the styling differences, I discussed with @abdulkdawson friday about that, the conclusion out of that was that new styling for all of the drawer designs is out of scope for this work since that styling is shared across all the drawer types, so this PR focuses on the functional display of the information relevant to video types and the playback of the video.

If you're referring to the partial height of the drawer, I also discussed that with Abdul since it's a departure from our other drawer designs. Some preliminary testing of mine indicated that this will cause some overall issues with scrolling of the sidebar, particularly on mobile. My opinion is that this is likely to be fussy and delicate at best (on top of the drawer already being fussy and delicate). I don't think there was a decision for that particular design aspect so I left this as-is until I heard otherwise.

[pdpinch]

I was referring primarily to the first issue — thank you for checking with Abdul about that. Am I correct in assuming, then, that you’re not making any significant changes to the styling in this PR?

[rhysyngsun]

@pdpinch there are no styling changes at all - the player embed didn't need any adjustments so the default styling already defined for the drawer is what we're getting here.

[codecov-io]

Codecov Report

Merging #2372 into master will increase coverage by 0.01%.
The diff coverage is 98.92%.

@@            Coverage Diff             @@
##           master    #2372      +/-   ##
==========================================
+ Coverage   95.25%   95.26%   +0.01%     
==========================================
  Files         677      679       +2     
  Lines       25745    25830      +85     
  Branches      847      847              
==========================================
+ Hits        24524    24608      +84     
- Misses       1099     1100       +1     
  Partials      122      122

Impacted Files	Coverage Δ
course_catalog/etl/youtube.py	93.87% <ø> (ø)	⬆️
...components/ExpandedLearningResourceDisplay_test.js	100% <100%> (ø)	⬆️
static/js/lib/constants.js	100% <100%> (ø)	⬆️
static/js/factories/learning_resources.js	100% <100%> (ø)	⬆️
static/js/lib/learning_resources_test.js	100% <100%> (ø)	⬆️
static/js/lib/queries/embedly.js	100% <100%> (ø)
static/js/components/TruncatedText.js	88.88% <100%> (+3.17%)	⬆️
...tatic/js/components/LearningResourceDrawer_test.js	100% <100%> (ø)	⬆️
course_catalog/models.py	96.82% <100%> (+0.02%)	⬆️
static/js/lib/url.js	100% <100%> (ø)	⬆️
... and 7 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 1a2d027...8288047. Read the comment docs.

[alicewriteswrongs]

works great!

my one question is if we want to make it easier / more obvious how to open the video in a new tab - just wondering because some of these videos are quite long and watching a one-hour video from the drawer seems a bit fragile - like it might be frustrating for the user to get 15 minutes in and then accidentally click outside the drawer and lose their progress.

idk, just something that occurred to me, what do you think @abdulkdawson ?

[alicewriteswrongs]

looks great!

[alicewriteswrongs]

seems like something moment should support itself!

[abdulkdawson]

@aliceriot I completely agree with you on this one. I may have to run this past Ferdi and Peter.