• Table of contents
• Welcome to Solid Media
  • Set up locally
    • Clone project and installations
  • Getting started with Solid Media
    • Log in with a WebID
    • Add movies
  • Sharing with friends
    • Step 1: Add friends to the Solid profile
    • Step 2: Add friends to the Solid pod
  • Development note
    • Authentication
    • Fetch movie data from a pod
    • Group authentication

Solid Media is a demonstration of the use of Solid in a small media recommendation sharing app.

The application can be downloaded and deployed locally, or accessed at solid-media.

To play with the application you will need a WebID or a Solid pod provided by solidcommunity.net.

If you wish to deploy Solid-media locally, then please follow the instructions below to build the project.

Solid Media is developed using Node.js and snowpack. If you are unfamiliar with them, then you will need to have your npm set up. Please follow this tutorial.

1. Make a directory.

2. Clone on GitHub here:

git clone [email protected]:OxfordHCC/solid-media.git

3. CD into the directory.

4. Set up your snowpack

npm install --save-dev snowpack

Run

npm run start

The application will be opened on your local web browser http://localhost:8080.

A public version can be accessed https://oxfordhcc.github.io/solid-media/. It's still experimental, for example, the import function is still not working. Instead, movies need to be `added' to your pod through the search function. If you notice any other bugs please feel free to raise an issue and we will most value your feedback!

To get started with sharing your movies, you will need a WebID to log into the system, so that you can store movies on your Solid pod and share them with your friends. For now, we recommend you register with solidcommunity.net.

Once you have set up a Solid/WebID then you can log in and start to add movies to your pod.

Currently, the Netflix import function doesn't work very well. But if you input a keyword of your favorite movie, you should see a list of results. You can choose the tick button if you have already watched the movie, or the plus button to add the movie to a list to be watched. And the movie should appear in your list.

Once you have added movies in Solid-Media, you can express your level of interest of a movie by the thumb up or thumb down button, and the movies will show up as your favorites.

Note that this implementation is experimental as group authentication on Solid CSS is still under active development.

One particular thing that Solid-Media supports is sharing movies amongst friends.

At the moment, to enable the sharing of movies between friends one must first set up the friends relationship on their Solid/WebID profile, and this must be set up in two steps and may require some writing of RDF.

Go to https://WEBID.solidcommunity.net/profile/card/me#, and click on the RDF button (third one to the left), so that you can edit friends of yours.

To add a friend's WebID you should use the triple of foaf:knows <webId>, as shown in the code snippet below:

@prefix acl: <http://www.w3.org/ns/auth/acl#>.
@prefix foaf: <http://xmlns.com/foaf/0.1/>.
@prefix ldp: <http://www.w3.org/ns/ldp#>.
@prefix schema: <http://schema.org/>.
@prefix solid: <http://www.w3.org/ns/solid/terms#>.
@prefix space: <http://www.w3.org/ns/pim/space#>.
@prefix vcard: <http://www.w3.org/2006/vcard/ns#>.
@prefix pro: <./>.
@prefix inbox: </inbox/>.
@prefix the: </>.

pro:card a foaf:PersonalProfileDocument; foaf:maker :me; foaf:primaryTopic :me.

:me
    a schema:Person, foaf:Person;
    vcard:fn "JunChiltern";
    ## add your friends with a triple below
    foaf:knows <https://WEBID.solidcommunity.net/> ;

In order to let Solid Media access your friends' movies, you also need to add our friends to your friends Group in your Solid pod.

Go to https://WEBID.solidcommunity.net/ (after you have logged in), and click on the Your Storage tab. From the list of dropdown items, select friends and expand the list (which is equivalent to https://WEBID.solidcommunity.net/friends#group). Click on the pencil icon on the button at the right corner to edit your friend list.

Here you should use the RDF triple foaf:member to express the friend relationship.

@prefix foaf: <http://xmlns.com/foaf/0.1/>.
:group a foaf:Group; 
			foaf:member <https://thechilterns.solidcommunity.net/profile/card#>.

Once finishing setting the above two steps, you will be able to see your friends' movies on the top of the Solid-Media application.

The authentication is handled by Login.tsx and uses @inrupt/solid-client-authn-browser.

The basic structure can be supported using these lines.

async function login() {
  if (!session.info.isLoggedIn && !new URL(window.location.href).searchParams.get("code")) {
    await session.login({
      oidcIssuer: provider,
      clientName: "Playlist example app",
      redirectUrl: window.location.href
    });
  }
} 

Here we used getSolidDataset from @inrupt/solid-client to retrieve movies data from a pod.

const movieList = (await Promise.all(people.map(async x => {
	try {
		const parts = x.id.split('/');
		const pod = parts.slice(0, parts.length - 2).join('/');

		# retrieve the movies from a personal pod, in which `movie` data are stored on the root directory of the pod. 
		
		const moviesDataset = await getSolidDataset(`${pod}/movies`, {fetch: session.fetch});
		
		const movies = getContainedResourceUrlAll(moviesDataset);
		
		return movies.map(m => ({...x, url: m}));
	} catch {
		return [];
	}
}

The metadata about a movie, including its title, a short description and an icon, is retrieved from tbmd:

const urls = getStringNoLocaleAll(movieThing, 'https://schema.org/sameAs');
						
const [tmdbUrl] = urls.filter(x => x.startsWith('https://www.themoviedb.org/'));

const {title, released, icon} = await loadData(tmdbUrl);
						

As noted above, our group authentication is still experimental as the feature is still under active development and may not be universally supported by all solid servers.

The diagram below shows that the sharing of resources on solid pods currently relies on the authentication to be set up at both the profile level and the pod level. We welcome suggestions on any alternative approaches to this current solution, either for the Solid community server or any other Solid server.

• Enabling a friend to control whether they would like to their movies with another friend, instead of having their movies shared by default when they become friends.