Milestone 1.3.2: Import WaveSurfer using yarn and add typedefs for it #9279

nishantwrp · 2020-05-09T12:33:45Z

Overview

~~1. This PR fixes or fixes part of #[fill_in_number_here].~~ #6351
2. This PR does the following: Import WaveSurfer using yarn

Essential Checklist

The PR title starts with "Fix #bugnum: ", followed by a short, clear summary of the changes. (If this PR fixes part of an issue, prefix the title with "Fix part of #bugnum: ...".)
The linter/Karma presubmit checks have passed locally on your machine.
"Allow edits from maintainers" is checked. (See here for instructions on how to enable it.)
- This lets reviewers restart your CircleCI tests for you.
The PR is made from a branch that's not called "develop".

PR Pointers

Oppiabot will notify you when you don't add a PR_CHANGELOG label. If you are unable to do so, please @-mention a code owner (who will be in the Reviewers list), or ask on Gitter.
For what code owners will expect, see the Code Owner's wiki page.
Make sure your PR follows conventions in the style guide, otherwise this will lead to review delays
Never force push. If you do, your PR will be closed.

oppiabot · 2020-05-09T12:33:47Z

Assigning @vojtechjelinek for the first-pass review of this pull request. Thanks!

vojtechjelinek

Nice! Thanks, LGTM!

vojtechjelinek · 2020-05-09T13:23:31Z

@kevinlee12 @kevintab95 @DubeySandeep @aks681 @marianazangrossi PTAL

aks681

Lgtm for the one codeowner file.

kevinlee12

lgtm!

kevintab95

LGTM for code-owner file. Thanks @nishantwrp!

ankita240796

LGTM from code-owner's perspective, Thanks @nishantwrp!

DubeySandeep

@nishantwrp, Thanks for the PR, I have left a few questions for the changes below, PTAL!

DubeySandeep · 2020-05-09T21:35:24Z

...oration-editor-page/translation-tab/audio-translation-bar/audio-translation-bar.directive.ts

@@ -48,7 +48,8 @@ require('services/context.service.ts');
 require('services/editability.service.ts');
 require('services/id-generation.service.ts');
 require('services/user.service.ts');
-const WaveSurfer = require('third-party-imports/wave-surfer.import.ts');
+
+import WaveSurfer from 'wavesurfer.js';


Do wee need parenthesis around WaveSurfer?
Also, can you please share the image of the audio waves in the translation tab after this change?

No we don't need parenthesis.

Here is an image

DubeySandeep · 2020-05-09T21:35:24Z

package.json

@@ -112,6 +112,7 @@
    "gifshot": "^0.4.5",
    "lodash": "^4.17.14",
    "mathjs": "^6.6.4",
-    "moment": "^2.24.0"
+    "moment": "^2.24.0",
+    "wavesurfer.js": "^3.3.3"


Can you please test this feature thoroughly (as you update the version from 2.2.1 to 3.3.3)?

The translation was being played correctly. What other things do I need to test?

Slider bar, rendering, check the console, wave for small audio wave for big audio (intime or size). etc.

Actually I’m not sure about the expected behaviour. Can you do that please?

Btw, can you set it to "3.3.3" without ^ so that it doesn't get updated automatically and the coherence with the type definitions is kept.

DubeySandeep · 2020-05-09T21:35:24Z

typings/wavesurfer-defs.d.ts

@@ -0,0 +1,73 @@
+// Code - https://raw.githubusercontent.com/katspaugh/wavesurfer.js/master/src/wavesurfer.js


Wanted to check whether we need to update this whenever we update the wave surfer version?

Yup, will add a lint check later on for this too.

Do we have any (github) issue for that? Also, how would we catch this till we have this check?

Ah, actually the lint check will not check that the code link is correct. It will be there so that the dev is aware that the type defs were for a previous version and they may have changed now.

Still, my question persists i.e, until we don't have that "warning through lint checks" how would we catch this during any update?

I guess we can do that manually, as I don't think type defs would be updated so frequently.

@DubeySandeep Since I'm mostly responsible for library upgrades I can make sure that the type definitions are correct until we have the lint check.

DubeySandeep · 2020-05-09T21:35:24Z

typings/wavesurfer-defs.d.ts

@@ -0,0 +1,73 @@
+// Code - https://raw.githubusercontent.com/katspaugh/wavesurfer.js/master/src/wavesurfer.js


Also, why are we using the master branch file here? Should we use this file from v3.3.3?

Oh, yeah correct. Done

Have you tested the type.defs with the file in v3.3.3 (as it can be different from master branch)?

Yup! Did that just now.

nishantwrp · 2020-05-09T21:59:13Z

@DubeySandeep Addressed your comments. PTAL!

vojtechjelinek · 2020-05-10T09:24:37Z

@DubeySandeep @marianazangrossi PTAL

codecov · 2020-05-10T09:35:54Z

Codecov Report

Merging #9279 into develop will decrease coverage by 0.01%.
The diff coverage is 100.00%.

@@             Coverage Diff             @@
##           develop    #9279      +/-   ##
===========================================
- Coverage    53.54%   53.54%   -0.01%     
===========================================
  Files          875      874       -1     
  Lines        36278    36284       +6     
  Branches      4295     4295              
===========================================
+ Hits         19424    19425       +1     
- Misses       15908    15913       +5     
  Partials       946      946

Flag	Coverage Δ
#frontend	`53.54% <100.00%> (-0.01%)`	⬇️

Impacted Files	Coverage Δ
...translation-bar/audio-translation-bar.directive.ts	`6.21% <100.00%> (ø)`
.../topic-editor-page/topic-editor-page.controller.ts	`57.14% <0.00%> (-2.86%)`	⬇️
...entity-creation-services/topic-creation.service.ts	`12.50% <0.00%> (-1.29%)`	⬇️
...ions/interactions/interactionsQuestionsRequires.ts	`100.00% <0.00%> (ø)`

…rn-wavesurfer

marianadasilvadev

LGTM as codeowner!

DubeySandeep

@nishantwrp, Just a last few minor comments, PTAL!

DubeySandeep · 2020-05-10T16:18:35Z

package.json

@@ -112,6 +112,7 @@
    "gifshot": "^0.4.5",
    "lodash": "^4.17.14",
    "mathjs": "^6.6.4",
-    "moment": "^2.24.0"
+    "moment": "^2.24.0",
+    "wavesurfer.js": "3.3.3"


Can you please create an issue to add '^` here once we have the warning functionality? [This will help us to track this task]

DubeySandeep · 2020-05-10T16:18:35Z

typings/wavesurfer-defs.d.ts

@@ -0,0 +1,81 @@
+// Code (Release 3.3) - https://github.com/katspaugh/wavesurfer.js/blob/4421b44e205c76359407ae995dcb8b8453f903a1/src/wavesurfer.js


Release 3.3.3*

DubeySandeep · 2020-05-10T16:18:35Z

typings/wavesurfer-defs.d.ts

@@ -0,0 +1,81 @@
+// Code (Release 3.3) - https://github.com/katspaugh/wavesurfer.js/blob/4421b44e205c76359407ae995dcb8b8453f903a1/src/wavesurfer.js


Should we use this URL: https://raw.githubusercontent.com/katspaugh/wavesurfer.js/3.3.3/src/wavesurfer.js

nishantwrp added 2 commits May 9, 2020 17:55

Import WaveSurfer using yarn

876db25

Use yarn for install wave-surfer

33c4682

nishantwrp added the PR CHANGELOG: Speed improvement -- @vojtechjelinek label May 9, 2020

nishantwrp requested review from aks681, DubeySandeep, kevinlee12, kevintab95, marianadasilvadev and vojtechjelinek as code owners May 9, 2020 12:33

oppiabot bot assigned vojtechjelinek May 9, 2020

vojtechjelinek approved these changes May 9, 2020

View changes

vojtechjelinek assigned kevinlee12, kevintab95, DubeySandeep, aks681 and marianadasilvadev and unassigned vojtechjelinek May 9, 2020

nishantwrp marked this pull request as draft May 9, 2020 13:28

Types for wavesurfer

81579e2

nishantwrp marked this pull request as ready for review May 9, 2020 13:38

nishantwrp requested a review from ankita240796 as a code owner May 9, 2020 13:39

nishantwrp assigned ankita240796 May 9, 2020

nishantwrp changed the title ~~Import WaveSurfer using yarn~~ Milestone 1.2.2: Import WaveSurfer using yarn May 9, 2020

nishantwrp changed the title ~~Milestone 1.2.2: Import WaveSurfer using yarn~~ Milestone 1.2.2: Import WaveSurfer using yarn and add typedefs for it May 9, 2020

nishantwrp changed the title ~~Milestone 1.2.2: Import WaveSurfer using yarn and add typedefs for it~~ Milestone 1.3.2: Import WaveSurfer using yarn and add typedefs for it May 9, 2020

aks681 approved these changes May 9, 2020

View changes

aks681 removed their assignment May 9, 2020

kevinlee12 approved these changes May 9, 2020

View changes

kevinlee12 removed their assignment May 9, 2020

kevintab95 approved these changes May 9, 2020

View changes

kevintab95 removed their assignment May 9, 2020

ankita240796 approved these changes May 9, 2020

View changes

ankita240796 removed their assignment May 9, 2020

DubeySandeep requested changes May 9, 2020

View changes

Updated code link

bc178e3

DubeySandeep assigned nishantwrp and unassigned DubeySandeep May 9, 2020

Update package.json

08458e8

nishantwrp assigned DubeySandeep and unassigned nishantwrp May 10, 2020

nishantwrp added 2 commits May 10, 2020 19:04

Namespace

8138f34

Merge branch 'yarn-wavesurfer' of github.com:nishantwrp/oppia into ya…

d624808

…rn-wavesurfer

marianadasilvadev approved these changes May 10, 2020

View changes

DubeySandeep reviewed May 10, 2020

View changes

DubeySandeep assigned nishantwrp and unassigned DubeySandeep May 10, 2020

nishantwrp mentioned this pull request May 10, 2020

Add a lint check to check whether the type defs need to be updated #9287

Closed

Update wavesurfer-defs.d.ts

fee7181

nishantwrp requested a review from DubeySandeep May 10, 2020 16:34

nishantwrp assigned DubeySandeep and unassigned nishantwrp May 10, 2020

DubeySandeep approved these changes May 10, 2020

View changes

DubeySandeep merged commit bb4edae into oppia:develop May 11, 2020
17 of 18 checks passed

DubeySandeep mentioned this pull request May 20, 2020

Milestone 1.5: Add a check for checking the version of third party type defs #9310

Merged

4 tasks

		@@ -0,0 +1,73 @@
		// Code - https://raw.githubusercontent.com/katspaugh/wavesurfer.js/master/src/wavesurfer.js

		@@ -0,0 +1,81 @@
		// Code (Release 3.3) - https://github.com/katspaugh/wavesurfer.js/blob/4421b44e205c76359407ae995dcb8b8453f903a1/src/wavesurfer.js

Milestone 1.3.2: Import WaveSurfer using yarn and add typedefs for it #9279

Milestone 1.3.2: Import WaveSurfer using yarn and add typedefs for it #9279

Conversation

nishantwrp commented May 9, 2020 • edited

Overview

Essential Checklist

PR Pointers

oppiabot bot commented May 9, 2020

vojtechjelinek left a comment

Choose a reason for hiding this comment

vojtechjelinek commented May 9, 2020

aks681 left a comment

Choose a reason for hiding this comment

kevinlee12 left a comment

Choose a reason for hiding this comment

kevintab95 left a comment

Choose a reason for hiding this comment

ankita240796 left a comment

Choose a reason for hiding this comment

DubeySandeep left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DubeySandeep May 9, 2020 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nishantwrp commented May 9, 2020

vojtechjelinek commented May 10, 2020

codecov bot commented May 10, 2020 • edited

Codecov Report

marianadasilvadev left a comment

Choose a reason for hiding this comment

DubeySandeep left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nishantwrp commented May 9, 2020 •

edited

DubeySandeep May 9, 2020 •

edited

codecov bot commented May 10, 2020 •

edited