Skip to content

Commit

Permalink
added system volume settings to youtube player, mute youtube player i…
Browse files Browse the repository at this point in the history 
…f volume is 0 (yt player bug leaves it at 5%), #420, #81
  • Loading branch information
@klues
klues committed Sep 19, 2024
1 parent 2dd2228 commit 91a7081
Show file tree
Hide file tree
Showing 2 changed files with 64 additions and 51 deletions.
14 changes: 13 additions & 1 deletion src/js/model/SettingsUserLocal.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,17 @@
import { convertServiceLocal } from '../service/data/convertServiceLocal.js';
import {VoiceConfig} from "./VoiceConfig.js";
import { GridActionYoutube } from './GridActionYoutube';

let initYtState = {
lastPlayType: GridActionYoutube.playTypes.YT_PLAY_PLAYLIST,
lastData: 'https://www.youtube.com/watch?v=5ffLB4a9APc&list=PL0UXHkT03dGrIHldlEKR0ZWfNMkShuTNz',
lastVideoId: null,
lastTimes: {}, // Video ID -> Player Time
lastPlaylistIndexes: {}, // Playlist ID -> last played video index
dataApiCalls: {},
muted: false,
volume: 100
};

class SettingsUserLocal {

Expand All @@ -26,7 +38,7 @@ class SettingsUserLocal {
this.username = settings.username;
this.password = settings.password;
this.metadata = settings.metadata;
this.ytState = settings.ytState;
this.ytState = settings.ytState || JSON.parse(JSON.stringify(initYtState));
this.voiceConfig = settings.voiceConfig && Object.keys(settings.voiceConfig).length ? new VoiceConfig(settings.voiceConfig) : {};
this.originGridsetFilename = settings.originGridsetFilename;
this.isEmpty = settings.isEmpty !== undefined ? settings.isEmpty : true;
Expand Down
101 changes: 51 additions & 50 deletions src/js/service/youtubeService.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,23 +16,13 @@ let PLAYER_STATES = {
PLAYING: 1,
UNSTARTED: -1
};
let initYtState = {
lastPlayType: GridActionYoutube.playTypes.YT_PLAY_PLAYLIST,
lastData: 'https://www.youtube.com/watch?v=5ffLB4a9APc&list=PL0UXHkT03dGrIHldlEKR0ZWfNMkShuTNz',
lastVideoId: null,
lastTimes: {}, // Video ID -> Player Time
lastPlaylistIndexes: {}, // Playlist ID -> last played video index
dataApiCalls: {},
muted: false,
volume: 100
};

let DATA_API_KEY = 'AIzaSyCDOUROr3UWS8K-WJNlAG21yBTOsveWQn8';
let DATA_API_CACHE_TIMEOUT_MS = 15 * 60 * 1000; //15 minutes
let initialized = false;
let player = null;
let playerID = 'player';
let ytState = localStorageService.getUserSettings().ytState || JSON.parse(JSON.stringify(initYtState));
let userSettings = localStorageService.getUserSettings();
let waitForBuffering = false;
let navigateAction = null;
let iframe = null;
Expand Down Expand Up @@ -94,11 +84,11 @@ youtubeService.play = function (action, videoTimeParam) {
}
promise.then(() => {
if (!action.data) {
action.playType = ytState.lastPlayType;
action.data = ytState.lastData;
action.playType = userSettings.ytState.lastPlayType;
action.data = userSettings.ytState.lastData;
}
ytState.lastPlayType = action.playType;
ytState.lastData = action.data;
userSettings.ytState.lastPlayType = action.playType;
userSettings.ytState.lastData = action.data;
if (!player) {
player = new YT.Player(playerID, {
height: $('.yt-container')[0].getBoundingClientRect().height,
Expand Down Expand Up @@ -133,8 +123,8 @@ youtubeService.play = function (action, videoTimeParam) {

function onPlayerReady(event) {
iframe = $('#' + playerID)[0];
youtubeService.setVolume(ytState.volume, true);
if (ytState.muted) {
youtubeService.setVolume(userSettings.ytState.volume, true);
if (userSettings.ytState.muted) {
player.mute();
}
processAction();
Expand All @@ -151,7 +141,7 @@ youtubeService.play = function (action, videoTimeParam) {
player.playVideo();
return;
}
ytState.lastVideoId = videoId;
userSettings.ytState.lastVideoId = videoId;
player.loadVideoById(videoId, getVideoTime(videoTimeParam, videoId));
break;
case GridActionYoutube.playTypes.YT_PLAY_SEARCH:
Expand All @@ -164,11 +154,11 @@ youtubeService.play = function (action, videoTimeParam) {
videoEmbeddable: true
}).then((response) => {
let videoIds = response.result.items.map((item) => item.id.videoId).filter((id) => !!id);
player.loadPlaylist(videoIds, ytState.lastPlaylistIndexes[action.data]);
player.loadPlaylist(videoIds, userSettings.ytState.lastPlaylistIndexes[action.data]);
setTimeout(() => {
if (!player) return;
if (!youtubeService.isPlaying()) {
player.loadPlaylist(videoIds, ytState.lastPlaylistIndexes[action.data]);
player.loadPlaylist(videoIds, userSettings.ytState.lastPlaylistIndexes[action.data]);
}
}, 500);
});
Expand All @@ -179,7 +169,7 @@ youtubeService.play = function (action, videoTimeParam) {
player.loadPlaylist({
list: playlistId,
listType: 'playlist',
index: ytState.lastPlaylistIndexes[action.data]
index: userSettings.ytState.lastPlaylistIndexes[action.data]
});
break;
case GridActionYoutube.playTypes.YT_PLAY_CHANNEL:
Expand All @@ -189,12 +179,12 @@ youtubeService.play = function (action, videoTimeParam) {
player.loadPlaylist({
list: channelPlaylist,
listType: 'playlist',
index: ytState.lastPlaylistIndexes[action.data]
index: userSettings.ytState.lastPlaylistIndexes[action.data]
});
break;
case GridActionYoutube.playTypes.YT_PLAY_RELATED:
/*let currentID = youtubeService.getCurrentVideoId() || ytState.lastVideoId;
action.data = ytState.lastData = currentID; // for correctly saving playlist index
/*let currentID = youtubeService.getCurrentVideoId() || userSettings.ytState.lastVideoId;
action.data = userSettings.ytState.lastData = currentID; // for correctly saving playlist index
log.warn(currentID);
if (!currentID) {
return;
Expand All @@ -211,7 +201,7 @@ youtubeService.play = function (action, videoTimeParam) {
log.warn(response);
let videoIds = response.result.items.map(item => item.id.videoId).filter(id => !!id);
log.warn(videoIds);
player.loadPlaylist(videoIds, ytState.lastPlaylistIndexes[action.data]);
player.loadPlaylist(videoIds, userSettings.ytState.lastPlaylistIndexes[action.data]);
});*/
break;
}
Expand All @@ -220,7 +210,7 @@ youtubeService.play = function (action, videoTimeParam) {

function onBuffering() {
player.setLoop(true);
ytState.lastVideoId = youtubeService.getCurrentVideoId();
userSettings.ytState.lastVideoId = youtubeService.getCurrentVideoId();
let seekTime = getVideoTime(videoTimeParam, youtubeService.getCurrentVideoId());
if (seekTime) {
player.seekTo(seekTime, true);
Expand Down Expand Up @@ -315,29 +305,36 @@ youtubeService.volumeUp = function (diffPercentage) {
if (!player) {
return;
}
youtubeService.setVolume(Math.min(player.getVolume() + +diffPercentage, 100));
youtubeService.setVolume(Math.min(userSettings.ytState.volume + +diffPercentage, 100));
};

youtubeService.volumeDown = function (diffPercentage) {
if (!player) {
return;
}
youtubeService.setVolume(Math.max(player.getVolume() - +diffPercentage, 0));
youtubeService.setVolume(Math.max(userSettings.ytState.volume - +diffPercentage, 0));
};

youtubeService.setVolume = function (volume, initSet) {
if (player) {
player.setVolume(volume);
volume = volume !== null ? volume : userSettings.ytState.volume;
let playerVolume = volume * (userSettings.systemVolume / 100.0);
if (userSettings.systemVolumeMuted) {
playerVolume = 0;
}
player.setVolume(playerVolume);
if (player.isMuted || !userSettings.ytState.muted) {
player.unMute();
}
if (playerVolume === 0) {
player.mute();
}
if (!initSet) {
if (player.isMuted) {
player.unMute();
ytState.muted = false;
}
MainVue.setTooltip(i18nService.t('youTubeVolume', volume), {
revertOnClose: true,
timeout: 5000
});
ytState.volume = volume;
userSettings.ytState.volume = volume;
saveState();
}
}
Expand All @@ -347,7 +344,7 @@ youtubeService.volumeToggleMute = function () {
if (player) {
let isMuted = player.isMuted();
isMuted ? player.unMute() : player.mute();
ytState.muted = !isMuted;
userSettings.ytState.muted = !isMuted;
saveState();
}
};
Expand Down Expand Up @@ -451,17 +448,17 @@ function callGapiCached(fnNameString, parameters, timeout) {
}
});
if (fn) {
ytState.dataApiCalls = ytState.dataApiCalls || {};
userSettings.ytState.dataApiCalls = userSettings.ytState.dataApiCalls || {};
let key = fnNameString + JSON.stringify(parameters);
let cached = ytState.dataApiCalls[key];
let cached = userSettings.ytState.dataApiCalls[key];
if (cached && new Date().getTime() - cached.time < timeout) {
//return cache
return resolve(JSON.parse(cached.response));
} else {
//call real API
fn(parameters).then(
(response) => {
ytState.dataApiCalls[key] = {
userSettings.ytState.dataApiCalls[key] = {
time: new Date().getTime(),
response: JSON.stringify(response)
};
Expand All @@ -479,7 +476,7 @@ function callGapiCached(fnNameString, parameters, timeout) {
}

function getVideoTime(timeParam, videoId) {
return timeParam !== undefined ? timeParam : ytState.lastTimes[videoId];
return timeParam !== undefined ? timeParam : userSettings.ytState.lastTimes[videoId];
}

function getURLParam(urlString, paramName) {
Expand All @@ -495,19 +492,19 @@ function saveState() {
let videoId = youtubeService.getCurrentVideoId();
let currentIndex = player.getPlaylistIndex();
if (videoId) {
ytState.lastTimes[videoId] = player.getCurrentTime();
userSettings.ytState.lastTimes[videoId] = player.getCurrentTime();
}
if (currentIndex >= 0 && ytState.lastPlayType !== GridActionYoutube.playTypes.YT_PLAY_VIDEO) {
ytState.lastPlaylistIndexes[ytState.lastData] = currentIndex;
if (currentIndex >= 0 && userSettings.ytState.lastPlayType !== GridActionYoutube.playTypes.YT_PLAY_VIDEO) {
userSettings.ytState.lastPlaylistIndexes[userSettings.ytState.lastData] = currentIndex;
}
}
if (JSON.stringify(ytState).length > 1024 * 1024) {
if (JSON.stringify(userSettings.ytState).length > 1024 * 1024) {
// bigger than 1 MB -> reset
ytState.lastPlaylistIndexes = {};
ytState.lastTimes = {};
ytState.dataApiCalls = {};
userSettings.ytState.lastPlaylistIndexes = {};
userSettings.ytState.lastTimes = {};
userSettings.ytState.dataApiCalls = {};
}
localStorageService.saveUserSettings({ytState: ytState});
localStorageService.saveUserSettings({ ytState: userSettings.ytState });
}

function errorMessage() {
Expand Down Expand Up @@ -581,6 +578,11 @@ function init() {
return Promise.all([promiseData, promiseIframe]);
}

function updateUserSettings() {
userSettings = localStorageService.getUserSettings();
youtubeService.setVolume(null, true);
}

$(document).on(constants.EVENT_GRID_LOADED, () => {
if (navigateAction) {
youtubeService.doAction(navigateAction);
Expand All @@ -591,8 +593,7 @@ $(document).on(constants.EVENT_GRID_LOADED, () => {
$(document).on(constants.EVENT_NAVIGATE, youtubeService.destroy);
$(document).on(constants.EVENT_NAVIGATE_GRID_IN_VIEWMODE, youtubeService.destroy);

$(document).on(constants.EVENT_USER_CHANGED, () => {
ytState = localStorageService.getUserSettings().ytState || JSON.parse(JSON.stringify(initYtState));
});
$(document).on(constants.EVENT_USER_CHANGED, updateUserSettings);
$(document).on(constants.EVENT_USERSETTINGS_UPDATED, updateUserSettings);

export { youtubeService };

0 comments on commit 91a7081

Please sign in to comment.