-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #207 from iragm/tutorial-videos
add tutorial videos
- Loading branch information
Showing
8 changed files
with
284 additions
and
90 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
{% extends "base.html" %} | ||
{% block title %}Help for {{ auction }}{% endblock %} | ||
{% load static %} | ||
{% block content %} | ||
{% include 'auction_ribbon.html' %} | ||
<h5>Help and support</h5> | ||
<div> | ||
This video will walk you through the entire process of running your auction. | ||
</div> | ||
{% include 'youtube_embed.html' with videoId=auction.video_tutorial chapters=auction.video_tutorial_chapters %} | ||
<div> | ||
<h5>Still got questions?</h5> | ||
<a href="{% url 'faq' %}">The FAQ covers nearly all questions</a><p> | ||
</div> | ||
<div> | ||
<h5>Found a bug? Got a request for a new feature?</h5> | ||
<a href="https://github.com/iragm/fishauctions/issues/">Open a GitHub issue</a><br> | ||
<small><span class='text-muted'>Github is the best place to report issues and suggest features, as other uses can provide feedback.</span></small><p> | ||
</div> | ||
<div> | ||
<h5>Still need help?</h5> | ||
Contact me at {{ admin_email | urlize }}<br> | ||
<small><span class='text-muted'>Please, watch the video and read the FAQ <span class='text-warning'>before</span> emailing. This is a volunteer-run project and help is provided on a limited basis.</span></small> | ||
</div> | ||
|
||
|
||
{% endblock %} | ||
{% block extra_js %} | ||
{% endblock %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,69 @@ | ||
<div class="video-container"> | ||
<div id="player_{{videoId}}" class="embed-responsive"></div> | ||
</div> | ||
|
||
<script> | ||
var tag = document.createElement('script'); | ||
tag.src = "https://www.youtube.com/iframe_api"; | ||
var firstScriptTag = document.getElementsByTagName('script')[0]; | ||
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); | ||
|
||
var players = {}; | ||
|
||
function onYouTubeIframeAPIReady() { | ||
var videoElements = document.querySelectorAll('[id^=player_]'); | ||
videoElements.forEach(function(el) { | ||
var videoId = el.id.replace('player_', ''); | ||
players[videoId] = new YT.Player(el.id, { | ||
height: getPlayerHeight(), | ||
width: getPlayerWidth(), | ||
videoId: videoId, | ||
playerVars: { | ||
'playsinline': 1 | ||
}, | ||
}); | ||
}); | ||
} | ||
|
||
function jumpToTime(videoId, seconds) { | ||
if (players[videoId] && players[videoId].seekTo) { | ||
players[videoId].seekTo(seconds, true); | ||
players[videoId].playVideo(); | ||
} | ||
} | ||
|
||
// Helper functions to get responsive width and height | ||
function getPlayerWidth() { | ||
if (window.innerWidth >= 1024) { | ||
return 875; // Larger width for tablets and desktops | ||
} else { | ||
return 583; // Default width for smaller screens (phones) | ||
} | ||
} | ||
|
||
function getPlayerHeight() { | ||
if (window.innerWidth >= 1024) { | ||
return 531; // Corresponding height for the larger width | ||
} else { | ||
return 354; // Default height for smaller screens | ||
} | ||
} | ||
|
||
// Recalculate the player sizes on window resize | ||
window.addEventListener('resize', function() { | ||
Object.keys(players).forEach(function(videoId) { | ||
players[videoId].setSize(getPlayerWidth(), getPlayerHeight()); | ||
}); | ||
}); | ||
</script> | ||
|
||
{% if chapters %} | ||
<div> | ||
<h5>Jump to content in this video</h5> | ||
<ul> | ||
{% for seconds, chapter in chapters %} | ||
<li><a href="javascript:void(0)" onclick="jumpToTime('{{videoId}}', {{seconds}})">{{ chapter }}</a></li> | ||
{% endfor %} | ||
</ul> | ||
</div> | ||
{% endif %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.