Skip to content

Instantly share code, notes, and snippets.

Avatar
🐙

Bogdan Plieshka godban

🐙
View GitHub Profile
@godban
godban / index.js
Created Mar 7, 2020
Media Session. Control Position
View index.js
if (window.navigator.mediaSession?.setPositionState) {
window.navigator.mediaSession.setPositionState({
duration: /* duration in seconds */,
position: /* position from 0 in seconds */,
playbackRate: 1,
});
}
@godban
godban / index.js
Created Mar 7, 2020
Media Session. Next & Previous
View index.js
// to add playlist action handlers
if (/* has playlist */) {
window.navigator.mediasSession.setActionHandler('nexttrack', () => { /* your next item */ });
window.navigator.mediasSession.setActionHandler('previoustrack', () => { /* your previous item */ });
}
// to cancel playlist action handlers
window.navigator.mediasSession.setActionHandler('nexttrack', null);
window.navigator.mediasSession.setActionHandler('previoustrack', null);
@godban
godban / index.js
Last active Mar 31, 2020
Media Session. Play & pause action handlers
View index.js
// to add seek action handlers
if (/* can seek backward */) {
window.navigator.mediasSession.setActionHandler('seekbackward', () => { /* your seek backward */ });
}
if (/* can seek forward */) {
window.navigator.mediasSession.setActionHandler('seekforward', () => { /* your seek forward */ });
}
// to cancel seek action handlers
window.navigator.mediasSession.setActionHandler('seekbackward', null);
@godban
godban / index.js
Last active Mar 31, 2020
Media Session. Play & pause action handlers
View index.js
// to set action handlers
window.navigator.mediasSession.setActionHandler('play', () => { /* your play */ });
window.navigator.mediasSession.setActionHandler('pause', () => { /* your pause */ });
// to reset action handlers
window.navigator.mediasSession.setActionHandler('play', null);
window.navigator.mediasSession.setActionHandler('pause', null);
// handlers like action & pause have defaults, to cancel them you can use noop function
window.navigator.mediasSession.setActionHandler('play', () => {});
@godban
godban / index.js
Created Mar 7, 2020
Media Session. Artwork
View index.js
window.navigator.mediaSession.metadata = new window.MediaMetadata({
// ...
artwork: [
{
sizes: '128x128',
src: 'https://images.zattoo.com/9e746/128x128.jpg',
type: 'image/jpeg',
},
{
sizes: '256x256',
@godban
godban / index.js
Last active Mar 31, 2020
Media Session. Meta Information. Text fields
View index.js
window.navigator.mediaSession.metadata = new window.MediaMetadata({
title: 'FIS Ski Weltcup Abfahrt der Herren Kvitfjell',
artist: 'Das Rennen',
album: 'ORF1 HD',
});
@godban
godban / font-face.css
Created Nov 27, 2017
Font face mixin output
View font-face.css
@font-face {
.woot {
font-family: "Name";
font-weight: 400;
font-style: normal;
src: url("static/fonts/name/name_regular.woff2"), url("static/fonts/name/name_regular.woff");
}
}
@font-face {
@godban
godban / font-face.scss
Last active Nov 27, 2017
Font face mixin
View font-face.scss
$fontWeightMap: (
bold: 700,
regular: 400,
italic: 400,
light: 100,
);
@mixin fontFace($fontName, $path: 'static/fonts/') {
$font: to-lower-case($fontName);
@godban
godban / measurement-utility-functions.scss
Created Jun 28, 2017
Measurement utility functions
View measurement-utility-functions.scss
@function toEm($target, $context: $base_font-size) {
@return ($target / $context) * 1em;
}
@function toRem($target) {
@return ($target / 10) * 1rem;
}
@function toPx($target) {
@return $target + px;
@godban
godban / abstract-unitless-values-calculations.scss
Last active Jun 28, 2017
Abstract unitless values calculations
View abstract-unitless-values-calculations.scss
$border-size: 1;
$height: 16;
.box {
border: toPx($border-size) solid; // 1px
height: toRem($height - $border-size * 2); // 1rem
}
You can’t perform that action at this time.