React Circle Media Player

Developer
Travis Arnold
Size
5,566 Kb
Views
34,408
  1. React Circle Media Player Previews
  2. React Circle Media Player HTML Codes
  3. React Circle Media Player CSS Codes
  4. React Circle Media Player JS Codes

How do I make an react circle media player?

Made with https://github.com/souporserious/react-media-player. What is a react circle media player? How do you make a react circle media player? This script and codes were developed by Travis Arnold on 12 September 2022, Monday.

React Circle Media Player Previews
IQ Test

React Circle Media Player - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>React Circle Media Player</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .circle-media-player { display: inline-block; padding: 0; margin: 0; border: 0; line-height: 0; background-color: transparent; fill: none; stroke: #D7DBDC; stroke-width: 3; cursor: pointer; outline: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.circle-media-player svg { position: relative;
}
.circle-media-player__foreground { stroke: #FF982E; transition: 350ms stroke-dashoffset; transform: rotate(-90deg); transform-origin: 50% 50%;
}
.circle-media-player__play,
.circle-media-player__pause { fill: #FF982E; stroke-width: 0;
}
.promo { position: absolute; bottom: 20px; right: 20px;
}
.promo a,
.promo a:active,
.promo a:visited { color: #FF982E;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="app"></div>
<small class="promo">Made with <a href="https://github.com/souporserious/react-media-player" target="_blank">React Media Player</a></small> <script src='https://fb.me/react-0.14.1.js'></script>
<script src='https://fb.me/react-dom-0.14.1.js'></script>
<script src='https://cdn.rawgit.com/souporserious/react-media-player/master/dist/react-media-player.js'></script> <script src="js/index.js"></script>
</body>
</html>

React Circle Media Player - Script Codes CSS Codes

.circle-media-player { display: inline-block; padding: 0; margin: 0; border: 0; line-height: 0; background-color: transparent; fill: none; stroke: #D7DBDC; stroke-width: 3; cursor: pointer; outline: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.circle-media-player svg { position: relative;
}
.circle-media-player__foreground { stroke: #FF982E; transition: 350ms stroke-dashoffset; transform: rotate(-90deg); transform-origin: 50% 50%;
}
.circle-media-player__play,
.circle-media-player__pause { fill: #FF982E; stroke-width: 0;
}
.promo { position: absolute; bottom: 20px; right: 20px;
}
.promo a,
.promo a:active,
.promo a:visited { color: #FF982E;
}

React Circle Media Player - Script Codes JS Codes

"use strict";
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var _React = React;
var Component = _React.Component;
var Children = _React.Children;
var PropTypes = _React.PropTypes;
var _ReactMediaPlayer = ReactMediaPlayer;
var Media = _ReactMediaPlayer.Media;
var controls = _ReactMediaPlayer.controls;
var PlayPause = controls.PlayPause;
var CurrentTime = controls.CurrentTime;
var Progress = controls.Progress;
var SeekBar = controls.SeekBar;
var Duration = controls.Duration;
var MuteUnmute = controls.MuteUnmute;
var Volume = controls.Volume;
var Fullscreen = controls.Fullscreen;
var CircleProgress = function () { function CircleProgress(el) { _classCallCheck(this, CircleProgress); this.el = el; this.r = el.getAttribute('r'); this.c = Math.PI * (this.r * 2); this._init(); } CircleProgress.prototype._init = function _init() { this.el.style.strokeDasharray = this.c; this.setProgress(0); }; CircleProgress.prototype.setProgress = function setProgress(amount) { var dashoffset = Math.abs(amount * this.c / 100 - this.c); this.el.style.strokeDashoffset = dashoffset; }; return CircleProgress;
}();
var CirclePlayer = function (_Component) { _inherits(CirclePlayer, _Component); function CirclePlayer() { _classCallCheck(this, CirclePlayer); return _possibleConstructorReturn(this, _Component.apply(this, arguments)); } CirclePlayer.prototype.componentDidMount = function componentDidMount() { this._circle = new CircleProgress(this._svg); }; CirclePlayer.prototype.componentDidUpdate = function componentDidUpdate() { var _context = this.context; var currentTime = _context.currentTime; var duration = _context.duration; this._circle.setProgress(currentTime / duration * 100); }; CirclePlayer.prototype.renderPlay = function renderPlay() { return React.createElement("polygon", { points: "13.083,11.5 20.583,16 13.083,20.5 ", className: "circle-media-player__play" }); }; CirclePlayer.prototype.renderPause = function renderPause() { return React.createElement( "g", { className: "circle-media-player__pause" }, React.createElement("rect", { width: "3", height: "9", x: "11.5", y: "11.5" }), React.createElement("rect", { width: "3", height: "9", x: "17.5", y: "11.5" }) ); }; CirclePlayer.prototype.render = function render() { var _this2 = this; var Player = this.props.Player; var _context2 = this.context; var playPause = _context2.playPause; var isPlaying = _context2.isPlaying; return React.createElement( "button", { className: "circle-media-player", onClick: function onClick() { return playPause(); } }, Player, React.createElement( "svg", { width: "100px", height: "100px", viewBox: "0 0 32 32" }, React.createElement("circle", { cx: "16", cy: "16", r: "14.5", className: "circle-media-player__background" }), React.createElement("circle", { ref: function ref(c) { return _this2._svg = c; }, cx: "16", cy: "16", r: "14.5", className: "circle-media-player__foreground" }), isPlaying ? this.renderPause() : this.renderPlay() ) ); }; return CirclePlayer;
}(Component);
CirclePlayer.contextTypes = { isPlaying: PropTypes.bool, playPause: PropTypes.func, currentTime: PropTypes.number, duration: PropTypes.number
};
var CircleMediaPlayer = function (_Component2) { _inherits(CircleMediaPlayer, _Component2); function CircleMediaPlayer() { _classCallCheck(this, CircleMediaPlayer); return _possibleConstructorReturn(this, _Component2.apply(this, arguments)); } CircleMediaPlayer.prototype.render = function render() { return React.createElement( Media, { vendor: "audio", src: this.props.src }, function (Player) { return React.createElement(CirclePlayer, { Player: Player }); } ); }; return CircleMediaPlayer;
}(Component);
var App = function (_Component3) { _inherits(App, _Component3); function App() { _classCallCheck(this, App); return _possibleConstructorReturn(this, _Component3.apply(this, arguments)); } App.prototype.render = function render() { return React.createElement(CircleMediaPlayer, { src: "https://p.scdn.co/mp3-preview/f83458d6611ae9589420f71c447ac9d2e3047cb8" }); }; return App;
}(Component);
ReactDOM.render(React.createElement(App, null), document.getElementById('app'));
React Circle Media Player - Script Codes
React Circle Media Player - Script Codes
Home Page Home
Developer Travis Arnold
Username souporserious
Uploaded September 12, 2022
Rating 4.5
Size 5,566 Kb
Views 34,408
Do you need developer help for React Circle Media Player?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Travis Arnold (souporserious) Script Codes
Name
React Checkbox MultiSelect
Animated heading using css and javascript
React Measure Demo
Hamburglar
React Media Player Demo
Expose - a responsive jQuery modal plugin
Material CSS Switch
Slide to Unlock
React Vote Component
Offset Animation Mixin
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!