It does not send the right track model, so it breaks r4

This thread is opened on each project to think about a common implementation accros Radio4000 projects.

PORT - which port for development and production should all r4 projects use

For each projects we need different ports, to test them simultaneously:

• development
• production
• testing

ex: use the radio4000-player-vue localhost as source for all projects using it, and test changes on each of them.

development

4000: r4 <- here now
4001: r4-api
4002: r4-player
4003: r4-embed-api

production

Should that be decided too?

• for back-end (express) projects
• for front-end (ember.js, vue.js, react.js)

testing

How do each testing frameworks run tests? On which ports?

I very much see the value in numbering tracks sequentially. But somehow we have reversed the ordering. That is, the latest/newest track you added will always be number 1. So the numbers change, making it pretty useless.

Instead, the oldest track should be number 1.

In my opinion we should shuffle by default for our embeddable players for that real radio feeling.

For shuffle we use this on R4:

// Takes an array and returns a shuffled version.
// It uses this algorithm: http://bost.ocks.org/mike/shuffle/
export function shuffleArray(array) {
	// Return a new array.
	array = array.slice();

	let m = array.length;
	let t;
	let i;

	// While there remain elements to shuffle…
	while (m) {
		// Pick a remaining element…
		i = Math.floor(Math.random() * m--);

		// And swap it with the current element.
		t = array[m];
		array[m] = array[i];
		array[i] = t;
	}
	return array;
}

Currently there are no play or pause events on the player. Would be great to emit those, too.

Let's do

<radio4000-player shuffle="true" />

and make sure it starts with a shuffled track and not the latest?

If you set a trackId the player will fetch the track and the channel from Firebase. If you update the trackId with another track from the same channel, it will still fetch the channel again.

On Radio4000 this means that someone quickly selecting a few different tracks on a radio will trigger tons of relatively large and unnecessary requests.

A quickfix would be to compare the channel to load with the current one and not trigger a new fetch if they are equal. Thoughts?

Right now we have a simple method that maintains a new active property on all tracks. But it does modify the data which vue doesn't like because it is a prop.

as noticed by @jfalxa , the player sometimes do not play next track when one finishes. It seems to just stop.

Let's try to reproduce and find out why.

After changing to Firebase, we use this to find tracks

https://radio4000.firebaseio.com/tracks.json?orderBy=%22channel%22&startAt=%22-JXHtCxC9Ew-Ilck6iZ8%22&endAt=%22-JXHtCxC9Ew-Ilck6iZ8%22

... but when you use orderBy to filter data via REST the results are sorted according to that key e.g. the channel, in this case. But we want tracks sorted by created date. Since we use Firebase, sorting by id (or the key of the object) should also work.

According to https://firebase.google.com/docs/database/rest/retrieve-data#section-rest-ordered-data we should handle sorting in our application.

I think it could be extremely useful for the following reasons:

• adds a URL to present the player and its capacities, anyways we already have one to test during development (we can this URL to the Github repo, we can have a subdomain on r4 too player.radio4000.com)
• with a Netlify setup it gives a URL for each pull request
• can be setup to auto-deploy on production branch
• can help us make a better CI and deployment to npm pipeline

Twitch user olmanicrima brocasts games with Radio4000 as channels.

For that Twitch and Youtube recommand OBS (Open Broadcast Software).

The way it works seems to be that he can "embed" images and URLs into his brodcast images, to do some picture-in-picture integrations.

Problem: it does not render Radio4000 player.

I'll investigate and see if the player-vue can somehow be a fit, or if something has to be done at the r4 level.

Exemple: https://radio4000.com/imperium/tracks/-KsTR9ydrI_cy-7_6d81

Behavior should be:

• either play the track again
• either play next track

Thoughts?

Right now dist/radio4000-player.min.js is serverd by *rawgit.com, on the dev url, not production.

We use it on:

• radio4000-embed-generator : src of the generated script
• radio4000-player-vue : adviced on readme.md
• [radio4000-embed-api] (https://github.com/Internet4000/radio4000-embed-api) : src of the generated iframe because script inside it

Also, we are not using the cdn.rawgit.com url, but he dev one. Not good.

What are the solutions to:

• what cdn should we use? Is it fair for rawgit to use it for production? We don't have much traficm but what when we do?
• how do we fix it at least to use the cdn url?
• let's think about if we need a proxy

Reproduce:

1. Go to https://radio4000.com/oskar
2. Play it
3. If you scroll ~10-20 tracks down in the player (not Radio4000) you'll see lots of "Newcleus" tracks

I created and deleted this track many times while I was testing something. The tracks are NOT appearing in the channel model. But they are still in /tracks. And since the way the player queries tracks is radio4000.firebaseio.com/tracks.json?query... and not through /channels/oskar/tracks we also get tracks that the channel does not have.

What can we do?

We could query channels/id/tracks.json and send a request for each and every one. But that doesn't seem good.

The link on the channel image to Radio4000.com should have target="_blank" since the player is most likely embedded on a page where the listener would like to stay.

But when used on R4, we need it to not open a new window and stay there.

To make this package available on CDNs like jsdelivr and unpkg we push a built and minified version to GitHub in dist/radio4000-player.min.js.

The problem is that it doesn't happen automatically and we (well, I) forget to build before publishing to NPM.

We tried a prepublishOnly hook, which runs before publishing to NPM, but it doesn't make sure that the built file is included in the commit. So doesn't work.

What to do?

Our button doesn't seem to update if you play/pause via the video.

• reverse array so the top track is the latest added
• what system do we use introduce shuffle, and more track-list-manipulation methods

Currently our local playing state doesn't update when the video is played/paused via the native YouTube player.

We need to update it from the playing and ended events. Perhaps others?

Would be nice with a screenshot or two in the readme. Possibly normal + mini dark.

iOS + android
chrome + firefox

when playing radio4000 on the cms or on the player:

• locking the device screen
• changing app (not possible without native app?)
  should not stop the playback session.

How can we do that, in the simplest form possible.

I don't get where it comes from.

• On http://200okrecords.com
  At the end of a video the next one in inserted but does not load (youtube loader keeps spinning).
• Locally I can't get the the app to work.
  Server runs but
  Error: Cannot find module 'vue-custom-element' from '~/Code/internet4000/radio4000-player-vue/src'

What seems to have happended is that this project is not setup to deploy on production branch but master

I am thinking:

• let's fix autoplay
• create production branch
• setup netlify with production branch

We could implement links to open track in the /channel/track view.

• clicking on the track in the marquee, or the marquee itself (wider)
• clicking on the track number in the track list

We should add a LICENSE file.

We except a square image as we know from Radio4000 but in case it's not it will look like this

to fix we can add

height: 100%;
object-fit: cover;

Required for https://github.com/internet4000/explorer-discogs

By default without autoplay the latest track is active but not playing. If you then tap it in the list to play, nothing happens.

Clicking play on the YouTube video or our own play button works.

I just noticed that doesn't even render in IE11. It's because that browser is missing support for Object.assign, which is used somewhere.

Do we fix it? It's probably just configuring babel browser support.
Or do we leave it and say for modern browsers only?

• Make it work in Edge + IE11

Obsolete: This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

The element is obsolete and must not be used. While some browsers still support it, it's not required. In addition, using this element is basically one of the worst things you can do to your users, so please, please don't do it.

source - https://developer.mozilla.org/en/docs/Web/HTML/Element/marquee

When a radio already is playing inside the player, clicking (or hitting w) to play a new radio does not show properly that it is loading in the player.

I think it should.

• maybe clear header and trackList so the loading animations come back in

on load for exemple, https://200okrecords.com/
the player jumps in width

If you seek/scrub the YouTube player while it is playing, it pauses the video. Instead it should continue playing, like on youtube.com

The player will get into an infinite loop between play and pause modes when:

• triple click on the Youtube video
• double click on the Youtube progress bar

Bugs stops if you click again on the progress bar.

Release as "radio4000-player" on NPM starting with version 1.0.0 and from that point following semver?

Example https://infinite-scroll.com/#install

Would be nice to test the component.

https://vuejs.org/v2/guide/unit-testing.html

I see that unpkg.com is moving away from a browser field in package.json, which we're currently using. Have to read up and figure out what the right approach is again…

See https://github.com/unpkg/unpkg/issues/ 63 (whitespace to avoid github linking the issues)

Currently the track-list has a fixed height. To make the player easier to put on your own site it should adapt, as far as possible, to whichever size it has. Should be gg with flexbox!

Header = fixed to two lines of text
Video = aspect ratio with min + max height
Track list = takes up available space
Footer/menu = fixed to "1 line of text" height

If you yarn add radio4000-player you get much more modules than you actually need. Why does it even have vue-router? No idea yet. Since it's not really a node module it should not install ANY package but the radio4000-player.

Let's discuss what we'd like to improve in the player. I can start...

• font-size in header could be 1em for both radio title + track title
• font-size in track list is too small
• do we need a "previous" button?
• can we find unicons for shuffle + prev/next that have the same thickness?
• how would a non-savy user share a radio/track? Are the flows different when you're listening on R4 and when it's just the player?

Test and improve tabbing around the interface. Make sure we have proper, consistent focus styles etc. Tabindex.

Muting YouTube via their interface doesn't update our own isMuted CP. Let's check why.

Rename this component to what?

• radio4000-embed ?

but when our goal is a web-component is embed the right name?

look at sugar-hiccup's image

https://mix.radio4000.com/
https://radio4000.com/sugar-hiccup

it seems that it s taking the wrong one in the array

Currently we do not listen to events from the youtube player when the volume is changed. So our button will go out of sync.

Once we we have a new release of gajus/ember-youtube we can do this.

Therefore, the image on the r4 player, and title, would link to anywhere the parameter playlist.url would specify.

Also, if such a URL is present, we can deactivate the link on track items (which now points to a undefined radio4000 channel).

We're currently not emitting any events on the top-level web component.

The YouTube API sends three different events: onReady, onError and onStateChange.

onStateChange can be one of:

unstarted
ended
playing
paused
buffering
cued

Other (future) providers might send different things but it still seems to be a good starting point for which events we can send. This would allow us to react to the player in Radio4000, for instance to observe when a track is changed.

Examples

• https://developers.google.com/youtube/iframe_api_reference#Events
• https://github.com/CookPete/react-player#callback-props
• https://github.com/oskarrough/ember-youtube#events

Figure out which in which way we want to support themes. What is the recommended way to do it etc.

when player is loaded, locate track does not work on the first track of the list.
If the track changes, it works again.