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 initial pass at queue details support #288

Draft
wants to merge 5 commits into
base: main
Choose a base branch
from

Conversation

rmccue
Copy link
Contributor

@rmccue rmccue commented Feb 6, 2021

See #273.

Adds a new useQueue hook which provides the ability to fetch both the full queue's length and details for each item within it. This builds on the GCKMediaQueue functionality under the hood.

For example, this can be used to show the queued items to the user with something like:

import React, { useEffect, useState } from 'react';
import { FlatList, Text, View } from 'react-native';
import { MediaQueueItem } from '../react-native-google-cast/src';
import MediaQueue from '../react-native-google-cast/src/api/MediaQueue';
import useQueue from '../react-native-google-cast/src/api/useQueue';

interface ItemProps {
	id: number,
	queue: MediaQueue,
}
const QueueItem = ( props: ItemProps ) => {
	const [ item, setItem ] = useState<MediaQueueItem | null>( null );
	useEffect( () => {
		props.queue.getItemById( props.id ).then( item => setItem( item ) );
	}, [ props.id ] );

	return (
		<View>
			<Text>{ item?.mediaInfo.metadata?.title || 'Loading…' }</Text>
		</View>
	)
}

export default function Queue() {
	const queue = useQueue();

	if ( queue === null ) {
		return null;
	}

	return (
		<FlatList
			data={ queue.queuedIds }
			keyExtractor={ id => `${ id }` }
			renderItem={ ( { item } ) => (
				<QueueItem
					id={ item }
					queue={ queue }
				/>
			) }
		/>
	);
}

I have not yet implemented error handling (so the promises can hang forever), nor added full inline documentation, so leaving as draft for now. The JS side of things is also a little janky right now.

@ghost
Copy link

ghost commented Feb 6, 2021

DeepCode's analysis on #260046 found:

  • ℹ️ 1 minor issue. 👇

Top issues

Description Example fixes
Missing JSDoc return type. Occurrences: 🔧 Example fixes

👉 View analysis in DeepCode’s Dashboard | Configure the bot

@rmccue
Copy link
Contributor Author

rmccue commented Mar 20, 2021

@petrbela I'm happy to clean up any final stuff on here and prepare it for merge, but before I do so, can I get a 👍 or 👎 on the approach? I'm using this in my app, and it's been fairly easy to integrate, but happy to consider alternative API designs if you'd prefer.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant