TS-ify Audio components #1311

obulat · 2022-04-21T05:15:50Z

Fixes

This belongs to TS-ification milestone.

Description

This PR converts the Audio components to TypeScript. It also extracts some audio-related constants to constants/audio: layouts, sizes and statuses. I'm not sure that is the best place for them.

Testing Instructions

The CI should pass, and there should be no errors or warnings on the audio pages.

Checklist

My pull request has a descriptive title (not a vague title like Update index.md).
My pull request targets the default branch of the repository (main) or a parent feature branch.
My commit messages follow best practices.
My code follows the established code style of the repository.
I added or updated tests for the changes I made (if applicable).
I added or updated documentation (if applicable).
I tried running the project locally and verified that there are no visible errors.

Developer Certificate of Origin

Developer Certificate of Origin
Version 1.1

Copyright (C) 2004, 2006 The Linux Foundation and its contributors.
1 Letterman Drive
Suite D4700
San Francisco, CA, 94129

Everyone is permitted to copy and distribute verbatim copies of this
license document, but changing it is not allowed.


Developer's Certificate of Origin 1.1

By making a contribution to this project, I certify that:

(a) The contribution was created in whole or in part by me and I
    have the right to submit it under the open source license
    indicated in the file; or

(b) The contribution is based upon previous work that, to the best
    of my knowledge, is covered under an appropriate open source
    license and I have the right under that license to submit that
    work with modifications, whether created in whole or in part
    by me, under the same open source license (unless I am
    permitted to submit under a different license), as indicated
    in the file; or

(c) The contribution was provided directly to me by some other
    person who certified (a), (b) or (c) and I have not modified
    it.

(d) I understand and agree that this project and the contribution
    are public and that a record of the contribution (including all
    personal information I submit with it, including my sign-off) is
    maintained indefinitely and may be redistributed consistent with
    this project or the open source license(s) involved.

sarayourfriend

Some comments on casts mostly, how we can avoid them and/or how to push them down so that we're casting smaller expressions.

Casts are really powerful but they are also a hammer! Usually we want to try to thread needles with types so that we're not "forcing" things together.

src/components/VAudioThumbnail/VAudioThumbnail.vue

src/components/VAudioTrack/VAudioTrack.vue

src/components/VAudioTrack/VGlobalAudioTrack.vue

src/components/VAudioTrack/VPlayPause.vue

src/components/VAudioTrack/VWaveform.vue

tsconfig.json

Co-authored-by: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com>

sarayourfriend

LGTM! 🎉 Great work 😁

sarayourfriend · 2022-04-22T07:10:52Z

test/tapes/response-239.json5

@@ -0,0 +1,69 @@
+{


Looks like related image requests don't have custom tape names 😢

This is actually a request for an image with an id that doesn't exist (foo). Since the tape name are generated using a UUID regex, this is expected. We could edit the regex to be more broad so that this specific case is caught, too.

Ahhhh, okay! Makes sense then 🙂

# Conflicts: # src/components/VAudioTrack/VPlayPause.vue # src/locales/po-files/openverse.pot # test/tapes/related_audio_2e38ac1e-830c-4e9c-b13d-2c9a1ad53f95_keep-alive.json5 # test/tapes/related_images_da5cb478-c093-4d62-b721-cda18797e3fb_keep-alive.json5 # test/tapes/response-239.json5 # tsconfig.json

obulat · 2022-04-25T14:31:21Z

src/components/VAudioTrack/VAudioTrack.vue

    const layoutComponent = computed(() => layoutMappings[props.layout])

    /**
     * Sets default size if not provided.
     */
    const _size = computed(() => {
      if (isBoxed && !props.size) {
-        return null
+        return undefined


This value is used to set the inline style width in VBoxLayout, and null is not valid there:
<div :style="{ width }">

# Conflicts: # src/components/VAudioTrack/layouts/VBoxLayout.vue # test/tapes/related_audio_2ecd5631-c48c-4a5f-89c4-83c44dbbd365_keep-alive.json5 # test/tapes/related_images_f9384235-b72e-4f1e-9b05-e1b116262a29_keep-alive.json5

* Stop playing audio when global player is closed * Revert change from flex to inline-flex

krysal

Amazing work!

krysal · 2022-04-28T14:26:52Z

src/components/VAudioTrack/VPlayPause.vue

-    isPlaying(): boolean {
-      return this.status === 'playing'
-    },
+  setup(props, { emit }) {


Fully converted to use the setup function, nice!

krysal · 2022-04-28T14:46:50Z

src/components/VAudioTrack/VAudioTrack.vue

+    audio: {
+      type: Object as PropType<AudioDetail>,
+      required: true,
+    },


This typing syntax really helps to clean files ✨

src/components/VGlobalAudioSection/VGlobalAudioSection.vue

Co-authored-by: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com>

obulat added 5 commits April 20, 2022 20:58

TS-ify VWaveform

1c69b8d

TS-ify VFullLayout

f698e88

TS-ify Layouts and Thumbnail

84915fb

TS-ify all audio components

b1df6d0

Use timestamps as feature name everywhere

14b0dc0

obulat requested a review from a team as a code owner April 21, 2022 05:15

obulat requested review from krysal and dhruvkb April 21, 2022 05:15

openverse-bot added the 🚦 status: awaiting triage Has not been triaged & therefore, not ready for work label Apr 21, 2022

sarayourfriend reviewed Apr 21, 2022

View reviewed changes

obulat and others added 5 commits April 21, 2022 09:29

Update src/components/VAudioThumbnail/VAudioThumbnail.vue

8071758

Co-authored-by: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com>

Update src/components/VAudioTrack/VGlobalAudioTrack.vue

2156672

Co-authored-by: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com>

Update tsconfig.json

9b368c2

Co-authored-by: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com>

Apply code review suggestions

9764f93

Apply code review suggestions

aa2c541

obulat added 4 commits April 21, 2022 18:11

Apply code review suggestions

dc99ac4

Add missing tapes

30fe9fa

Move csstype type augmentations to a separate module

1d5f1a3

Remove unnecessary validators

502e105

sarayourfriend approved these changes Apr 22, 2022

View reviewed changes

obulat commented Apr 25, 2022

View reviewed changes

obulat added 2 commits April 26, 2022 12:45

Merge branch 'main' into ts_vwaveform

9be785e

# Conflicts: # src/components/VAudioTrack/layouts/VBoxLayout.vue # test/tapes/related_audio_2ecd5631-c48c-4a5f-89c4-83c44dbbd365_keep-alive.json5 # test/tapes/related_images_f9384235-b72e-4f1e-9b05-e1b116262a29_keep-alive.json5

Remove thumb tape changes

6525eb0

obulat mentioned this pull request Apr 27, 2022

Stop playing audio when global player is closed #1335

Merged

7 tasks

Stop playing audio when global player is closed (#1335)

df0636e

* Stop playing audio when global player is closed * Revert change from flex to inline-flex

krysal approved these changes Apr 28, 2022

View reviewed changes

sarayourfriend approved these changes Apr 28, 2022

View reviewed changes

src/components/VGlobalAudioSection/VGlobalAudioSection.vue Outdated Show resolved Hide resolved

obulat and others added 2 commits April 28, 2022 18:56

Update src/components/VGlobalAudioSection/VGlobalAudioSection.vue

68d4349

Co-authored-by: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com>

merge main

5966d6b

obulat merged commit d434a07 into main Apr 28, 2022

obulat deleted the ts_vwaveform branch April 28, 2022 16:18

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

TS-ify Audio components #1311

TS-ify Audio components #1311

obulat commented Apr 21, 2022 •

edited

Loading

sarayourfriend left a comment

sarayourfriend left a comment

sarayourfriend Apr 22, 2022

obulat Apr 22, 2022

sarayourfriend Apr 22, 2022

obulat Apr 25, 2022

krysal left a comment

krysal Apr 28, 2022

krysal Apr 28, 2022

TS-ify Audio components #1311

TS-ify Audio components #1311

Conversation

obulat commented Apr 21, 2022 • edited Loading

Fixes

Description

Testing Instructions

Checklist

Developer Certificate of Origin

sarayourfriend left a comment

Choose a reason for hiding this comment

sarayourfriend left a comment

Choose a reason for hiding this comment

sarayourfriend Apr 22, 2022

Choose a reason for hiding this comment

obulat Apr 22, 2022

Choose a reason for hiding this comment

sarayourfriend Apr 22, 2022

Choose a reason for hiding this comment

obulat Apr 25, 2022

Choose a reason for hiding this comment

krysal left a comment

Choose a reason for hiding this comment

krysal Apr 28, 2022

Choose a reason for hiding this comment

krysal Apr 28, 2022

Choose a reason for hiding this comment

obulat commented Apr 21, 2022 •

edited

Loading