Comments (5)
On it :)
from openwhyd.
That's awesome! Thank you Claire!
from openwhyd.
I just found my work in progress on an embedded player that can be loaded dynamically (i.e. by loading a JavaScript file, instead of integrating an iframe) and customized by its hosting page:
- source code of the dynamic player embed: js/whydEmbed.js
- example of use: demo (source code: html + css)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>New OpenWhyd Embed</title>
<link rel="stylesheet" type="text/css" href='/html/testWhydEmbed.css'></link>
</head>
<body>
<div id="coucou"></div>
<script src='/js/whydEmbed.js?id=coucou&path=https://openwhyd.org/u/53034dbe7e91c862b2b59270/playlist/1'></script>
</body>
</html>
.whydEmbed {
color: #555;
font-family: helvetica, arial;
font-size: 14px;
}
.whydEmbed * {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.whydEmbed > div {
position: relative;
width: 300px;
height: 200px;
overflow:hidden;
background: #333;
background-size: cover;
background-position: 50% 50%;
}
.whydEmbed > div * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.whydEmbed ul {
width: 300px;
height: 100px;
overflow-x: hidden;
padding-left: 20px;
list-style: none;
padding: 0;
background: #ddd;
}
.whydEmbed li {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: normal;
cursor: pointer;
white-space: nowrap;
padding: 5px;
text-shadow: 0 1px 0 rgba(255,255,255,1);
border-top: 1px solid #eee;
border-bottom: 1px solid #888;
}
.whydEmbed li span {
display: inline-block;
height: 14px;
width: 12px;
margin: 0px 6px;
background: transparent url("/images/icon-embedv2-play-pause.png") no-repeat 0 -14px;
}
.whydEmbed li:hover {
background: #f0f1f2;
}
from openwhyd.
Otherwise, you can find the previous and current version of the player embed in these files:
Both are loaded by app/templates/feed.js (which indentation is completely broken, for some reason => needs fixing), based on the value of the format
parameter of any track list endpoint.
Suggestion: create files feedEmbedV3.html and feedEmbedV3.css, and add them to feed.js, in a way to not break existing integration of openwhyd playlist embeds on external websites (they should still be able to use V1 or V2).
from openwhyd.
Nobody asked for this in a long time.
from openwhyd.
Related Issues (20)
- prevent occasional `The Cypress App could not be downloaded` error from making CI fail on unrelated jobs
- Performance issue on rendering of home feed HOT 5
- Performance issue on the fetching of `activity` history HOT 1
- Make sure that DB state is properly reset between execution of each API test suite
- `This is not the tsc command you are looking for` error in docker build
- Idea: use buildpack instead of dockerfile
- optim: `web` docker image to leave no waste behind, when iterating on source code HOT 1
- `The play() request was interrupted by a call to pause` error reported by Cypress HOT 1
- new users are not systematically redirected after signing up
- very old posts featured in hot tracks HOT 4
- CI optim: reduce the time between merging a PR and deploying it in production
- Help Facebook to review Login HOT 2
- import users' Facebook id to Auth0 too, so users can still login to Openwhyd using their Facebook account, after migrating to Auth0
- `npm install` fails on apple silicon
- Logout does not work as expected HOT 6
- don't sent "welcome" email when logging in thru `/register`
- should register the user's handle for users signing up using auth0
- Add support for Newgrounds HOT 2
- unable to post a MP3 HOT 1
- Auth0: don't ask users to re-login everyday HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from openwhyd.