Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add feat: make winamp's window order configurable; Prevent windows from moving arbitrarily #133

Closed
wants to merge 23 commits into from

Conversation

curiousRay
Copy link

Description of the Change

Closes #10 (#10 (comment))
Closes #83

Added configuration items for winamp block to set the windows' displaying order.

image

The Wordpress blocks can be placed into post/page, as well as sidebar widget. I've set rules separately. If you have any suggestions about these rules, just feel free to leave comments.

  • Main window is forcedly displayed.
  • All windows are NOT able to be dragged arbitrarily.
  • The windows are displayed by the order of configuration only for general viewing mode (not for post/page editing mode)

winamp block in post/page

image

winamp block in sidebar widget

无标题

How to test the Change

  1. Install the plugin
  2. Add a winamp block in post/page/sidebar widget
  3. Load media file so that the player can display
    • The winamp's windows cannot be dragged arbitrarily
  4. In block setting tab, configure EQUALIZER/PLAYLIST/MILKDROP 's position as you wish
    • The position's change won't happen right now in editor mode
  5. Click "Publish"/"Update" to save the post/page, or save the sidebar widget
  6. Preview the post/page, the winamp windows should align according to the configuration.

Note

Known issue before this PR: If two or more blocks appear in the same webpage, only one winamp instance will be created.

image

Changelog Entry

Added - New feature: added configuration items for winamp block to set the windows' displaying order.
Fixed - Bug fix: added javascript code to prevent winamp windows from unwanted moving.

Credits

Props @dejalavidavolar

Checklist:

  • I agree to follow this project's Code of Conduct.
  • I have updated the documentation accordingly.
  • I have added tests to cover my change.
  • All new and existing tests pass.

@jeffpaul jeffpaul requested a review from a team May 13, 2024 16:34
@jeffpaul jeffpaul requested a review from peterwilsoncc May 13, 2024 16:35
@jeffpaul jeffpaul removed the request for review from a team June 10, 2024 17:52
@jeffpaul jeffpaul added this to the 1.4.0 milestone Jun 10, 2024
@jeffpaul jeffpaul removed their request for review June 25, 2024 21:20
@jeffpaul jeffpaul removed the request for review from dkotter June 25, 2024 21:20
@jeffpaul jeffpaul modified the milestones: 1.3.2, 1.4.0 Jun 25, 2024
@jeffpaul jeffpaul requested review from a team and Sidsector9 and removed request for peterwilsoncc and a team July 8, 2024 17:24
Copy link
Member

@Sidsector9 Sidsector9 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @curiousRay, thanks for your PR.

I left some comments based on a high-level review. We may have to reiterate on this PR.

}
value={ currentPosEqu }
>
<ToggleGroupControlOption label={ __( 'Top', 'winamp-block' ) } value="1" />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The text domain everywhere should be retro-winamp-block instead of winamp-block.


//console.log("posEqu: "+posEqu);
//console.log("posList: "+posList);
//console.log("posMilkdrop: "+posMilkdrop);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems like these were added for testing purposes and don't think its necessary for production.

@@ -23,4 +23,102 @@ export const milkdropOptions = {
},
};

const block = document.querySelector( '.wp-block-tenup-winamp-block' );

var posEqu = block?.dataset.posequ || "1";
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

var is discouraged. Use let or const

<ToggleGroupControlOption label={ __( 'Top', 'winamp-block' ) } value="1" />
<ToggleGroupControlOption label={ __( 'Middle', 'winamp-block' ) } value="2" />
<ToggleGroupControlOption label={ __( 'Bottom', 'winamp-block' ) } value="3" />
<ToggleGroupControlOption label={ __( 'Hide', 'winamp-block' ) } value="0" />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The value attributes should have meaningful values such as middle, hide etc instead of numbers so that we it is easily readable.

@@ -0,0 +1,30 @@
/**
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't push asset build files such as .css, .min.js or .map files as these are built before deployment.

@Sidsector9
Copy link
Member

@curiousRay the player window should be draggable on the page, at least on non-mobile screens.

@jeffpaul
Copy link
Member

Closing in favor of starting fresh on #10 #83.

@jeffpaul jeffpaul closed this Sep 12, 2024
@jeffpaul jeffpaul removed this from the 1.4.0 milestone Sep 12, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
4 participants