lasers
/
FreeTube
mirror of https://github.com/FreeTubeApp/FreeTube
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Load templates with fs.readFileSync() instead of jquery.get() (#33) 

* Load templates with require() instead of jquery.get()

* Remove stray semicolons
This commit is contained in:
Larivact 2018-03-11 19:15:54 +01:00 committed by Preston
parent 82415c0d15
commit 9478917493
6 changed files with 105 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/js/channels.js
View File

@ -78,21 +78,20 @@ function goToChannel(channelId) {
let subCount = statistics['subscriberCount'].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
// Grab the channelView.html template and fill it in with the above variables.
$.get('templates/channelView.html', (template) => {
mustache.parse(template);
const rendered = mustache.render(template, {
channelName: channelName,
channelImage: channelImage,
channelBanner: channelBanner,
channelId: channelId,
subCount: subCount,
channelDescription: channelDescription,
isSubscribed: subscribeText,
});
// Render the template on to #main
$('#main').html(rendered);
stopLoadingAnimation();
const channelViewTemplate = require('./templates/channelView.html');
mustache.parse(channelViewTemplate);
const rendered = mustache.render(channelViewTemplate, {
channelName: channelName,
channelImage: channelImage,
channelBanner: channelBanner,
channelId: channelId,
subCount: subCount,
channelDescription: channelDescription,
isSubscribed: subscribeText,
});
// Render the template on to #main
$('#main').html(rendered);
stopLoadingAnimation();
// Grab the channel's latest upload. API forces a max of 50.
youtubeAPI('search', {

2
src/js/events.js
View File

@ -32,7 +32,7 @@ let showComments = function(event) {
if (comments.css('display') === 'none') {
comments.attr('loaded', 'true');
let commentsTemplate = $.get('templates/comments.html');
const commentsTemplate = require('./templates/comments.html');
commentsTemplate.done((template) => {
youtubeAPI('commentThreads', {

19
src/js/layout.js
View File

@ -46,6 +46,10 @@ let dialog = require('electron').remote.dialog; // Used for opening file browser
let toastTimeout; // Timeout for toast notifications.
let mouseTimeout; // Timeout for hiding the mouse cursor on video playback
require.extensions['.html'] = function (module, filename) {
module.exports = fs.readFileSync(filename, 'utf8');
};
// Subscriptions database file
const subDb = new Datastore({
filename: localDataStorage + '/subscriptions.db',
@ -199,15 +203,14 @@ function showAbout(){
startLoadingAnimation();
// Grab about.html to be used as a template
$.get('templates/about.html', (template) => {
mustache.parse(template);
const rendered = mustache.render(template, {
const aboutTemplate = require('./templates/about.html')
mustache.parse(aboutTemplate);
$('#main').html(
mustache.render(aboutTemplate, {
versionNumber: require('electron').remote.app.getVersion(),
});
// Render to #main and remove loading animation
$('#main').html(rendered);
stopLoadingAnimation();
});
})
);
stopLoadingAnimation();
}
/**

31
src/js/settings.js
View File

@ -56,23 +56,22 @@ function showSettings() {
});
// Grab the settings.html template to prepare for rendering
$.get('templates/settings.html', (template) => {
mustache.parse(template);
const rendered = mustache.render(template, {
isChecked: isChecked,
key: key,
});
// Render template to application
$('#main').html(rendered);
stopLoadingAnimation();
// Check / uncheck the switch depending on the user's settings.
if (currentTheme === 'light') {
document.getElementById('themeSwitch').checked = false;
} else {
document.getElementById('themeSwitch').checked = true;
}
const settingsTemplate = require('./templates/settings.html')
mustache.parse(settingsTemplate);
const rendered = mustache.render(settingsTemplate, {
isChecked: isChecked,
key: key,
});
// Render template to application
$('#main').html(rendered);
stopLoadingAnimation();
// Check / uncheck the switch depending on the user's settings.
if (currentTheme === 'light') {
document.getElementById('themeSwitch').checked = false;
} else {
document.getElementById('themeSwitch').checked = true;
}
});
}

19
src/js/subscriptions.js
View File

@ -187,17 +187,16 @@ function displaySubs() {
}).exec((err, subs) => {
subs.forEach((channel) => {
// Grab subscriptions.html to be used as a template.
$.get('templates/subscriptions.html', (template) => {
mustache.parse(template);
const rendered = mustache.render(template, {
channelIcon: channel['channelThumbnail'],
channelName: channel['channelName'],
channelId: channel['channelId'],
});
// Render template to page.
const subscriptionsHtml = $('#subscriptions').html();
$('#subscriptions').html(subscriptionsHtml + rendered);
const subsTemplate = require('./templates/subscriptions.html')
mustache.parse(subsTemplate);
const rendered = mustache.render(subsTemplate, {
channelIcon: channel['channelThumbnail'],
channelName: channel['channelName'],
channelId: channel['channelId'],
});
// Render template to page.
const subscriptionsHtml = $('#subscriptions').html();
$('#subscriptions').html(subscriptionsHtml + rendered);
});
});

113
src/js/videos.js
View File

@ -71,55 +71,55 @@ function search(nextPageToken = '') {
* @return {Void}
*/
function displayVideos(video, listType = null) {
const videoSnippet = video['snippet'];
// Grab the published date for the video and convert to a user readable state.
const dateString = new Date(videoSnippet['publishedAt']);
const publishedDate = dateFormat(dateString, "mmm dS, yyyy");
let deleteHtml = '';
let liveText = '';
let videoId = video['id']['videoId'];
const searchMenu = $('#videoListContainer').html();
// Include a remove icon in the list if the application is displaying the history list or saved videos.
if (listType === 'saved') {
videoId = video['id'];
deleteHtml = '<i onclick="removeSavedVideo(\'' + videoId + '\'); showSavedVideos();" class="videoDelete fas fa-times"></i>';
} else if (listType === 'history') {
videoId = video['id'];
deleteHtml = '<i onclick="removeFromHistory(\'' + videoId + '\'); showHistory()" class="videoDelete fas fa-times"></i>';
}
// Includes text if the video is live.
if (videoSnippet['liveBroadcastContent'] === 'live') {
liveText = 'LIVE NOW';
}
// Grab the search template for the video.
$.get('templates/videoList.html', (template) => {
const videoListTemplate = require('./templates/videoList.html')
const videoSnippet = video['snippet']
// Grab the published date for the video and convert to a user readable state.
const dateString = new Date(videoSnippet['publishedAt']);
const publishedDate = dateFormat(dateString, "mmm dS, yyyy");
let deleteHtml = '';
let liveText = '';
let videoId = video['id']['videoId'];
const searchMenu = $('#videoListContainer').html();
// Include a remove icon in the list if the application is displaying the history list or saved videos.
if (listType === 'saved') {
videoId = video['id'];
deleteHtml = '<i onclick="removeSavedVideo(\'' + videoId + '\'); showSavedVideos();" class="videoDelete fas fa-times"></i>';
} else if (listType === 'history') {
videoId = video['id'];
deleteHtml = '<i onclick="removeFromHistory(\'' + videoId + '\'); showHistory()" class="videoDelete fas fa-times"></i>';
}
// Includes text if the video is live.
if (videoSnippet['liveBroadcastContent'] === 'live') {
liveText = 'LIVE NOW';
}
// Render / Manipulate the template. Replace variables with data from the video.
mustache.parse(template);
const rendered = mustache.render(template, {
videoThumbnail: videoSnippet['thumbnails']['medium']['url'],
videoTitle: videoSnippet['title'],
channelName: videoSnippet['channelTitle'],
videoDescription: videoSnippet['description'],
publishedDate: publishedDate,
liveText: liveText,
videoId: videoId,
channelId: videoSnippet['channelId'],
deleteHtml: deleteHtml,
});
// Apply the render to the page
let nextButton = document.getElementById('getNextPage');
if (nextButton === null) {
$('#videoListContainer').append(rendered);
} else {
$(rendered).insertBefore('#getNextPage');
}
// Render / Manipulate the template. Replace variables with data from the video.
mustache.parse(videoListTemplate);
const rendered = mustache.render(videoListTemplate, {
videoThumbnail: videoSnippet['thumbnails']['medium']['url'],
videoTitle: videoSnippet['title'],
channelName: videoSnippet['channelTitle'],
videoDescription: videoSnippet['description'],
publishedDate: publishedDate,
liveText: liveText,
videoId: videoId,
channelId: videoSnippet['channelId'],
deleteHtml: deleteHtml,
});
// Apply the render to the page
let nextButton = document.getElementById('getNextPage');
if (nextButton === null) {
$('#videoListContainer').append(rendered);
} else {
$(rendered).insertBefore('#getNextPage');
}
}
/**
@ -172,18 +172,17 @@ function showVideoRecommendations(videoId) {
const dateString = snippet['publishedAt'];
const publishedDate = dateFormat(dateString, "mmm dS, yyyy");
$.get('templates/recommendations.html', (template) => {
mustache.parse(template);
const rendered = mustache.render(template, {
videoId: videoId,
videoTitle: videoTitle,
channelName: channelName,
videoThumbnail: videoThumbnail,
publishedDate: publishedDate,
});
const recommendationHtml = $('#recommendations').html();
$('#recommendations').html(recommendationHtml + rendered);
const recommTemplate = require('./templates/recommendations.html')
mustache.parse(recommTemplate);
const rendered = mustache.render(recommTemplate, {
videoId: videoId,
videoTitle: videoTitle,
channelName: channelName,
videoThumbnail: videoThumbnail,
publishedDate: publishedDate,
});
const recommendationHtml = $('#recommendations').html();
$('#recommendations').html(recommendationHtml + rendered);
});
});
}